APPLICATION DESIGN Ⅱ / TASK 2: MICRO-INTERACTIONS AND ANIMATION PROTOTYPE

26.9.2023 - 7.11.2023 (Week 1 - Week 11)

Fadil puthiya madathummal peedikakandy / 0354579 / Bachelor Of Design (Hons) In Creative Media

Application Design Ⅱ

Exercises

Task 02: AnimationPrototype

Make a prototype that features every animation that should be in the finished app design

I first started organising the pages in figma and started trying out different types of animation

Final app design

I created an app flow at the of the interaction design process that described the user's path from the splash screen to the login screen, the home page, and all of the features of Kumpool. The main focus of this first stage was organising the macro animations and specifying the important movements and transitions that occurred throughout the application. 

At first as usual I started working on the laning page

I did an interesting slide bar where when you click login the button transition to the call to action buttion in the next page

Testing it out many times to get the accurate animation

I gave it a lot of thought before deciding to use a straightforward transition style for the app's animations. My goal in going with a simple transition style was to make the user experience seem instinctive and organic. The animations were created to ensure a smooth transition between the app's various screens and sections and to guide users between them. 

Though keeping things simple served as a guide, I also understood that adding just the right amount of movement was crucial to keeping the screen from feeling boring. I added some subtle but effective animations to the app's visual presentation, like sliding, fading, or scaling elements, to give it some movement and life. I wanted to make an app that felt polished and useful, so I tried to strike the ideal balance between movement and simplicity.

Animating the log in transition and location options on the home page

Then I did a simple animation for the menu bar 

Adding smart animation by putting the boxes/buttons on the previous page and then adding a transition to make it look smooth and consistent

creating the map portion in such a way that, on the following page, it effectively animates by zooming in on the location rather than displaying a slide

It was a little difficult to animate the last few sections of the pages because there were a lot of objects and effects. I had to carefully match each page to the next before adding smooth transitions to every page.

Storyboarding

Video presentation explaining everything