Task 2: Interaction Design Planning and Prototype

22/10/2024 - 12/11/2024 / Week 5 - Week 8
Tee Jia Ern / 0348512
Advanced Interactive Design / Bachelor of Design in Creative Media
Task 2: Interaction Design Planning and Prototype

---

LECTURES

Week 5: Spider Animation 
For this exercise we learned to animate the spider's legs and loop the animation while the spider moves a long a path. The spider is animated by clicking into the graphic and adding keyframes to animate the spider's legs. While moving along a path is achieved through motion guide. 

Fig 1.1: Week 5: Spider Animation

Week 6: Countdown & Button Animation 

We did a countdown morphing animation using shape tween. The numbers are duplicated so one stays on screen while the other transitions into the next number. 

Fig 1.2: Week 6: Countdown Animation

Button Animation

Using masking to create a text transition effect. While having 2 keyframes with one keyframe setting x or y to 1 to create a line animation effect. We arranged the sequence so it looks like a rectangle button being created. 

Fig 1.3: Week 6: Button Animation

Week 7: Interactive Button 

Through convert to graphic and button, the button can be animated after interacting with it. We also learned to apply some JavaScript so that the animation can stop instead of looping once the button appears.

Fig 1.4: Week 7: Interactive Button 

---

INSTRUCTIONS

I want to design a simple logo that reflects on the topic of my choice which is tea. I wanted the e in tea to be resemble a leaf shape. I finally came up with a simple shape of two pointed circles of the top right and bottom left of e. 

Fig 2.1: e Leaf Anagram Process

Fig 2.2: Tea Leaf Anagram

After browsing for image asset, I made each element animated by using the built in components from Figma. Adding a interaction with before and after, then adding after delay so the animation appears when screen is loaded. After that I control the timing of the animation by setting the duration after delay. 

Fig 2.3: Figma Components

Home

There is a cycle of the three chosen South East Asian countries and the tea that represents them. Since the theme is heritage, I wanted to show the people behind the drink.

Fig 3.1: Home

History

There is a timeline showing how tea originated and the history off tea in selected South East Asian countries. The interactive element in this section is the images in the main timeline, the arrows to go left or right after clicking into the main timeline and the minimizing button returns the user to the main timeline. 

Fig 3.2: History

Production

This section shows the steps it takes to produce tea. I have narrow it down to 5 stages. Clicking on the image of the step will have a pop up appear in the center of the screen. To exit press the x at the top right of the box. 

Fig 3.3: Production

Culture

A map of South East Asia will appear along with location pins and a box showing the signature drink of each selected country. Clicking on the signature drink would make a box appear at the right side of the screen describing the drink. Pressing on the rotate button would show a behind the scene image. 

Fig 3.4: Culture

Feedback

(Click into image for full resolution)

I changed the minimize icon to the back button with text on it so that it is more intuitive. 

Fig 4.1: History

I also changed the rotate button to an image icon so the function is more clear to the viewer.

Fig 4.2: Culture

Final Prototype

Final Presentation Video (before feedback)

---

FEEDBACK

Week 7

General Feedback: Make sure the website reflects the theme. Use grids to make the content more neat. The layout of the design should use design principles to make it visually appealing, even with a simple minimalist design. The web design should be clean and easy to read. 

Week 10

Specific Feedback: Change the icons to make it universally understood and avoid confusion. 

---

REFLECTION

Experience: I've learned more about animation in Adobe Animate. It's interesting to see the various ways of animating an object through motion guide, masking, animating line length in a certain order to form a box and JavaScript. 

Observations: I want to make my workflow more streamline to improve on the consistency in each page of the prototype. Next time I'll incorporate Mr Shamsul advice on using grids to ensure consistency throughout the project. 

Findings: Animating the prototype was quite time consuming but worth it. This gives me a clearer idea of how the final product would look like and easier to make any changes before finalizing it.