A Guide to Motion Design

At the dawn of the world wide web, there was static text. Then there were images. And then there was animation in the form of GIFs – and if you’re old enough to remember the 90s, this meant a lot of blinking text, high-contrast colors and questionable font choices.

Fortunately, animation on the web has become more sophisticated (and subtle) since then. In fact, motion design is now a crucial part of creating engaging content, as well as building effective user interfaces and user experiences (UI/UX) for the web and mobile.

But what is motion design? Here’s a guide to motion design, why it matters and how to start using it.

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.

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.

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.

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 matters in UI/UX

• 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.

Every app, website or product you look at includes motion as a part of the product – from Twitter’s like button animations, to the animation you see after you send a mail from any digital platform. It gives a user an affirmation that a task has been completed, whereas static icons and PNGs give a user the feeling that the product has stopped working or is stagnant after their action. When you compare, for example, the same application with interactive animations and one without, the static product looks “dead”. - Mahfooz Ali, Senior Lottie Motion Designer

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.
• 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.

Every piece of animation and motion design, even the smallest detail in an icon, has its own story or life. When I look at a motion design piece, I'll imagine what it means and what it tries to tell you. That's also how I apply it before I transform an illustration or design into motion. I'll draw a picture in my head of how every detail should move. And seeing it come to life is so rewarding. - Lana Nguyen, Motion Designer

How to learn motion design

Are motion designers in demand? In short, yes. More companies are using motion design across websites and social media platforms. If you’re interested in a motion design career, or looking to pick it up as an additional skill, here are broad skills, principles and tools you’ll need to master.

1. Learn basic graphic design principles

Motion design draws from graphic design – so it makes sense to have a solid understanding of basic design principles. According to the London College of Contemporary Arts, these principles include alignment, balance, color, contrast, hierarchy, proximity, rhythm and space.

2. Learn the 12 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. These principles include:

• Squash and stretch
• Anticipation
• Staging
• Straight-ahead action and pose-to-pose
• Follow through and overlapping action
• Slow in and slow out
• Arc
• Secondary action
• Timing
• Exaggeration
• Solid drawing
• Appeal

If you’re designing specifically for UI/UX, Issara Willenskomer has also written a popular manifesto on UX in motion where he outlines 12 principles:

• Easing
• Offset and delay
• Parenting
• Transformation
• Value change
• Masking
• Overlay
• Cloning
• Obscuration
• Parallax
• Dimensionality
• Dolly and zoom

3. Get 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.

Of course, there’s also the LottieFiles platform, which offers tools and integrations to speed up your motion design workflow. You’ll be in good company – over 135,000 companies already use LottieFiles!

4. Formal education and self-learning resources

If you’re interested in learning motion design through formal education, getting a degree in a related field, such as graphic design, can help you learn the fundamentals. Some universities also offer degrees that specialize in motion design or motion graphics.

If you want to take the self-learning route, there are also many online resources:

• Online courses - LottieFiles has a huge education section that houses completely free courses and tutorials. Other well-known platforms include School of Motion and Motion Design School, which offer paid courses.
• YouTube channels - Channels we love (ahem, other than ours) include Ben Marriott and TipTut, who provide beginner-friendly tutorials. Plainly Simple is another great resource to learn more about being a freelance motion designer and dealing with clients.
• Books - Design for Motion by Austin Shaw is an excellent introduction – it explores the principles of motion design, while going through the techniques of creating engaging motion design projects. For a more academic read, The Theory and Practice of Motion Design by Brian Stone and Leah Wahlin offers an in-depth overview of motion design, its influences and origins, as well as how it’s applied in many fields.
• Design platforms - Browsing design platforms can be a great source of inspiration. Mahfooz Ali, Senior Lottie Motion Designer at LottieFiles, shares that his favorite motion design resources include Dribbble, Instagram and LottieFiles’ collection of free animations.

I started off as a cinematographer and a filmmaker. But in the films I produced, I always felt that there was a lack in depth and dynamics. That was when I stumbled upon movies like Scott Pilgrims vs. the World and Zombieland and that changed my approach in my world of filmmaking. I started learning motion design to implement them to my films (VFX and compositing). Soon after that, I transitioned fully into becoming a motion designer/animator driven by inspirations from different cultures, styles as well as modern and traditional techniques. - Adrian Yap, Motion Designer

I have always had the interest in animation ever since I watched Teenage Mutant Ninja Turtles back in the 2000s. It made me interested in Miniclip games and I was able to come up with a very short animated clip back in 2006. This came asa huge deal to everyone around me, since animations were only defined in cartoons back then. Later on, I kickstarted my career as a motion designer, after finishing off my higher studies. The passion and interest that came from those cartoons made me explore more in to the field of motion design. - Mahfooz Ali, Senior Lottie Motion Designer

How to start using motion design (in minutes)

Conventionally, it’s been hard to implement motion design on the web or mobile. You’d have to be familiar with motion design (or hire someone who is), then hand your animations off to a developer who may need to recreate these animations in code.

But there’s another option. LottieFiles has thousands of free animations you can use, for both personal and commercial projects. And even better, you can customize any animation to fit custom color palettes, change text, size, speed and more – even if you don’t know motion design.

And LottieFiles isn’t just for non-designers, either. If you happen to be a motion designer, we have tons of features to simplify your workflow. Collaborate with your team, test animations across the web, iOS and Android, integrate with tools like Adobe After Effects and more.

So go ahead and start making magic with motion – we can’t wait to see what you come up with.