This website will be updated in 2 days
Building an animated Icon pack on Lottie
Client
Services

Icon design

Ui Animation

tools

Adobe illustrator

Adobe After effect

DATE
October 2019

The goal of this project was to create a free animated icon pack built with Adobe Illustrator, animated in Adobe after effects, and exported in Lottie. To aid micro-interactions in apps.

โ€

No items found.
No items found.
No items found.
No items found.
No items found.
Product
This is some text inside of a div block.
Tools
This is some text inside of a div block.
Client
This is some text inside of a div block.
My Location
This is some text inside of a div block.
Date
October 2019
View Project
View Project
Old but gold
This project is tagged old but gold because it was done in the early stages of my design career and I made some rookie errors ๐Ÿ˜… ย but it still has valuable insights

Whatโ€™s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The goal of this project was to create a free animated icon pack built with Adobe Illustrator, animated in Adobe after effects, and exported in Lottie. To aid micro-interactions in apps.

โ€

"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".

โ€

By Matthieu Souteyrand

โ€

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.
By Thomas Vaeth

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.

โ€

My screen recording

โ€

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 .

โ€

โ€

โ€

โ€

โ€

โ€

Whatโ€™s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

No items found.
Found this post a little interesting?
Sign up to get notified when I post new content
I'm not surprised you subscribed. Glad?ย Yes, but not surprised ๐Ÿ˜
Probably my fault, but something went wrong, please try again
Designed and Built by yours truly โœŒ๐Ÿฝ
Last updated Oct. 2021