Making a lasting impression through animation
Strong user engagement is the key to understanding users and building a loyal audience. For every brand, company, and product this is a struggle. One way to create a higher level of engagement is by using dynamic elements in UI design, such as animations. This powerful tool can allow you to showcase your brand personality and create small but impactful interactions that stand out to audiences. Visual cues and animations can serve as a guide or highlight features of your UI. For example, with a progress bar or an animation to indicate success you create a tailored experience.
The Journal of the Association for Information Systems study on the Effects of Animation on Attentional Resources of Online Consumers concluded that dynamic elements increase user enjoyment and time spent on a page. When it comes to animation implementation there is one problem many designers and developers encounter – performance and efficiency. That is where Lottie comes in.
From a dinosaur to a puppy
GIF, video and image sequences, and more. There are multiple ways to export your animations, but with problems such as limited color availability and compression, they are likely to become low-quality and unscalable.
Lottie, developed in 2015 by Hernan Torrisi, is a file format that significantly decreases file sizes, loading, and shipping time while keeping the best possible quality. Named after Charlotte Reigners, a German silhouette animation pioneer, Lottie is a JavaScript Object Notation (JSON) based animation file. This file format mixes vector raster elements and applies the animation at run time. Lottie is supported by many great design tools such as After Effects, Figma, and Canva. Why else do we think Lottie is great?
- Small file sized
- Increased loading speed
- Scaling without pixelation
- Easy to edit and convert into code
- Access to a large library of animations online
The Incari Studio 2022.2 and Lottie workflow
Sounds good right? Let’s go over how to employ your animation in our software. To start, add your Lottie animation to the Incari Studio Asset manager and create a Lottie Sprite. The Lottie Sprite Object allows you to incorporate any Lottie animation into your user interface. To create this object click the plus icon in the Scene Outliner and select Lottie Sprite Object. Drag the file from the Asset Manager into the Attribute Editor.
For more information on how to import and place Lottie animations in your project, you can check out our in-depth documentation article on Lottie, here.
From documentation to implementation
Lottie is a format that focuses on seamless project handoffs and easy implementation for developers. Create your animation with the design tool of your choice, and export your file as a Lottie to utilize dynamic elements for your interfaces.
Start playing around with Incari Studio 2022.2 with our 30-day free trial. Interested in purchasing a license for you and your team? Reach out to our sales team for more information on our enterprise plan.
