For this project I need to create Micro animations in Figma, which are like animations in design, from loading bars, notifications or even menus.
To begin this project I started with research to immerse myself with how Micro Animations look and work with a users interaction.
During the lecture Dribble was mentioned as a good source for research so this is what I began with for my research. I wanted to create a mood board for the interactions I liked which I created a whimsical board and linked the interactions I linked there.
https://whimsical.com/RojrVZ1teAwavyvRZ2QVeP
One of my favourite micro interactions was a payment one where the icon of the card swipes along the top of the button as if you were swiping your card on a machine. I also noticed that payment animations were a pretty common trend. This is a very playful animation which I think it can actually help functionality as it is referencing a real world thing in a shuttle way. I'm not sure if this can really be improved, maybe it could have a bounce when the payment is accepted and not just green
https://dribbble.com/shots/14392914-Pay-Button-Micro-Interaction-Concept-by-Pineapple-UX-UI-Studio
Another icon I really liked was the loading screen which was bottles getting filled on a conveyor belt. This is another very fun, playful micro animation however this could only really be used for certain company's. For example it would would very well for the coca cola website or maybe some sort of fast food restaurant. This could easily hinder usability with not being a clear ‘loading screen’ however the designer did include ‘loading’ text which makes it clear to the user what it is.
The last Micro animation I want to review is a nice set of weather animations. I really like these as usually weather icons are stills which I think this is a great way to add a bit of fun and character to this. I think this helps usability as I think it can make weather more understandable such as if it is thunder, rain and windy at the same time this is displayed very clearly by combining elements in the animations. It doesn't really need this but it could do with titles below just to ensure that all weather icons are fully understandable.
https://dribbble.com/shots/26339995-Weather-Forecast-Animated-UI-Card