How To Use Gifographics: Animated Infographics
08.16.2017 | by James Ritchie

How To Use Gifographics: Animated Infographics

In internet years, GIFs are ancient. Even in human years, they aren’t young – GIFs turned thirty this past June – but they’re still the life of the online party. The internet community is obsessed with creating and sharing these animated images. So how can you and your business capitalize on one of the web’s most popular devices?


You might be scratching your head wondering what on Earth is this mysterious portmanteau that doesn’t quite roll off the tongue. Well, a gifographic takes two popular visuals on the internet – a GIF and an infographic – and fuses them into one succinct medium. Gifographics use the motion graphics of a GIF and the organized statistical layout of a standard infographic to create a sophisticated visual that catches the eye.

The Best Of Both Worlds

By taking the strongest elements of two already strong graphic ingredients, you can accomplish a lot more with your visual aids. Gifographics effectively combines the instructional and highly linkable format of an infographic and the video nature of a GIF, to build a visual that is the best of both worlds.

They don’t try people’s attention span with large amounts of plain text, and they are more watchable than a too-long video. They quickly captivate viewers and get across vital information while at the same time breaking up long walls of text in an article or report. A gifographic should be short, direct, and to the point. This keeps people engaged in what they’re reading and keeps their attention for longer.

Take this example from Chase showing customers how to pay with a card that has an EMV chip. The graphic has a clearly labeled step by step process with visual aids that accompany each step. As you move from one stage to the next, each visual becomes animated to give viewers further insight into the process of using a card with a chip.

The animation also helps to keep viewer’s eyes trained on the information that they should be looking at next. They also allow for the seamless transition from one key point to the next. This makes them the perfect medium to use in step-by-step processes.

Ultimately, the whole point of a gifographic is to convey information that you find to be valuable to the reader in the most effective way possible.

Use For Purpose, Not Distraction

When used correctly, gifographics can be a powerful way to combine the capabilities of animation and static graphics. Sometimes animation is the best way to illustrate a process, but you still need a textual explanation to go along with it. The below example is a perfect illustration of just that.

This gifographic takes you through how to build the perfect golf swing. It contains step-by-step instructions while also providing an animation of an actual golf swing. Near the top left-hand corner, there’s evan a tracker that indicates when the golfer is at each step during the animation of the swing.

This next example takes you through how to learn a dance move made famous by none other than the King of Pop himself: the moonwalk.

This gifographics uses a black-and-white color scheme well to not only help the viewer identify which foot is which but to add simplicity to an otherwise complicated process. It also uses the animation to illustrate each step of the dance move. 65% of people consider themselves to be visual learners, so seeing the steps acted out in GIF form goes a long way.

So what do both of these examples have in common?

They both use the GIF animation as an integral teaching tool. The graphics simply don’t work without being able to see the process in motion. Sure you could learn how to swing a golf club or how to moonwalk by just reading about it, or seeing a sequence of images side-by-side, but it would be much harder and certainly not as much fun.

Simplifying The Mess

In other cases, gifographics are perfect for condensing information that could take multiple images to present into one animated GIF. You commonly see this in gifographics that use maps.

In this example, the gifographic uses a color scale to show the changing marriage rates across the United States. By using a gifographic, the designer can fit over forty years of information into one visual. Without the gifographic format, you would need to show each map separately or pick and choose cornerstone ones to share. This would create a mess and take up too much space. Also, by showing each map as an individual image, you lose some of the dramatic effect of change over time that you get from the seamless transition in a gifographic.

Gifographics reduce the need to have multiple images with one highly organized and professional graphic.


The landscape of the internet and what is popular on it is always changing. People could wake up one day and all of a sudden GIFs aren’t popular anymore, but for now, you should ride the wave and capitalize on the GIF craze with gifographics.

If you would like to keep receiving great content and receive our free eBook, sign up below for our newsletter.

Sound on