Advanced Interactive Design - Task 2
20/05/2025 - 10/06/2025 (Week 5 - Week 8)
WEEK 6
Chong Wee Han 0368863
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 2 - Interaction Design Planning & Prototype
JUMPLINK
LECTURES
WEEK 5
 |
| Figure 1.2 |
 |
| Figure 1.3 |
WEEK 7
 |
| Figure 1.4 |
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1nU-vNiCyCZStvR-zJIBMCMACyVCnYy-H/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 2 - INTERACTION DESIGN PLANNING & PROTOTYPE
In Task 2, we are required to work on visual design and start planning the 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.
I started creating my prototype on Figma and experimented with several layout options for different sections. Mr. Shamsul pointed out that the visual style of the website lacked consistency, so I focused on refining those areas to create a more cohesive and unified design.
Initial Prototype
 |
| Figure 2.1 |
Home Page
The memory orbs were inspired by the visual reference on the right, using rounded shapes and color gradients to create a magical, emotional vibe. Each memory orb represents a memory created by one of the emotion characters.
 |
| Figure 2.2 |
Adjustment on About Page
After receiving feedback from Mr. Shamsul, I revised the About page. Initially, I planned to use flip cards, but I’ve now changed the design to display the content on the front with animation. Mr. Shamsul also reminded me that if I were to use numbered flip cards, they should follow a clear and logical sequence when revealed.
 |
| Figure 2.3 |
 |
| Figure 2.4 |
Adjustment on the Emotions Page
Mr. Shamsul recommended that I make the button smaller and ensure the style is consistent with the other pages. I explored a few background and layout options and ultimately finalized it with the last version.
 |
| Figure 2.5 |
 |
| Figure 2.6 |
Adjustment on the Reflect Page
To enhance the website’s visual consistency, I illustrated the headquarters in Illustrator, replacing the previous background that did not align well with the visual style of the earlier pages.
 |
| Figure 2.7 |
Final Prototype
 |
| Figure 2.8 |
SUBMISSION - TASK 2
Walk Through Presentation
Submission Links
Canva Presentation
Figma Prototype
Miro Flowchart
FEEDBACK
Week 6
No feedback given. (Online Class)
Week 7
The layout is ok, but the style needs to be more consistent. If you're using numbers on the flip cards, that means they should follow a clear sequence. Also, the button appears too large—it could be resized to align better with the card's layout.
Week 8
Independent Learning Week
REFLECTION
Working on Task 2 of Inside Emotions, which focused on planning and prototyping, was a valuable experience that allowed me to better understand the importance of visual consistency and user-centered design. Through the process, I observed how small design elements, like button sizing and layout structure, can significantly affect the overall coherence of a website. Feedback from Mr. Shamsul helped me realize the importance of aligning design styles in website design, leading me to make thoughtful adjustments to better match the visual tone. Overall, this task strengthened my prototyping skills and highlighted the need for careful planning in creating an engaging and cohesive user experience. I realized that good design comes from testing different possibilities and refining them based on feedback. This task reminded me of how interactive design is not just about visuals, but also about structure, function, and constant improvement.
Comments
Post a Comment