ADVANCED INTERACTIVE DESIGN - TASK 01

25/04/2025-16/05/2025 (Week 01-04)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design | DST60804 | Sec 02

Task 1 | Thematic Interactive Website Proposal

---

 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. EXERCISES

3. TASKS

4. REFLECTION

---

 INSTRUCTIONS 

---

 EXERCISES 

WEEK 3 - PROCESS

This week, we were introduced to the fundamentals of animation. We learned how to use keyframes, frames, blank keyframes, as well as techniques like shape tweening and applying ease in/ease out for smoother transitions.

During the tutorial, our first exercise was to create a smooth transition between different shapes. We began with a square, which then transformed into a triangle, followed by a circle, and finally returned to a square. To ensure each transformation was fluid, we inserted shape tweens between the keyframes of each shape.

Fig 1.0 Week 3 Exercise Process

Fig 1.1 Week 3 Exercise Process

Fig 1.2 Week 3 Exercise Process

Fig 1.3 Week 3 Exercise Process

Once we completed the shape transition exercise, we moved on to our second task — animating a countdown from 10 to 0. We used the same animation techniques as before. For this exercise, we had to Modify > Break Apart the numbers before applying shape tweens, allowing the program to recognize each number as a shape for smooth transitioning.
This session helped us understand the basics of motion in animation and how to create seamless visual transformations using simple tools.

Fig 1.4 Week 3 Exercise Process

Fig 1.5 Week 3 Exercise Process

WEEK 3 - OUTCOMES

Fig 1.6 Week 3 Exercise 01

Fig 1.7 Week 3 Exercise 02

---

 TASKS 

TASK 1 - THEMATIC INTERACTIVE WEBSITE PROPOSAL

 Instructions 

Description
Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.

Requirements
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:
 
1.     A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder, 
2.     Movie promotion
3.     Game release promotion.
4.     Gallery/Museum exhibit launch
5.     Band/Artist latest release.

Or anything else you have in mind (subject to the module coordinator’s approval)

Submission
1.     Completed UI/UX proposal document.
2.     All processes (concept, wireframes, mood board, flow chart)

 Topic Selection (3 Ideas) 

In Week 3, I presented three potential topics to Mr. Shamsul for my thematic interactive website design project:

1. An introduction to rhythmic gymnastics

2. An introduction to the Zhongshan Building, Kuala Lumpur

3. Promoting the brand Jellycat

After discussing the ideas with Mr. Shamsul, we both agreed that the second topic — the Zhongshan Building — was the most compelling and unique. It offered rich potential for interactive storytelling and cultural exploration. As a result, I decided to move forward with this topic for my project.

Fig 1.8 Potential Topics

 Final Proposal 

After finalizing my topic — the Zhongshan Building in Kuala Lumpur — I began working on my final proposal. This proposal outlines the concept, objectives, target audience, and design direction for the interactive website. 

Below are my final proposal slides: 

Fig 1.9 "Inside Zhongshan" Interactive Website Proposal

---

 REFLECTION 

Experience

The tutorial provided valuable hands-on experience with basic animation techniques. I practiced using keyframes, blank keyframes, shape tweens, and applying ease in and ease out to create smooth transitions. The exercises — transforming a square into a triangle, then into a circle and back to a square, as well as animating a countdown from 10 to 0 — helped me understand the importance of timing and how transitions can bring static designs to life.

Observation

While working on the animations, I observed how even small adjustments, like easing effects, could greatly improve the flow and visual appeal. I also learned that certain technical steps, such as using "Modify > Break Apart," are essential to ensure shape tweens function correctly. These observations helped me gain a better grasp of animation logic and how to avoid common mistakes.

Findings

Finalizing my topic for the thematic interactive website was an important step in my project development. Narrowing down my ideas and starting the proposal allowed me to focus on a subject I find meaningful and inspiring. Choosing the Zhongshan Building gave me a clear direction and motivated me to explore its potential through interactive storytelling and design.