Interactive Design - Final Project - Creating a Single-Page Website

22/7/2024 -28/7/2024 (Week14)

Qian Guoyi / 0369462

Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project  - Creating a Single-Page Website 

INSTRUCTIONS

Project Overview:

In this web design project, you will create a one-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to demonstrate your passion for your chosen topic.

Project Requirements:

Artist's Choice: Choose your favorite topic as the subject of your website. Make sure you have a genuine interest in the topic, as this will help you create a more engaging website. Determine the goal of your website to ensure that the content of the website is clear.

Content:

Our content should contain at least 5 sections explaining the topic of interest. It should be engaging and relevant to the topic and should also include a CTA button that reflects the content.

LECTURES

Final Task

Design concept:

I want to design a website about bagels, and I thought of making a website for buying bagels. I designed different ways of buying, and innovative combinations of bagels (single bagel sweet, salty, bagel yogurt bowl combination, two flavors of bagels, bagel full combination). I want to design a webpage style that looks warm, so I chose bagels with warm colors as a whole, which happens to match the feeling that bagels bring to people.

Sketch：I first designed a basic sketch of the Bagel website using Adobe Illustrator

Fig1.1 Sketch

Then, I created the final rendering of the web page on Figma.

Fig1.2 Figma

About.html

Bill.html

Home.html

Menu.html

Math.html

Link:

https://66a89d9da2cb3f0aea8d16ea--sprightly-marzipan-3eccb2.netlify.app/home

https://66a89d9da2cb3f0aea8d16ea--sprightly-marzipan-3eccb2.netlify.app/menu

https://66a89d9da2cb3f0aea8d16ea--sprightly-marzipan-3eccb2.netlify.app/match

https://66a89d9da2cb3f0aea8d16ea--sprightly-marzipan-3eccb2.netlify.app/about

https://66a89d9da2cb3f0aea8d16ea--sprightly-marzipan-3eccb2.netlify.app/bill

https://app.netlify.com/sites/sprightly-marzipan-3eccb2/deploys/66a89d9da2cb3f0aea8d16ea

Reflection

In this interaction design project, our task was to create a single webpage, and I chose to design a website centered around bagels. Throughout the design process, I learned a great deal about the importance of user experience, visual design, and functionality.

First, I realized that the core of user experience design is understanding the needs and behaviors of users. While designing the bagel webpage, I needed to consider the motivations of users visiting the site. Are they looking to learn about different types of bagels, find purchase options, or seek recipes? These questions helped me define the core content and layout of the webpage.

Secondly, visual design is crucial for both the appeal and usability of a webpage. I selected a warm and inviting color scheme to evoke a craving for delicious bagels in users. At the same time, I ensured the page remained clear and simple, avoiding excessive information and visual clutter to facilitate easy navigation.

In terms of functional design, I learned that interactive elements need to be intuitive and easy to understand. For example, navigation menus should be clear, and buttons and links should be easy to click. For the bagel webpage, I incorporated a convenient search feature, allowing users to quickly find the types of bagels or recipes they are interested in.

Finally, I understood that constant testing and iteration are essential in the design process. Through user testing, I received valuable feedback that helped me optimize the layout and functionality of the page, ultimately enhancing the overall user experience.

Overall, this project not only improved my design skills but also deepened my understanding of the importance and complexity of interaction design. The process of creating the bagel webpage provided me with practical design experience and made me more aware of the critical role user experience plays in modern web design.