Motion design is the discipline of applying motion – or animation – to graphic design. It follows suit that your favorite tenets of design would make their way into essential motion design principles that encompass all the subtle and dramatic ways we bring characters, movements, and scenes to life.

While many design principles are broadly known, like repetition or rhythm for instance, the way in which they apply to motion graphics is less rigorously explored. Below, we’ll break down our favorite design principles and how we can think about them when you layer a dynamic motion into the design.

Motion Design Origins

Motion design as a field has been around for over a century, with origins tracing back to Europe. In its earliest days, only the most skilled artisans were known for motion design. After the advent of computers in the mid-to-late 20th century, motion design experienced a boom that has only continued to grow as home computers and supporting software like the Adobe Suite and apps like Fable have made motion design more accessible to designers and novices alike.

Charting the history of design – or more specifically graphic design – gets a little murkier, because technically it can start at the dawn of time. The most widely accepted origin of graphic design dates back to the invention of the printing press in the 15th century. That’s around the time we saw the first logos, with all of our most common graphic design applications following shortly thereafter – advertisements in the 17th century, the first design agency formed in the early 20th century, and of course the shift to digital by mid-century.

Graphic design established many of the founding principles upon which our most successful motion graphics are made. The article Motion Design vs. Motion Graphics deep dives into the differences. Here, we’re breaking down eight core principles of graphic design to apply to your next animation, for motion designers and motion newbies alike.

Principles of Design

• Repetition

• Rhythm

• Whitespace

• Variety

• Movement

• Hierarchy

• Unity

• Gestalt Theory

Repetition

Repetition is exactly as it sounds – reusing (or repeating) the same elements or facets of a design throughout your creation. It’s easy to think of this as a pattern, but it’s technically not the same thing. Repetition is based on the elements, while pattern is generally indicative of a particular style or aesthetic.

This principle is one of the most fundamental, but essential to how we design. We expect a logo to animate the same way when we see it. In user experience (UX), repetition allows motion designers to create more intuitive frameworks that make websites, apps, and platforms easier and more pleasing to navigate.

Check out our Fable Academy series, 30(ish) Clicks, to create this endless vortex.

Repetition does not always need to mean the exact same thing every time. This design principle can help us create a unifying theme or look-and-feel to a piece. And while in graphic design repetition exists only in space, one of the amazing facets of repetition for motion design is that it can apply to both time and space. An infinite loop is repetition applied as a motion design principle – repeating the same motion over and over again.

Rhythm

Rhythm builds on what we learned with repetition, but applies an important additional layer – intervals. While repetition is simply an element repeated over and over again in design, rhythm employs a sense of pace, essentially how and when we see what and where. If that sounds confusing, it’s helpful to think of rhythm in the traditional sense – your ears pick up on rhythms in sound, just as your eyes can follow along with a rhythm they see before them.

There are several different kinds of rhythm – regular, progressive, random, flowing – each of which determine the space of those intervals and the way in which we see them. Random, as you might guess, means that the rhythm is not ordered at all, whereas regular creates a pattern from a steady rhythm.

In motion design, we can use rhythm to set a pace and sense of progression for the movement. If you want to see a very literal example of rhythm in motion design, check out the above music video from Arctic Monkeys for “Do I Wanna Know?” in which the motion designer employs rhythm alongside repetition to create a minimal yet visually rich story.

Whitespace

Whitespace is a commonly used term across teams; product strategists may be thinking about whitespace as unexplored areas of the market, for instance. For designers, whitespace means all of the areas of your design that have no elements in them and therefore are blank. On this blog post, you’ll notice areas in the margin, because the text does not creep up right to the end of the browser window. That’s whitespace (also sometimes known as “negative space”).

Graphic designers, UX designers, and motion designers all use whitespace strategically and thoughtfully to create beautiful designs. Every great design has areas of negative space, from margins like we discussed above, to kerning in typography, to both macro- and micro- uses of this design principle in motion, so we can actually understand and appreciate the movement we’ve created.

Funnily enough, though the design principle is called whitespace, the space doesn’t have to be white at all; it can be any color on the spectrum.

Whitespace also has a special connotation for motion designers. It’s not simply between the space where there are elements and where there aren’t, but it can also apply to time. Whitespace is the moments in time and space where there is no motion, in contrast to where and when things are animated.

Variety

You may have heard the classic saying that “variety is the spice of life.” While we won’t be trading in idioms anytime soon, that saying gets at an essential truth of motion design, and why variety is such a frequently used design principle.

Variety in design means that designers (or motion designers, UX designers, graphic designers, even interior designers) employ several elements to create more visual interest in their work. Variety allows us to captivate an audience as well as pull attention to specific areas of a piece. We can think about this in nearly every design-oriented and not design-oriented area of our lives. If you go to a restaurant and a menu has two items, you’re going to spend a lot less time figuring out what you want for dinner than if the restaurant has 200. That second restaurant offers more variety.

In motion design, variety means we’re using more (varied) elements to draw interest throughout our piece. Like repetition, this means in time and in space, using various elements that you see on the screen at present or offering variety in what you may see next.

Movement

Movement might feel like the most intuitive design principle for motion designers – after all, what does ‘motion’ mean anyway?

The movement principle of design refers to how the viewer’s eye is captured throughout the composition. Movement can keep a viewer engaged, and certainly can be achieved in graphic design alone, but takes center stage when we consider applications to motion graphics.

Elements, lines, color, and whitespace can all be employed to show movement. In a text animation like this one, we’re conveying movement within the lines themselves, the dots taking us through the journey, color, and whitespace (in this case, our green). You could simply fix your eye on any point or place in the composition, but how much more interesting is it when you follow along with the artist’s intent – exactly what they’ve captured by applying the principle of movement.

Hierarchy

You might think of hierarchy in a number of contexts – you to your boss, a royal hierarchy, even the hierarchy in a game of chess. In design, hierarchy applies to the order in which we show elements, and how that order informs importance.

Hierarchy helps designers achieve a thorough and thoughtful composition through adding structure, emphasis, and an easy queue for the viewer to understand what they are seeing. When we are using hierarchy, we are typically using visual elements like color, size, alignment, or scale to contrast and determine what is most important for our viewer to comprehend.

One of the easiest ways to understand hierarchy is to look at a website. UX designers employ hierarchy all the time to determine what is the most important action they want a user to take. A website might have primary bolded copy with subtext that’s in a smaller or different font. We can assume that the primary bolded information is our most important. Similarly, where things fall on the page is important, with many website designers taking an approach of putting the most important information “above the fold” – a traditional newspaper term that simply means “before you need to scroll.”

Check out our Fable Academy series, Fast Fables, to animate your own rocket.

In the website example, we’re talking both about informational hierarchy and design choices that help convey that. Within design and motion design, hierarchy can be used in color, alignment, depth, and movement. If we look at the example above, the rocket’s alignment in the foreground lets us know that it’s the highest in our hierarchy.

Unity

There’s a reason that we’re talking about unity towards the end, and that’s because unity encompasses so many of our other elements that it’s impossible to consider as a stand-alone design principle.

For designers, unity can often be thought of as the overall feel – the harmony of all of the elements of your design. How do they all come together? As separate elements they may say one thing, but what does our composition look like when we place all of these beautiful principles of design together? Certainly we won’t be using all design principles at every occasion, but unity refers to the way in which the elements work together. For designers, this is about maximizing the impact and visual interest of those elements, not simply having them all in one piece.

In motion design, unity works in the exact same way, we’re just considering it within the world of a motion graphic. When we add movement to those compositions, we need to ensure that in every frame, we have unity of our elements, not simply in one static image.

In the above example of a jelly bean’s journey to a summer body, there are a lot of elements going on – see if you can name them. There’s movement, whitespace, repetition, hierarchy, rhythm, and a lot of variety. But unity is what makes this piece feel like it’s come together and is not a chaotic mixture of elements, but rather a thoughtful, well-executed story. We can consider a puzzle a helpful metaphor; each individual design principle is a puzzle piece, but that finished picture when it all comes together – that is unity.

Gestalt Theory

You may have heard the term ‘gestalt’ in a psychology class. For psychologists, gestalt simply means that the whole is understood as more than the sum of each of its parts.

But what does this mean for designers? It’s not so different; we’re simply taking that same principle of perception and applying it to our composition. In a sense, gestalt theories of design, and the associated design principles, assert that our brains want to organize and simplify what they are seeing. We want to make sense of what we’re seeing by nature, and our brains will do the legwork to organize and see patterns.

The exact number of gestalt design principles, sometimes referred to as the principles of visual perception, are up for debate, as there is no one originator of the gestalt theory as applied to design. Here are a few of the essentials that many motion designers use in their day-to-day animations:

Similarity

Remember that the gestalt principles are all about how we perceive elements. For similarity, this principle simply means that when elements appear to be alike, our brains group them together.

You can use similarity with color to, for example, differentiate foreground and background, employing certain groups of colors to represent one or the other.

Proximity

The gestalt principle of proximity states that when things are near each other, our minds are going to think that they are related, versus when they are further apart. Our brains intuitively will group what’s close as alike, and if there’s whitespace in between the next thing, we’ll see it as different.

Graphic designers use this for data visualizations all of the time to showcase big concepts in quite simple ways. In this work from Pentagram’s Giorgia Lupi, the designer uses the principle of proximity to help delineate between activities during this year in the life of the COVID-19 pandemic.

Now let’s talk about motion design. In this example, even though the squares are different colors, their proximity to each other, particularly as we are taken out to see more than just the two, shows us that we should perceive them in the same or similar ways (in addition to their rhythm and similarity!).

Figure/ground

Figure/ground, sometimes referred to as “figure and ground”, is all about how our elements relate to one another within the space – particularly positive elements and white space.

Our minds want to find what elements they should be looking at within a composition, and will quickly determine what is negative space, but the relationship between the figure and ground is key in aiding that process. That relationship is either stable or unstable based on how designers choose to construct their compositions

Check out our Fable Academy series, Fast Fables, to design this sky fishy.

In a Rorschach test, for instance, designed to challenge what we see, there’s an unstable relationship between figure and ground, whereas, in the motion graphic above, the relationship is stable as we know what we are meant to be looking at – our delightful fish. In these two examples, you can see that the principle works in the exact same way whether you’re looking at a static image or a motion graphic; it’s all about providing clarity (or consciously choosing not to) between the positive elements and white space.

Closure

Closure is a particularly interesting gestalt principle, because it gets at some of the truly unique ways in which our brains work. Closure simply indicates that our brain will fill in the missing parts of a design to imagine what we’re trying to convey as a whole.

Designers employ this idea all the time – whether it’s in UX design where they may fade an element to indicate the need to scroll, or within a logo. Think of the NBC logo for instance. The principle of closure allows us to determine that those shapes coming together is in fact a peacock.

For motion designers, it works the same. In this example, there is no moment where the full circle is conveyed on our screens, but our brains are working to fill in that gap, knowing that the circle is a key element at play. Though we may only see a small fraction of that curve at any given millisecond, our brains are using the closure principle to understand what the motion designer is aiming to convey in this motion graphic.

Continuity

The principle of continuity, sometimes called continuation, tells us that our minds want to follow the simplest path laid out for us. If there’s a straight line, we want to follow it to its end. If there are elements placed in an order, we want to follow that order, not deviate our perception from it.

In graphic design, we use the law of continuity to create a sense of progression, or in the case of UX, to ensure that our users are drawn to the next thing we want them to see. Continuity can come into play when we place items in a carousel, or when we take users through any kind of stepped diagram.

Check out our Fable Academy series, 30(ish) Clicks, to develop mesmerizing motion.

Continuity in this piece shows us how continuity comes into play for motion design. Our eyes follow those lines as they move inwards towards the center and back out, rather than staying along the borders or even trailing off to the whitespace along the borders. That’s continuity at play, and we’ll watch it on a loop as long as it captivates us.

Motion Design Principles

While we’ve been covering a selection of principles of design applied to motion, motion designers have principles of their own.

In Disney Animation: The Illusion of Life, acclaimed Disney animators Frank Thomas and Ollie Johnston explore the history and processes of Disney animation. They outline 12 principles of motion in what has become known as the bible of animation among enthusiasts. They are:

• Squash and stretch

• Anticipation

• Staging

• Straight Ahead Action and Pose to Pose

• Follow Through and Overlapping Action

• Slow In and Slow Out

• Arcs

• Secondary Action

• Timing

• Exaggeration

• Solid Drawing (same or different as Weight)

• Appeal

Motion designers have occasionally further distilled this list for motion graphics purposes. Jorge R. Canedo of Ordinary Folk created this handy graphic that applies Thomas and Johnston’s 12 animation concepts to the work of motion designers.

So here’s your challenge. Take the below motion graphic. How many of our design principles do you see in use? How many of the above principles of motion design do you see in play?

[insert IG]

If you noted several, good job. There are even more design principles working to create this stunning movement – principles like movement itself, unity, and proximity (and other elements of the Gestalt principles of design). Stay tuned for more on our design principles series.