Three Keys to Optimizing Animations in Apps, Websites and UX
In today’s burgeoning digital environment, where discerning consumers make instant decisions based on what they see and feel, animations are becoming the indispensable tools of the trade. People instinctively have a personal association with movement: it catches their eye and keeps their attention in the first moments of online engagement. Even small bits of animation can bring static imagery to life, and movement has become a key component of design thinking — something that is top of mind for every UX designer, software developer, and marketer to differentiate their brand and business.
Overcoming Common Animation Challenges
While the idea of incorporating animation into apps and website design is compelling, the inherent complexities of the typical animation process present several key challenges. It takes time to develop animations from scratch; they often tend to be code-heavy and take a lot of app space; other animation alternatives like GIFs and PNG sequences can be really heavy and low quality (a combination no website or app wants). That’s what animation platforms are all about: leveraging the power of a massive design and developer community as well as creating tools to simplify animation development, proficiency, and rollout. It’s a highly competitive market out there for sure, so if you want to make the most of design resources like animations to make better digital products, then you need to use your time and resources wisely.
Following are three keys to incorporating animation into your apps and websites to excel in this dynamic environment.
1. Make the Process Fast, Easy and Lightweight
Speed is everything when it comes to design and development. You want your designs to look and ‘feel’ great, but you must be able to optimize the time it takes to get the job done. Core animation files should be fundamentally lightweight and easy to work with: simple to acquire, quick to enhance and modify, and easy to test and deploy.
A Lottie, for example, is a lightweight JSON-based animation file format that enables designers to build and roll out animations on any platform as easily as they do static assets. They are small files (600 percent smaller than GIFs and 10 times faster to ship) that work on any device and can scale up or down without pixelation. Because they’re so small, they significantly increase download speed and reduce the amount of disk space utilized.
In the LottieFiles community, great Lottie animations are already created and displayed in a curated library of free (as well as paid) assets. Simply browse categories or enter search criteria to narrow down to what you’re looking for. Once you download, it’s a simple task to change color layers for a new look and make further edits to the file, all without using code. So if you’re not making Lottie animations yourself, LottieFiles makes them much more accessible with the flexibility to customize messaging and tailor to fit your exact design requirements.
2. Be Sure It’s Interoperable and Collaborative
From a process standpoint, no one wants to learn new programs or development languages to build animations, especially if you’re dealing with groups of designers, developers and marketers. The platform you’re working with should integrate seamlessly with the other common frameworks in your toolbelt. LottieFiles, for example, includes a number of built-in integrations that makes the process as easy as link, click and build:
- After Effects (AE) and Adobe Animate plugin that makes it easy to render, test, and export Lottie animations in these popular design programs.
- A mobile app to test animations are compatible with iOS and Android devices.
- Figma plugin to prototype Lottie animations within product designs.
- Web-Player to streamline how you embed animations into your website with just a few clicks.
- Import and export of animated stickers for pervasive messaging program Telegram.
- A curated list of GitHub libraries and tools.
And importantly, when everyone on your team is able to utilize, test, edit and implement Lottie animations using the same interoperable programs, it enhances their ability to collaborate more effectively, improve teamwork and idea sharing, and scale your efforts to build a constantly growing animation pipeline that works towards optimizing UX in your products.
3. Empower Continuous Learning from a Vast Community
Lottie is a continuous learning process for most. You learn as your career grows and you take on new projects, but you also take cues from other designers and developers whose work delights your own sense of style and function. Platforms like LottieFiles are essentially giant user communities. There’s not only a chance to download great pre-built animations, but also the opportunity to learn tricks of the trade that are often hard to master on your own.
Designers and developers can see and learn the building blocks for creating fun and compelling Lottie experiences, absorb the nuances of the profession, and apply lessons learned to their own animation and UX projects. The LottieFiles community, in particular, also offers a wide range of tutorials that teach best practices for building animations that really raise the bar for UX. One recent session with a Lead Motion Designer from Airbnb gave a use case-driven tutorial on the design principles of easing, anticipation, overlap and secondary action. It’s awesome to have a (free!) community to learn from in the industry. That alone is worth its weight in gold.
Conclusion: Everyone Has a Visual Story to Tell
There is a story everywhere to be told online, and it can be told in a more compelling fashion with animation. If a picture is worth a thousand words, an animation that sports dynamic movement is worth 10x that. Done the right way and with the support of the right community, platform and tools, animation empowers great storytelling and a more enjoyable digital experience.
Lomit Patel is the Vice President of Growth at IMVU. Prior to IMVU, Lomit managed growth at early-stage startups including Roku (IPO), TrustedID (acquired by Equifax), Texture (acquired. by Apple) and EarthLink. Lomit is a public speaker, author, advisor, and recognized as a Mobile Hero by Liftoff. Lomit’s book Lean AI, which is part of Eric Ries’ best-selling “The Lean Startup” series, is now available at Amazon.
