ADVANCED INTERACTIVE DESIGN // TASK 2

31/08/23-0/0/23(Week 1 - Week 14 )

Chai HongHong/0354211/Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design // Task 2




Task 2

Reflective Studies


Proposal

I want to make a website about hair color products and will design the look of the product myself, since it will be a product I create myself, the branding and logo of the product will be named after me.
This website is relevant to my filter. I used the four hair colors that the filter uses: purple, pink, blue, and green. The name of the filter I made is "See Your Diverse Beauty", and I will quote this sentence as my product slogan.


Logo

This logo uses the HONG in my name. I designed the strokes of these letters to be curved, like flowing hair.

Fig.1.1.Logo 1


Products

The hair dye comes in two capacities, 250ml and 300ml. Customers with short hair can choose 250ml, and customers with medium and long hair can choose 300ml.

Fig.1.2. 250ml

Fig.1.3. 300ml


Wireframes

Wireframes consist of three pages: Homepage, Display, and Products. 

The homepage consists of four modules, using models with four hair colors to display the main product effects. Place a product logo in the middle of the interface, and below the logo is the product slogan. This allows users to remember my website at first glance.

Fig.1.4. Homepage


The Display page is used to display the color and dosage of hair dye. The model picture will be displayed in the background, and users can learn about the dyeing effect of a certain color of hair dye on the model's hair on this page. Click the left and right arrows to switch to the display page of different hair colors.

Fig.1.5. Display page

The Products page will display products and product packaging. At the bottom there is the company’s QR code and how to contact the company.

Fig.1.6. Products page

Mood-Board

Fig.1.7. Mood-Board


Flow Chart

This flowchart and wire-chart show the basic operation of this website. And click on any interface option in the navigation bar to directly reach that interface.

Fig.1.8. Flow Chart


Fig.1.9. Wire Chart

Prototype Design

The main product of my website is hair dye, and the main colors are green, blue, purple and pink. These are very eye-catching colors. The logo is named after me and my product slogan is "See your Diverse Beauty." I encourage people to try bold colors without worrying about what others think. 

Fig.1.10. Overview

The web page is composed of three main pages, the "home" page, the "Display" page and the "Product" page. What is displayed now is the home page. When the web page is opened, the text and buttons of the home page will appear.
The home page consists of four model pages. Each model's hair color corresponds to the hair dye of that hair color, which can well demonstrate the product effect to users and attract users.
When the mouse hovers over a certain page, the color of the page will light up.

Fig.1.10. “Home” page

Enter the display page and the hair dye will slide in from the left. Clicking the arrow will switch to the display page of hair dyes of other colors, and the animation effect is the same.
Click the hair dye or click the Product button on the navigation bar to enter the product page.

Fig.1.11. “Display” page

Fig.1.12. “Display” page 1

Fig.1.13. “Display” page 2

Fig.1.14. “Display” page 3

Fig.1.15. “Display” page 4

Click the hair dye or click the Product button on the navigation bar to enter the product page.

I used gradient colors for this page, consisting of green, blue, purple and pink. There will be a small animation here to show the appearance of the product and its packaging. Scroll down to learn about hair dye dosages and colors and to purchase hair dye. Users can choose the dosage of hair dye according to their hair length. The bottom bar will have company information and a small logo.

Fig.1.16. “Product” page 

Fig.1.17. “Product” page 

There is a QR code for the filter in the bottom bar. You can try hair color here.

Fig.1.18. “Product” page 





Figma Link：



Presentation Link：




REFLECTION

Experience: This is probably the most challenging task I have ever tackled, building a website does require a lot of time and patience. But I love that this assignment gave us the freedom to decide on our design style. I referenced many dynamic websites while exploring, hoping to get some inspiration. I don’t have many products, so I plan to make three main pages to integrate the style I want to express into the website. I encountered a lot of frustration when making motion effects in figma. It was difficult to achieve the effect I wanted, but I kept searching for tutorials on the Internet to learn, and asked my classmates for help, and finally made the effect I wanted. I feel very accomplished.

Observation: My topic was about hair dye, and when I started making the website I realized I should use a bolder color. Regarding the model pictures that need to be used on the website, my choice is also very unique. What my website wants to express is that I hope people can try different styles and see another kind of beauty in themselves.

Findings: I found that when making a website, as long as you first determine the style and the pages required for the website, and then find materials based on these, you can easily make a prototype that you are satisfied with. When doing interactive special effects in figma, I found that as long as I determine the special effects I want, and then search for relevant tutorials to learn more and perform more operations, I can learn it. The process was a bit hard, but I still learned a lot.








                                            

Comments

Post a Comment

Popular posts from this blog

Games Development

Image
23.04.2025 - 27.07.2025 (Week1-Week15) ZengYu/035538​​​​8 Chai HongHong/0354211 Bachelor of Design (Hons) in Creative Media Game Development INSTRUCTIONS Our Google Drive Submission Link： https://drive.google.com/drive/folders/1J4MP9nAnGTgJlgFNlyGJDq4o1plwtkaO?usp=drive_link Task 1 -  Game Design Document   In this task, we are required to design a 2D side-scrolling/platformer game and create a Game Design Document (GDD). The GDD should outline: Game concept and mechanics Character design and abilities Level and world design Art style and visuals Weekly Progress Final Proposal Submission Task 1 Feedback We named the game "Run, Eggsy!", which shaped the core concept and gameplay framework of the game eggman's adventure. Our goal is to create a humorous, trap-filled platformer inspired by games like Level Devil, with a unique twist on the typical puzzle adventure formula. While the project is still in progress, here are some key observations and conclusions so far: Clear ch...
Read more

Advanced Typography / Final Compilation & Reflection

Image
30.08.2023-29.11.2023（Week1-Week14） Chai HongHong/0354211/Creative Media Design. Advanced Typography /  Final Compilation & Reflection                                 INSTRUCTION Task 1:  Typographic Systems & Type & Play Task 2:  Key Artwork and Collateral Task 3:   Type Exploration and Application SUBMISSIONS Task 1 Exercise 1/Typographic Systems Fig.1.1. Axial Final attempt. Fig.1.2. Radial final attempt Fig.1.3. Modular final attempt Fig.1.4. Random final attempt Fig.1.5. Dilatational attempt Fig.1.6. Transitional final attempt Fig.1.7. Grid final attempt Fig.1.8. Bilateral final attempt PDF.1.1. Task 1/Exercise 1/Typographic Systems PDF.1.2. Task 1/Exercise 1/Typographic Systems/Grid Exercise 2/ Type & Play Fig.1.8. Final A Fig.1.9. Final L Fig.1.10. Final M Fig.1.11. Final U PDF.1.3. Task 1/Exercise 2 Fig.1.12. Final Poster  PD...
Read more

Application Design I / Final Task

Image
16.06.2023 - 24.07.2023 / Week 12 - Week 16 Chai HongHong / 0354211 Application Design I / Bachelor of Design (Hons) in Creative Media Final Task /  High-Fidelity Prototype INSTRUCTION  Final Task:  High-Fidelity Prototype Original Design In this task, a high-fidelity prototype is to be created for the mobile application. This prototype showcases the final visual design, interactions, and functionality of your application. In this interface, touch the option box will turn green. Fig.1.1. If you log in with a Google account, you can directly enter the main page, and the main page will pop up your personal information. The user profile picture and user nickname will be the same as the default Google account information. Fig.1.2 The search history and recommended music types will be displayed on the Search interface. Search for songs in the record, and it will be played directly after clicking. Recommended music genres are updated and changed frequently. The circle will boun...
Read more