What Is Motion Design?

What Is Motion Design?

13 min read

Even if you’re not yet familiar with the term motion design, you've definitely experienced numerous examples of this art form in action.

In our digital world, motion design is ubiquitous – you see it in motion pictures and TV, on websites and apps, in advertising and marketing, and all over social media. The list goes on.

Motion design is becoming ever more important. Throughout our everyday lives, we’re constantly being bombarded by content.

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.

In this article, we’re going to lay out what motion design is, how it evolved and where it's headed. Are you interested in becoming a motion designer? We're also briefly going to unpack what a motion designer does and how you can pursue this as a professional career.

Let’s Get Definitive

The term "motion design" has its origins in motion graphics, and in fact, it's an abbreviation of the longer term "motion graphic design".

On the simplest level, motion design is the application of motion 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. It encompasses the application of graphic design skills and principles to the production of 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, modern motion design is a much more evolved discipline that requires a large amount of 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.

Flip-books and analog animation devices invented as far back as the 1800s can be regarded as the first examples of motion design, but things really started to take 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 to be two of the 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 most well-known for the striking movie posters and motion design he did in 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 film titles for Oscar-winning movies.

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. Ferro designed over 100 title sequences during his career.

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.

With the arrival of early computers in the 1960s, we started seeing the impact technology would have on motion design.

American animator and inventor John Whitney Snr. is one of the first to experiment with computer animation, having built his analog computers since the 1950s using old Turing machines from World War II.

First analog computer used for motion graphics
John Whitney and his brother James with one of their early analog computers. Image Source: Vice

Whitney's 'cam machines' enabled him to digitize the motion design process by using programming skills and graphic design principles to produce motion graphics animations.

Today, computers are an indispensable tool for motion designers to produce all types of motion graphics.

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

Now, anyone has instant access to modern computing technology and can create amazing motion designs without any programming skills – even on mobile devices!

Motion design is everywhere.

Isn’t Motion Design Just a Fancy Name for Animation?

One thing worth spending a bit of 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 there's a distinction to be drawn.

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

In contrast, motion design uses video and graphics to produce visual effects (VFX), and the motion of these elements can operate in much more abstract ways.

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.

Motion design serves a different purpose since it tends to be more abstract or aesthetic, and oftentimes text-based. It's frequently used to aid the communication of messages in video format, making it very well-suited for marketing and advertising.

Uses of Motion Design

Motion design can be employed in a huge variety of ways. Still, one of the key uses is to make text-based information more engaging and interesting.

Through the use of visual effects, the viewer's eyes are led to the most important information, which helps them understand and retain new knowledge better.

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

Film Title Design

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

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

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

Although professional videos in and of themselves, these movie titles are spliced into the movie's final cut right before it all gets exported as one file.

Television, Sports, News Programs

Perhaps less often nowadays, but in previous years television programs usually had presenters who would deliver the introductions to shows. TV show introductions were also accompanied by jingles and animated graphics.

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

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

Animated Logos

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

When animating a logo, a motion designer may incorporate other concepts linked to the brand, for instance, their slogan or company values.

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

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 dense infographic and transform it into an engaging and vibrant video that grabs your attention.

Explainer motion graphics help describe concepts visually, which is an excellent way to engage an audience and lead them to understand simple to increasingly complex ideas.

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

Education

In the same vein as explainer videos, which are used to 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 information they need to learn, motion design can create rich and dynamic learning experiences that improve the overall quality of learning.

Social Media

You can see examples of motion design all over social media as the techniques become more and more prevalent. In fact, there are very 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.

Just think about what works for you when you’re scrolling through social media feeds – the likelihood is that you're 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.

Advertising

Video advertising is where motion design can shine – creating dynamic, motion-based content captures viewers' attention and communicates marketing messages much more effectively than static images or text alone.

Advertising motion designers create promotional motion graphics that can appear on digital billboards, fast-food restaurant menu boards, Google Ads, TV, and mobile devices. We tend to have a series of interactions 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!

Point Of Sale and Self-Service Systems

With more jobs being replaced by digitized systems in a variety of 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 these POS systems and self-service kiosks, such as Oracle and Ingenico.

Websites

Besides being able to use 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 of the animated elements on websites were embedded videos, but now you can achieve complex and interactive motion graphics using code alone.

UI/UX Design

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

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

To give real-time interactions with a user interface an organic feel, you can code various transitions and drag interactions.

A shaking field box when an incorrect password was entered, or a jiggling call-to-action in the top right corner of the screen – these are all UI/UX elements driven by motion design.

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 Vectornator, Adobe Photoshop, or Adobe Illustrator. These style frames are then given to a motion designer.

The motion designer will bring these style frames into a piece of animation software, such as Adobe After Effects or Animate, where they can then be adapted and amended.

The next stage is to bring in the sound design. This can be music, sound effects, and sometimes a voice artist. The individual images are then timed to match the sound design, going in time with the music’s rhythm, for example.

Once this time signature has been roughly set, the animation moves on to the keyframing process. This is where the program calculates the movements between the illustrated style frames and then fills in the gaps to create the illusion of constant motion.

The properties of each graphic element, such as its position and scale, can then be changed in this process.

A motion designer has to take a lot of different factors into account during the creative process. The timing, duration, and tempo are all incredibly important, as this is how transitions are made.

Once you get started you'll notice it's pretty difficult to get the hang of making the movements of graphic elements seem natural. You might want to consider some of the principles of animation to simulate organic movements and avoid robotic, linear motion (unless that's really the effect you want!).

How to Get Started in Motion Design

If you're feeling inspired and being a motion designer sounds like your dream job, there are a few different career paths you can take, and there are plenty of amazing career opportunities available in the creative industries.

Motion design students most often study typography, photography, graphic design, and animation.

There are many online courses out there that teach the principles of motion design. You can even pursue a full degree in motion graphics or a degree in motion design (although both of these degree titles refer to the same thing).

If you're currently a student looking to expand your design skills, or you're at the beginner's skill level and looking for a course, you can choose to learn motion design in this way.

However, if you’d prefer not to go down the official study route, or it’s just not a viable option for you, you can take a more autodidactic approach to develop your knowledge and technical skill sets.

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

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

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

There are also many different apps that you can use for motion design. A vector editing tool is a good place to start to create your own illustrations.

Sketch is an uncomplicated vector editing tool that will enable you to quickly whip up simple illustrations, but it's more optimized for UI design.

For more advanced features and vector illustration functionality, Vectornator is one of the industry leaders with a great user experience. You can then import your illustrations into additional animation products to start creating animated graphics.

Sketch integrates well with the prototyping tool Principle. It generates interactive animations and is a good tool for helping beginners get to grips with the motion design process and properties and understand things like keyframes and the timeline concept.

Vectornator perfectly pairs with Adobe After Effects, which is probably the most popular program among motion designers. In After Effects, you can establish the time signature, change the properties of the graphic elements, add audio and sound design, and more.

There are also other digital products that you can use, such as Maxon Cinema4D, Powtoon, Unreal Engine, Adobe Premiere Pro, and Wideo. For web-based motion graphics, Adobe Flash was a popular choice, but Adobe Animate has taken its place.

Apple Inc. Motion is also a popular tool for motion designers who are starting out. This is an Apple product, and it works well in combination with Final Cut Pro.

You might be surprised to learn that you can use Adobe Photoshop to create animations, too. So, if you're already using Adobe Photoshop for design and you want to learn about motion graphics before purchasing other software, try your hand at Photoshop animation first.

Disclaimer: Photoshop animation can get really tricky!

You can check out the video below for a review of a few of the digital products we mentioned earlier.

The Future of Motion Design

In our increasingly digitalized world, motion design will become even more prevalent and important.

We've looked at a few of the digital products that you can use for motion design, and there are many, many more out there.

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

This shows that you don't need in-depth knowledge of the principles of motion design, or even much design knowledge in general, to start creating your own motion graphics.

However, with more technology and more accessibility comes more competition in any industry. This means that motion designers must have strong skills and need to upskill themselves constantly to keep a high standard.

Motion designers are also becoming more important.

Screens are already everywhere, but we’ll see digital frames take over from static posters, even incorporating interaction options. This will bring more motion design to physical advertising and makes good visual communication skills even more necessary.

Motion design will also become an increasingly integral part of UI design. We're constantly interacting with screens and apps, and motion design has a key role in improving digital product user experience.

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.

Why not start flexing your design muscles in Vectornator?

Download Vectornator to Get Started

Take your designs to the next level.

Anything you create in Vectornator can easily be animated in a motion design app such as Sketch or After Effects.

What to read next

The 10 Best Motion Design Resources to Up Your Game

The 10 Best Motion Design Resources to Up Your Game

Whether you’re looking for tutorials or inspiration, these resources have your back. No matter whether you are a motion designer with ten years of experience under your belt, or a total n00b who just started experimenting a few weeks ago, you’re always going to need motion design resources

Press ESC to close.