Types of Motion Graphics
This article will be a collection of the different types of motion graphics. It will also give an idea of what kind of work you can accomplish or even bill for. In this article, we will not cover the many different styles, but rather the reason and examples for each type of video.
Before I begin I wanted to share my definition of motion graphics. I will write a post later on this. Motion graphics is where animation and graphic design meet. Motion graphics and animation can definitely be interchangeable in some places. Understanding basic principles of each discipline will make you a better motion designer.
Explainer Video
This is what I am most comfortable with. It has a wide variety of purposes and I would say it is one of the more common uses of motion graphics. Explainer videos take a complex process or situation. Then uses animation to break down the process to manageable chunks that tell the complete picture. It is a way to help people emotionally connect with your brand because you can bring storytelling to the mix.
In this day and age people are generally lazy. Even I am, I much prefer to see a video about a product than look for various information on the website. A video can package your sales/product into a nice emotional and engaging story that increases your bottom line.
Here are some inspiring examples:
Google BigQuery:
What is Slack?:
A video I worked on:
Product Marketing
This could fit under the explainer video section, but I wanted to separate to show the variety of ways to use motion graphics. Explainer focuses on a concept and this focuses on a product. A great way to not only tell story about your product, but also can show you how to use your product. Some of the products we use are complex and need a little further explanation. Motion graphics can really help, whether digital or physical.
I love when I come across a product l and I find that it has a video about it. Usually it is a combination of real life video with motion graphics.
Here is an example of a tool coming out called figma that uses real life and motion graphics:
UI Animations
Being able to make your prototypes move is a nice skill that can give you and your team clarity. I have used my motion graphics techniques to help others understand how a menu should animate, or how something should slide in or out.
This category can overlap with the product marketing. You can create a whole motion graphic video with your products UI. This is a lesser known use of motion graphics. UI animation can be especially be useful when talking to developers when handing off assets.
UX in motion has some great tutorials on this topic (https://uxinmotion.net/blog/)
Icons
Also an awesome way to improve your interface. I’ve seen where you hover over icons and they begin to animate. There is a free animation icon set from http://animaticons.co/ and their website shows how animated icons can be used.
Now with SVG’s (vector graphics) and css animations, you are able to create some amazing animated effects without a large file size to slow your site down.
Logos
This can really help your brand stand above the rest. I love the quote “Design to Delight”. I’m not sure where I heard it, and if you know please let me know. Motion graphics brings delight to design, and in this case, logo design. Bringing that joy will reflect positivity for your brand.
My favorite example is Fubiz’s logo:
You can see it in action on their site in the upper left corner and in the middle just below the menu (http://www.fubiz.net/). I love the playful expressive animations to further tell their brand story.
Short Films
Here I think animation and motion graphics can be interchangeable here. I consider motion graphics in short films when they are more simple shapes and design elements. Versus animation which usually contain more detailed characters. The following quote was inspired by a book called “Animated Storytelling” by Liz Blazer (http://amzn.to/1tkkNB1).
Whats so powerful about motion graphics is it allows you to enter a world that only you can imagine.
A great example of this is a film called butterfingers by Jordan Scott:
Titles (Movies and TV)
I believe this is the start of motion graphics. Saul Bass is a famous designer who created movie titles for many famous movies. If you don’t know who he is, you should definitely look him up. He did the titles for “Anatomy of a Murder” (http://www.artofthetitle.com/title/anatomy-of-a-murder/) and “Psycho” (http://www.artofthetitle.com/title/psycho-1998/).
The best resource with a huge library for inspiration is a website called “Art of the Title”: http://www.artofthetitle.com/
Here is an example from Netflix. How the type animates and the 3D objects are all part of motion graphics:
Presentations
Software like keynote allow you to add motion to your text and images of your presentation. Even animating graphs or concepts can help make a presentation feel more engaging. I’ve created animated gifs for presentations when needed. This is also a lesser known use of motion graphics, but the same skills apply.
Infographics
You can animate graphs and elements of an infographic to emphasize the important information. It can also help people follow which information to read first. Creating animations for interactive infographics can be key for an engaging experience. Motion graphics can help solidify how the animation should occur.
Another option with infographics, is to turn your info graphic into an explainer video. Here is an example of a piece I worked on a while back for a client:
Broadcasting Graphics
This includes graphics presented on news station or sports events. These are graphics for live shows. Examples are when you are watching NFL game and you can see the yellow line across the field that represents the first down line . Or on news events when the names of people talking animate it.
Gifs
By far one of my favorites types of motion graphics. Gifs don’t have to be motion graphics, but they can be. They can be used in a variety of ways, including social (which is popular now). I’ve created gifs for client’s social platform in the past. Gifs can help your post stand above other static ones, especially if done right.
Here are some great people to follow on dribbble for inspirational gifs: https://dribbble.com/eranmendel and https://dribbble.com/MarkusM.
Conclusion
If you can think of any other examples or categories, feel free to let me know. I hope this article gives you an idea of what you can do with motion graphics. There are so many opportunities to start creating. Maybe even start helping your current client or new client find ways to use your talents to further their goals.
