"Great things are done by a series of small things brought together

- Vincent Van Gogh

‍

In this day and age, big digital product companies are spending crazy amount in the budget, hiring Ux researchers & design experts, carrying out a lot of A/B testing, reviewing user interaction metrics, etc all to be ahead in improving the experience of their product and all this is done because they understand the value of a satisfied consumer.

There are so many design principles that help products look really appealing to its consumer but there are little things in digital product design that can be easily ignored because of designers focusing on bigger priorities when building products unknown to them that these little things make a big difference and those things are "Micro interactions".

‍

‍

What are micro-interactions?

Micro-interactions are events that have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming, and, dare we say it — human. Read More

There are so many approaches to take to include micro-interactions in your app (read more from this article  and I will do a bigger exploration on that real soon but I just wanted to take a little step to work on interactions with icons.

The study of Iconography is a world of its own which I'm not fully an expert on but there are basic principles like balance, style pattern & unity that can be understood when you follow experts in the field.

Goal 🎯

The goal of this project was simply to build an icon pack and then animate an onTap, onHover or onFocus interaction.

Approach 🛠

I wanted to create something simple, but useful. A quick icon pack can be used by other design and development teams. So, I decided to use Lottie.

Lottie is a library that allows you to create vector illustrations using Adobe after effect and then you can export those beautiful animations to JSON, GIF, png sequence, etc that can be easily used by developers without using a single line of code. This makes gives life to your static Ui designs, improves your value as a product designer, and makes developers happy to see you 😁😅 (it a big bonus I tell you).

So, I highlighted the type and style of icons I wanted to create and then moved on to designing on Adobe illustrator, imported the designed icons to After effects and Voila 🎉, things are moving at in harmony.

When I was animating in after effect, I made sure I used around the same timeframe for each icon animation so the animation are consistent.

‍

‍

I export to the Lottie library in After effects.

‍

The project was quite exciting, learned better how to play with vector animations, build icons and have fun while doing it.

I encourage you to look into vector animations it'll help increase your value and broaden your skillset.

Till next time, as keep building products for the next billion users .

‍

‍

‍

‍

‍

‍