Application Design II / Task 2

24.5.2023- 18.6.2023 (Week 8 - Week 11)
Cheryl Voo Yie Qi / 0349878
Application Design II / Bachelor of Design in Creative Media
Task 2 / Mobile App Interaction Design

---

Task 2 / Mobile App Interaction Design

We had to add animations and interactions to our previous app design.

So I wanted to do a logo animation and I searched online for tutorials and tried to do it in After Effects. 

Fig 1.1, Youtube tutorial

I used a deer and morph it into the logo for the logo animation, but it doesn't turn out nice, so I ended up making a simple animation for my logo.

Fig 1.2, Gif

Fig 1.3, Logo animation in Figma

Fig 1.4, Logo animation in Figma

And most of them I did a simple dissolve-in transition, but for the main page when people click on the navigation tab, I made the title and contents slide in from the left and the bottom like below:

Fig 1.5, Page transition in Figma

So here's my masterplan for the Zoo Negara app:

And my video presentation:

Fig 1.6, Video presentation

---

REFLECTIONS

I really like the idea of a deer morphing into the logo, because the logo itself is a deer, so I really wanted to do that. But it doesn't look good I don't know why, I followed the video but the size of it looks weird I tried to do it again for few times, but it still looks the same, so I ended up giving up on that. And I keep the other animations simple because I don't want them to be complicated and fancy. In the end, I ended up doing a more simple logo animation. Through this task, I think I got more familiar with Figma about the animating part. Previously we mostly did the layout things in Figma but this time we have to do some animating parts like the logo animation so I looked for some animating logo videos, and I learned a lot about animating in Figma.