“Despite having so much potential, motion is perhaps the least understood of all the design disciplines,” writes Jonas Naimark, a motion designer on the Material Design team at Google.
Jonas argues that while motion helps make UIs expressive and easy to use, it’s one of the newer members of the UI design family. This can lead to confusion, with many designers thinking motion design is too complicated or simply not knowing how to choose the right values.
To help you get more comfortable incorporating motion into your UI work, we found five stellar examples on Dribbble that can serve as inspiration:
Hello, is it they/them you’re looking for?
The Google Translate team is working on reducing gender bias in their translations by showing both the masculine and feminine translation for gender-neutral words and phrases.
To help showcase these translations without overwhelming the user, the design team uses simple animations to focus your attention on one piece of information at a time.
For example, when you enter the phrase to be translated, the text field stays compact. As you finish typing the phrase, the box automatically expands to show you the translations.
Fishing for signups
This animation adds some whimsy to the account page while still staying on-brand. For users who need to register for an account, the fisherman looks like he’s dozing off as he’s waiting to catch a fish; however, if you choose to log in with an existing account, the fisherman stands tall as he shows off the fish he caught.
This is the captain speaking, your flight is now in motion
Adding motion to this flight check-in UI adds credibility and excitement. When you click on your flight, you see your ticket information and a graphic of your plane flying across the sky. When you click to choose your seats, you are transported inside that very plane, making the experience feel more real.
It’s not the size of the wave, it’s the speed of the download
By Pedro Aquino
This micro-interaction uses motion to add visual interest to a less-than-exciting action (downloading a file), and then helps you track the progress. When you click the download button, the circular arrow icon moves front and center, displaying the status of the download. When it’s complete, that same circle drops into a new button, allowing you to open that file.
Make your money move
By tubik
Color and animation are used to make this budgeting app more organized and easier to understand. The pie chart is color-coded based on each person and when you click on a piece of the pie, it transitions into a bar graph that incorporates the same colors and also drills deeper into each person’s expenses.
Want more motion design inspiration?
Emily has written for some of the top tech companies, covering everything from creative copywriting to UX design. When she's not writing, she's traveling the world (next stop: Japan!), brewing kombucha, and biking through the Pacific Northwest.
