By Alp Mimaroglu published June 12, 2015

Go Beyond Infographics: Here’s How to Make a Bigger Impact With ‘Gifographics’

gifographics-better-than-infographics-cover

You might not realize this, but the image below is the first in a series for a simple gifographic – a GIF-image infographic.cow-gifographic-image 1b

Here’s what the last image in the sequence looks like:

cow-gifographic-image 2And here’s what it looks like in GIF action:gifographic-cow-image3

Beginnings

GIFs have been around since CompuServe introduced the image format in 1987. Fast forward two decades, and the popularization of infographics had artists playing around with animated infographics. And in 2012, Jeca Martinez created and shared an animated infographic, So You Want to Make a Short Animation, that she made for a typography class.

jeca-martinez-image 4

Animated infographics (gifographics) took off from there, but weren’t really well-known in business until a couple years ago when business-savvy marketers like Neil Patel promoted the tactic in their blogs. Marketers quickly began to realize that the benefits of gifographics over infographics definitely outweighed their drawbacks.

Pros and cons

Gifographics offer significant communication benefits. They:

  • Save the viewer’s time with no need for lengthy explanations
  • Make numbers fun and dynamic in a way that infographics do not
  • Leave a great brand impression (due to relative rarity)
  • Are not as hard to make as you’d think
  • Earn SEO gold

Rolling Coconuts does a better job of explaining this in its very own gifographic (also part of my top list of 10 below).

Infographics-Vs-Gifographics-image 5

Click to enlarge

Despite its obvious appeal, this innovative type of visual content hasn’t quite caught on as much as you would think. In fact, finding 10 good gifographics for this list took a lot longer than I anticipated. And many marketers to whom I’ve spoken have not even heard of them.

This might be because of the drawbacks. Gifographics are:

  • More expensive to create than infographics
  • Harder to get right for SEO
  • Longer to load
  • Perceived as difficult to produce

Most marketers already have trouble creating infographics and don’t want to deal with the added complexity of a gifographic.

But this thinking should stop. First, gifographics aren’t hard to make at all (which I’ll explain). Second, they aren’t much more expensive than traditional infographics. Third, gifographics are the latest iteration of visual content, but they won’t be the last. As marketers, we all need to continue learning and offering better content to our audience. If anything, learning how to make gifographics should be a priority.

10 best gifographics

If you’re still not convinced, these 10 gifographics will do the talking. In no particular order, I give you:

  1. Infographics VS Gifographics (As shown above) by SEO Expert Page
  1. The Author Rank Building Machine by Vertical Measures

The Author Rank Building Machine #verticalmeasures #Infographic #Authorrank

  1. How to Eat an Artichoke by Ocean Mist Farms

how-to-eat-an-artichoke-gifographic-image 7

  1. Remove to Improve: The Data Tables Edition by Darkhorse Analytics

data-tables-edition-image 8

  1. Cheetah by Jacob O’Neal

cheetah-image 9

  1. How to Use Tumblr by SEO Expert Page

tumblr-is-social-media-image 10

  1. How Google Works by Quick Sprout
How Google Works
  1. Some Facts You Might Not Know About Babies by The Major Design

javitottnagy-baby-image 12

  1. How a Car Engine Works by Jacob O’Neal

how-car-engine-works-image 13

  1. How Social Signals Impact Search Engine Rankings by Quick Sprout
How Social Signals Impact Search Engine Rankings

As you can see, there’s a lot of variety when it comes to making shareable gifographics.

Unlike infographics, which all come from the same mold, gifographics can be:

  • Populated with animated GIFs (Infographics VS Gifographics)
  • Live-action GIFs (How to Eat An Artichoke)
  • GIF-like presentations (Remove to Improve)

There’s really no limit to what creative marketers can accomplish.

How to make a gifographic

If you’re using Adobe Photoshop, here’s how you can make a gifographic.

  1. Create a storyboard

One of the main functional differences between a gifographic and an infographic is that a gifographic is like a video tutorial, as opposed to a written guide. Gifographics are most appropriate when you want to hold your reader’s hand and guide them through the information being presented.

Once you’ve decided to use a gifographic, keep in mind that, like a video, it should be scripted. Start with a storyboard. Knowing what frames you’ll need to make before you take apart your source images is a good beginning. This can be as simple as sketching each frame on a notepad.

  1. Create a draft of an infographic

The next step is to produce a draft of an infographic. Nothing colorful or fancy – but finished enough for you to see how the vision will come together.

A gifographic is really just a series of infographics stitched together, so making the first one in the series as a proof of concept is helpful.

  1. Open the PSD file of an infographic or template

Once you have an infographic, choose the areas to modify. Cut, rotate, move, and add to your existing images and icons per your storyboard.

  1. Save and number image files in a separate folder

As you’re doing this, save each frame as a separate, numbered image. That way, when it comes time to load them into your gifographic stack, there won’t be any confusion.

  1. Load your images into the stack

Click “File > Scripts > Load files into stack.” Double check the layer panel and animation window.

  1. Display your frames

By default, only one frame will be shown in the animation window. To change that, go to “Pallete Options > Make Frames from Layers.” If the images are in the wrong or reverse order, just click on “Palette Options > Reverse Layers.”

  1. Set animation speed

Set your animation speed. The standard is one second. Preview your animation after selecting a speed, and don’t forget to set the loop to “forever.” Then save your brand-new gifographic.

  1. Share it everywhere

Share your beautiful creation with the world. Pinterest is a great place to curate it. Gifographics are still a rarity, and if you make a semi-decent one, you’re likely to see interaction and shares on a level never experienced.

Looking to score big points with your target audience? CMI’s 2016 Content Marketing Playbook has tips, insights, and ideas that can help increase your success with 24 of the top content marketing tactics.

Cover image by Matt Hobbs, Public Domain Archive, via pixabay.com

Author: Alp Mimaroglu

Alp Mimaroglu is a Senior Marketing Automation Manager at Symantec and expert in content marketing. He specializes in marketing automation, demand generation, analytics, and marketing technology. Alp has extensive experience with both business and consumer marketing. He’s passionate about how technology is rapidly becoming the key to success in both the corporate sales and marketing landscapes. Follow Alp on LinkedIn and Twitter @alpmimar.

Other posts by Alp Mimaroglu

Join Over 150,000 of your Peers!

Get daily articles and news delivered to your email inbox and get CMI’s exclusive e-book Launch Your Own Content Marketing Program FREE!

  • http://www.gmrwebteam.com/ Ajay Prasad

    A gifographic! Looks really good, but I doubt every business can afford to create such infographics for their content as they are expensive. Also, I might be wrong but these images are very much interfering with the scrolling action on my desktop. However, can’t resist myself looking and enjoying them:) They are fun to watch and I would recommend using it once.

    • Alp Mimaroglu

      Hi Ajay, thanks for the feedback. As I mentioned
      to Serious Vanity above, gifographics wouldn’t cost significantly more
      than an infographic. Videos, for example, are still more expensive.

    • antquinonez

      Ajay, I agree, There has to be some return on investment consideration. There’s some potential here but limited appeal to most content sponsors.

  • http://www.imaginepub.com Alex Braun

    Very cool examples here, but one thing that seems worth mentioning is that GIFographic designers should try to use larger, weightier body fonts than on typical infographics. The image compression on GIFs can often make smaller fonts very difficult to read, as is the case on a few of these.

    • Alp Mimaroglu

      That’s a great point, Alex. And yes, you can see the compression in some
      of these gifographics. I’ll add this additional pointer to the post.

  • Michele

    I wonder about the accessibility of these gifographics, if put on the web. Will they pass WCAG 2.0 level AA?

  • http://www.seriousvanity.com Serious Vanity

    I can see where amongst a large collection of infographics on a site like Pinterest, the gifographics would stand out, and as a content creator I think they’re cool. But if given the budget choice between gifographics and videographics, I’m not sure a company won’t just lean in to investing in video, because there’s so much more data to show the benefit. Time will only tell if gifographics can compete, but it’s great to see so many more options for educating clients and customers in a dynamic way.

    • Alp Mimaroglu

      Thanks for the input. I think it depends on the type of video you’re
      talking about. Videography prices range widely, but most professional
      agencies will charge far more for even a short video than it would cost
      you to pay an infographic designer to make a gifographic. For example,
      The Author Rank Building Machine and Remove to Improve gifographics
      would not cost significantly more than a regular infographic.

  • Ashley Taylor Anderson

    These are super cool and super easy to build with Ceros, my company’s interactive content marketing software. Check it out at http://www.ceros.com.

    • Cathy Mayhue

      Hi Ashley, do you have a user friendly to do this with out having to slog it out manually using photoshop or write programming code?

      Cathy

  • http://www.verticalmeasures.com/ Arnie Kuenn

    Hey Alp – thanks for including our infographic (#2) above. It’s one of our favorites too.

    • http://www.alp100.com Alp Mimaroglu

      Arnie, happy to include your gifographic. I liked it alot also.

      Alp

  • jsn

    I think this is a neat idea, but I wonder if you could build them to give the user control over playback. The eye is drawn to animation. Having more than one happening at any given time might shift the focus of the reader from animation to animation, skipping any content in between. I think if you can give the user control over the playback of each section somehow, it might be less distracting.

  • https://mall140.com Manikandan S

    Dear

    Alp Mimaroglu i you have taken great effort to write this article,,, I am wondering, How he planned and executed..

  • http://www.w3storm.com/ Rj Rizon

    wow, awesome Gifographics!

  • AI

    Great

  • http://www.gmrwebteam.com/ Ajay Prasad

    Thanks @gwynethmarta:disqus for the link. Excellent post there. I think it is gonna work for me.

    • Marta Olszewska

      Glad you like it @ajayprasad_gmr:disqus ! Let me know if we can help you in any way with your gifographic :)