We’ve put together this back-to-basics beginner’s guide to introduce you to the art of motion design and help clear up some common misconceptions. We’ll be answering fundamental questions such as, “What exactly is motion design?” and “How does it differ from animation?” We’ll also show you some of the angles from which you can approach this digital craft, depending on which subgenre of motion graphics best suits your needs and skills.
Design in motion is a concept you may have seen defined in broad strokes without being able to clearly pinpoint the requirements, possibilities, and limitations of motion design. Once you learn the principles of motion design, the main types of motion graphics, and the easiest ways to create them, you’ll be ready to choose a starting point from our curated list of best resources to start learning and practicing motion design.
Table of Contents
- What Is Motion Design?
- Is Motion Design Different from Motion Graphics?
- What Is the Difference between Motion Design and Animation?
- What Is the Easiest Way to Create Motion Graphics?
- What Are the Principles of Motion Design?
- What Are the Main Types of Motion Graphics?
- Why Should You Use Motion Graphics?
- Best Resources to Start Learning Motion Design
- FAQ
- Final Thoughts
What Is Motion Design?
Motion design (or motion graphic design) is the art and skill of adding movement to graphic design. To be concise, motion design represents the practice of putting in motion any graphic design element, following the principles of graphic design: balance, alignment, hierarchy, contrast, rhythm, proximity, color, and space.
Considering the “house rules” of motion graphics design, it’s clear that the purpose of motion graphics isn't entertainment-focused (and this will help us make an important distinction between terms in a bit!).
Instead, your motion design projects will be efficient in conveying information in the blink of an eye, be able to explain complex projects in an easily digestible format, and help sell products/services/ideas with your creativity as the most costly production resource of the entire process.
Is Motion Design Different from Motion Graphics?
In some different industry-specific instances (e.g., video production) this distinction can be made as:
- Motion Design: refers to the discipline of applying graphic design principles to filmmaking and video production through the use of animation and visual effects.
- Motion Graphics: are what is created in the process of motion design.
What Is the Difference between Motion Design and Animation?
The differences between motion design and animation are in their scopes and purposes. Motion design not only focuses on adding movement to graphic elements, but it also holds a strong emphasis on composition and seamless integration with the overall design aesthetic. Animation, on the other hand, has an intrinsic focus on storytelling, characters going on emotional rollercoasters, and following a narrative line.
A motion design animation (or a motion graphic, if you will) works best for outlining ideas matter-of-factly, drawing attention to key points, and serving as a visual aid to simplify complex concepts for a general audience.
Most animation methods and techniques (traditional animation, stop motion animation, motion design, 2D animation, 3D animation, etc.) are not mutually exclusive from each other or from other types of animation. That’s why labeling yourself simply as an “animator” can leave lots of room for interpretation when venturing into the creative job market.
The ability to distinguish the difference between motion design and animation can help you stay the course when learning the ins and outs of motion graphics design as well.
Here’s a brief animation cheat sheet you may find useful:
| 5 Most Popular Types of Animation | |
|---|---|
| Traditional Animation | Also referred to as hand-drawn animation or cel animation, it is a technique that requires each frame to be drawn by hand. |
| Stop Motion Animation | Entails a camera stopping/starting in minute increments to create frames that are then put together to create the illusion of movement. |
| Motion Graphic Design | Uses a combination of graphic design and animation techniques to put abstract shapes and text in motion to convey a message. |
| 2D Animation | Uses virtual materials in a digital space to create the same style of artwork as traditional animation. |
| 3D Animation | Requires objects and settings to be created (and put into motion) in a virtual three-dimensional space. |
What Is the Easiest Way to Create Motion Graphics?
With plenty of online motion graphics tools to choose from (depending on your skill level), and with unlimited access to self-education resources, the motion design field is one of the most cost-effective career pathways to pursue when you’re starting from scratch without formal education under your belt.
Motion graphics design tools such as SVGator will match your skill level as a brand new beginner to the field and also allow you to gradually progress to more advanced motion design techniques as you become more comfortable with motion graphic creation.
What Are the Principles of Motion Design?
These are the 12 principles of motion design:
- Easing
- Offset and Delay
- Parenting
- Transformation
- Value Change
- Masking
- Overlay
- Cloning
- Obscuration
- Parallax
- Dolly and Zoom
- Anticipation
1. Easing
Easing is a temporal object behavior that you can customize to achieve a variety of animation effects. In essence, easing is the motion design principle that determines how natural an object’s movement looks or feels in relation to how the user expects the object to behave.
2. Offset and Delay
Offset and delay are temporal object behaviors that dictate the hierarchy and relationship between new objects that are introduced to the animation scene. This helps users differentiate between the nature of the elements at a glance (image/text vs clickable button).
3. Parenting
Parenting is a spatial and temporal object behavior that dictates the hierarchical relationship between multiple objects. As a motion design principle, parenting helps designers communicate via motion how objects are linked and what relationship the user should expect between them.
4. Transformation
Transformation is an object continuity behavior that has the purpose of seamlessly transitioning an object through a number of states. As a motion design principle, transformation helps guide user’ attention clearly along a series of events.
5. Value Change
Value change is an object continuity behavior that generates a dynamic and consecutive sequence of events within your motion graphics. As a motion design principle, a value change can look like an animated loader changing values to reflect a request being processed, or as feedback to realtime user interaction (e.g., adjusting volume with an interactive slider).
6. Masking
Masking is an object continuity behavior that establishes the object’s utility by determining which part of the object or object group is revealed or concealed, in one smooth transition. As a motion design principle, masking helps unfold a narrative, typically in response to a user interaction.
7. Overlay
Overlay is a spatial object continuity behavior that entails placing one element on top of another, for a layered visual effect. As a motion design principle, the overlay technique can help you render depth or transition between scenes using “z-axis” spatial orientation.
8. Cloning
Cloning is an object continuity behavior that establishes a relationship between objects when new objects are created directly from existing objects. As a motion design principle, cloning gives you the ability to clearly communicate a chain of events, or to create patterns, grids, and repetitive motion graphics.
9. Obscuration
Obscuration is an object continuity behavior that communicates an object or scene’s visual hierarchy using spatial orientation. As a motion design principle, obscuration can be used to emphasize specific elements, or to reveal elements gradually, in the case of storytelling with motion graphics.
10. Parallax
Parallax is a temporal object hierarchy behavior that involves background objects moving at a different rate than foreground objects, as the user scrolls. As a motion design principle, the parallax effect can create the illusion of movement in a three-dimensional space.
11. Dolly and Zoom
Dolly and zoom are spatial object continuity behaviors that replicate the video effect of moving the focal element toward or away from the lens (or user, in this case). As motion design principles, dolly and zoom both dictate the scale of the objects and are helpful in directing user attention.
12. Anticipation
Anticipation is both a spatial and temporal object continuity behavior that precedes a movement, aiding in the fluidity of the motion graphic. As a motion design principle, anticipation, depending on its intensity, can help you create fun, cartoonish effects, similar to those found in traditional animation.
What Are the Main Types of Motion Graphics?
The main types of motion graphics are: explainer motion graphics, UI animations, kinetic typography, animated infographics, and digital marketing motion graphics (in a number of approaches).
1. Explainer Motion Graphics
Explainer motion graphics are animated visual representations of a more complex idea, concept, or product. They aim to explain and communicate a message clearly and in an engaging manner. This type of motion design is usually accompanied by a text or voiceover narration that aids in concisely delivering the intended messaging.
Driving a message home using motion graphics alone is a designer’s ability to convey information in layman’s terms – so as a beginner, you’ll need to practice turning multifaceted concepts into visual content that can easily reach, entice, and persuade a given audience.
2. UI/UX Motion Design
UI motion design is the artform of streamlining user interactions for the web, and/or tackling the particularities of mapping out intuitive mobile interfaces.
Motion design in UX aims to improve the user experience by reducing the cognitive load and extending the capabilities of communication via design alone. Motion graphics give you immense leverage in communicating with and guiding users, even without supporting copy.
3. Kinetic Typography
Kinetic typography, also known as animated typography effects, is a motion design technique that uses motion to bring text to life – making it that much more expressive and effective. It is best used in videos with minimal text for an impactful and dramatic effect (teasers, announcements, promotional clips), to perk-up a brand’s tagline, or simply to break up an explainer video into smaller chunks for a better flow.
4. Animated Infographics
Animated infographics are dynamic and often interactive presentations of information and data. To convey information more efficiently than static images and text, animated infographics use movement, smooth transitions, and interactivity to promote better understanding and memorability of the information that is delivered. This type of motion graphics is best used to make statistics, trends, and data analysis more accessible and captivating.
5. Marketing Motion Design
Motion design in digital marketing entails using motion graphics to improve promotional content, ads, and overall brand messaging of a business with the help of movement. This type of motion graphics has a greater potential to captivate audiences, communicate messages effectively, and leave a lasting impact on potential customers, compared to static graphics.
You can use motion design in marketing in a number of ways: brand storytelling, logo animations, animated ad campaign materials, social media content, landing page animations, email marketing, animated CTAs, and so much more.
6. Branding Motion Graphics
Branding motion graphics are animations and motion design practices designed to establish a brand's identity and solidify the brand’s image in the audience’s collective memory. This type of motion graphics can be used to articulate the brand's personality and messaging with the goal of creating a cohesive and memorable brand experience across a multitude of platforms.
7. Landing Page Motion Graphics
Landing page motion graphics are animated elements that are added to a website's landing page with the goal of boosting user engagement, conveying key messages, and encouraging specific actions. These motion graphics can take the form of hero section animations, animated product demos, scroll-triggered background animations, page loaders, interactive infographics, or irresistible CTA buttons.
8. Social Media GIFs and Animated Reaction Stickers
Social media GIFs and animated reaction stickers are a type of motion graphics that can add an extra layer of customization and creativity to a brand’s social media interactions. You can also use them to establish a fun sense of belonging and self-expression to the communities that you build around your brand or product (e.g., in Discord servers).
Offering just one “spécialité de la maison” as a motion designer is an ideal route to take when you’re still a novice. This allows you to learn more quickly, and to not get easily sidetracked. But do know that your talent for digital animation can be put to great use in so many more ways! Your artwork can be fun, intriguing, thought-provoking, and educational, and it can reach (and impact!) users at a myriad of touchpoints.
Why Should You Use Motion Graphics?
Let’s discuss the five most compelling reasons why you’re better off using motion graphics 👀
1. Kindle Emotions More Easily
An animated explainer that shows exactly how your product/service solves a problem or meets a client’s specific needs is a much more persuasive method of conveying information than using static or text-only content. Research at 3M Corporation has concluded that humans process visuals 60,000 times faster than text. This means that our brains are hardwired to process information faster when presented with motion graphics!
Not only do we have an easier time understanding concepts that come in video format, but we’re also more likely to emotionally connect with a brand if their motion design is clever enough to stop us in our tracks while we are casually consuming digital media.
2. Develop Better Storytelling
Motion design gives you control over all the precursors of amazing storytelling: it’s got the hook capable of grabbing your audience’s attention, it makes your messaging clear and concise, and you can customize it to fit your brand voice to a T. Of course, you’ll first need some user research to get to know your audience and get all the necessary data to tailor your motion graphics accordingly.
3. Improve Digital Marketing Performance
Motion graphics are a phenomenal asset for improving your digital marketing performance, with an emphasis on the ROMI (Return on Marketing Investment) performance indicator. The production costs of animated explainers, branding elements (logos, icons, UI elements), and videos for omnichannel social media marketing are low, especially when weighed against all the ways this type of dynamic content can positively impact a company’s ROI.
The cost-effectiveness of motion design for marketers can look like profitable ad campaigns that are built solely on a few simple live video scenes paired with animated vector overlays and a bit of copywriter wit. Newsela’s animated video campaigns are a perfect example of how digital marketing + motion graphics = ❤️
4. Increase Conversion Rates
To increase a landing page’s conversion rate with motion graphics, you’ll need to walk the fine line between distracting attention (which we should avoid at all costs) and guiding attention 🎯 (all the way to a successful user conversion).
The best landing page examples out there all have a few distinct elements in common, and web animations are among them. Motion graphics do the groundwork of engaging users and getting them to the landing page’s CTA, ready to up conversions.
5. Improve Usability (on the web and on mobile)
Usability in motion design revolves around your ability to link each design decision to an expected, or desired, user behavior. Motion graphics give you immense leverage in communicating with and guiding users, even without supporting copy.
Take success state animations, for example. The click of a checkout button that triggers a morphing animation to a green checkmark when a request is fulfilled can efficiently communicate the following: that the payment has been completed, funds have been successfully withdrawn, your order is being processed, etc. When done correctly, animation is an incredible UX asset!
Best Resources to Start Learning Motion Design
The best resources to help you start learning motion design come from seasoned industry experts.
You can also check our article about motion tips & tricks from below.
SVGator
Here’s a collection of beginner-friendly courses, tutorials, and guides you can make use of at any point in your motion design career:
- SVGator Tutorials: a growing collection of video tutorials for beginner, intermediate, and advanced motion designers, complete with step-by-step instructions you can follow along with directly in the SVGator app.
- Goscha’s Animation Resource Collection: 20+ free and paid animation apps list, 25+ free animation courses and tutorials, 25+ list of animation books, animation terms and concepts glossary, and four animation industry job boards.
- Carl’s GSAP Animation Courses: comprehensive GSAP training courses, complete with motion design basics, scroll-driven animations, SVG animations, and more.
- Alex Grigg’s Animation for Anyone Video Tutorials: an educational series focusing on the ideas and principles behind the animation process.
- Goscha’s 30DayAnimator Course: 30 animation exercises with step-by-step guides, complete with information on animation principles, animated effects, and character animation methods.
- Cassie Codes’ Animation at Work Discord Server: a community of industry professionals discussing and sharing all things web-animation related (featuring dedicated SVG, CSS, JavaScript, GSAP, and ThreeJS channels among others).
- School of Motion’s Free Introduction Course: a 2.5-hour free course hosted by Sr. Motion Designer Michael Jones, introducing the foundational concepts of motion design and animation.
- Gary Simon’s Interactive Frontend Motion Design Course: a great resource to learn how to integrate endless interaction & motion principles into your landing pages.
- Manuel does Motion Video Tutorials: new After Effects animation and motion design tutorials every week, featuring techniques that you can use with other motion design software as well.
FAQ
Which software is best for motion design?
These are the best software for motion design:
- SVGator (for vector motion graphics)
- Blender (for 3D motion graphics)
- GSAP (for complex interactive JavaScript animations)
- Rive (for real-time interactive motion design)
What should you learn first in design?
For a career in design, you should first learn the fundamental design principles: contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, variety, unity, and movement.
Is motion design part of UX design?
Yes, motion design is part of UX design. Motion is an essential form of communication that UX designers use to extend the effectiveness of their visual communication. They use motion graphics to help simplify navigation for users and to make complex interactions with the system feel intuitive and straightforward.
Final Thoughts
Motion design is one of the most versatile forms of animation that you can master by self-educating, and you can do so with personal drive, a full-featured animation tool, and lots of practice. Ready to create greatness in motion? Choose one of the design project ideas we’ve shared with you, and get started today!
