Designer’s Toolkit: Motion Design Storytelling

Many 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:

Example of a friendly prompt transition

Example of a sleek prompt transition 

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:

Example of a fast & fun transition

Example of a simple sliding transition

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.

3 Comments

David Pasztor
What tool do you use for creating animations?
Cameron Winchester
@DavidPasztor I use Adobe After Effects
download free music
The new Zune browser is surprisingly good, but not as good as the iPod's. It works well, but isn't as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that's not an issue, but if you're planning to browse the web alot from your PMP then the iPod's larger screen and better browser may be important. download free music http://submp3.com

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment