Labels

Advanced Interactive Design: Task2 / Interaction Design Planning and Prototype

 20/5/2025 - 10/6/2025 (Week5-Week8)

Amber Tan Jing Jing (0372746)

DST60804 / Advanced Interactive Design / Bachelor of Design in Creative Media

Task2 / Interactive Design Planning and Prototype


TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Task 2: Interaction Design Planning and Prototype

4. Feedback

5. Reflection

LECTURES

Week5 

This week, we learned how to animate a spider moving from the bottom to the top, with its legs and eyes moving. Then, we learned how to use masks in Adobe Animate.

Figure 1.1 Adobe Animate - Exercise 4, Week5 (20/5/2025) 

Week6

This week, we learned how to make buttons in Adobe Animate. We used the stop( ); action to pause the animation.

Figure 1.2 Adobe Animate - Exercise 5, Week6 (27/5/2025) 

Week7

This week, Mr Shamsul taught us how to mask text and create a button that links to the next page.
 

Figure 1.3 Adobe Animate - Exercise 6, Week7 (3/6/2025)

INSTRUCTIONS

TASK2: Interaction Design Planning and Prototype

Descriptions:

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 are can build their animation or user reference animation to demonstrate the intended idea.

Requirements:

1. Walkthrough Video presenting the plan and showing the animation examples and/or references.

2. 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.)

Week7 (Initial Design)

This week, I started create the prototype based on my proposal (Task 1).

Figure 2.1 Wireframe from Task 1

Figure 2.2 is my moodboard because it visually represents the concept of my project - "Cute Space Adventure".

Figure 2.2 Moodboard

 Then, I using Figma to create my prototype.

Figure 2.3 Prototype progress on Figma

Figure 2.4 Prototype navigation arrow

For the landing page animation, here is the reference link:

For the character page animation, here is the reference link: 

For the merchandise page animation, here is the reference link: 
I found the reference from Oatside website (Figure 2.5). The product will move from right to left.

Figure 2.5 Oatside website

Walkthrough presentation video (Initial Design)

Youtube link: https://youtu.be/cGtGnCwe1pE

Figure 2.6 Walkthrough presentation video (initial design)

Final Design

Week9 

The feedback given was that on the homepage, the characters had strokes, but the planet did not, so it feel like the elements were taken from somewhere else. The visual style was not consistent. For the planet part, the text like "About", "Character" shouldn't be placed directly on it. It's better to make the text go around the outside of the planet in a circle, with a rotation animation. When hovered, the animation stop. Besides, the black background behind the logo needed to removed. The character page was fine. However, the Merchandise and Behind BT21 pages were also not consistent.

After receiving feedback, I refined them to make them more consistent. Mr Shamsul asked me to find a website reference based on my theme, so I found this one: https://www.bluey.tv/characters/.

 
Figure 3.1 Website reference screenshots

Besides, I also found some references on Pinterest.

Figure 3.2 Pinterest reference screenshots

Since the feedback for my character page was positive, I decided to apply the same shape to the other pages for consistency.
Below is my Figma layout design after reviewing the references.

Figure 3.3 Figma layout design (Final)

Click [HERE] to access Canva.

Final Advanced Interactive Task 2 Presentation: https://youtu.be/19HHAKxjE8k

Figure 3.5 Final Advanced Interactive Task 2 Presentation

FEEDBACK

Week9

  • On the homepage, the characters have strokes, but the planet doesn't have, so it feel like the characters are taken from somewhere else. The visual style is not consistent.
  • For the planet part, the text like "About", "Character" shouldn't be placed directly on it. It's better to make the text go around the outside of the planet in a circle, with a rotation animation. When hovered, the animation can stop.
  • The black background behind the logo should be removed.
  • Character page is ok.
  • Merchandise and Behind BT21 pages also not consistent.

REFLECTION

At first, I forgot how to use Figma to create a button even though I had learned it in Semester 2, so I had to watch a YouTube video again to refresh my memory. Luckily, I quickly figured out how to do it. Then, I followed the wireframe I created in Task 1, applied the colour theme and thought carefully about the button design.

I observed that when creating the prototype, I needed to consider how the animation moves, how the buttons look and function. I also realised that I need to watch more animation examples to get more ideas and improve my design.

I found that the consistency of colour, icons and fonts is very important to keep the design clean and neat. Now I have a clear plan in mind, and I hope the final animation will meet my expectations and everything will go smoothly.





Labels:

Comments

Post a Comment