ADVANCED INTERACTIVE DESIGN / TASK 2 / DST60804

20/10/2025 - 16/11/2025 / (Week 5 - Week 8)

Aricia Man Yi Xuan / 0375026

Advanced Interactive Design / DST60804 / TASK 2

Bachelor of Design (Hons) in Creative Media

TABLE OF CONTENT

3. Task 2: Interactive Design Planning and Prototype

This week, Mr. Shamsul introduced us to the "12 principles of Animation". Later on, we do a simple rubber band animation and a ball bouncing animation in Adobe Animate using keyframes. We were also assigned a new task 2.

Fig.1.1.2 Rubber band Practice / (Week 5, 21/10/2025)

Steps:

1. Draw a line

2. Select keyframe > Insert keyframe (f6)

3. Make it curves in every keyframe

4. Create Shape Tween > Apply "Ease In & Ease out" effect

5. Select "Onion Skin" to adjust

6. Select and hold "Alt" > move the keyframes to duplicate

Fig.1.1.2 Ball Bounce Practice "Onion Skin" / (Week 5, 21/10/2025)

Fig.1.1.3 Ball Bounce Practice - Outcome / (Week 5, 21/10/2025)

WEEK 6 / (28/10/2025)
This week, Mr. Shamsul invited a senior to give us a little sharing of his self-sustainable travel story, where he's currently doing a "Farmstaying", he also introduced us a website "workaway.info" if we're interested. Then, we do a spider crawling exercise in Adobe Animate.

Fig.1.1.4 Convert to Symbol / (Week 6, 28/10/2025)

Steps:

1. Draw a spider shape (*Turn on "Object drawing")

2. Select all > Modify > Convert to Symbol (Fig.1.1.4) - Can check in "Library"

3. Do the animation of its legs

4. Back to Timeline > Right click > Add Classic Motion Guide

5. Draw a line (spider follow the line)

6. In Spider Layer > Add Keyframes at the end

7. In Motion Guide Layer > Add Frames

8. Make sure the spider was snap to guide (View > Snapping > Snap to Guides)

9. Select Spider Layer Timeline > Create Classic Tween

10. Tweening (Orient to path)

Fig.1.1.5 Final Outcome - Spider Crawl / (Week 6, 28/10/2025)

WEEK 7 / (4/11/2025)
This week, we created a looping GIF animation of the word "Welcome to my site" with an animated box line around the text. Mr. Shamsul guided us step-by-step, it's a bit challenging, but I think its fun.

Fig.1.1.6 Timeline of the box / (Week 7, 4/11/2025)

Steps:

1. File > Publish Settings (Fit in View)

2. Change background colour > Insert Text > Convert to Symbol > Turn on guides

3. Insert keyframes > Move the text > Create Classic Tween (Ease Out: Quad)

4. Add new layer (Mask) > Draw an outline > Mask

* Turn off "A" (Auto-Keyframe)

5. Add blank keyframe for text reveal (Repeat the same steps to all text)

6. Add 4 layers (Each with ONE line of the box) > Create Shape Tween

7. Adjust width & height, move it right and downward > Adjust timeline (Fig.1.1.6)

Fig.1.1.7 Final Outcome / (Week 7, 4/11/2025)

WEEK 8 / (11/11/2025)
This week was study week, our lectures conducted online via Teams meeting. Mr. Shamsul taught us how to use "Action" to stop the timeline.

Steps:

1. Duplicate all layers > +Blank keyframes (text layer: last frame) > Paste in Place

Fig.1.1.8 Button keyframes / (Week 8, 11/11/2025)

2. Convert to Symbol > Button (name: btn_enter) > Library

3. +keyframes > Change colour in "Over"

4. +layer > +keyframe under "Hit" > draw square inside

For buttons keyframes (Fig.1.1.8):

Up: The default appearance
Over: Hover effects
Down: Appearance when it's being clicked
Hit: The invisible area that responds to mouse clicks

5. Add "Action" layer *ON TOP > Add blank keyframe > Action: Stop

6. Select the button > Properties: Object > Instance Name: btn_enter

7. +Keyframes > Change to Graphic (Properties: Object) > Looping: Play single frame

8. +Keyframes > Move button to right > Color effect: Alpha (0%)

Fig.1.1.9 Label Name / (Week 8, 11/11/2025)

9. +Classic Tween: Ease In: Quad > +Blank keyframe on Action layer > Name it (Fig.1.1.9)

Fig.1.1.10 Actions / (Week 8, 11/11/2025)

10. Action > +new line > Go to frame label and play (Fig.1.1.10) > Change to "enter" > On mouse click

11. +"Stop" action in the end

Fig.1.1.11 Progression/ (Week 8, 11/11/2025)

12. Combine lines to new folder > +New layer > +Blank keyframe > Insert logo & text

13. Separate each layer (+key frames) > Convert to Graphic > Move to right > Create Classic Tween

14. Adjust timeline > Add frames to extend layer > Action: Stop

Fig.1.1.12 Final Outcome - Screen Record / (Week 8, 11/11/2025)

TAP MA BACK TO TOP

INSTRUCTIONS

- MIB -

Fig.2.1.1 Module Information Booklet

TAP MA BACK TO TOP

TASK 2

Interactive Design Planning and Prototype

Description:

We were required to work on our visual design and start planning our website’s interactive design elements and features. The plan should include the layout visuals and also the animation example or reference. We can build our animation or user-reference animation to demonstrate the intended idea.

Requirements:

Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsory)
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.)

Review on Task 1

Pawsonality

After completing the proposal in Task 1 (click here to view), I now move on into Task 2: Interactive Design Planning & Prototype, starting to translate my concept Pawsonality into an actual interactive website.

Loading Page

Fig.3.1.1 Drawing loading page asset / (Week 5, 21/10/2025)

To begin, I started by drawing the main elements, a seal character for the loading page. I followed cute illustration references and illustrated it in Figma using pen tool.
Sources: Seal #1 [click here] / Seal #2 [click here]

Fig.3.1.2 Loading page / (Week 5, 21/10/2025)

This is the loading page, where a seal appears with a loading bar moves as if it’s “loading.” The animation will later simulate the seal bouncing while users wait.

Landing Page

Fig.3.1.3 Reference images of the ice ground / (Week 5, 22/10/2025)

In the landing page, I drew the ice ground background and took references of the icy textures but simplified it into a cartoonish style.

Fig.3.1.4 Reference images of the animation / (Week 5, 22/10/2025)

For the seal movement animation, I took reference from the “SEALOOK” animation [click here]. In my wireframes, I wanted to create a seal that swims towards and bump onto the screen. I illustrated them using pen tool and brush in Figma as well.

Fig.3.1.4 Landing Page #1 / (Week 5, 22/10/2025)

Fig.3.1.5 Landing Page #2 / (Week 5, 23/10/2025)

The landing flow includes multiple moments: the seal bouncing on ice ground, jumping into the sea, and finally bumping its face onto the screen.

Homepage

Fig.3.1.6 Homepage / (Week 5, 23/10/2025)

After loading, the homepage appears with a static seal staring at the user with the name of this website "Pawsonality", and a main “Start Exploring” CTA button. The navigation bar and icons are also placed here. For future animation development, I plan to make the seal feel “alive” , where the seal’s nose will have a soft sniffing animation, and its eyes will follow the user’s cursor movement when hovered.

Animal Page

Fig.3.1.7 Animal Page - References & Drawing assets / (Week 5, 23/10/2025)

For the animal page, I started drawing the animals (duck and crocodile as an examples) and its terrain (floating island concept) based on the illustration references.

Sources: Island [click here] / Duck [click here] / Crocodile [click here]

Fig.3.1.8 References Images / (Week 5, 23/10/2025)

These references used as the types of animals in the "Types Page".

Sources: Duck [click here] / Crocodile [click here]

Fig.3.1.9 Animal Page / (Week 5, 23-26/10/2025)

Section of Animal Page:

1. Name Page

This section introduces the animal’s name and its appearance. It helps kids recognize the animal and understand what it looks.

2. Description Page

The description gives a short, simple overview of the animal, explaining basic information such as what it is, where it lives, and its general behavior.

3. Characteristics Page

This section lists the key features and traits of the animal in point form. It includes habitat, diet, features, and size.

4. Types Page

This page explains different types or breeds of the animal.

5. Fun Facts Page

This page presents interesting and surprising facts about the animal and includes interactive features. For example, when users hover over the animal, the body or parts of it can move. It also includes a sound icon that users can click to hear the animal’s sound.

Test Page

Fig.3.1.10 Reference Images / (Week 6, 27/10/2025)

These are the reference images I used in "Test Page".

Sources: Background [click here] / Paws [click here] / Ragdoll [click here]

Fig.3.1.10 Test Page #1 / (Week 6, 27/10/2025)

In the Test Page, I wanted to create an animation like when the users click on the page, a few cat paws will reaches out playfully to “grab” the title “Find Your Pawsonality.” The text is visually shown as if it is grabbed away by the paw. (Fig.3.1.10)

Fig.3.1.11 Test Page #2 / (Week 6, 27/10/2025)

After the animation, the first question smoothly appears. There're a total of 5 simple multiple-choice questions. The questions are short and easy to understand, making it fun and suitable for children. (Fig.3.1.11)

Fig.3.1.13 Test Page #3 / (Week 6, 27/10/2025)

Once all 5 questions are submitted, the user will receive a single final result. (e.g. Fig.3.1.13)

About Page

Fig.3.1.14 Images & Components / (Week 6, 27/10/2025)

The About Page is designed with a telescope-view concept. When the user enters the page, they see the screen from the perspective of looking through a telescope, as if they are exploring the world from far away. Through the circular telescope view, an island appear and the About information is displayed, introducing the purpose of the website.

Fig.3.1.15 About Page / (Week 6, 27/10/2025)

Contact Page

Fig.3.1.16 Components / (Week 6, 28/10/2025)

Fig.3.1.16 Contact Page / (Week 6, 27/10/2025)

The Contact Page is divided into two sections:

On the left side, there is a contact form where users can enter their name, email, and message to reach out directly through the website.
On the right side, there is a top-down view of a seal swimming in the sea. The seal is not just decorative, it is interactive. When the user hovers over the seal, the seal animation pauses slightly and official contact information (Email, Phone, Address) will appear beside.

Final Prototype (Figma)

Fig.3.1.17 Final Prototype

Final Prototype (Dev Mode) Link: click here

Final Prototype (Preview) Link: click here

Wireframes

Fig.3.1.18 Wireframes / (Week 6, 30/10/2025)

Flow Chart

Fig.3.1.19 Flow Chart / (Week 6, 30/10/2025)

Presentation Video

Fig.3.1.20 Presentation Video / (Week 7, 8/11/2025)

YouTube link: click here

Presentation Slides

Pawsonality

TAP MA BACK TO TOP

REFLECTION

Experiences:

Through Task 2, I do enjoyed creating my "Pawsonality" prototype. Since I love seals so much, designing a website that includes my favourite animal really made me feel happy and satisfied. Every time I looked at my prototype and saw the cute seal moving around, it gave me motivation to continue improving it. It was also my first time using the Figma brush tool, it was quite easy to use compare to Adobe Illustration as it's simple. I learned to explore more of Figma’s tools, which helped me express creativity in a different way. While developing the prototype, I have a lot of idea of my animations, like the floating island that flips when users click and the seal hover effect that reveals contact details. These features made the project feel more dynamic and helped me understand how animation can bring a website to life. It’s satisfying to see how design and storytelling can blend together to create a fun user experience.

Observation:

During the design process, I realized visual effects are very important to make illustrations look more realistic. For the seal illustration, I used different effects like drop shadow, inner shadow, and layer blur. These effects helped to enhance depth, making the seal look slightly 3D instead of flat. However, too many visual effects or elements can make the interface look messy, so I tried to keep it minimal but still eye-catching. Another observation was interaction design can shape users’ emotions. When the website responds to users’ actions, like the seal moving or the island flipping, it creates a playful moment that keeps people curious to explore more. This made me realize that an interaction website can strongly influence user engagement and satisfaction.

Findings:

From this project, I found that users are more likely to stay and explore when a website feels interactive. I will try to add hover effects, sound effect, and also animations in my further development to make the experience more enjoyable and memorable. Overall, building the Pawsonality prototype taught me a lot about combining creativity, function, and emotion in design. It helped me improve my skills in illustration, animation, and UI layout, while also reminding me why I enjoy design in the first place.

TAP MA BACK TO TOP

Aricia Man Yi Xuan (0375026)

Search This Blog