Animated infographics are all the rage right now. Whether they’re GIFs or videos, they’ve become the most shared content on social media. But what makes them so fascinating? Let’s take a closer look at a few great examples that can inspire you for your next infographic design.
What is an animated infographic?
–
An animated infographic is a way to visualize information using a combination of images, illustrations, tables, charts, text and other animated elements.
Over the past five years, infographics have become a heavily used way to make complex information easy to digest. But what was once a primarily static form of content has evolved dramatically to include animation and animated elements that help make ideas even easier to understand and more exciting to share.
What is an infographic? Via Giphy
The beauty of infographics has always been that they are wonderful to share. Whether it’s GIFs or videos, animated infographics are visual content that’s easy to consume, and easy to link to.
Jumpstart your infographics
–
When infographics first emerged on the web, they were static illustrations. Often they were extremely long images to scroll through, but they always had a certain charm. Shapes, colors, illustrations and an easy-to-understand structure are good reasons why static infographics work so well. All that scrolling was exactly what made the experience so enjoyable. Everything revolved around the path.
These days, still images don’t perform as well on social media as animated ones do. So if you already have static infographics for your brand, consider adding animation to them to bring them to life.
We recently created a static infographic to celebrate Bauhaus design. But we wanted more than just a static image to bring the theme to life and get the most out of our content. So we decided to turn it into an animated video infographic. Here’s what it turned into:
If you want something more subtle, microanimations are another option to spice up your static infographics a bit. These small, subtle animations can highlight information or point out clickable areas in your infographic. Here’s an example of a clickable flowchart with microanimations in GIF format that we recently created:
How to find a designer: A handy flowchart with subtle animations of the mouse pointer showing which areas to click on.
Here’s what you can do with any static infographic. Check out these three examples of the most common styles of static infographics and a few more suggestions on how to take them to the next level using animation:
Animated elements stand out
This static infographic on "How to Leave Your Worries Behind" from Happify offers tips on how to feel happier and worry less. It features a delightful combination of clean design, bold colors, a clear font hierarchy, and striking illustrations. It’s not too long and it’s well divided.
A delightful infographic from Happify
While they’ve done a good job of choosing distinctive icons and illustrations that look familiar – like the waning battery icon that represents a person’s declining satisfaction – this infographic could benefit from animation.
If the woman in the header was actually jumping up and down, it would definitely stand out. The pie chart, which serves as a frame for some icons, could be animated with a circular wipe to highlight the percentage it represents. And in the "How to Worry Less" section, the checkmarks and crosses could be animated with a jumping zoom effect.
Animations highlight the important things
Eye-catching and on-target, this static infographic on "women running the world" from USC Marshall showcases the growing number of diverse female entrepreneurs, what share they have in the marketplace, and the companies they lead.
An eye-catching and purposeful infographic from USC Marshall
USC Marshall effectively uses typical corporate imagery in this infographic, using symbols for buildings and banks as elements for a chart to highlight the percentages represented by the infographic.
However, these icons could be much clearer by animating each one to emphasize that they are a visual representation of a percentage and not just any icons in a row.
As with the previous infographic, the pie charts surrounding some images should be animated with a circular wipe.
Animation clarifies information
Cheeky from the start, everything about this static infographic on how to prevent a hangover from Fix fits perfectly with the ironic nature of this topic and the way people will feel reading it.
This cheeky infographic explains how hangovers happen and what to do about them. From Fix
It’s a topic we’ve all certainly dealt with at one time or another: This explanation of how hangovers happen and what to do about them cleverly uses illustrations of real objects like bottles and glasses, beer and spirits.
The "How a Hangover Affects the Body" section, which points to different organs, could benefit from animation to better clarify this information. Each symptom and solution could be animated from the direction of the organ it refers to, making it clear which part of the body is affected. And at the point where the different remedies for hangovers from around the world are shown, simple animated waving flags could add character to the infographic and draw attention to the main point of the section.
GIF animated infographics
–
The popularity of static infographics was followed by the rise of animated GIFs. The power of animated infographics is that they highlight certain facts and figures, making your infographic even more understandable.
The best thing about GIFs is that they are not difficult to create. You don’t have to know how to use complicated programs like Adobe Premiere Pro or After Effects. You can even create them easily in image editing programs like Photoshop.
How a human is created by Tabletop Whale
Here are a few of the best examples of GIF-animated infographics:
Example 1: How to Build a Human | Tabletop Whale
Using the static structure of a vortex and markers for the months of pregnancy, this infographic shows how an embryo takes on different forms and moves into the middle "birth" stage as a fully formed baby
This is a fantastic example of the power of animation in an infographic. A simple concept that is really well executed and requires little text to understand what it’s about.
Example 2: 7 Ways to Hack a Drought | Column Five
This animated graphic about what to do in a drought shows how an animated illustration can complement the information shown.
An animated infographic with tips on how to save water from Column Five
The moving water waves near the headline quickly convey what this infographic is about. The text hierarchy is clear, from the large numbers and section headings to the detailed text. Each animated illustration was carefully chosen to highlight what can be learned from the tip at hand, rather than detract from it.
Example 3: 42 Butterflies of North America | Tabletop Whale
Similar to "How to Build a Human," this infographic uses animation sparingly and only the butterflies’ wings move. They’re arranged in a grid, and all the information is arranged so you can decide for yourself what order you want to read it in.
An animated infographic showing the different species of butterflies in North America. From Tabletop Whale
Example 4: How Speakers Make Sound | Jacob O’Neal
This infographic on how speakers work shows the individual technical components of a speaker, what they are called, and how they work.
This animated infographic shows how the individual components of a speaker work to create sound. Via Animagraffs.
This is the power of animated GIFs: movement to grab attention, to provide context about how each element fits together, and to explain how everything works.
Video-animated infographics
–
Infographics have evolved from GIFs to fully animated videos. The rise of the Explainer video has been impressive. And it makes a lot of sense, considering how captivating it is to watch and listen to something being explained and presented visually.
Explainer videos make complex topics easy to understand by providing visual context. They solve the same problem that static and GIF infographics try to solve, and offer more control over the experience.
A video producer has control at all times over what is on screen and at what speed it is shown. It is a more passive experience for the viewer compared to static infographics (scrolling is not necessary). But visuals and sound can put things into context more clearly, simplifying complex ideas.
Here are a few of the best examples of video infographics.
Example 1: Loneliness | Kurzgesagt
Kurzgesagt specializes in making big ideas easier to understand with the help of compelling storytelling and intricate animation.
The channel uses visual metaphors to bring facts, figures and ideas to life – like the concept of loneliness, where the character has a hole in his torso.
Example 2: Supreme | Patriot Act with Hasan Minhaj
Hasan Minhaj, the host of "Patriot Act" on Netflix, often jokes that his set looks like an over-the-top PowerPoint presentation. However, as you can see in this video, it doesn’t really exaggerate.
Each episode covers a different topic and the colors and images always match up. But it’s basically one long infographic that combines quotes, images, charts and more. The animated graphics are basically the second host of the show and of utmost importance to make sure the audience understands what it’s all about, while Minhaj tries to explain something rather complicated in half an hour.
Example 3: How Toyota Changed The Way We Make Things | Bloomberg
Bloomberg’s "Then This Happened" uses a really simple but effective infographic style.
Her style, based on the idea of a scrapbook or drawing board, mixes images, diagrams, text and more into individual pieces of information that are pieced together on a tabletop. The mainly black and white color scheme makes everything clear and easy to understand. But it’s the concept itself that makes the infographic playful and engaging.
Example 4: Work, Simplified | Slack
This animation from Slack shows what you can do with mainly simple, recognizable icons – like those for email, messages and time – and mixes them with animated people interacting in an animated room.
This video comes without text and voiceover. Instead, it shows what Slack does for you, using familiar actions (such as getting a notification on your phone) to show the viewer what the app can do for them.
Example 5: Hybrid Cloud Flexibility | Microsoft
This video is the definition of what makes an animated infographic so appealing to customers. It takes a complicated concept, the cloud, and explains in easy to understand terms how it can help your business.
By supporting the script with context-specific animations (what starts as a server becomes a building, and that building eventually connects to a cloud), it visually communicates what this service can do for you. And it does so in a way that’s much more exciting than statistics or footage.
The power of visualized data
–
Just as infographics have evolved, so have their viewers. People these days are used to complex information being brought to them in a simple, visual form. And in the future, they will have more and more control over the speed at which they receive information.
The next development of interactive infographics is already foreseeable. It is expected that the extent to which people decide for themselves which information they look at first will continue to grow. But that won’t change the basic mission of infographics – to make the complex enjoyable. Whether it’s a static infographic, a GIF or a video, all versions make the complicated ideas of this world a little more understandable.
Whether you want to learn more about video production or master video marketing, we are here to help you. Now it’s time to take your videos and animations up a notch, too.