Interactive Design GCD60904/Final Project

23/06/2024 - 28/07/2024 

Week 11 - Week 14

Wang Yifan (0368363) / Bachelor Of Design In Creative Media

Interactive Design / Final Project | / Design, Exploration and Application


TABLE OF CONTENTS

  1. Instructions
  2. Lectures
  3. Project
  4. Final Submission
  5. Reflections


INSTRUCTION 



LECTURE 

Week 11

Lecture slides:




PROJECT

Job requirement

Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

Content:
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Main page: Home
Page 2:Pricing
Page 3: Company
Page 4: Blog
Page 5:Support


Website references
Website references

Website references

I browsed some websites to find concept references and understand what the website of the pet shelter I wanted should look like. I found that the colors used in these websites are usually colorful and lively. The content on the homepage is usually an introduction to the content of the website, with various explore more read more buttons connecting to other pages, etc.


Website planning
The website I want to design is about pet shelters. In addition to viewing pet shelter content, you can also get veterinary information, including information about pet types, and see the healthy diet of pets. Everything about pets is here.

Website Content 

I use figma to design the appearance of my specific web page, and what I imagine is a long-screen web page that can view different information in the web page by clicking on different section names


Webpages prototype design




Page Code
In the 12th week, I started writing web pages on DW. In the process, I changed some pictures in figma because I wanted the pictures on the page to be clearer.

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)

DW process,Week 12 (8/7/2024)


Because I still have some professional questions and don't understand them very well, I searched the video websites on the Internet to find relevant content that I don't understand, and tried to make my own web page. Obviously, this assignment is difficult for me, so I also asked my friends who are learning to build computers for help, asking them to help me how to successfully complete this web page. I tried to feel the complexity of this assignment. It is very complicated, so I spent a long time to understand and figure it out and finally complete it.

Search Process



CSS Code:

HTML Code:

JS Code:


FINAL SUBMISSION



FEEDBACK
Figma designs should be created using images to ensure integrity. Mr. Shamsul suggested that adding footers to the sketches is very important, emphasizing their significance in the overall design process.


REFLECTION
This was a significant challenge for me. I struggled to translate my prototype design into actual code and turn it into functional web pages. Properly aligning elements, ensuring consistent spacing, and maintaining the intended layout across various screen sizes were all quite complex for me, and it took a long time to get everything right.

Due to these difficulties, I sought help from my brother, who works as a software engineer. He recommended using online resources for coding, provided me with several resource websites, and showed me how to effectively apply them in my code. From these online resources, I found various tutorials, code snippets, and CSS frameworks that helped me address specific issues I encountered. I realized that seeking help and learning from others is a normal part of the coding process, and it's also crucial to make effective use of available resources.






评论

此博客中的热门博文

Advanced Animation - Exercises

Motion Graphics and Compositing - Project 1: Technical and Motion Graphics Sensibilities