Application Design II / Task 2
31.5.2023 - 18.6.2023(Week 9 - Week 11)
Chang Jia Yee / 0350402 / Bachelor of Design in Creative Media
Application Design II
Task 2: Micro Interactions and Animated Micro Interaction Prototype
TASK 2
We are required to create micro interactions and animated 1 operation task
of micro interactions for our app from task 1.
The operation task of my app was to view the recipe for kiwi smoothie and
add the ingredient list to shopping cart
Before planning the animation, I made some minor changes to the layout of my application.
Fig . Comparison of the previous and revised log in page
Because the monochrome background is a bit monotonous, I added some illustration to make it look richer.
Fig . Comparison of the previous and revised main page
The original upper and lower parts are difficult to distinguish, so the geometric diagram in the whole design is used to separate the upper and lower parts, which makes it easier for users to distinguish the upper and lower parts and adds some sense of design. In addition, the turntable part of popular recipes also separates the photos and names of each dish with lines, which clearly divides each recipe.
Fig . Comparison of the previous and revised recipe detail page
The word"show direction "doesn't look so accurate, and it doesn't let users know that it is a button that can query steps. It is more clear after changing it to" show steps".
Fig . Comparison of the previous and revised step guidance page
The modification of this page is to enlarge the picture for users to view, and then add a play button to the picture, so that users can play the video without seeing the progress bar below at the first time.
Fig . Animation planning flow in Figma
Figma. Animation plan
Figma. Final interactive prototype
**Press restart to view the whole animation from the beginning**
Video. Final animation planning presentation
REFLECTION
This project is quite smooth for me. At first, I struggled with where to do
my animation. Personally, I prefer to do this amination in Figma, because I
have never done it before, so I can try to see its potential. It turns out
that Figma can not only do some simple “move in move out”, but also do some
novel animation methods, so it can be regarded as something. At first,
animation will be helpless, because it takes a long time to explore for the
first time, but it was much smoother afterwards. On the whole, this
assignment didn't cost me much, and it also achieved the desired
effect.
Comments
Post a Comment