Application Design II - Task 2 : Micro interactions and Animated Micro interaction Prototype
10.05.2023 - 07.06.2023 ( Week 6 - Week 10 )
Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative
Media
Application Design II
Task 2 : Micro interactions and Animated
Micro interaction Prototype
TASK
Instructions
Create micro-interactions and animated micro-interactions for our
app
Progression
Based on our previous senior work, they created their whole ideation at Figma
Jam. We can screenshot the page of our application then draw a line as a
marker to the next page and accompany by an explanation of the animation that
will occur.
Firstly, I copy and paste all of the pages that will be shown for the animation to the Figma Jam and then I connect each page with an arrow line. Then I added each line with an explanation about what will be animated on that.
Figure 1.0 Figma Jam Screenshoot 1
And then to make it more efficient, each page that has the same transition, I put a single explanation like this.
Figure 1.1 Figma Jam Screenshoot 2
Then, a micro-animation that happens in a specific page will be shown with a green box.
Figure 1.2 Figma Jam Screenshoot 3
Below is the Figma Jam file
Then after I designed the transition animation idea, I decided to animate everything using Figma. Initially, I was struggling with how to animate the entrance. But then after trying for a while, I managed to find a way to animate the entrance by duplicating the page and making it empty then animating it with smart animate so that it will turn out nicely.
Figure 1.3 Figma File Screenshoot 1
The entrance animation that I want is that the content will drop down. And for the rest of the animation is mostly the same using the dropdown concept and fade in fade out animation.
Below is the embedded file for the application
Firstly, I copy and paste all of the pages that will be shown for the animation to the Figma Jam and then I connect each page with an arrow line. Then I added each line with an explanation about what will be animated on that.
Figure 1.0 Figma Jam Screenshoot 1
And then to make it more efficient, each page that has the same transition, I put a single explanation like this.
Figure 1.1 Figma Jam Screenshoot 2
Then, a micro-animation that happens in a specific page will be shown with a green box.
Figure 1.2 Figma Jam Screenshoot 3
Below is the Figma Jam file
Then after I designed the transition animation idea, I decided to animate everything using Figma. Initially, I was struggling with how to animate the entrance. But then after trying for a while, I managed to find a way to animate the entrance by duplicating the page and making it empty then animating it with smart animate so that it will turn out nicely.
Figure 1.3 Figma File Screenshoot 1
The entrance animation that I want is that the content will drop down. And for the rest of the animation is mostly the same using the dropdown concept and fade in fade out animation.
Below is the embedded file for the application
REFLECTIONS
For this task, I feel that this task will not take too much time because we are asked to make a diagram about the animation to be created and make the animation. I felt this task would be completed by not taking up my time, but I was wrong. The processing time became a little longer because I struggled to think about how the entrance page drop down animation could appear. But this task is fun, I enjoy working on it.
Comments
Post a Comment