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

2024.10.22 - 2024.11.06 Week 5 - Week 7

Teh Ming En/0364908

Advanced Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University

Task 2: Interaction Design Planning and Prototype

---

Instructions

---

Task 2: Interaction Design Planning and Prototype

In task 2, we are required to start planning our website's interactive design elements and features. In the plan, we need to design a website that includes layout visuals but also animation examples or references. We are allowed to build our own animation or use reference animation to demonstrate the intended idea.

Requirements:

• Record a video presenting the plan and showing the animation examples or references.
• Include the resource involved in the creation of the plan (i.e.: Figma link, Miro link, etc).

Art Direction

I decided on the art direction before starting to design the prototype. I have created these backgrounds and part of the icons using Adobe Illustrator. The fonts were chosen from the Google Font.

Prototype:

Fig 1.1 Process of Prototype

I decided to create the prototype first. I chose to design in Figma based on my wireframes that completed in Task 1. Based on my moodboard and wireframes, I created a prototype that was more specific. When designing the prototype, it was interesting because I could design it smoothly in Figma.

Fig 1.2 Designing Loading Page

Fig 1.3 Wireframe of Loading Page

When designing the loading page, I found that the design in the wireframe was too general, thus, I re-designed the loading page to make it more suitable for my theme.

Fig 1.4 Searching Animations References

After completing the prototype, I started searching for references for animations. I downloaded the references from Pinterest.

Fig 1.5 Flow Chart in Canva

The flow chart was completed during Task 1 so I just included it in the presentation slide.

Final Submissions

Fig 2.1 Final Interaction Design Planning and Prototype 

Fig 2.2 Presentation Video

Final Prototype Link:

https://www.figma.com/design/D9r7kEZkuTbk6VO8qvRwQs/Advanced-Interactive?node-id=0-1&t=V5WS5JpPseNQPllA-1

Final Flow Chart Link:

https://www.canva.com/design/DAGVUbAOv2s/LdMd_c8MrDeAYrNr5qa9Yw/edit?utm_content=DAGVUbAOv2s&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Feedback

Week 6:

After having a consultation with Mr. Shamsul, my overall layout is ok but I have some points to modify for my prototype. I need to change the style of the icons to make them more suitable for my design, improve the visibility of the text, and modify the background color to make the icons more visible.

Reflections

After completing Task 2, I have gained insights into the complexities of user interaction and the importance of thoughtful design decisions. This task challenged me to not only consider the visual appeal but also to prioritize user experience and functionality for the website. I have learned the importance of balancing design with usability, to ensure that each interactive element serves a clear purpose. I also realized that a small adjustment in design can affect the overall flow and usability of the interface.