The Art and Science of Designing With Motion
A crash course for motion design beginners
One year ago, I knew next to nothing about building motion. It didn’t help that the prospect sounded scary — motion means animating, right? And animating means I have to—what—design across time? I just mastered organizing my Sketch symbols, but okay.
After several months of diving headfirst into After Effects (it’s the industry standard for motion graphics), I’m glad to say I’ve learned the ropes of both After Effects and motion design in general. If you’re new to motion design or are looking to add it as another skill in your designer tool belt, these tips can help you master it a little faster.
First, think like an engineer
The science: Learning how to physically build motion
The first step to learning how to build motion is to learn how to speak the language. Some of the technical aspects (and the overwhelmingly dense After Effects interface) became less scary after I familiarized myself with a few key concepts.
Easing is the acceleration or deceleration of motion between two key points. “Ease out” refers to motion that decelerates as it reaches its end value and is a common form of easing in UI motion (just ask Google).
Interpolation is the calculation of values in between starting and ending values. Easing curves affect the interpolation of two key frames.
Key frames are specific values in time. Key frames are what you create and manipulate in most animation programs. They mark the initial, in-between, and ending states of an object.
Duration is the length of an event from start to finish. In web and app development, this is measured in milliseconds, but in traditional animation tools like After Effects, you may be working with frames per second. For example:
- Shortest amount of time perceivable by the human eye = ~3 milliseconds
- Button depress and release upon click = ~9 milliseconds
- Card expanding upon tap on mobile screen = ~18 milliseconds
Parenting is creating object relationships by linking one object’s properties to another’s.
Now, actually applying these concepts can take a bit more grunt work. After all, you’re working in the fourth dimension! That requires a good deal of planning, structure, and experimenting. For example, if we want to animate a card expanding into a full-page takeover, we have to consider:
- What do the initial and end states look like? (This is usually solved for in initial static design phases)
- How soon after user input (click or tap) does the card begin to change scale?
- Which elements will move continually between states and which will fade in or out?
- How long does it take for the card to move from its original scale to full size?
- How will each element’s values change over time?
Then think like a designer
The art: Understanding motion qualities, principles, and best practices
Once you master the technical aspects of building motion, building a successful animation comes down to its mindful application. Luckily, the foundations of designing statically and designing with motion aren’t as different as you may think — there are steps we can take in both processes to support the user or to express a brand language.
To get started, answer a few questions:
How important is this interaction?
When it comes to motion design, less is more. Don’t overwhelm users with too much — they don’t need a loading bar that twists itself into a checkmark then rotates in 3D and shoots confetti from both ends. We can draw just as much attention to important interactions by changing one or two values over time, like a swift change in color and increase in scale.
How can this interaction express the brand language?
When it comes to expressing brand language, describing motion design is just as important as the words, typography, color, and images we use statically. Motion can be just as expressive as it is functional.
- If the brand is playful and fun, there may be sharper easing curves and larger shifts in scale.
- If it’s personal and straightforward, try softer easing curves and shorter, more abrupt moments of motion.
- Keep experimenting with speed, duration, and easing to see how that affects the motion. You might be surprised how something small can change the feeling of the motion.
How can motion help support the user experience?
We should also consider the functional purposes of motion. How can motion impact the users’ experience and perception of an interaction? How can we help them know where they’re going?
- Be mindful of the direction of motion, especially in screen transitions (e.g., if a user clicks a “→” button, the destination screen could move from left to right on top of the current screen.)
And, finally, how are all the elements choreographed together?
Remember when I said “less is more”? That’s especially important to remember when choreographing motion together. What seemed like an elegant interaction in isolation may be overwhelming in the context of the entire experience. Once you’ve built a sequence of events, it’s best to take a step back and replay it several times to see if and where you can remove complexity.
Of course, building motion is much more complex than just answering these four questions, but it’s certainly a great place to start. Luckily, there are other amazing people on the internet who have written extensively on motion design best practices.
Here are a few articles I reference often:
- The ultimate guide to proper use of animation in UX
- Motion design in digital products: A white paper
- Creating usability with motion: The UX in motion manifesto
- How do design systems incorporate motion design?
Finally, observe and learn
Any successful designer is like a sponge, observing and absorbing the experiences and information around them. Take your new eye for motion into the world. Notice not only the static visual design details, but also how those details change over time. The next time you’re perusing the digital world, keep an eye out for:
- How long it takes content to load
- The direction pages move as you navigate further
- How the motion feels (e.g., bouncy and playful or straightforward and pragmatic)
- How motion helps you understand where you are in the architecture
- How content maintains continuity between states? (e.g., from a list item to an expanded card)
Originally published in thirteen23’s agency publication, The Garage.
