What is motion design?

You may already know the term graphic design. This is the process of conveying
messages through visual content. You’ll see graphic design on posters, advertisements,
brand logos, website or mobile app interfaces and so on.

Here’s where motion design – sometimes referred to as motion graphics or motion

graphic design – comes in. Motion design is using animated graphic design elements
(and optionally, sound) to convey messages. The Society for Experiential Graphic
Designs (SEGD) describes it as “a discipline that applies graphic design principles to
filmmaking and video production through use of animation and visual effects.”
Although the SEGD specifies filmmaking and video production, it also has a huge
presence on the web and mobile.
 What is motion design?
If you’ve checked your phone, visited a website or even checked your
smartwatch any time today, you’ve probably come across examples of
motion design. Think of any time you’ve ‘liked’ something on Twitter
– the heart icon turns red, accompanied by a delightful burst of confetti.
Or think of how Duolingo’s mascot cheers you on whenever you
complete a lesson. That’s motion design.
How is motion design different from animation?
Animation is an umbrella term that covers all sorts of animation
formats, such as claymation, animated cartoons, anime, 3D animation
and so on. So where does motion design fit in? It depends on who
you’re asking.

Some people think of motion design as a subset of animation. Austin

Shaw, a professor of Motion Media Design, refers to it as a form of
animation in Design for Motion. Others, like Brian Stone and Leah
Wahlin in The Theory and Practice of Motion Design, refer to it as a
synthesis of animation, visual communication, sound and other
disciplines.

Whether you think of it as a form of animation, or a different

discipline that involves elements of animation, there are a few ways it
differs from general animation.
 How is motion design different from animation?

General animation typically:

• Covers a broad range of techniques and styles
• May have more focus on storytelling
• Tends to be longer

Motion design typically:

• Refers to animated graphic design elements
• May have more focus on visual communication, rather than storytelling
• Tends to be short
Why motion design?

Modern motion design was influenced by the work of artists like Saul Bass, who
created animated title sequences for films like Psycho and Vertigo in the 1950s.
In the next few decades, commercial motion design was mainly used in the post-
production industry for film and television.

Then computers became cheap, fast and widely available. Not only did this
make creating motion design more accessible, but it opened up a whole new
medium for displaying motion: the web. And in the past decade, the growth of
mobile phone usage meant that motion wasn’t just limited to computer screens,
but to billions of pocket-sized devices.
 Why motion design?

With this, motion design has become a crucial part

of building effective user interfaces and user
experiences (UI/UX) for the web and mobile, as
well as creating engaging content – especially in
marketing. Here’s how it supports these areas.
 Why motion design?
• Give feedback – Animation prompts a user when a successful (or an unsuccessful) interaction
has taken place or is taking place. For example, think of a time when you’ve used Google
Voice Search – or any other voice-based assistant. Typically, you’ll see elements that animate
when as you speak, letting you know that the website or app is actively listening.
• Show loading states - Delays in website loading times can impact conversion rates. Showing
an animation (such as a progress bar or loading spinner) engages your users – and reduces
the chances that they’ll navigate away.
• Give navigation cues - Animation helps give your users cues about where to go next. For
example, in sidebar menus with hamburger icons, the hamburger icon might be animated into
a ‘close’ button when the menu is opened. This lets users know they can click on the icon to
close the menu.
• Show connection between states - For multi-step processes, such as onboarding screens,
using animation (such as a slider that shows your progress) gives users context on how
different states are related.
 Why motion matters in marketing?
• Evoke emotion - Animation brings static characters and elements
to life, which makes it easier for users to emotionally connect
with.
• Increase engagement - Motion increases the chance that users
will interact with your content. For example, The Guardian used
Lottie animations for an interactive piece on British wildlife.
According to BuzzSumo, this page has over 2,000 Facebook
shares!
• Increase conversion - Highly engaged users are more likely to
convert. Effective use of animation can potentially lead to higher
revenue.
• Be more memorable - Moving images are more easily recalled
than static ones. Using motion in your branding (such as
animated logos) is an easy way to make your brand more
memorable.
 Why motion matters in marketing?
• Tell your brand story - How do you decide which
brand to buy? It’s often about how you feel towards a
brand, not what you think of its products. With motion,
you can tell your users what your brand is like –
whether it’s playful, innovative, sophisticated, quirky
or so on through visual storytelling.
• Deliver immersive experiences - Motion delivers
immersive experiences and makes dense information
easy to understand. For example, Vividbooks
combines Lottie animations and augmented reality to
create interactive textbooks. Each lesson transforms
educational content into an engaging, immersive
experience for students – a feat that would be a lot
harder without motion.
Familiar with motion design tools
As a motion designer, you’ll need to get familiar with different types of software. Here are a few
common ones:

• Adobe After Effects - If you had to answer, which software is the best for motion design, the
answer would be probably Adobe After Effects. It is the industry-standard software that’s used
for motion design and animation.
• Adobe Illustrator - Used to create vector images that will be used in your motion design
projects.
• Adobe Photoshop - Used for general image editing or creation, such as designing storyboards.
• Adobe Premiere Pro - Used for video editing and creation – applicable if you are producing
motion design videos.
• Cinema 4D or Blender - Used by designers who need to incorporate 3D work.
The 10 principles of animation
In 1981, Disney animators Ollie Johnston and Frank Thomas proposed the 12 basic principles of animation
in their book The Illusion of Life: Disney Animation. While originally applied to character animation,
they’ve also been adopted by motion designers.

Motion designer, JR Canest of Vancouver, BC, solved this issue by coming up with a list of the 10 Principles
of Motion Design based on the original 12. These 10 principles are as follows:

• Timing, Spacing, and Rhythm • Squash & Stretch

• Eases • Follow Through & Overlapping Action
• Simplicity • Exaggeration
• Anticipation • Consistency
• Arcs • Appeal
 1. Timing, Spacing and Rhythm

Timing and rhythm are crucial aspects

of motion design. Time adds 4th
dimension to the graphic design. It
involves carefully choreographing the
movement of elements to create a sense
of harmony and flow. Proper timing
enhances the impact and readability of
the animation, ensuring that each
movement feels intentional and well-
coordinated.
 2. Easing
It creates and reinforces the ‘naturalism’ inherent in the seamlessness of user experiences and
creates a sense of continuity when objects behave as users expect them to.
 3. Simplicity
Simplicity is the principle of keeping an animation simple and easy to understand. It involves
using minimal elements, clear messaging, and avoiding unnecessary complexity. For example
— a loading screen with a simple, elegant animation that communicates progress.
 4. Anticipation
Anticipation is about preparing the audience for what’s about to happen. This can make the experience of
watching animation more enjoyable. Anticipation helps to guide the viewer’s attention and adds a sense of
excitement. For example — reaction and action while games.
5. Arcs

Motion paths that follow natural arcs are

visually appealing and more organic. Objects
moving along straight paths can appear
mechanical and less engaging. An example
would be animating a character’s arm
movement in a sweeping arc rather than a
straight line.
 6. Squash and Stretch
Squash and stretch is a principle that allows objects to deform in response to movement or impact. It adds a
sense of elasticity and flexibility to animations, making them more dynamic and visually appealing. This
technique is particularly useful for animating characters or objects with a soft or elastic nature.
 7. Follow-through and Overlapping Action

The continuance of motion after the

main action has happened is referred to
as follow-through. Overlapping action
involves separate elements moving at
different speeds or with tiny delays. For
example character’s hair continuing to
move after they stop running, or a logo
bouncing and settling into its final
position.
 8. Exaggeration
Exaggeration is the purposeful exaggeration in order to produce emphasis, impact, or a particular visual
style. This approach is frequently applied in character animation, when movements are exaggerated to
represent emotions or personality traits. Utilizing principles of UX animation, you can add animations to
buttons or screens. For example, as the user brings the cursor or finger to the screen, the object may be
enlarged to highlight the action or the scene.
 9. Consistency

Consistency is the principle of maintaining

a consistent style and tone throughout an
animation. This helps to create a cohesive
and professional-looking animation that is
easy to follow. For example — a series of
videos for a brand should have a consistent
animation style and visual language.
 10. Appeal

Appeal is the principle of making an animation

visually appealing and engaging to the viewer. It
involves creating a unique style, using color and
typography effectively, and adding personality to
the animation.