ADVANCED INTERACTIVE DESIGN - TASK 02

23/05/2025-13/06/2025 (Week 05-08)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design | DST60804 | Sec 02

Task 2 | Interactive Design Planning & Prototype

---

 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. EXERCISES

3. TASKS

4. REFLECTION

---

 INSTRUCTIONS 

---

 EXERCISES 

WEEK 5 - BOUNCING BALL ANIMATION

In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the Oval Tool and turn it into a symbol. After that, we used the Pencil Tool to draw a curved path showing how the ball would bounce.

Next, we added keyframes at the starting and ending points of the path. Then, we applied a motion tween so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the speed and motion using easing.

This exercise helped me understand how keyframes and motion paths work, and it was a fun way to start learning animation basics.

Fig 1.0 Week 5 Exercise 01 Process

WEEK 5 -  BOUNCING BALL ANIMATION OUTCOMES

Fig 1.2 Week 5 Exercise 01 Outcome

WEEK 5 - CAR ANIMATION ON ROAD PATH

For the second exercise, we animated a car moving along a road using Adobe Animate. The steps were quite similar to the bouncing ball animation. First, we drew the car and converted it into a symbol. Then, we used the Pencil Tool to draw a winding path to show the car’s movement in different directions.

After that, we added keyframes at the start and end of the path, and applied a motion tween. This time, we needed to tick the “Orient to Path” option in the tween settings. This made the car automatically rotate and follow the direction of the path as it moved.

This exercise helped me understand how to make an object not just move, but also turn naturally along a path, which is useful for creating more dynamic and realistic animations.

Fig 1.3 Week 5 Exercise 02 Process

WEEK 5 -  CAR ANIMATION ON ROAD PATH OUTCOMES

Fig 1.4 Week 5 Exercise 02 Outcome

WEEK 5 - MASKING ANIMATION EFFECT

In our third exercise, we learned how to use masking effects in Adobe Animate. The final outcome was a picture of a living room with a TV at the center. At the beginning of the animation, only the TV was visible. As the animation played, the rest of the living room slowly appeared by enlarging the mask.

To create this effect, we placed the living room image on one layer. Then, we added a mask layer above it, starting with a small shape (like a circle) over the TV. We created a motion tween on the mask layer to gradually enlarge the shape, revealing more of the image underneath.

This exercise taught me how masking can be used to control visibility and create smooth reveal effects in animation.

Fig 1.5 Week 5 Exercise 03 Process

WEEK 5 - MASKING ANIMATION EFFECT OUTCOME

Fig 1.6 Week 5 Exercise 03 Outcome

WEEK 6 - BASIC INTERACTIVE BUTTON ANIMATION

In Week 6, we learned how to create a basic interactive button animation in Adobe Animate. At the start, there was a button placed at the center of the screen. When the mouse hovered over the button, it would change color to indicate interaction. After the user clicked the button, the animation would switch to another frame (or layer) showing a new screen.

On this new screen, there were two menu buttons positioned at the top left corner, showing how we can build simple navigation between scenes.

This exercise helped me understand how to add interactivity using mouse events and how to link frames to create a more dynamic user experience.

Fig 1.7 Week 6 Exercise Process

Fig 1.8 Week 6 Exercise Process

WEEK 6 - BASIC INTERACTIVE BUTTON ANIMATION OUTCOME

Fig 1.9 Week 6 Exercise Outcome

---

 TASKS 

TASK 2 - INTERACTION DESIGN PLANNING & PROTOTYPE

 Instructions 

Description
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

• Walkthrough Video presenting the plan and showing the animation examples and/or references.
• Online posts in our E-portfolio as our reflective studies with links to any resource involved in the creating of the
  plan. (i.e.: Figma link, Miro link, etc.)

 Wireframes 

I began by creating the wireframes in Figma, focusing on a clean and intuitive layout to guide users through the content smoothly.

The structure of my design revolves around six main sections:

1.Home Page

• This is the introduction page, giving users a brief overview of the Zhongshan Building.

2.Then vs Now

• This section presents a timeline that visually shows the transformation of the building from its historical roots to its current role as a hub for art, design, and independent businesses. It highlights how the space has evolved over time.

3.Stores

• Here, I showcase the various independent stores currently operating in the building. It includes cafes, bookstores, galleries, and creative studios, offering users a glimpse into what they can explore during their visit.

4.Photo Spots

• This section is for social media lovers! It features some of the most iconic and Instagrammable photo spotswithin the building — perfect for those who enjoy visual storytelling.

5.Events

• An interactive section that highlights upcoming events, such as exhibitions, pop-up markets, or workshops happening in Zhongshan. It's designed to keep visitors updated and engaged.

6.Event Recap

• Finally, this section provides a look back at past events with photos and summaries. It gives users an idea of the building's vibrant community and the types of experiences it offers.

 Presentation Slides 

ADVANCED INTERACTIVE DESIGN TASK 2 by suetyee chan

---

 REFLECTION 

Experience

Working on this assignment gave me the opportunity to explore the Zhongshan Building in depth, both as a physical space and as a creative hub in Kuala Lumpur. Creating the wireframes in Figma helped me plan out the user flow and content structure logically. I enjoyed the process of designing each section with a clear purpose in mind — from storytelling in the “Then vs Now” timeline to promoting current happenings in the “Events” and “Event Recap” pages. This task also allowed me to combine research, content organization, and interface design into a cohesive project.

Observation

As I worked through the wireframes, I noticed how important content hierarchy and navigation clarity are for user experience. Each section needed to be informative but not overwhelming, so I had to carefully decide what content to highlight and how to present it visually. I also observed that interactive elements like timelines and event listings could help keep users engaged. Consistency in layout and structure across all six pages played a key role in ensuring the overall design felt unified.

Findings

Through this task, I found that storytelling can be effectively integrated into a digital space through thoughtful design. By dividing the content into six key sections — from historical transformation to present-day events — I was able to create a narrative flow that is both informative and engaging. I also realized how essential it is to design with the user in mind, ensuring that the layout guides them naturally through the information. This project deepened my understanding of wireframing as a foundation for building user-centered digital experiences.