Micro Animations

Enhancing user experience through micro animation.

If you own a smartphone, it would be fair to say daily, you will see hundreds of examples per day of micro animations.

Every time you scroll down Instagram, like a post or leave a comment, there will be a subtle animation that shows you that the action you have chosen has been completed. Double tapping on an image on makes a heart appear and pulse over the image showing you that you have indeed pressed like. This is an excellent example of the practical and subtle use of micro animation. Below is a process on how we will carry out micro animation to your product.

01 Start with the simple

We start by animating the key pieces that have an impact on the user experience, such as validation and hover states.

02 Discussion

From here, the sky is the limit; we work with you to decide on the best approach and style. Understanding if its more for functionality or wow factor.

See example of a protoype

03 Movement Boards

Create a movement board. As micro animation is visual, we create a movement board which is very similar to a mood board only showing live examples of animation.

See example of a protoype

04 Animation through ProtoPie

ProtoPie is our tool of choice here as it allows us to mock up how animations will look and feel. The best part of it is it allows for testing on devices which will help to emulate the outcome.

See example of a protoype

05 Handover

We work with developers to understand the language and requirements of your product, so the outcome is tangible and impressive and supply all required assests and documentation that is based on the code base of the product.

See example of a protoype

Check out some of our work where we completed Prototyping

Verroo

Native app, Product Redesign

ALTR

Web App, UI Refresh