It seems both not too long ago and also a long time ago when motion graphics and animation served very little purpose in design other than aesthetics. The reason it seems not too long ago is because we are talking about design that was happening just over a decade ago; but it also feels like a long time ago because, well, MySpace.
Ah yes, MySpace. The long-abandoned platform where 2000s-era teenagers would load their page with as many seizure-inducing animated hearts, flowers, stars or glitter graphics that they could find on Photobucket.
While MySpace might be an extreme example, it’s important to consider how animation and motion graphics have evolved – not only the actual animation technology itself, but also the way animation is now used in design. And to be fair, it’s not so far-fetched to imagine that many professional UX/UI designers working today had their interest in design first sparked as teenagers back in the early aughts by learning a rudimentary form of HTML in order to make their MySpace page cooler than their friend’s. (We owe you more than you know, Tom).
But enough of the embarrassing past. Let’s dive into the biggest trends in motion design today, how it could evolve in the near future and what you should keep in mind when using animation to improve the user experience.
One of the reasons that animation and motion graphics have become much more integral to producing effective UX design is that it’s become much more efficient to implement into design than it used to be several years ago.
“In the past, adding animation to websites or apps was only possible one of two ways,” explains Wes Theoret, senior motion designer for RocketAir. “You could use a GIF, which can have a large file size, have limited color range and doesn’t handle transparency well; or you could have a developer create animations through code, which is a whole other world with a language spoken by a specific group of people.”
However, this all changed with the launch of Lottie animation by the developers at AirBnB in 2017. In explaining why it created Lottie animation, the design team at AirBnb noted that because of the cumbersome nature of “building complex animations,” most designers weren’t using them in apps “despite it being a powerful tool for communicating ideas and creating compelling user experiences.”
“Lottie files are the next best thing to sliced bread when it comes to using animation on web pages and applications,” Theoret says. “Small file sizes and 100 percent vector-based, which means no loss in quality when scaling. These files are basically everything a GIF can be but 1000 times better.”
In terms of how motion design will evolve in the coming years, Theoret expects to see the continued mainstreaming of 3D animation. While it has become increasingly used in design, it should only grow more important as computers continue to grow and catch up with the technology.
“3D motion graphics has become and will continue to become more popular and mainstream,” Theoret says. “Until the last couple of years, photo real renders and animations were only achievable on massive Hollywood-level budgets; but as the software to make these 3D animations has become more popular and easier to learn with thousands of tutorials available online, it is becoming much more popular.
Theoret adds that as “computers become more powerful and new software allows for the easier creation of things that were impossible to achieve a decade ago,” the next couple of years should yield even more impressive developments in motion graphic design.
Back to our original premise: One of the biggest ways in which animation has evolved in design is that it’s gone from once being utilized mostly for aesthetic purposes to being an intrinsic part of the user experience. And one of the most effective uses of motion graphics to improve the UI/UX of your design are with micro animations, according to Theoret.
Micro animations can “add to the interactivity of the user’s experience in a subtle and purposeful way,” Theoret notes. These are elements in design that have become so commonplace that we may not even think about them – hence, their subtleness.
“A prime example of this type of motion can be seen on the Spotify app when the user ‘likes’ a song,” Theoret explains. “A quick explosion of smaller hearts can be seen coming from the larger heart, giving the user a satisfying confirmation that their selection has been made. The animation is over in a matter of milliseconds but adds a bit of fun and interest to an important feature of the application.”
When you think about the purpose of design as it pertains to the user experience, it’s largely about helping users better interact with your app or website. This could include helping users navigate a page, taking them to content easily or portraying a message through an illustration to compliment a line of copy.
But by using micro animations, you can do all this in a way that can greatly improve the UX. Says Theoret:
"
Motion design can take these elements and elevate them, bringing them even more functionality, understanding, and engagement to a website or application.
"
Of course, as with any skill, Theoret notes that high quality work in motion graphics takes time and experience to learn. And there are missteps that one can make – such as adding too much animation to a video, which can lead to distracting visuals rather than being complimentary or serving as a story driving technique.
But as long as you mind the fundamentals involved when creating animation, motion graphics can play a vital role in your overall design.
“When used correctly, it can not only add visual interest and engagement to a web page or UI experience, but also assist in communicating a message or adding another level of understanding to a design illustration,” Theoret says. “Every design should be in motion when possible.”
