The 12 Principles of Motion Graphics Design
In the age of the digital device, adaptive technology and moving interfaces, motion graphics design has quickly become an ubiquitous part of any creative designer’s skill set. Whilst mastery of the specific tools to design and move graphics, such as Houdini, After Effects, or coding languages like CSS3 and HTML5, are necessary, that doesn’t always correlate to a mastery of the craft. To create compelling motion graphics, designers need to first understand the grammar of motion in animation, the reason why things behave as they do on screen.
The lexicon of movement in animation has been around for a lot longer than the popularisation of the practice of motion graphics and the development of the advanced tools we listed above. And will most likely continue to guide designers long after the tools have developed even more.
One of the most influential ideas within motion animation is the 12 Basic Principles. Which were first introduced in the The Illusion of Life: Disney Animation, written by then Disney animators Frank Thomas and Ollie Johnston. Two of the master animators Walt Disney referred to as the ‘Nine Old Men,’ Thomas and Johnston set out to translate their comprehensive knowledge of movement in animation into 12 essential principles. These principles or guidelines, set out how to ground animated movement in realism, in order to construct a more convincing animated world.
No matter whether it is 3D, hand drawn or experimental animation, these 12 principles guide the behaviour of almost any motion-based design.
Although, as we outlined in our blog post defining what motion graphics are, there is a distinct difference between motion graphics and character animation, it is still essential for even the most abstract motion graphics project to make clear implications of the movement of it’s subjects.
Whilst some of the 12 lend themselves more easily to motion graphics than others, there are valuable parallels in each that can be related to motion graphic design.
The 12 Principles of Motion in Motion Graphics Design
1. Squash and Stretch
It is important that an object’s weight and volume is shown when it is in motion, and how this weight and volume affects the object’s movement.
Exaggerating the object in motion, such as stretching it out when it is falling and squashing it when it lands, like with a ball, gives the object a more realistic look.
When animating flat tone graphics in motion design, the subtle use of the principle squash and stretch to slightly morph items can add a sense of volume and weight.
In and of itself, staging is pretty self-explanatory. Taking influence from the most commonly established theatrical principle, staging is simply the practice of presenting an idea in a way that it is most clear.
If a designer has created a scene that is in perpetual motion, for contrast they may remove all extraneous detail from the background, or choose to centre the focal point, in order to locate the story, create focus, and clarify what exactly is happening in the scene.
In our series of presentations for Equinix EFS, the layers of movement and objects, and the depth of field created through playing around with the height and width of the scene depicted, through extending spiral like shapes upwards and off screen, represent the connectivity and enterprise of Equinix. Underlining their core brand purpose.
3. Straight Ahead Action & Pose to Pose
Straight ahead and pose to pose action both refer to drawing techniques that, respectively, can elucidate either a fluid or a more proportionally representative and convincing animation.
Whereas straight ahead is the process of drawing each pose consecutively, post to pose refers to the animation technique of planning key frames ahead of each other and connecting them afterwards.
4. Slow In and Slow Out
Physical objects don’t immediately start moving at full speed. They need time to pick up momentum, or, in reverse, to decrease speed, before they hit a full stop.
This same principle should apply to objects in animation.
Imagine you are watching a car begin to accelerate and hit full speed. When the car is moving slowly, the detail of the car is visible, yet, as it begins to accelerate, it begins to blur and become less clear. Just as speed affects visibility in the physical world, so should it in the animated. More drawings make action slower, by populating the screen, and fewer drawings quicken the pace of the action.
5. Solid Drawing
The principle of solid drawing is to effect a level of realism within your drawing, through the addition of good form and three dimensions. No matter the pose, motion or surrounding space, the character must work as a three-dimensional being with a solid form.
Arcs are the natural motion of the world we live in. When things are thrown, or fly, the conflicting forces of gravity and propulsion causes them to move in an arc between their start and end points. And even many of the natural movements of our bodies work in arcs.
Arcs give animation a more natural action and better flow.
7. Secondary Action
A secondary action is drawn to reinforce, and to add an extra degree of realism, to the motion of the primary action. In the physical world, a person rarely jumps, for instance, without moving any other part of their body to gear up for that primary action. Whether it is bending and preparing the knees or swinging the arms, these smaller actions help prepare the body for the main movement.
Even in motion graphics, where the subject of the motion is not necessarily a person or anthropomorphic drawing, secondary movements can still be useful to emphasise the primary. Whether it is a smaller object wobbling as a result of the movement of a larger object, like the ripples caused by the jumping of the lamp in the Pixar logo.
Timing is an essential part of all animation. It is a fundamental component of the way that frames are drawn and helps to establish the personality and emotions of characters through their expression.
Through timing, even flat shapes can be imbued with their own identities and motives.
A good sense of timing is also something that can aid a designer in conveying meaning no matter their technical skill level.
Appeal in animation doesn’t necessarily connote attraction, rather that something is eye catching, or has charisma.
In animation, a character can be enticing and appeal to the viewer no matter their attractiveness or the morality of their behaviour, because they are fun to watch. Within motion graphics, an appeal can be established even before movement through interesting composition, a beautiful typeface or juxtaposing imagery.
The principle of anticipation is one that most clearly acknowledges the part of motion in creating emotion, drama and pathos in the story on the screen. Whereas in film, music, character expression or script may create a dynamic anticipation of what is to come next, in motion graphics, anticipation refers to a series of small, preceding movements that announce a subsequent primary or larger movement.
Let’s take one of the major animations of the twentieth century, Looney Toons, as an example. If the animation shows a large boulder set precariously on the edge of a cliff face, with Wily Coyote standing just behind it, bending his knees and stretching out his shoulders, the audience can intimate his next action is one of physical exertion, of pushing the boulder off the side of the cliff and onto the Road Runner.
In our motion graphics presentation for Sabey Datacenters, the blocks sliding out of the way to create an opening create anticipation for, therefore a greater impact when the title, ‘Sabey’ appears.
Exaggeration in animation is the same principle as the theatrical technique of painting, or acting, for the back row.
It’s presenting the motion following the same essential mechanisms as in reality, but in a more extreme form, whether for comic relief, emphasis or for a stylistic choice.
12. Follow Through and Overlap
In physical reality, just as objects don’t reach full speed instantaneously, neither do they come to a complete stop all at once.
A good example of a real life object that acts as an exaggerated version of this principle is a plate of jelly. If you slide the jelly from across a table from one hand to the other, chances are that it will take a few minutes before the jelly settles back into a still state.
When an object is moved, even if the main body stops, limbs, offshoots or smaller sides of the object will continue to move afterwards before they catch up and settle.
In an animation we made to test out a lot of our generative and procedural techniques, it’s easy to spot our use of the follow through and overlap principle as the ground falls into the Ocula logo. Mirroring the ripples that would be made in the physical world as the jelloid ground falls into itself gives the motion a far more naturalistic look and feel.
By following these 12 principles of animation, motion graphics designers can add a depth and level of realism to their work that will enhance the aesthetic and movement of the scenes and story. In fact, with such a prevalence of high-level motion graphics and animation permeating through our lives across everything from our computer screens to our TV sets, it’d be more noticeable if these basic principles were not followed.
To build up your understanding of these essential grammatical rules and principles, simply keep an eye on the next advert, film or corporate video and see if you can spot any of them in use.
Alternatively, contact us to see how motion graphics can enhance your communication strategies.