What motion design is - and why you should use it
Before looking at why you would use motion design, it’s important to know what it actually is.
Motion design can mean different things to different people, depending on the industry they work in. In TV it can mean a title sequence, for someone working in UI it can be how a navigation opens.
Motion design is really an umbrella term, rather than one single discipline. You can also call it animation, but this doesn’t really help narrow down a definition, as people tend to think of ‘animation’ as being on a grand scale and involving characters, like the animated movies of Disney and Pixar. In reality, animation (or motion design) can be anything from small interactions on a mobile app to opening credits for a feature film. It could be 2D, 3D, hand-drawn, clay-modelled, realistic, cartoon, cell-shaded, the list goes on. Whatever the form, I typically think of animation of anything that moves that isn’t shot film footage (although footage can be used in tandem with animation so even that definition doesn’t really work it seems…)
Living in the digital age and with the rapid increase of social media, motion design is becoming such a normal part of life that often people don’t even notice it, myself included. The Citymapper App search interaction, for example, was pointed out to me by a colleague. It’s an app that I regularly use, but I’d never noticed before how the tiny face in the magnifying glass changes expression when I search for a location. And who’s actually sat and watched a football match and questioned whose job it is to make the score or team line-up graphic? These are all examples of motion design, but in such different sectors it’s hard to see them as the same.
The best way to understand motion design is to become aware of it. Take note when you’re using your phone and you switch from an app to the home screen. Look at the ads on TV and at the digital screens alongside tube station escalators and study how they move and change.
Disney animators Ollie Johnston and Frank Thomas introduced the Twelve Basic Principles of Animation in their book The Illusion of Life: Disney Animation, published nearly 40 years ago and often thought of as the animation bible. These 12 principles were created to give an illusion of reality by adhering to the laws of physics. Most of these principles are more relevant to character animation, but with the increase of motion use in UI, some of these principles should be followed across the board.
Two of the most important principles are “Slow In and Slow Out” (now more commonly known as ease in and ease out) and “Timing”. These are the key to making animations pleasing to watch. You’d want something that is moving from one place to another to ease slowly in and out; this is how things move in the real world — the physics that Johnston and Thomas built their principles from. However, something that starts off screen should come in quickly and then ease into position. Something that moves off screen should do the opposite.
Then there is overshoot, bouncy and linear movement which can dramatically change the aesthetics of what you see. These types of movement give character to an object and refer back to the 12 principles of animation. They all have their specific functions but using them requires careful thought. For example, I personally wouldn’t recommend using a dramatic overshoot (where an element goes past its target and bounces back) in many aspects of UI as it’s time-consuming and this could adversely affect the user experience.
Motion design is used widely across the field of UI, and I see UI animations fitting into three categories: transitions, micro interactions and graphical. Transitions are used when a user changes apps or when moving between sections. Micro interactions are things that happen when you type your password in wrong, or you react to someone’s photo on Facebook. They are often barely noticed but they’re still pleasing when you do. Graphical animations are those that don’t have a purpose apart from to look appealing, for instance a splash screen of a app loading or something to illustrate a point on a website.
Now we know what motion design is, it’s obvious how it adds value
All elements created by a brand make up its identity: the typography, the logo, the layout of print publications, the advertisements on the tube — they all sing the same tune and portray its values and character to the world. The advent of digital means that motion design has become an integral part of that and it’s important to approach it with much thought and consideration.
Using motion helps guide the focus of a user, allowing a journey to be completed without breaking the continuity of the experience. It also keeps the user entertained while boring stuff is going on behind the scenes, such as fetching data or loading content, and it hints at what action will occur if the user completes a gesture.
There is a careful balance needed when using motion design — there is such a thing as too much motion. Something that often happens when people first start animating is that they throw all the tools and techniques they’ve learned at one project, but they won’t all be suitable for that specific purpose or brand. Movements need to be thought about carefully; good motion design can dramatically improve the experience of a website/app which in turn reflects positively on the brand.
People now expect motion design, even though they don’t realise it! They want fluid movements and satisfying nudges and you just don’t get that from static graphics.
Just remember that all motion should have a reason — to entertain, to explain, to move the experience forward — rather than being there for the sake of it.
The BIO Agency is a customer-focused digital transformation agency
💡Find us here weareb.io
📥 Sign up for our newsletter here weareb.io/bionews
