# A Guide to Motion Design *By LottieFiles · August 26, 2022* What is motion design, and why does it matter? --- At the [dawn of the world wide web](https://lottiefiles.com/blog/design-inspiration/history-web-design), 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](https://segd.org/what-motion-design) (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. An example of motion design – Duolingo’s animated owl cheers you on whenever you complete a lesson on its mobile app 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](https://lottiefiles.com/showcase/duolingo) 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_](https://routledgetextbooks.com/textbooks/9781138318656/). Others, like Brian Stone and Leah Wahlin in [_The Theory and Practice of Motion Design_](https://www.routledge.com/The-Theory-and-Practice-of-Motion-Design-Critical-Perspectives-and-Professional/Stone-Wahlin/p/book/9781138490802), 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. > [ > > View this post on Instagram > > ](https://www.instagram.com/p/Ciz1kBBvZon/?utm_source=ig_embed&utm_campaign=loading) > > [A post shared by LottieFiles (@lottie.files)](https://www.instagram.com/p/Ciz1kBBvZon/?utm_source=ig_embed&utm_campaign=loading) 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](https://www.youtube.com/watch?v=qqM3McG4-LE&ab_channel=Fl%C3%A2neursolitaire) 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** [Google Voice Search displays animated elements as you speak, to let you know it is actively listening.](https://embed.lottiefiles.com/animation/29169) - ******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](https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-site-speed-importance/). 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** [SwiftKey's animated logo](https://embed.lottiefiles.com/animation/597) - ******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](https://www.theguardian.com/environment/ng-interactive/2020/may/20/relax-to-the-sounds-of-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](https://www.researchgate.net/publication/5760763_Memory_for_moving_and_static_images) 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](https://lottiefiles.com/showcase/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](https://www.behance.net/Ngoc_NG)** ## **How to learn motion design** Are motion designers in demand? In short, yes. [More companies are using motion design](https://www.toptal.com/designers/motion-graphics/motion-design-industry) 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](https://www.lcca.org.uk/blog/careers/7-basic-principles-of-graphic-design/), these principles include alignment, balance, [color](https://lottiefiles.com/blog/tips-and-tutorials/color-theory-for-motion-design), 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](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) where he outlines 12 principles: ![12 principles of UI/UX animation](https://blog-cdn.lottiefiles.com/2022/08/COMPILATION.gif) - 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](https://lottiefiles.com/plugins/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](https://lottiefiles.com/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](https://lottiefiles.com/education) that houses completely free courses and tutorials. Other well-known platforms include [School of Motion](https://www.schoolofmotion.com/courses) and [Motion Design School](https://motiondesign.school/courses/), which offer paid courses. Many courses also provide completion certificates or [credential badges](https://certifier.io/digital-badges) that you can add to your portfolio to show the skills you’ve learned. - **YouTube channels** - Channels we love (ahem, [other than ours](https://www.youtube.com/c/LottieFiles)) include [Ben Marriott](https://www.youtube.com/user/benmarriottart) and [TipTut](https://www.youtube.com/c/TipTut), who provide beginner-friendly tutorials. [Plainly Simple](https://www.youtube.com/user/plainlysimplestudios/featured) 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](https://dribbble.com/tags/motion_design), Instagram and [LottieFiles’ collection of free animations](https://lottiefiles.com/featured). > 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**](https://www.behance.net/adrianyap9b3b7) > 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. ![Free customizable animations on LottieFiles](https://blog-cdn.lottiefiles.com/2022/08/Comp-1.gif) But there’s another option. LottieFiles has thousands of [free animations](https://lottiefiles.com/featured) you can use, for both personal and commercial projects. And even better, you can customize any animation to fit [custom color palettes](https://lottiefiles.com/features/color-palette), 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](https://lottiefiles.com/plugins/after-effects) and more. So go ahead and start making magic with motion – we can’t wait to see what you come up with. Explore free animations --- ## Related Articles - [Motion Is the One Discipline You Can Feel but Can’t Measure](/blog/design-guides-and-tips/motion-is-the-one-discipline-you-can-feel-but-cant-measure) - [How to Document Motion in Your Design System: A Step-by-Step Guide](/blog/designing-with-lottie-animations/how-to-document-motion-in-your-design-system-a-step-by-step-guide) - [The Evolution of Lottie: Why dotLottie Is the New Baseline](/blog/dotlottie/the-evolution-of-lottie-why-dotlottie-is-the-new-baseline) - [Implement State Machines on the Web: A Guide](/blog/working-with-lottie-animations/how-to-implement-dotlottie-state-machines-on-the-web)