Advanced Interactive Design - Task 1
21/09/2025 - 20/10/2025(Week 1 - Week 14 )
ZHOU BOYING / 0369087
Bachelor of Design (Honours) in Creative Media / Taylor's University
Advanced Interactive Design / Task 1
LIST
1. Lectures
2. Instructions
3.Task 1
4. Feedback
5. Reflections
6. Further Reading
Lectures
week 1
In the first week, Mr. Hamimi introduced the module and explained that our final project will be a thematic interactive website. The project is divided into three parts: proposal, prototype with a walkthrough video, and the final website. He emphasized the importance of applying the five usability principles—Simplicity, Consistency, Visibility, Feedback, and Error Prevention—and showed examples from past students’ works. He reminded us not to be over-ambitious due to time and technical limits, and encouraged us to start thinking of 4–5 possible topics for the proposal. By next week, we must prepare the topic list and install Adobe Animate for practice.
week 2
In Week 2, Mr. Hamimi said my first ideas were too broad and asked me to narrow the topic. He gave examples like Italian food, desserts, and coffee to guide me in linking culture with storytelling. When I proposed “Musang King Durian,” he liked the choice for its strong cultural value and unique identity, but reminded me not to design it like a game. Instead, he suggested focusing on knowledge presentation with a timeline for history, a map for production regions, and cards for nutrition values. From this, I learned that interactive design should be both engaging and informative, balancing fun with cultural and educational meaning.
week 3
In Week 3, Mr. Shamsul introduced Adobe Animate and explained its main features, tools, and workspace panels.He began by demonstrating how to draw and color a ball, showing us how to use different shades to add shadow and depth to the object.
After that, he guided us to create new layers and practice drawing and coloring a boat illustration.
Reflection
These activities helped me understand the basics of light, shape, and layering in motion graphics.Later, during the discussion about my Task 1 proposal — “Durian’s Journey”, Mr. Hamimi advised me to develop clearer wireframes with visual navigation instead of blank layouts.He suggested preparing at least three layout variations to explore different design directions and strengthen my concept.This week taught me that good design begins with visual planning — sketching ideas, testing layouts, and refining structure before moving into animation or interactivity.
week 4
Part 1: Bouncing Line Practice (In-class Exercise)
In this week’s Advanced Interactive Design class, we first practiced creating a simple bouncing line animation in Adobe Animate. This exercise helped us understand the principle of timing and spacing — how movement speed changes at different moments. Hamimi explained that even a straight line can look dynamic if the easing (slow-in and slow-out) is done correctly. The purpose was to train our sense of motion rhythm before moving into object animation. He encouraged us to preview frequently and observe how gravity and momentum affect motion.
Part 2: Bouncing Ball Practice (In-class Exercise)
After that, we moved on to the bouncing ball exercise, one of the most important animation fundamentals. Hamimi emphasized the concept of “Squash and Stretch” — the ball should squash when it hits the ground and stretch when it bounces up. This principle makes motion appear more natural and lively. He also reminded us to use guide paths to plan the curve of the ball’s movement, and to make sure each bounce becomes slightly lower, simulating energy loss. Some students’ animations were too stiff, so he demonstrated how to adjust the keyframes and spacing to improve realism.
Part 3: Shape Tween Practice (After-class Exercise)
For homework, Hamimi asked us to practice shape tweening by transforming a square into a circle, then into a triangle, and finally back to a square. This task was designed to help us understand morphing transitions and how to control shape deformation across keyframes. He reminded us to insert enough in-between frames to ensure smooth transitions, and to pay attention to pacing — not every part should move at the same speed. This exercise also trained our patience and precision in creating frame-by-frame adjustments.
While working on the shape tween exercise in Adobe Animate, I also learned several useful technical tips:
How to draw a triangle:
Use the Line Tool (N) to draw three sides.
Turn on Object Drawing (J) and select Round Cap to create smoother corners.
Adjust the Stroke Size to get the right thickness before finishing the shape.How to fill the triangle:
At first, the triangle couldn’t be filled because the lines were drawn under Object Drawing (J), which treats each stroke as a separate object.
To fix this: Select all lines → Right-click → Break Apart (Ctrl + B), then use the Paint Bucket Tool (K) to add colour.
These steps helped me understand how Object Drawing mode separates vector lines and how to properly merge and fill shapes for animation.
Reflection
This week’s class combined both technical learning and self-reflection. During the animation practice, Mr. Hamimi gave detailed feedback on our bouncing line and bouncing ball exercises. He reminded us to pay attention to rhythm, timing, and natural movement — for example, squashing the ball when it hits the ground and stretching it when it bounces up. He encouraged us to observe real-life motion and refine our keyframes to make the animation look more lively and expressive.
In the second part of the class, he talked about learning attitude and self-expectation. He told us that learning design takes time, and we shouldn’t pressure ourselves to be perfect. Mistakes are part of progress, and the most important thing is to stay calm, complete one task at a time, and keep improving. His words made me realize that being a designer is not only about skills but also about mindset — focusing on growth instead of perfection.
From this lesson, I realized that I should manage my expectations better and not be afraid of small mistakes. I need to practice more patiently, observe real movement carefully, and apply what I see into my animation work. At the same time, I should not give myself too much pressure or chase perfection excessively. I believe that by keeping a positive mindset, I can gradually grow into a more confident and expressive designer.
Instructions
Task 1
Assignment Overview — Thematic Interactive Website Proposal
Objective
Students are required to develop a proposal for a thematic interactive website designed for brand engagement.
The website should focus on a specific theme or concept and integrate interactive elements to engage users.
These elements may include videos, animations, interactive graphics, clickable components, or other forms of dynamic media that encourage exploration and participation.
Core Concept
A thematic interactive website aims to deliver an immersive and engaging user experience through interactive exploration rather than passive viewing.
The theme can vary across different contexts such as education, culture, promotion, or product launches.
The goal is to keep users interested, emotionally involved, and connected with the thematic concept or brand message.
Possible Topics
Students may choose one of the following directions or propose their own topic (subject to lecturer approval):
A specific brand product launch or special campaign (e.g., Nike new shoe, Sephora beauty compact)
Movie promotion website
Game release or launch promotion
Gallery or museum exhibition site
Band or artist’s latest music release
Submission Requirements
A complete UI/UX proposal document must be submitted, which includes:
Concept Development – theme, objectives, target audience, brand identity, interaction ideas.
Wireframes – layout and page structure to visualize navigation flow.
Mood Board – visual tone, color palette, typography, and atmosphere references.
Flow Chart – showing user journey and interaction pathways.
Reflective Documentation
All creative and design processes (conceptualization, sketching, prototyping, etc.) must be:
Documented clearly in your proposal, and
Posted on your E-Portfolio as part of your reflective studies to demonstrate your design thinking and process development.
After presenting my list of interactive website ideas to Mr. Hamimi, I received valuable feedback that helped me refine my direction. He encouraged me to choose one concept that is both culturally meaningful and visually engaging, while allowing space for creative interaction.
After considering all options, I finally confirmed Idea 9.1 — Durian’s Adventure: Musang King Edition as my final thematic interactive website concept. This idea combines my interest in Malaysian culture with interactive storytelling. Instead of a game-style adventure, the project will evolve into an educational and cultural exploration website that allows users to learn about the history, origin, and value of the Musang King durian through an interactive timeline, map, and animated transitions.
This direction not only reflects Malaysia’s national identity but also connects to the theme of brand engagement through storytelling. I believe it will offer a balance between informative content and playful design, fulfilling both the academic and creative goals of the module.
Task 1 Proposal Summary — “Durian’s Journey: Discover Musang King”
1. Concept Overview
Durian’s Journey is an interactive thematic website that explores Malaysia’s most iconic fruit — the Musang Kingdurian.
The project transforms the durian’s cultural, historical, and ecological story into an immersive digital journey, combining storytelling, interactivity, and education.
The aim is to reframe the durian not just as a tropical delicacy, but as a symbol of Malaysian identity and pride.
Through dynamic visuals, animation, and interactive storytelling, users can explore the durian’s origin, heritage, and global recognition in an engaging way.
2. Objectives
To educate users about the origin, history, and global value of Musang King.
To promote Malaysian culture through interactive and visual storytelling.
To enhance engagement through motion, animation, and micro-interactions.
To create an emotional connection between cultural heritage and digital experience.
To educate users about the origin, history, and global value of Musang King.
To promote Malaysian culture through interactive and visual storytelling.
To enhance engagement through motion, animation, and micro-interactions.
To create an emotional connection between cultural heritage and digital experience.
3. Structure and Design Process
The website is structured as a linear exploration with five main sections that represent the durian’s journey — from growth to global fame:
- Homepage & Intro Animation: A floating durian animation introduces the concept and transitions smoothly into the main site.
- Story Slides: Horizontal storytelling reveals Musang King’s origin, cultural meaning, and rise as Malaysia’s “King of Fruits.”
- Interactive Map: Users explore Malaysia’s durian-producing regions through hover-based highlights and pop-up facts.
- Timeline & Nutrition Cards: A scrollable timeline traces historical milestones, followed by interactive flip cards showcasing nutritional value.
- Feedback Page: Displays real user impressions through animated floating review cards that react to hover and click.
The design process involves:
Concept Development: Crafting a narrative-driven digital experience.
Moodboard: Warm tropical colors — gold, olive green, and beige — representing freshness and nature.
Wireframes: Linear layouts ensuring smooth storytelling flow.
Flowchart / User Journey Map: Visualizing user movement through the website from curiosity to reflection.
4. Interaction Design Direction
The interaction direction focuses on clarity, rhythm, and motion feedback, following Hamimi’s principles of usability and interaction design:
Scroll and swipe navigation for seamless exploration.
Animated transitions between key sections.
Hover-based effects for maps and data reveals.
Flip cards and subtle parallax movement for engagement.
Gentle motion feedback to sustain attention and guide focus.
Each interaction contributes to a balanced rhythm — turning information into an experience rather than simple reading.
5. Reflection
Durian’s Journey: Discover Musang King represents a refined transformation of the initial Durian’s Adventure idea — shifting from a gamified concept to a knowledge-based interactive storytelling website.
It maintains strong cultural grounding in Malaysian identity while embracing a design language centered on clarity and immersion.
The project aligns with the module’s objectives by merging theme + interactivity + narrative, creating a meaningful, educational, and visually expressive website.
Ultimately, it presents the Musang King durian as more than a fruit — as a living cultural story that users can explore, learn, and connect with.
Durian’s Adventure — Musang King Edition
Feedback
Week 1
Specific feedback:
Mr. Hamimi reminded us to prepare a list of 4–5 possible topics for the thematic interactive website project. He also asked us to install Adobe Animate before the next class and pay attention to applying the five usability principles in our design
General feedback:
Overall, the class introduced the module clearly and gave us a good idea of the final project. The lecturer encouraged us not to be too ambitious because of time and technical limitations, but also motivated us to think creatively when choosing topics.
Week 2
Specific feedback:
In Week 2, Mr. Hamimi pointed out that my initial ideas were too broad and suggested that I narrow down the theme to something more specific. He gave examples such as Italian food, desserts, mooncakes, and coffee to inspire me to think about combining culture with storytelling. Later, when I proposed “Musang King Durian” as my website theme, he expressed that he really liked this choice because it carries strong local cultural value and unique visual identity. However, he emphasized that the website should not look like a “game adventure,” but rather be shaped as a knowledge-focused interactive site. He suggested using a timeline to show durian’s history, a map to display its main production regions, and information cards to explain its nutrition values, making the project more academic and educational.
General feedback:
From this discussion, I realized that interactive design should not only be fun but also informative and educational. Musang King durian as a theme provides both cultural depth and local uniqueness, which makes it very suitable for a showcase website. Moving forward, I need to focus on presenting its history, origins, and cultural value, while applying light interactions such as timelines, maps, and cards to create a project that is both engaging and meaningful.
Week 3
Specific feedback:
Mr. Hamimi reviewed my Task 1 proposal – “Durian’s Journey: Discover Musang King” and advised me to make my wireframes more detailed and visually clear.He reminded me not to submit blank layouts, but to include navigation, visuals, and rough sketches to show the direction of my design.He also suggested preparing three different layout variations to compare and choose the best structure for the final website.
General feedback:
In class, Mr. Shamsul introduced Adobe Animate and demonstrated basic drawing and coloring techniques.We practiced creating a ball and a boat illustration, focusing on light, shading, and layering.The exercises helped me understand how visual depth and composition can enhance motion design.Overall, this week highlighted the importance of planning visuals early and combining creative ideas with technical execution.
Week 4
Specific feedback:
In Week 4, Mr. Hamimi taught us the fundamentals of motion through three animation practices: the bouncing line, the bouncing ball, and shape tweening. He reminded us that even simple objects can show life and rhythm if the timing and spacing are handled well. During class, he emphasized the “Squash and Stretch” principle to make the bouncing ball look more realistic and asked us to adjust keyframes carefully to simulate gravity. For the after-class task, he guided us to create a smooth shape tween from square → circle → triangle → square, stressing the importance of in-between frames and even pacing.
General feedback:
This week’s lessons strengthened my understanding of animation basics and helped me develop a better sense of motion timing. The bouncing ball exercise made me realize how small adjustments in easing and spacing can completely change the mood of an animation. Through the shape tween task, I also learned several practical tips about Object Drawing Mode and how to merge and fill vector shapes properly. Overall, I gained more confidence in using Adobe Animate and began to appreciate how technical precision supports creative movement design.
Reflections
Experience
During the first few weeks, I have developed both conceptual and technical design skills through continuous practice and feedback. Under Mr. Hamimi’s guidance, I learned how to refine my idea from a playful durian adventure into a structured and educational interactive website, Durian’s Journey: Discover Musang King. This process taught me the importance of clear storytelling, usability, and visual flow in interactive design. Meanwhile, through Mr. Shamsul’s Adobe Animate lessons, I practiced drawing and shading simple shapes like a ball and a boat, which helped me understand how light, layering, and motion create visual depth in animation.
Observation
Throughout this learning process, I noticed that design development is highly iterative and depends on visual exploration. Mr. Hamimi reminded us that a blank layout cannot express ideas, so wireframes and rough sketches are essential tools for building structure and navigation. This helped me realize that effective planning must start visually before moving into digital execution. The combination of concept building and technical learning allowed me to see how creative ideas evolve step by step into complete and meaningful outcomes.
Findings
From this experience, I learned that successful design requires a balance between creativity and functionality. Every sketch, layout, and animation serves a purpose — to communicate, guide, or engage the user. I discovered that usability principles such as clarity, feedback, and consistency are not limitations but valuable frameworks that support storytelling and enhance user experience. By applying these principles, I was able to make my project more structured, readable, and culturally expressive.
Conclusion
Looking back, these weeks built a strong foundation for my project and my understanding of interactive storytelling. The guidance from my lecturers and hands-on practice helped me grow from initial exploration to confident execution. I learned that good design is not only about making things visually appealing but also about communicating ideas with purpose and precision. Moving forward, I aim to refine Durian’s Journey: Discover Musang King with smoother navigation, stronger narrative flow, and a deeper sense of Malaysian identity.
Comments
Post a Comment