These mini animations make the user experience more engaging, such as when a button bounces under a click or when a menu unfurls when selected. These fluid motions add personality to a website by making them more satisfyingly responsive for the user.
It is important, however, not to overload websites with large files that cause a drag on the user’s network or device, or to overwhelm viewers with distracting stickers or whirling icons. But, when matched with the tone of the page, micro animations not only surprise and delight the user but also enhance their experience by providing helpful visual cues for complex interactions.
Knowing exactly what will enhance or bog down a user’s experience is an art in itself. As well as adding just the right amount of motion to the illustrations so that they flourish on an app or website, it is important that final files are delivered as GIFs, webm videos, mp4s or lottie files that can be implemented immediately by developers – Folio Lab’s in-house team knows all about this.
The example above showcases some fun micro-interaction animations we created for the banking app Mettle. Here’s a few more examples of animation on the web, including full-page immersive advertorial content Folio Lab produced for the New York Times & Wall Street Journal:
NYT x Veolia – A new vision for plastic (Illustrations by John Devolle)
NYT x Audi – How intelligent cars view the world (Illustrations by Karolis Strautniekas)
WSJ x Highland Whiskey – The art of harmony (Illustrations by Eleni Debo)
And a selection of animated stickers created for LinkedIn:
