Recently a client approached the agency that I work on, and they wanted to see if I can help him with a Lottie animation, which basically is a JSON-based animation file format that you can use on any platform as easily as static assets. They are small files that work on any device and can scale up or down without pixelation.
You can use Lotties on basically any platform: web or mobile. This means you can integrate them seamlessly into both apps and web pages.
In a nutshell, you can unleash a lot of animation power on a website, for icons, logos, interactions. You name it! It's an awesome tool to use and I was pretty excited to do it.
The mission was animate this graphic which basically explains how the platform works, it needed to be short and without any IN & OUT animations, just add movement and a loop so it will be auto playing on the site without any noticeable jumps.
This was the final version:
The shadows may not look so good, it was intended for another BG color. The client is happy and me too, another animation done. Really had an awesome time learning the do's & dont's of this type of animation, I want to keep learning :)
Interactivity helps guide users through a website or digital product while creating an immersive and enjoyable user experience. The primary role of these types of animations is to draw users’ attention to an important CTA or show them what to do next. UI animations allow designers to communicate with users without text.
You can see it live on Meltano's website: https://meltano.com/
Why animation matter?
Because it play an essential role in guiding users through a product experience. Good product design uses animation to communicate with users to make digital products more straightforward and enjoyable to use.
Comments