Advanced Interactive Design | Task 2
20/5/2025 - 10/6/2025 / Week 5 - Week 8
Kerly Ooi / 0358726
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 2 | Interactive Design Planning & Prototype
TUTORIAL / PRACTICAL
WEEK 5
Modify - convert to symbol - make sure its graphic
Graphic (colour in different keyframe etc) & Stage (change looping etc)
Masking
background (add frame & lock) / shape - two layers
For shape - 20 keyframe - shape tweet
right click layer 2 - choose mask
WEEK 6 (Online) - Button exercise
Ease out → Ease In (Quart effect)
- Movie Clip & Graphic (The differences)
right click on the layer (new layer(actions)) - add wizard button → stop → this timeline →NEXT → with this frame → finish and add
WEEK 7
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:
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.)
TASKS
I started working on my F1 website prototype in Figma by trying out different ways to arrange the sections. Mr. Shamsul pointed out during a consultation session that the visual style on the sites wasn't consistent, especially when it came to the design language that should be used for an F1-themed website. He said that things like rounded or round edges didn't fit with the exciting, high-performance, and futuristic look that is usually associated with Formula 1.
I took his advice and made the design better by replacing softer forms with sharper, more angular ones. This helped the F1 brand look more sleek and energetic. This made the whole site more unified, visually interesting, and thematically suitable.
Below are the main improvements I made to the website to make it look better and to improve the overall design and user experience of the website.
Home
Drivers
Circuits
The Power Duo
Contact us page
SUBMISSION
Walk Through Presentation
Links
Canva Presentation:
Figma Wireframe:
Flowchart:
FEEDBACK
Week 6
Exercises :
Specific feedback : No feedback given (Online class)
Week 7
Exercises :
Specific feedback : The loading page appears clean, and the overall layouts works. However, for the Team/Drivers page, ensure there are hover effects, for exp, displaying the drivers’ names and numbers when users hover over them to enhance interactivity and user engagement.
Week 8
Exercises :
Specific feedback : Independent Learning Week. No class. Complete Project 2.
REFLECTIONS
Working on the this task was a highly immersive and creative experience, requiring a careful balance between visual aesthetics and functional animation planning. Throughout the process, I experimented with various interactive features, ensuring they were well-integrated into the overall layout and enhanced the user journey. I observed that thoughtful animations can significantly improve the user experience by making the interface feel more dynamic and intuitive, but they must be used with care, overuse or misalignment can cause distractions and restrict usability. This made it clear that achieving the right balance between engagement and clarity was a key part of the design challenge. From this, I learned that the relationship between visuals and animation is vital for user interaction, and during the research phase, I explored best practices and references that emphasised the importance of using motion cues to guide users meaningfully throughout the site.
Comments
Post a Comment