With the advancement of the world wide web, we’re able to communicate to people without having to talk to them directly. But we’re not pointing to messaging apps, we’re referring to the beauty of animation design. Motion design or animation can easily tell a story and communicate with simplicity when it comes to reaching our brand audience. The extra cherry on top of this cake is that, we also have multiple platforms that support motion design, compared to the start of the web way back then.
Motion design was previously popular for filmmaking but with the growth of technology and computers, we now have access to the power of motion design to use for ourselves on various web and app platforms.
Motion design is a type of animation that uses graphic design elements to create dynamic and visually engaging content. It’s now almost everywhere from websites and mobile apps, to social media and digital advertising. It’s a win for content because it allows us to express stories in ways that static images could not.
Indeed, the power that motion design holds is a strong one as we're so sensitive to motion, which means we are easily distracted by almost any movement. This is because our peripheral vision detects movement outside the center field of our vision, whether it is meaningful or not. But this can be quite annoying if it is irrelevant to us but with subtle motion design or animation, it can create a better environment for users of web and apps.
So, let’s take a look at how motion design has evolved the way we navigate through the web, and what we see - for the better.
Motion design has given us more user-friendly websites
Motion design is generally very easy to consume and quick, unlike websites back then which were more text-heavy and oftentimes, too colorful that we wouldn't know where to begin. Also, here’s a fun fact: some webpages weren't even made to last in the 90s, with some surviving only a mere 100 days. Of course, that’s not the case today because websites have become a main avenue for brands or people in general to share content with the rest of the world.
For many, especially brands selling a product or service, website design is focused on user experience (UX) and user interface (UI). These days, we have roles that are focused on churning UI elements because a website is often the main platform in which the audience can gain better insight into a product or service.
If we were in the 90s, we would probably have to rely heavily on clipart as icons and text to get our point to the audience. But with access to animation design, we can communicate better - sometimes without even using words. While websites do use motion design for aesthetics, UI/UX animation design also serves to communicate to the user. These include cues from whether the site is responding to whether their requests are being processed.
Here are some common types of UI/UX animation design that are used today that make all the difference for the users.
Micro interactions
Motion design is helpful in all the little nooks and crannies of the web such as micro interactions.
Micro interactions are animated elements that are initiated with the smallest action such as when you press a button, swipe something, click an element, or perform any other action that triggers a certain condition. These micro interactions have become increasingly important as they help the user understand that their actions have been acknowledged, or to help the user navigate through the website with ease.
To the average website user, certain micro interactions are so subtle that they might come to expect something similar in other user experiences with websites or apps. For example, animated elements as feedback once they have pressed on a button.
Micro interaction is key to acknowledging the user's movement on the web. Essentially, these micro interactions guide the user while offering an engaging experience.
Loading animations
Loading time is a big factor for website users. The truth is, we do not like to wait. And what’s even worse than waiting is not knowing if the page is responding - this is the gap that loading animation designs fill when it comes to UI/UX elements.
For brands, loading times are essential for business as it does impact their conversion rates. This is why adding loading animation to a website design is crucial nowadays because it tells the users that the website is working on their request - this in turn, engages users and avoids them from bouncing out.
However, loading animation design, or a wait-animation progress indicator, not only gives them feedback that the website is processing their actions, but also that the website is responsive (even if it does not actually speed anything up). If you would like to know more about loading animations, read A Deep Dive into Loading Animations for a more in-depth look into loading animation - with examples!
Progress animations
Similar to loading animations, progress indicators can avoid the same thing - users bouncing off. It works to communicate to the user that the website is responding to their requests.
Some progress indicators might be more specific than others, such as having a percentage of how much longer they have to wait - this is great for multi-step processes. Meanwhile, some animated indicators might be a repeated motion just to signal to the user that the website is processing their requests.
Navigation
As with many websites, you will come across various landing pages, sectioned according to what the user might want to find.
With animation on navigational elements, it helps cue the user on where to go next, or what to click on. This could be in the form of the hamburger menu turning into a cross to signal that they can close the menu, or even animating the icons once the mouse hovers over.
Motion design is a great storyteller for branding and marketing
The web is more than just websites - it’s grown into many things. Nowadays, we have platforms such as social media, email marketing, and mobile apps. The capabilities that the web has today gives brands and designs an added advantage, because you can communicate so much more than a static image ever could. In short, it’s much easier to tell a story when you can animate it.
For example, a simple brand logo could be animated to emulate your brand’s products or services (also, check out these Examples of Animated Logos for Inspiration). Or you could add animated elements into your social media to capture your audiences.
It’s no secret that branding makes a brand - obviously. And with good branding, people are more likely to endorse your products. In fact, 81% of consumers revealed that they have to trust the brand because they even consider buying. But for brands to stand-out they have to be creative and this is where motion design comes useful.
Animated design elements like brand characters can help evoke emotion, while assets with motion design create highly engaging content for your consumers to trust and understand the product or service.
There are many ways to tell a story with animation, or even to show-off your branding products or services. Social media marketing is a great place where animation can thrive because it captures the short attention span of consumers.
Here’s an example of a social media marketing post we love from athletic apparel company, Nike. Paired with a voiceover, they are able to communicate their brand values of sustainable innovation through attractive animation that also evokes the right emotion. If you’d like to see more examples of brands using animation for social media, check out our article: A Guide to Animation and Motion Design for Social Media.
To market brand products or services, animation design could also serve you well when used on other platforms such as video tutorials or email marketing.
Even subtle animation makes all the difference when you use it right. Just check out this email from the dating app, Tinder. It doesn’t use a lot of animation, but it’s just enough to emphasize their messaging. Here’s another good read for you: Why Add Animation for Emails and How to Do It.
Motion design also helps bring educational content to life
The internet was widely different when it first came about, and it was also very text heavy. If you wanted to know something from the web, you would probably have to spend a good amount of time reading.
But thanks to the boom of web capabilities, we can now view content on the internet instead of just consuming text. These days, the internet is a source (if not our main source) of educational content and we have plenty of platforms to visit for it.
Motion design is a big help for this, especially to give us easy-to-consume content such as educational videos, or even for brands to educate consumers on their products.
PayPal loves using animation for their videos to describe how it works. With visual aid, we’re able to understand how to use their product and the brand is able to explain themselves better in less time.
Vividbooks has an even cooler concept that uses motion design for educational purposes through an app. Kids just point their devices at a printed worksheet with an image, and that image comes to life with animation design that explains what it is - complete with sounds and buttons! If that does not tell you how motion design has changed the web, well, we don’t know what will.
Additionally, in a much more simpler move, educational app, Brainfood, also uses motion design for educational purposes but to emphasize their bite-sized facts. The addition of their animation designs help narrate the story visually, which can also evoke more emotion to the user.
Motion design allows for more creativity
With motion design, comes creativity. Animation is an art that replicates real-life movement, which is a great creative outlet for designers. Many brands are also recognizing the potential they have with the use of motion design, so much so that design roles such as “motion designer” are in demand.
This also means brands have more creativity to play around with and more concepts can be birthed, much like what VividBooks has done. The creativity with motion design is simply limitless at this point.
And if you are a motion designer, check this out: 10 Motion Designers to Follow for Inspiration.
Join the revolution of motion design
We admit that creating motion design or animation from scratch is not an easy feat. But it doesn’t mean that it’s entirely inaccessible unless you have a motion designer on your team.
That’s why we’ve built LottieFiles - to give everyone access to free ready-made animation that is easy to use and you don’t have to be a designer to create a motion design asset. LottieFiles has a library of free lightweight, scalable animations for everything from social media and websites, to presentations and apps. You can even customize it once you land on a Lottie animation you want; just experiment by toggling with the animation speed, background color, color palettes and more.
LottieFiles also has plugins for several design tools including Canva, Figma and Adobe After Effects. On top of that, the Lottie Editor allows you to easily edit and customize Lottie animations such as editing different animation layers and adding colors.
Also, we will be launching Lottie Creator soon that gives you the power to create animation design on your own - a tool made for both motion and non-motion designers. Check it out and join the waitlist!
But you could also hire an animator through our community for short or long-term projects - if there’s something more specific and advanced that you need.
Now, what’s next for motion design and animation on the web? Anything, really. And honestly, we’re not sure. But what we do know now, is that its impact is pretty powerful and we should use that to our advantage while we can. So until next time, keep creating!
