ADVANCED INTERACTIVE DESIGN: TASK 2_INTERACTION DESIGN PLANNING AND PROTOTYPE

November 09, 2025

ADVANCED INTERACTIVE DESIGN: TASK 2_INTERACTION DESIGN PLANNING AND PROTOTYPE

|| 22/04/25-13/05/25
|| Sun Jia Yi / 0370449
|| Advanced interactive Design / Bachelor of Design (Hons) in Creative Media
|| Task 2: Interaction Design Planning and Prototype

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Feedback

4. Reflection

LECTURES

Week 5:

Edit Symbol (Ctrl + E)

Modify the symbol in the library.

The graphics can have a keyframe added to them.

Using a mask
Two layers: a mask and clipped content.
To animate the size of the mask, use Shape Tween.

Masking exercise

Week 6 & 7

A clip from a movie

A certain amount of frames on the main timeline are not necessary for a movie clip to function.

The primary timeline of the movie clip contains a nested timeline.

Make a Button

Using graphics to do animation for button.

Adding a new Action layer will halt the animation. Wizard > Add > Stop > This Timeline > Next > Using this frame

stop

Click activity can be added by naming the button's instance, selecting Action layer > Add using Wizard > Navigate to Play > This Timeline > Change Label Name > Frame Label. Using a mouse click

Go to frame label and Play

Edit in Place to edit the button.

edit button

This is the code for the navigation using the button.

Actions codes

INSTRUCTIONS

This is the Module Information Booklet for this Module:

Task 2: Interactive Design Planning and Prototype

As part of this assignment, we had to work on their visual design and begin organising the interactive features and design elements of their website. When it comes to interactive design with animations, unlike standard static websites, the strategy should include both the animation example or reference and the layout graphics. To illustrate the intended concept, students can create their own animation or a user-reference animation.

Requirements: Walkthrough video outlining the strategy and providing references and/or samples of the animation.
Links to any resources used in the plan's creation can be found in online posts that serve as your reflective studies in your e-portfolio. (For example, a connection to Miro, Figma, etc.)

Review on task 1

I completed the wireframes for assignment 1 earlier, and Mr. Shamsul said that while it was already clean, I could make some improvements to the design page to make it stand out.

Preview from Task 1 Wireframe Ideation Week 04

First, I reviewed the user flowchart and decided to retain the original one, as my mentor noted that it was clean and clear.

User Flow Chart Week 04

I've now developed the page's concept and structure. Finding and finalising the assets I would utilise is the next stage.

Finding and Creating Assets

I chose a photographic technique to evoke nostalgia, mild romantic feelings, and Eastern aesthetics, as stated in Task One. I mostly looked through pictures on Pexels and Pinterest for sourcing materials. A summary of everything I collected is shown below.

Image Assets for Website week 07

Refining Prototype Design

Home Page

Purpose: Set the emotional tone—nostalgic, elegant, cinematic.

Layout:

Title (top center):

“In the Mood for Love”

(Large serif font, Codystar font)

Subtitle (below title):

“Director's Name”

Background:

Classic scenes from the film with subtle motion (slow fade-in).

Navigation Bar (Top Right):

Interactive Features:

Hover

“Enter Experience” Button (Scrolls or fades to About page).

Home Pages Frames Week 07

About Page

About (General Description)
In the Mood for Love is a 2000 romantic drama directed by Wong Kar-wai. It follows two neighbors, Mr. Chow and Mrs. Chan, who discover that their spouses are unfaithful. As they spend time together, they form a deep emotional bond—but remain bound by social rules and personal restraint.

Unlike conventional love stories, the film portrays desire and intimacy through what is left unsaid—quiet glances, small gestures, and moments of silence.

Background:

Classic scenes from the film, accompanied by subtle animations.

Navigation Bar (Top Right):

Interactive Features:

Hover

“Right Arrow” Button (fades to character page).

About Pages Frames Week 07

Characters Pages

Main Characters

Mr. Chow (Tony Leung)
A journalist, often quiet and reflective. He represents longing and isolation, unable to escape the weight of duty.
Mrs. Chan (Maggie Cheung)
A secretary, graceful and elegant. She embodies beauty and restraint, trapped between desire and social expectations.

Interactive Features:

Click “Right Arrow” Button (fades to scenes page).

Characters Pages Frames Week 07

Scenes Pages

Key Scenes

Corridor Encounters Narrow hallways and passing silhouettes symbolize restraint and distance. (Interactive idea: user hovers → dim light follows characters in corridor stills). Shared Umbrella A simple gesture that carries deep emotion, showing how intimacy hides in daily rituals. Alleyway Farewell A quiet goodbye in shadowed streets—love that cannot be spoken. Temple Scene Mr. Chow whispers his secret into the temple wall, symbolizing memory sealed forever.

Interactive Features:

Click “Slides Circle” Button (fades to Qipao page).

Scenes Pages Frames Week 07

Qipao Pages

Mrs. Chan’s qipaos (cheongsams) are visual highlights of the film. Each dress represents mood, time, and emotional change.

Examples:

Red Floral Qipao → Corridor encounter scene, highlighting her elegance.
Green Qipao → Rainy night conversation, reflecting melancholy.
White Patterned Qipao → Final temple sequence, symbolizing closure.

(Interactive idea: click on each qipao → open a still image + short scene description.)

Qipao Pages Frames Week 07

Quotes Pages

Famous Quotes from the Film

“That era has passed. Nothing that belonged to it exists anymore.”
“Feelings can creep up just like that.”
“I didn’t think I’d care. Now I find I can’t forget.”

(Interactive idea: quotes appear as floating text → click “Slides Circle” Button to change scene image ).

Quotes Pages Frames Week 07

Promotion Pages

Immersive Campaign

Show upcoming re-releases or film festival screenings.

Film production period, genre, runtime
Film short description and the director

Options to:

Buy Tickets
(Interactive idea: Click red line to see the description of the film and click "buy Tickets" to go to the next page"credits" ).

Promotion Pages Frames Week 07

Credits Pages

Film Credits

Director: Wong Kar-wai
Cinematography: Christopher Doyle, Mark Lee Ping-bing
Main Cast:

Tony Leung (Mr. Chow)
Maggie Cheung (Mrs. Chan)
Rebecca Pan
Kelly Lai Chen
Siu Ping- Lan

Editing By: William Chang Suk-ping

Credits Pages Frames Week 07

FINAL OUTCOMES TASK 2: INTERACTION DESIGN PLANNING AND PROTOTYPE

Canva Link: HERE

Final Interactive Design Planning and Prototype PPT 08

Final User Flow Chart: HERE

Final User Flow Chart Week 08

Final Wireframe Working File: HERE

Wireframe View in Figma Week 08

Final Prototype: HERE

Prototype Screen in Figma Week 08

Final Presentation Video: HERE

Here is the link to view the video: HERE

FEEDBACK

Week 9

- Should Add more icon and signs to guided the audience to follow and go though the website that improve the website interactive effect.

- Overall the prototype looks nice already, you can start to move into adobe animate.

REFLECTIONS

This project was enjoyable and challenging to work on. I learnt a lot, particularly when creating the wireframe. I also learnt new things by continuing to experiment with other layout styles. The difficult thing is that I have to make sure that the wireframe I created has the potential to be developed in Adobe Animate when we eventually need to build this.

This subject taught me that before moving on to wireframes, we must have a solid concept and framework. An essential component of it is the user flow chart, which should be completed before moving on to the content prototype. Confusion during the design phase can be caused by an inadequate foundation.

Search This Blog

SUN JIA YI (0370449)