Have you ever browsed a website and got the feeling of déjà vu?
Well, you aren't alone, and no, it's not a glitch in the Matrix. Website elements are recycled thousands of times over because most people use the same CMS. Free templates, stock animation, and built-in icons populate the vast majority of websites, creating an uneventful, boring user experience.
In this post, we will take a deep dive into 3 animated collections that will help you set your designs apart from the increasingly mundane reality of the internet. We'll cover the contents of the collections and some tips on how to use the animations.
Why Lottie Animations?
Before we jump into the collections, it's essential to understand why using Lottie can help you create unique web-based projects.
Lottie animations are exponentially smaller than SVG and GIF files allowing web designers to implement exactly what they want without worrying about page load speeds. In addition, JSON-based Lottie animations can be easily manipulated without design software.
While you can find design resources that will make your website stand out, they aren't available in the smallest, most customizable format. Choosing to work with collections built with Lottie is the best option because you won't be restricted by the limitations of older forms of animation.
Animated Business Illustrations
The designs in the Animated Business Illustrations collection have universal appeal and would fit virtually any commercial website.
What's in the collection?
The package features 20 cohesive designs with modern, minimalistic styling. Each animation is simple yet comprehensive enough to add value to pages.
All Creattie designs offer color customizability. The Animated Business Illustration collection features 4 colors that can be changed directly from the Lottie library.
Below are some of our favorite designs from the collection:
Business Map
This is an extremely versatile animated location design perfect for a business offering deliveries, geolocation services, property data, real estate, or that has multiple retail locations.
Contactless Payment
Every business, service, or organization offering contactless payments can use the animation to communicate the measures they've taken to provide convenience to customers.
Teamwork
Teamwork is leveraged as a valuable asset across nearly every industry. The Lottie animation can help designers attract attention to a page element describing how the business uses collaboration to deliver a quality product or service.
Use cases
The highly versatile collection can be utilized in various scenarios; here are a few to get you started.
Hero Image
Designs like the Business People, Investment, and Team Meeting are perfect top-of-the-page animations to incentivize users to keep scrolling.
Value Icons
Many commercial webpages have a list of services with an icon, heading, and text explanation. You can include motion into these types of elements with many of the designs in the collection, including, Business Website, Business Portfolio, and Online Business Meeting.
Business Services Page
The animations can be used to present a visual representation of services rather than just text.
Animated UI Systems Icons
Every website needs a diverse assortment of icons to guide users through the interface. Creattie's Animated UI Systems Icons is an all-inclusive collection that can accommodate web page design.
What's in the collection?
The UI package features 290 animated vector icons based on a 24-pixel grid of materials available in JSON, GIF, and MP4. You can keep the icon as an animation or choose to download it as a static image. The icons are also available in two styles.
(All Creattie designs are available in multiple file formats, and animations can be downloaded in static form.)
Scrolling through the extensive selection of designs, you'll find numbers, check marks, bells, arrows, menus, and many more essential UI icons. The designs are simple but highly effective communication elements every designer needs in their UI toolbelt.
Below are some of the most popular icons from the collection.
Add
The icon encourages users to upload a post, add information on a form, or other actions on the page.
Arrow Left 7
There are many animated arrow icons included in the collection. This design is simple, but the pulsing animation is an efficient way to catch the user's attention.
Chat
The perfect icon for a chatbot toolbar; subtle animation will incentivize users to use the tool and inquire about the website's product or services.
Use cases
Below are just some of the many use cases for the collection.
Dropdown Menu
Add an animated icon to a dropdown menu to help describe where each link will take users.
Mobile Menu
There are menu designs that can serve as your collapsable mobile header menu icon.
App Controls
The UI Systems collection contains all the essential controls you need for your mobile app, including volume, shuffle, Wi-Fi, thumbs up and down, and other icons necessary for an enjoyable user experience.
Animated Marketing Illustrations
Our final Lottie collection is Creattie's Animated Marketing Illustrations. Similar to the business package, these icons are incredibly versatile, and their use cases extend far beyond a marketing agency website.
What's in the collection?
The collection has 36 engaging designs ready to be customized and added to your web pages.
While the package is catered to marketing-related content such as SEO, SMM, and social media, many designs can be utilized in various industries. In addition, the design style is congruent with the Animated Business Illustrations collection and can be used on the same page cohesively.
Digital Advertising
The design works great for agencies offering digital ads but also can emphasize multi-tasking, web services, online security, and CMS management.
Growth Marketing
Any business offering B2B services can use the Growth Marketing Lottie animation to promise growth.
SEO
Creattie offers minimal designs so they can be used universally. While the SEO illustration obviously pairs well with a page offering SEO services, it will also work with any company offering analytics, SaaS, or CRM management.
Use cases
The designs in the collection will add interactivity to your web pages; here are a few suggestions on how to implement them.
2 Column Web Page Element
Any designs in the Marketing Illustrations package work great in a 2 column section. For example, you can feature the animation on one side and headings, bullets, buttons, and text on the other to explain the value or encourage a CTA.
Footer Animation
Large footers are a great way to present a complete, organized layout of your website with links to pages. Adding an engaging animation will encourage users to stop and read when they hit the bottom of your webpage.
Form Submission
When an inquiry or contact form is submitted, you can include an animation rather than text, communicating the message has been sent successfully.
Final Words
The internet, especially eCommerce and B2B service websites, are becoming redundant and oversaturated with similar design elements. Adding these 3 packages to your design toolbelt will allow you to create unique web-based projects that stand out. Check out Creattie's entire library for more cohesive collections and thousands of Lottie animations.
