Advanced Interactive Design / Task 2: Interaction Design Planning And Prototype

23.09.2024 - 20.10.2024 (Week 1 - Week 4)

Gunn Joey / 0366122

Advanced Interactive Design / Bachelor of Design (Hans) in Creative Media

Task 2: Interaction Design Planning and Prototype

---

TABLE OF CONTENTS

1. Module Information Booklet

2. Lectures

3. Task 2

4. Reflection

---

MODULE INFORMATION BOOKLET

---

LECTURES

---

Task 2: Interaction Design Planning and Prototype

Instructions:

• Students are required to work on their visual design and start planning their 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.

• Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements of contents:

• 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.)

A. Design Planning

Moodboard

I searched for Dyson Hair Care moodboard in Pinterest and find Dyson products for inspiration. I used the classic Hair Care products colours as my colour scheme and theme for my wireframe. I want something simple and clean, minimalist web design so I won't use too much elements in drafting my prototype.

Website Elements

All these elements are from Dyson Hair Care's advertisement. I use only classic colours products for my website to match with my minimalist theme. 

Sample of animation

Mr. Asrizal taught us hover animation and clicking button in previous lessons. I searched for more hover animation as my inspiration for animation in Pinterest.

1.https://pin.it/3V8wH6IXW

2. https://pin.it/2EMeDAjlR

3. https://pin.it/2Xd0iPcBo

4. https://pin.it/3fhvejNI0

B. Wireframe and Prototype

Wireframe link: https://www.figma.com/design/6jaM0FLcpfwQq3hUu3XK4H/Untitled?node-id=0-1&t=o8uaK049ENlYCiB8-1

Prototype Link: https://www.figma.com/proto/6jaM0FLcpfwQq3hUu3XK4H/Untitled?node-id=1-3&p=f&t=o8uaK049ENlYCiB8-0&scaling=scale-down&content-scaling=fixed&page-id=0%3A1

C. Task 2 Presentation

Presentation Slides:

Presentation Video:

---

REFLECTION

This task gave me a deeper understanding of interactive design, from brainstorming ideas to creating prototypes. I started by gathering inspiration from Pinterest and researching animations which has taught by Mr. Shamsul in his lessons, which helped shape my approach. Using Figma for wireframes allowed me to organize my design and visualize the user experience before building the prototype. One key lesson from this project was the value of research and planning. The inspiration I found helped to make sure my design decisions were purposeful. Wireframing was crucial in ensuring the user journey was user-friendly. I also learned that testing and refining prototypes is essential for creating designs that are both engaging and easy to use.

This task emphasized the importance of research, planning, and iteration in interactive design. The wireframing process helped solidify my ideas and understand the user flow. Research not only inspired me but also showed areas for improvement in my design. I also learned that building a prototype is an ongoing process of refinement, where everything must work together to create a seamless experience for the user. This task has given me a clearer understanding of the complexities of interactive design and the need to stay flexible throughout the process.