What's motion design?

Motion design is becoming increasingly important. We're constantly bombarded with content in our everyday lives.

There's fierce competition for our attention, and if you’re in the business of trying to capture attention to effectively reach and communicate with people, motion design is a powerful and essential tool to have in your arsenal.

Let’s get definitive

On the simplest level, motion design is the application of motion or animation to graphic design. But to put it more fancifully, it’s the art of bringing graphic design to life through animation.

Motion designers use a combination of graphic design elements and animation techniques. They apply graphic design skills and principles to produce films, video clips, and other time-based media, such as animated .gifs.

While the terms "motion design" and "motion graphics" have historically been used interchangeably, they're now much more distinct.

If you think of simple graphic elements in motion on a website or an app, this can be considered a work of motion graphics. But, motion design has evolved into a discipline that requires much thought and planning to execute effectively.

Technology and design have advanced greatly, and the term motion graphics no longer accurately describes the true nature of motion design.

So, just how did motion design become the powerful art form it is today?

A brief history of motion design

The origins of motion design can be traced way back to the earliest days of animation.

• Flipbooks and analog animation devices invented in the 1800s are seen as the first examples of motion design, but modern motion graphic design took off in the 1940s.
• Experimental artists such as the German-American abstract animator and artist Oskar Fischinger and Scottish-Canadian animator Norman McLaren are considered two pioneers of motion design.
• In the 1950s, the discipline skyrocketed thanks to the groundbreaking work of legendary designers such as Saul Bass, Maurice Binder, and Pablo Ferro.

Saul Bass is best known for the striking movie posters and motion designs he created for the film industry, including movie titles by famous filmmakers such as Alfred Hitchcock and Martin Scorsese.

He often worked alongside his wife, Elaine Bass, to create Oscar-winning movie titles.

Maurice Binder created the motion design film titles for 16 James Bond movies, including the first one, Dr. No (1962). Most designers have looked to these incredible works of motion design for inspiration.

Pablo Ferro was a Cuban motion designer who lived and worked in New York in the 1950s. His split-screen motion design for The Thomas Crown Affair (1968) movie title sequence was revolutionary.

These artists transformed the world of film title design by introducing motion design techniques. Their work sparked a trend, and from the 1950s onwards, television titles and logos were animated.

Whitney also collaborated with Saul Bass on the movie titles for Alfred Hitchcock's Vertigo (1958). The swirling cinematic effects of the motion design for the titles were produced using computer graphics.

As modern computing technology became more powerful, so did the proliferation and potential of motion design.

Over the past 25 years, the art form has exploded. The recent advances in motion design software and hardware have also been matched by an increase in the presence of screens in our daily lives.

Motion design is everywhere. It's used to market, entertain, inform, educate, and more.

Now, anyone can access modern computing technology and create amazing motion designs without any programming skills—even on mobile devices.

Isn’t motion design just a fancy name for animation?

One thing worth spending some time untangling is the difference between motion design and animation videos.

The line between the two is quite blurry, and motion design is often referred to as animation. But let’s draw a clear distinction.

Technically, motion design and motion graphics are forms of animation, which explains how confusion can arise. But when referring to animation as a discipline, it concerns traditional animated films that tell the story of characters moving through time and space.

Traditional animated films tend to rely on characters to move the story forward. These characters are central to the films and are expressive.

Uses of motion design

Motion design can be employed in a wide variety of ways. One key use is to make text-based information more engaging and interesting.

Motion designers often collaborate with illustrators, photographers, videographers, and video editors to produce different types of motion graphics.

These are some of the main use cases for motion design:

Film title design

Think about the title sequences for films we examined earlier in this article. Motion design takes otherwise unengaging blocks of static and plain text and breathes life into them, marrying them with visual effects and audio components.

These designed film titles set the stage for the movie or short film and become enjoyable visual experiences in themselves.

Film titles often incorporate live-action videos with motion graphics animations and require hours of video editing (post-production). The motion of elements on the movie screen engages the viewer, focusing fully on the story unfolding before their eyes.

These movie titles are spliced into the film’s final cut before being exported as one file.

Case study: Se7en (1995)

The title design for the movie Se7en set a new precedent for engaging viewers and improving narrative depth through motion design. 

The title sequence incorporates a series of disturbingly jittery, hand-edited shots of the antagonist, John Doe, performing various actions like meticulously inking words onto paper and removing fingerprints. 

These visuals are intertwined with frantic kinetic typography that displays the names of the cast and crew. The sequence combines live-action footage, stop motion photography, and cutting-edge digital effects (for the time) to create a sense of unease and foreboding.

Television, sports, and news programs

In previous years, television programs usually had presenters delivering the introductions to shows. Jingles and animated graphics often accompanied TV show introductions. Motion design has also become a staple in music video production.

News programs still use motion design. Think of the dynamic, animated logos at the start of their broadcasts and the news ticker motion graphics when reporting live from a location.

Sports shows also superimpose motion graphics to show game scores, leaderboards, and information for fans to follow the games more easily.

Case study: ESPN’s SportsCenter rebrand (2014)

In 2014, ESPN undertook a comprehensive rebrand of its flagship program, SportsCenter, one of the most recognized sports news shows. 

This rebrand focused on integrating advanced motion design to enhance viewer engagement and modernize the show's presentation. 

The rebrand featured bold, animated typography and infographics that could be easily updated with the latest sports data. This approach ensured viewers received real-time information in a visually engaging format.

Animated logos

Promotional motion graphics often include animated logos, which draw attention to the logo and make it more engaging without a storyline or complex characters.

Expressive motion graphics give a personified appeal to brands that would otherwise have been advertised as still images. This helps to build brand recognition and gives the company more personality.

Case study: Google’s animated logo evolution

Google, known for its minimalist approach and forthright innovation, has used animated logos to engage users and communicate its brand identity creatively. 

Over the years, Google has introduced various animated versions of its logo, especially through its Google Doodles, to celebrate events, anniversaries, and achievements. 

These animations transform the familiar Google logo into a storytelling tool that captures attention and conveys messages in a playful and impactful way.

Explainer videos

Motion designers tend to have strong skills in visual communication.

The potential of motion design to make seemingly boring things more exciting makes it especially useful for an explainer video or process guide.

Motion design can take a complex infographic and turn it into an engaging and enjoyable video that captures attention.

Explainer motion graphics help describe concepts visually. They’re an excellent way to engage audiences and help them understand simple to complex ideas.

An explainer video is usually accompanied by a narrator who talks viewers through the motion graphics displayed on the screen.

Case study: Dropbox’s explainer video relaunch

In 2009, Dropbox, a cloud storage service, released an explainer video that played a pivotal role in the company's early user growth. 

This simple yet effective animated video analyzed the concept of cloud storage—a relatively new idea then—and demonstrated how Dropbox could solve common problems related to file storage and sharing.

The video's success highlighted the effectiveness of motion design in making complex technology accessible and engaging to a broad audience.

The video used a clean, flat animation style, which, combined with a conversational narration, made cloud storage easy to understand for viewers with no prior knowledge of the technology.

Education

In the same vein as explainer videos, which describe products or processes, motion design is especially effective for education.

Using visual language that children or students understand and can relate to in combination with the information they need to learn, motion design can create rich and dynamic learning experiences that improve the overall quality of learning.

Case study: Khan Academy’s use of motion design in educational content

Khan Academy, a non-profit educational organization, provides free online education to students worldwide. Its educational videos often feature motion graphics, including animated diagrams, illustrations, and text, to accompany the instructors' voice-over explanations. 

The motion design elements are crafted to illustrate concepts dynamically, breaking down complicated ideas into manageable, visually engaging pieces of information.

Social media

You can see examples of motion design all over social media as the techniques become more and more prevalent. There are good reasons for using motion design in a social media context.

Static images and content on social media are far less popular and get shared at a much lower rate than moving and dynamic content. Motion design also enhances video footage to help bring across a message. This means it's great for a how-to or promotion video.

Think about what works for you when you scroll through social media feeds. You're likely much more drawn to elements in motion than photographs.

Since motion design is the movement of graphics over time, it also means that viewers stay on a page or post for longer and are less likely to scroll past if they're engaged with the animated content.

Case study: Duolingo's language learning encouragements

Duolingo, the language learning app, utilizes motion graphics in its social media strategy to motivate current users and attract new ones. 

These animations prominently feature the brand's mascot, Duo the Owl. They convey the benefits of learning a language in a fun and engaging way.

Duolingo's motion graphics depict Duo in various scenarios, from celebrating learning milestones to gently reminding users to maintain their learning streaks. These animations are crafted with bright colors, playful movements, and humorous contexts, aligning with the app's approachable narrative.

Advertising

Motion design can shine in video advertising—creating dynamic, motion-based content that captures viewers' attention and communicates marketing messages much more effectively than static images or text alone.

Advertising motion designers create promotional graphics that can appear on digital billboards, fast-food restaurant menu boards, Google Ads, TV, and mobile devices. We tend to interact with different versions of promotional motion graphics.

Often, these ads are also programmed to follow your journey between screens, which explains why you tend to see the same ads repeatedly

Case study: Spotify’s motion design in advertising

Spotify, a leading music streaming service with a diverse target audience spanning different ages, tastes, and regions, faces the challenge of creating universally appealing yet personalized advertising content.

Spotify leveraged motion design in its digital advertising campaigns across platforms like Google Ads and Instagram to capture attention and convey its brand message. Spotify's ads told stories that resonated with potential users, illustrating moments of frustration with ads on other platforms and the joy of uninterrupted listening with Premium.

Point of sale and self-service systems

With more jobs being replaced by digitized systems in various industries, interactive motion graphics have become even more important for user experience in the physical world.

Malls, cinemas, banks, airports, restaurants, and drug stores are all starting to use automated ticketing systems and information desks. Some of the biggest tech companies in the world are producing POS (point-of-sale) systems and self-service kiosks, such as Oracle and Ingenico.

Case study: Oracle’s integration of motion design in POS systems

Oracle, a database management and cloud services leader, has expanded its technology features to include advanced POS systems and self-service kiosks. 

These systems are designed for various industries, including retail, hospitality, airports, and more, aiming to streamline operations and improve customer service.

Oracle implemented motion design in its POS system and self-service kiosk interfaces to create a more beneficial, engaging user experience. The strategy used interactive motion graphics to seamlessly guide users through transactions and information queries.

Websites

Besides using popular design programs to produce motion graphics in video formats, designers can also use their programming skills to create animated elements online.

Using CSS and Javascript code for motion design is constantly developing. Previously, many animated elements on websites were embedded videos, but now you can achieve complex and interactive motion graphics using code alone.

Case study: Airbnb’s website animation

Airbnb, a popular platform for booking accommodations and experiences, aims to provide its users with a simple and engaging online experience. 

With a vast and diverse customer base, creating a universally appealing and intuitive interface is crucial.

Airbnb utilized CSS and JavaScript to embed motion graphics and interactive elements directly into its website, moving away from the reliance on embedded videos for animation.

Airbnb reported increased engagement metrics on the website, with users spending more time exploring listings and a higher click-through rate (CTR) to booking pages.

UI/UX design

Whereas user experience design for desktop and mobile devices is an entire field of expertise, its implementation often relies on some form of motion design.

User experience design studies how users interact with digital products and what would improve their experiences. UX designers have very broad skill sets, including design knowledge, psychology, color theory and narrative devices, digital product design, and the basic principles of software development.

You can code various transitions and drag interactions to give real-time interactions with a user interface an organic feel.

A shaking field box when an incorrect password is entered or a jiggling call to action are examples of UI/UX elements driven by motion design.

Case study: Google’s material design implementation

Google's Material Design is an adaptable design system—backed by open-source code—that helps teams build high-quality digital experiences for Android devices, web applications, and more. 

Google integrated motion design into the Android operating system through Material Design, which provides guidelines and principles for animating UI elements in a contextually relevant way.

How motion design works

The workflow of motion design differs based on whether you're involved in the creation of the initial illustrations and assets or whether you'll receive these assets to work on.

In many situations, a graphic designer or illustrator will be the person who creates the initial static illustrations, which are called style frames. 

This can be done in most graphic design software, such as Linearity Curve, Adobe Photoshop, or Adobe Illustrator. These style frames are then given to a motion designer.

The motion designer will bring these style frames into animation software like Linearity Move or Adobe After Effects, where they can be adapted and animated.

Linearity Move’s Auto Animate feature empowers you to animate static designs in seconds. It’s a simple create-import-click animation process that will blow your mind.

How to get started in motion design

Feeling inspired? If becoming a motion designer sounds like your dream job, there are a few different career paths you can take. 

There are many online courses out there that teach animation principles that can be applied to motion design. You can even pursue a full degree in motion graphics or motion design.

If you're currently a student looking to expand your design skills you can choose to learn motion design in this way.

If you’d prefer not to go down the official study route, there are some great motion design channels to enhance your knowledge and technical skills. 

There are plenty of resources online where you can learn basic motion design principles and develop motion design skills. Video tutorials by experienced designers can become your best friends.

A background in graphic design or good knowledge of it will help you, too. But all you really need to get started is some software and a personal drive to reach your goal.

It will also be beneficial to join a community of motion design amateurs you can learn from and share resources with.

The future of motion design

Motion design will become even more prevalent and important in the future. Screens are already everywhere. We’ll see digital frames take over from static posters, even incorporating interaction options.

This will bring more motion design to physical advertising and make good visual communication an essential skill.

Many phones come with their own basic video editing tools that enable you to add moving graphic elements, export your work in multiple formats, or publish it online.

With Linearity Move, you don't need in-depth animation knowledge to start creating your own motion graphics.

If you’re interested in becoming a motion designer and developing your skills in this area, there's no better time to begin than now.

Ready to try new and innovative motion design software? Get started with Linearity Move for free below, or book a demo to learn more about our Org plan for teams.

Frequently asked questions