Advanced Interactive Design - Project 02: Interaction Design Planning and Prototype
ADVANCED INTERACTIVE DESIGN DST 60804
WEEK 05 - WEEK 09 (22.10.2024 - 12.11.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Advanced Interactive Design - Project 02: Interaction Design Planning and Prototype
3. Feedback
4. Reflection
1. INSTRUCTION
Module Information Booklet (MIB)
Module Information Booklet (21/10/2024)
To-Do List:
-
Students are required to work on their visual design and start
planning their website's interactive design elements and
features.
-
Unlike traditional static websites, interactive design with
animations requires a plan that includes not only the layout
visuals but also the animation examples or references.
-
Students can create their own animation or user-reference
animation to showcase the intended concept.
Submission requirements:
-
Walkthrough Video presenting the plan and showing the
animation examples and/or references.
-
E-portfolio should include online posts reflecting on your
studies, with links to any resources used in creating your
plan, such as Figma or Miro.
2. TASK 02: INTERACTION DESIGN PLANNING AND PROTOTYPE
Module Information Booklet (21/10/2024)
To-Do List:
- Students are required to work on their visual design and start planning their website's interactive design elements and features.
- Unlike traditional static websites, interactive design with animations requires a plan that includes not only the layout visuals but also the animation examples or references.
- Students can create their own animation or user-reference animation to showcase the intended concept.
Submission requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- E-portfolio should include online posts reflecting on your studies, with links to any resources used in creating your plan, such as Figma or Miro.
Figure 2.1 Concept
Figure 2.2 Moodboard
After finnish Task 01, I have made a few adjustment and changes, including
adding navigation bar on top of the website and others such as
spinning wheel in the character page to let users have more interaction with
the website.
After that, I then start my low-fi prototype in Figma.
Click HERE to access to file in Figma.
After fiinnish the prototype, I then start to record the presentation
video to explain how the prototypes works for my future planning.
2.1 Wireframe and Prototype
Before starting the low-fi prototype in Figma, I first start to draw a wireframe sketch.
Figure 2.3 Wireframe Sketch
After that, I then start my low-fi prototype in Figma.
Click HERE to access to file in Figma.
2.2 Presentation Video
After fiinnish the prototype, I then start to record the presentation
video to explain how the prototypes works for my future planning.
Video 01 Prototype Presentation Video
Click
HERE
to watch recorded presentation video.
3. FEEDBACK
No feedback given from Mr Shamsul.
4. REFLECTION
Experience
While conducting Task 02, it was a huge challenge for me, as I have no
idea on how to complete this task. Designing animations and
interactive features made the experience thrilling and allowed me to
gain a greater understanding of how to improve user involment in
websites.
Observation
I came to understand the importance of creating interactions that are
both intuitive and meaningful. Minor elements, such as seamless
transitions or hover effects, can significantly enhance the user
experience. Looking at animations from various designs assisted in
honing my concepts and establishing a benchmark for quality.
Findings
Through ths task, I have learned the importance of merging design and
precticality to develop captivating, user-centric websites.
