Advanced Interactive Design / Task 1: Thematic Interactive Website Proposal
00.00.2024 - 00.10.2024 (Week 1 - Week4)
Gunn Joey / 0366122
Advanced Interactive Design / Bachelor of Design (Hans) in Creative Media
Task 1: Thematic Interactive Website Proposal
TABLE OF CONTENTS
1. Module Information Booklet
2. Lectures
3. Task 1
4. Reflection
MODULE INFORMATION BOOKLET
LECTURES
TASK 1
Thematic Interactive Website Proposal
In Project 1, we are required to create a proposal for our Thematic Interactive Website project. We are required to work on our visual design and start planning our website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. We can build their animation or user-reference animation to demonstrate the intended idea.
Things to Include in the Proposal / Requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
Brainstorming
Lately, I saw Dyson's advertisement on Instagram story few times. So, I explored Dyson and found hair care products designed with innovative technology to protect hair health while delivering efficiency and style. These include the Supersonic, Airwrap, Airstrait, and Corrale. They address diverse hair needs with luxury and precision, making them ideal for modern consumers seeking advanced, sustainable, and effective hair solutions.
Figure 1.1: Dyson Advertisement in Instagram
Figure 1.2: Main Hair Care Products
Dyson existing website link: https://www.dyson.my/products/hair-care
Figure 1.3: Dyson Existing Website
Progress
Colour Palette:
I decided to use this color scheme to match the sleek and modern feel of Dyson hair care products. The Prussian blue shows trust and quality, while the dark red adds energy and confidence. The copper metallic reflects Dyson’s unique design, and the metallic grey highlights the advanced technology. Ivory keeps it clean and fresh, and black ties it all together with a classic look. This palette perfectly represents Dyson’s mix of style and innovation.
Figure 2.1: Colour Palette
Font:
Logo: Rethink Sans
Figure 2.2: Logo Font
Title of Products: Racing Sans One
Figure 2.3: Title of Products Font
Body Text: Questrial
Figure 2.4: Body Text Font
Wireframe:
Figure 2.5: Loading Page Wireframe
Figure 2.6: Home Page Wireframe
Figure 2.7: Product Page Wireframe
Figure 2.8: Test Page Wireframe
User Flow:
Figure 2.9: User Flow
Final Proposal:
Figma Link: https://www.figma.com/design/2e4nVehR1bOcgkNybQRACy/Untitled?node-id=0-1&t=myj8n53cxFH7wzBl-1
REFLECTION
Creating the thematic interactive website proposal was an exciting experience that pushed me to go beyond static designs and focus on animations and interactive features to enhance user engagement. This project helped me understand how combining visuals with movement creates a more dynamic and appealing user experience.
Dyson’s sleek branding inspired me to incorporate smooth transitions and modern design elements, reflecting a clean and high-tech style. Balancing aesthetics with usability was a key challenge, as I had to ensure the website remained engaging without overwhelming users. This process taught me the importance of thoughtful design and consistency in creating a functional and visually appealing interface.
Overall, this experience helped me improve my design skills and understand the role of interactivity in enhancing usability. It was a rewarding process that gave me new insights into building engaging websites.
Comments
Post a Comment