During the past decade, the role of designers has changed dramatically. We’ve largely shifted from print to digital media, from designing desktop experiences to responsive mobile-first websites — and from a static environment to one that is quite dynamic. Throughout this evolution, we’ve had to adapt to several very different roles and expand our skill set and vocabulary in kind.
While designers have become incredibly well-versed in thinking in terms of systems of reusable components and atoms, design tokens and style guides, far too many of us are still taking a static approach to designing for the web. At our core, designers are storytellers. Our job is to take our clients’ goals and communicate them to their end users in an engaging way. And in a marketplace that’s constantly evolving, we not only have to engage our audiences, we have to captivate them. Animation is one of the most valuable tools we have available in our design toolkit to communicate the tone and story of a brand.
Using Motion to Convey Meaning
We can find inspiration for incorporating motion into our designs all around us. A whole culture of inspiration board websites have sprung to life to help with this — and you can even learn a lot about motion theory just by watching TV with a critical eye. All of the basic tenets of motion design are present in every show or movie you watch. The role of designer for the web is similar to that of the director: The objects on your canvas are the actors, and your job is to choreograph their movements throughout the scene.
Let’s take this scene from Office Space as an example. If someone asked you to describe this scene, even without knowing the context in which it appears in the film, I think everyone would pretty universally be able to identify that there’s some underlying anger attached to this printer. The soundtrack does a lot of the heavy lifting to convey this, but rewatch the clip on mute, and you’re still able to pick up on this through the body language of the characters and the way the shots are framed.
To abstract that further, let’s consider this video created by the psychologists Fritz Heider and Marianne Simmel. In the course of their research, the scientists would ask their patients to watch the video and describe what they saw happen. Invariably, the viewers would assign human characteristics to the shapes they saw. Try for yourself — it’s hard not to construct the story as you watch.
Motion design is a lot like directing a silent film: You must work within the constraints to tell your client’s story. You’ll find that motion can often help communicate brand identity and tone far more effectively and universally than even copy can, as everyone can understand a playful animation or a tense one.
Setting the Right Tone Out of the Gate
During brainstorming exercises in our discovery process, we’ll often ask our clients to throw out words that they associate with the project. Looking through these words provides a lot of inspiration about how to bring our clients’ work to life with animation. Sometimes even more effectively than words, we can leverage motion as a universal tool for expressing personality.
Take the examples below. The content is the same on both the left and the right, but the two animations convey seriously different tones. The animation on the left has an elegant approach, conveyed through a much more subtle transition and a longer duration. The reveal animation on the right feels comparatively much more energetic as it springs across the page.
Our tools export jpgs rather than code, a side effect of this limitation is many designers wait until the end of their process to even start thinking about how they want their designs to come to life. If you’re not thinking about how to apply motion to your designs at the beginning of your process, and waiting until the end to tack it on, you’re missing out on a mountain opportunities to better tell your story. In fact, you can end up with a site where nothing really makes sense. If a modal slides in from the bottom and out to the left, for example, it results in the kind of inconsistencies that bewilder and confuse users.
Like color and typography, motion can be patternized and re-used throughout your process. By thinking about animations early on in this way, you can enable your designs to come to life more easily, as these patterns become yet another element that can be applied easily to a component.
A Peek Behind the Curtain: The Elements That Make Up the Strategy
At its simplest level, a CSS animation consists of three variables:
1. The property to be animated
2. The duration of the animation
3. The timing-function for the animation
Transition: [property] [duration] [timing-function];
The term “property” here refers the CSS attributes that you wish to animate. This would most commonly be things like: transform (for animating position, scale, rotation), opacity, color (or background color), or any other property you might want.
Duration is simply the length, and is the first element of an animation that can be systemized across your design. By standardizing and defining your animation durations at a system level, it allows you to maintain and update your animations across a project with ease. The timing-function of an animation refers to how quickly a property is animated across a duration. If that’s a little confusing to take in, consider the following graphic:
All of the squares are animating across the field for the same duration, yet your eye perceives certain squares as moving at different speeds. In the graphic above, the top five squares represent the default easings that are available in css. These are generally enough for simple effects, like a link hover color change, but when you want to get into the nitty gritty of defining a brand, you’re going to want to familiarize yourself with the cubic-bezier function.
The cubic-bezier function allows you to define custom easings by specifying the speed at which an element moves across a plane, giving you a lot more control over how you define your brand’s animation. The formatting can be a little difficult to understand, but luckily some kind people out there have created tools and resources you can use to get a better sense of the kind of easings you can create.
Mess around and create some custom easings, or pull some values from easings.net and assign them to custom timing-functions; these, along with your predefined durations, will allow you to start defining consistent animations across your design system, making your developers happier and giving your site a more cohesive and unified feel.
Looking ahead, animation will remain a vital tool for telling client stories and engaging end users because it has proven so effective. And while nuances in the approach may change, the strategy will stay the same: consider your client, and design accordingly.