Labels

Advanced Interactive Design Task 2: Interactive Design Planning and Prototype

Advanced Interactive Design Task 2: Interactive Design Planning and Prototype


Zhang Wan Ru 0368214

22/11/2025—16/11/2025 (Week 5-Week 8)

Advanced Interactive Design / DST60804

Bachelor of Design in Creative Media / Taylor's University

TABLE OF CONTENTS





Instructions


Requirements:
  1. Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
  2. 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.)


Lecture

Week 5: Creating shapes and motion paths in Adobe Animate.

In Week 5, Mr. Shamsul introduced us to creating shapes and motion paths in Adobe Animate. First, we drew a spider using simple shapes, then learned how to animate its legs so they moved naturally.

Fig. 1.1 Spider (22/10/2025, Week 5)

However, when drawing the spider, remember to turn on Object Drawing to ensure that the shape acts independently.
Before drawing the path, we need to set the spider as a separate graphics object. 
  • Select all parts of the spider.
  • Click Modify
  • Select Convert To Symbol
  • Select Graphic in type
Fig. 1.2 Spider (22/10/2025, Week 5)
After completing the basic animation of the spider's legs and feet, the teacher demonstrated how to create a motion path so that the spider can crawl smoothly along the drawn route.
  • Add Classic Motion Guide
  • Select Pencil Tool (Shift+Y)
Fig. 1.3 Spider Drawn route (22/10/2025, Week 5)
If you want the spider to walk vertically along the drawn route, add an Orient To Path.
Fig. 1.4 Process (22/10/2025, Week 5)
This exercise helped me gain a deeper understanding of how traditional tweening and motion guides work together to control the direction and rhythm of animation. Through this process, I learned how to synchronize the character’s movement with the path’s direction, creating animations that feel more natural, smooth, and dynamic.

Week 6: How to create basic animations using layers and keyframes

This week, Mr. Shamsul introduced us to new animation techniques in Adobe Animate, focusing on how to create basic animations using layers and keyframes. He demonstrated how to use timeline controls and tweening to make text or objects appear gradually.

Before we officially began the main exercises, Mr. Shamsul had us independently create a short animation counting down from 10 to 0 to familiarize ourselves with Adobe Animate. This exercise required us to use Shape Tween to create a smooth shape transition for the numbers as the countdown progressed.

Fig. 1.5 Process (29/10/2025, Week 6)
Fig. 1.6 Exhibition  (29/10/2025, Week 6)
In the practical session, we practiced creating an animation primarily featuring text. We started with a blue background, then added two separate text elements—"Enter" and "Welcome"—and used keyframes and tweening effects to make them appear gradually.

Fig. 1.7 Process   (29/10/2025, Week 6)

Each piece of text was placed on a separate layer, and its appearance was scheduled using different keyframes. The text "Enter" appeared on the stage first, then transitioned to "Welcome" through fade-in, fade-out, or transition effects.

This exercise gave me a more intuitive understanding of how to use timeline synchronization, tweening, and frame duration to control the rhythm of the visuals and also helped me master the basic methods for creating simple interface animations or intro animations.

Fig. 1.8 Exhibition  (29/10/2025, Week 6)

Task 2

Descriptions:

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 are can build their animation or user reference animation to demonstrate the intended idea.

Requirements:

1. Walkthrough Video presenting the plan and showing the animation examples and/or references.

2. 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.)

Week 5:

Based on the wireframe from the prior week, begin planning the interactive design elements and functionality of the "Longjing Tea" website.


Week 6:

I started designing the interactive content and elements of my webpage, making simple adjustments to the content based on my wireframe.

I began working on the interactive design planning and prototyping of the wireframe completed in week five, determining the photos, content, and layout for each section. First, I worked on the loading page, adding a tea wreath image and a dark green background, along with a photo of a tea plantation with reduced transparency, and setting up basic loading animation effects. Next, I completed the visual layout of the home page, replacing the tea plantation photo with a higher-resolution version and adding the main title, descriptive text, and decorative images to create a more unified visual style across the entire page.

After completing the homepage, I continued with the intro page, adding an introduction to Longjing tea and accompanying it with suitable tea garden and tea leaf images, creating a left-right column structure using wireframes. Next, I worked on the six timeline pages. In this section, I selected corresponding background images or illustrations for each era, organized the narrative content for each era, maintained a consistent layout, and added a static version with circular navigation buttons.

Then I moved on to the How to Make section. I first completed the intro page, adding a title, explanatory text, and button. Then, I created four cards following the steps: picking, withering, cooling, and roasting. I selected corresponding images, added brief descriptions, and ensured consistency in structure and style for each card using wireframes.

For the Tasting Interaction Zone, I created four interactive cards: Color, Aroma, Taste, and Shape. I also completed the layout of the image and text areas, ensuring a consistent visual system across all four pages. Finally, I created the Gallery page, which included photos of the tea garden, the tea-making process, and teaware. I also established the basic framework for the carousel area based on the plan and adjusted the overall color scheme to keep the page consistent with the other parts.

Fig. 2.1 Process (29/10/2025, Week 6)

Week 7:

After completing the layout, I started setting up the motion. At first, I started looking for interactive animations that matched my themes and ideas.

Loading page:
I created a tea-loading motion based on the reference. And the overall animation format, as well as the home page animation effects, including the zoom-in effect on the photos. The characters slide gently from the top, and the tea leaves in the center shift color from big to small.
Reference: https://www.pinterest.com/pin/1147151336360640477/
 
Fig. 2.2 Loading Page Process (05/11/2025, Week 7)

Home Page:
The photos gently zoom from 95% to 100% and shift upward with a soft 0.8-second fade-out. The tea garden background uses a parallel motion effect to create depth and immersion. The navigation menu features subtle hover micro-interactions for a more responsive feel. For buttons, the arrow slides to the right on hover, adding a light sense of direction and movement.

Fig. 2.3 Home Page Process (05/11/2025, Week 7)
Info Page:
The automatic image carousel features an infinite horizontal slide with seamless transitions and soft fade-in animations. It reflects the slow, steady rhythm of tea brewing while providing visual storytelling without overwhelming the user. Even when the user isn’t scrolling, the carousel keeps the page engaging and alive. 
Reference: https://www.pinterest.com/pin/3096293490978666/
Fig. 2.4 Info Page Process (05/11/2025, Week 7)

Timeline Page:
This interaction uses Figma’s Smart Animate with custom spring motion, creating smooth horizontal sliding transitions. When an overlay opens, it stops at the centered position and gently moves in for a natural feel, with a 2000 ms duration. The background darkens slightly to 25% for focus, and the card includes a soft drop shadow to add depth. The close button also scales lightly on tap, providing subtle tactile feedback.

Fig. 2.5 Timeline Page Process (05/11/2025, Week 7)

How to Make a Page:
This design uses a step-by-step guided flow with detail-on-demand, allowing users to tap an image to reveal more information through a modal card overlay. Micro-interactions provide clear feedback throughout the journey. Motion is driven by Smart Animate with custom spring settings: buttons scale and bounce lightly on click, step cards slide and fade in, and detail cards appear with a scale-up, fade-in, and spring effect. The animations use ease-in-out or spring easings to keep the experience soft, natural, and engaging.

Reference :https://www.pinterest.com/pin/1147151336360751927/

Fig. 2.6 How to Make Page Process (05/11/2025, Week 7)

Tasting page:
When hovered, the 3D playing card flips on the card body. When the user clicks the Get Start button, the page transitions smoothly, moving from the current card into the Tasting Color page with a fluid motion.
Fig. 2.7 Tasting Page Process (05/11/2025, Week 7)

Figma Prototype


Week 8

Presentation Slide


Presentation Video

Fig. 2.7 Pre Video  (12/11/2025, Week 8)




Feedback 

Week 5:
No feedback.

Week 6:
No feedback.

Week 7:
No feedback.

Week 8：
No feedback.

Reflection 

While working on Task 2: Interactive Design Planning and Prototype recently, I found myself gradually entering a state where "visuals + interaction + narrative + motion effects" work together. Initially, I thought it was simply about making the page look good and writing elegant copy, but later, especially after starting to create motion animations, I truly realized that what makes a page "feel" is often not its visuals, but its rhythm. This is precisely one of the principles mentioned in design principles.

In the Tasting Interaction section, I designed the slight floating of the hovering teacup, the soft card animation that unfolds after clicking, and more subtle motion effects like the aroma of tea gently rising and the tea soup gradually brightening. At first, I thought creating these motion effects was simply "adding a little animation to make the page more lively," but while adjusting the easing and duration, I suddenly realized that motion effects are actually very emotional: too fast and it becomes commercial; too slow and it feels sluggish. So I started repeatedly experimenting with that "just right" speed, as if adjusting the breathing rhythm of the entire page.

This experience made me truly understand for the first time that motion isn't about being flashy but about subtly immersing the user. Before, when doing UI design, I only thought about "whether the layout is correct," "whether the colors match," and "whether the elements are neat enough." But after creating motion, I started asking myself, "How should this element enter the frame?" Does it have a sense of breathing when it stops? Will the speed at which it leaves the frame disrupt the user's rhythm? This kind of thinking about "time" and "emotion" was something I had never seriously considered before. When faced with motion I didn't know how to create, I would watch tutorial videos on YouTube.

Looking back at the entire project, I feel that visuals gave the content its "appearance," the copywriting gave it its "sound," and motion gave it its "life." Together, the three transformed the prototype from just a display page into a small space where people could truly slow down and smell the aroma of tea. During the process of creating the motion effects, I also began to enjoy the feeling of "slowly awakening" the visuals. Originally, I just wanted to implement the functionality, but in the end, it felt more like completing an exercise in rhythm, atmosphere, and detail.

Overall, this production process gave me a deeper understanding of interactive design: experiences aren't built up but rather "evoked." It also reinforced my understanding of design principles.


Labels:

Comments

Post a Comment

Popular Posts