Designer’s Toolkit: Motion Design Storytelling
By Cameron Winchester
Many people think motion design is just about creating delight, but it’s so much more than that. User experience is an ongoing story, and motion design helps create the flow of that story. Motion design is an essential tool in the designer’s toolkit that extends the visual language and evokes the emotion of the brand.
When selling an idea to your client, static screens don’t always communicate your vision clearly, but incorporating well-designed motion helps show the bigger picture and the experience users are having.
Lyft vs Uber
If you’re designing a login window for Lyft and for Uber, the way the user should feel when interacting with each should be significantly different. Lyft is your friend (welcoming, affordable, and memorable) and Uber is your private driver (sleek, classy, expensive).
Here’s how the motion design for that would look:
I started with a login window because it is the first thing (usually) your user interacts with after downloading and opening your app. However, motion design reaches across the whole user experience — from transitions between different screens to button animations. All of these elements should evoke similar emotions in order to stay on brand.
Here’s another example of how motion design can communicate the experience of your design.
Snapchat vs Instagram
Snapchat is for fast and fun mobile conversations. And because of that, Snapchat can afford to create some fun motion transitions and actions that sometimes feel a bit random (or perhaps whimsical), though still fun and quick. I’ve even caught myself replaying Snaps or moving through navigation just to see the animation again. It’s exciting and really enhances the experience of Snapchat.
Instagram is about capturing and sharing the world’s moments, so most of their animations have no fluff. They just want to be able to consume your feed of photos as quickly and easily as possible. Most of their animations or transitions are simply sliding screens in and out of view.
Here’s how that motion looks:
Motion design helps your users’ brains orient themselves within any given screen and guides them to the actions they need to make. It also creates a connection between the interaction and visual language that clearly communicates the story of the experience. The purpose of motion design is not only to delight but also to convey the brand attributes and inform.
