Advanced Interactive Design / Project 1

22/4/2025--17/5/2025 (W1-W4)

LIU YITONG (0370907)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 1

---

INSTEUCTION

---

LECTURE & TUTORIAL

Week 1

Task1: Thematic Interactive Website Proposal

We will create a thematic interactive website proposal that focuses on a specific theme and engages users through multimedia and interactive elements (like animations, videos, clickable graphics, etc.).

The website should provide a dynamic, immersive experience that keeps users interested.

We can choose one of the following themes or get approval for my own idea:

·A brand/product launch (e.g., Nike shoes, Sephora product)

·A movie promotion

·A game release

·A museum or gallery exhibition

·A band or artist’s latest release

·Any other creative concept with approval

We need to submit

1. A complete UI/UX proposal document

2. My creative process, posted in my E-portfolio (Concept development, Wireframes, Moodboard, Flowchart)

Week 2

In this week's class, we began to learn how to use Adobe Animate.

In this class, we first got familiar with Adobe Animate and drew a bunch of small boats in it.

Fig.1.1 The process of  week2 exercise 

Fig.1.2 Week2 exercise

Week 3

In this week's guidance class, we began to have a preliminary understanding of keyframes in Adobe Animate.

First, we learned to use the "Creat Shape Tween" effect to create a simple graphic deformation effect.

Fig.1.3 The process of  week3 exercise 1

In the Tweening Settings section, we can select the effect of the animation, for example: Cubic Ease-In.

Fig.1.4  Tweening Settings

I also tried to add some color changes to make this little animation look more interesting.

Fig.1.5 Week3 exercise 1（GIF）

Having familiarised ourselves with the use of keyframes and tween, we were asked to make a countdown animation using what we had just learnt.

Note: The numbers typed with the text tool need to be converted to shape using the shortcut Ctrl+b before the shape tween can be added.

Fig.1.6 The process of  week3 exercise 2

Fig.1.7 Week3 exercise 2（GIF）

Week 4

In this week's lesson we learnt how to create an animation with the ‘Add classic motion guide’.

Fig.1.8 The process of  week4 exercise 1

We started by creating a simple beach ball to relate how to apply this effect to graphic. (First we'll start with Modify-Convert to symbols-Registration point middle)

The following animation was then created.

Fig.1.9 Week4 exercise 1（GIF）

The second exercise involves getting the car to drive along the road in the map. At first I used a lot of keyframes, which caused my car to not travel at a constant speed.

Fig.1.10 Orient to path 

I was later told that I needed to use Orient to path or it would be overly complicated to require too many keyframes.(Note: Orient to path may not work if the line of motion guide is closed)

Fig.1.11 Modified version

You won't need as many keyframes on the modified timeline.

Fig.1.12 W4-map_exercise (GIF)

---

TASK

Thematic Interactive Website Proposal

1. Instruction

We will create a thematic interactive website proposal that focuses on a specific theme and engages users through multimedia and interactive elements (like animations, videos, clickable graphics, etc.).

We can choose one of the following themes or get approval for my own idea:

·A brand/product launch (e.g., Nike shoes, Sephora product)

·A movie promotion

·A game release

·A museum or gallery exhibition

·A band or artist’s latest release

·Any other creative concept with approval

2. Proposal

·Three ideas

After listening to Week1's briefing on Task 1, I decided to start creating my IDEAS in my Figma.I wrote five IDEAS which are Idea 1: Game Introduction Site - Eastward, Idea 2: Game Introduction Site - Omori, Idea 3: Malaysian Tropical Plants Virtual Exhibition , Idea 4: Star Museum Virtual Exhibition Site, Idea 5: Game Introduction Site - S4U: Urban Punk 2011 and Love Dash.

Fig.2.1 Creating a Ideas in Figma

Fig.2.2 Thematic Interactive Website Ideas

·Proposal of idea 3: Virtual Exhibition of Tropical Plants in Malaysia

After the feedback in the second week, my tutor suggested me to choose my Idea 3: Virtual Exhibition of Tropical Plants in Malaysia, because the animation of Idea 1 about the introduction of the game is actually more difficult to realise, and Idea 3 is more insured and easier for me to present better results.

I started to conceptualise my formal proposal and I had two ideas:

1. use illustrator to draw images of plants and make the whole site hand drawn style.

Then I tried to find some visual references：

Fig.2.3 Visual references 1（Elements - Awwwards）

Fig.2.4 Visual references 2 （How Many Plants - Indoor and House Plant Resource）

2. Use ready-made photos for your website, using a realistic style.

Then I also find some visual references：

Fig.2.5 Visual references 3 (Home)

Fig.2.6 Visual references 4 (Nature ⋆ Project Parallax) 

Fig.2.7 Visual references 5 (【公式】那須別邸 回)

But after the fourth week of feedback, I was advised to use photos rather than illustrator to create the images. So I decided to use photos and refined my proposal.

·Concept

Fig.2.8 Concept

·Moodboard

Fig.2.9 Moodboard

·Wireframe

Fig.2.10 Wireframe

·User Flow

Fig.2.11 User Flow

Fig.2.12 Proposal of Virtual Exhibition of Tropical Plants in Malaysia in Figma

Fig.2.13 Proposal of Virtual Exhibition of Tropical Plants in Malaysia

---

FEEDBACK

Week 2

I was advised to go for Idea 3: Malaysian Tropical Plants Virtual Exhibition because the animation in Idea 1 about the introduction of the game was actually more difficult to realise, whereas Idea 3 was more secure and easier for me to present a better result.

Week 3

Continue to refine the Proposal and draw the Wireframe and User Flow.

Week 4

Proposal is working so far. Suggest using photos to build the site rather than illustrator. looking for more visual references.