The Do’s And Don’ts Of Infographic Design

Advertisement

Editor’s Note: You might want to read Nathan Yau’s article The Do’s And Don’ts Of Infographic Design: Revisited1 here on Smashing Magazine which is a response to this article.

Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic.

Infographics are visual representations of information, or “data viz” as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years.

Of course, just as Web 2.0 changed 1.0, today’s infographics are far more eye-catching than simple pie charts and bar graphs. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways.

While some design trends come and go, infographics are here to stay. With brands like USA Today, The New York Times and Google and even President Obama getting behind them2, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely.

Wrapping Your Mind Around Data Viz

Designing an infographic is not the same as designing a website, flier, brochure, etc. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Here are some simple rules to follow when wrapping your mind around proper data viz.

Show, Don’t Tell

A rule of cinema is to show, don’t tell. The same holds true for infographic design. The foundation of any good infographic is data viz. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn’t miss a single opportunity to visualize data. Take this portion of an infographic about Twitter by ViralMS3 as an example:

twitter infographic4
This Twitter infographic writes out the data, rather than visualizing it.

What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph. This would enable someone to quickly look at this section and see what’s going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything.

If you’re having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Every once in a while, turn off the text layer and see whether the infographic still makes sense. If there isn’t any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing.

If the Client Wanted an Excel Chart, They Wouldn’t Need You

It might sound harsh, but it’s true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Taking the data from above, which of the two graphs below do you think would make a client happier?

unique data viz5
Two ways to visualize the data from the Twitter example above.

If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up, as in the examples below:

infographic examples6
Ways to dress up simple graphs for an infographic.

Typography Should Not Be a Crutch

Typography can make or break a design, but it should not be the solution to a data viz problem. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here’s an example:

Too much dependence on typography7
TravelMatch’s infographic highlights too much.

Whenever I see this, I’m reminded of the “Where’s the beef?” ad campaign, and I think, “Where’s the data viz?” Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography.

Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don’t fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:

data visualization8
An example of how to visualize the TravelMatch data, rather than relying on typography.

Typography Has Its Place

All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through.

Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.

9
The title of an infographic is your chance to draw attention to the design.

Organization And Storyline

Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it’s part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. This can be challenging at first, but you can follow some general rules to make things easier.

Wireframe the Infographic

Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how. Set aside an hour to sketch things out and make sure it all makes sense. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page.

Think Outside the Box

As you wireframe the infographic, you will identify section breaks that help to tell the story. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony.

For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Here’s some outside the box layouts to get your creative juices flowing:

unique infographic layouts10
There are many unique ways to lay out an infographic that will keep the viewer engaged.

Tell a Story

All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.

Visualize the Hook

Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!” As a designer, you should make this hook the focal point of the design if at all possible. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Give the most important information the most visual weight, so that viewers know what to take away. Here are some examples of well visualized hooks:

hooks in infographics11
Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis.

Cleaning Things Up With Color

The difference a color palette can make is amazing, especially in the world of infographics. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. The wrong palette can turn a great topic into an eyesore, harm the brand’s image and convey the wrong message. Here are some tips to consider when choosing colors for your infographic.

Make It Universal

In Web design, it’s always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. You must also consider what looks good online.

For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult.

A Three-Color Palette Is Easy on the Eyes

With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.

If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring.

Use the Tools at Your Disposal

When picking colors, you don’t have to reinvent the wheel. A number of great websites out there will help you choose the right palette for your infographic. Adobe’s Kuler12 offers fresh themes and a searchable database, as well as an easy tool to adjust the palette that you’re interested in. One issue with Kuler is that all of the palettes have five colors, and the colors are sometimes from completely different families, rather than shades of a few primary colors, so finding the right palette can be like searching for a needle in a haystack.

Another color-picking tool is COLOURlovers13. This database is easier to search through: it breaks palettes into different themes and can be sorted by favorites. While most of the palettes also consist of five colors, the colors are not always given equal weight; instead, the tool suggests which should be dominant. Here are some good and bad palettes for infographics:

infographic color palettes14

Final Thoughts

While these standards are important to consider for most infographic designs, sometimes an infographic comes along that breaks all of these rules and still succeeds immensely. In the end, clients like “eye candy” and designs that “pop!” While such terms are subjective (and annoying to most designers), we all know a great infographic design when we see one, and your clients do, too. Use these rules to guide you into the infographic realm, but create your own techniques and standards after you’ve gained some experience.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/10/21/the-dos-and-donts-of-infographic-design-revisited/
  2. 2 http://www.whitehouse.gov/share/infographics
  3. 3 http://www.bitrebels.com/wp-content/uploads/2011/08/Happy-Fifth-Birthday-Twitter-Infographic-1.png
  4. 4 http://www.bitrebels.com/wp-content/uploads/2011/08/Happy-Fifth-Birthday-Twitter-Infographic-1.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/10/tweet-o-meter-uptodatenew.gif
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/09/dressed-up-graphs.gif
  7. 7 http://www.submitinfographics.com/full-size-infographics/image-153.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/10/Plane-newest.gif
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/09/infographic-headings.gif
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2011/10/unique-infographic-layouts.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/10/hooks.jpg
  12. 12 http://kuler.adobe.com
  13. 13 http://www.colourlovers.com/
  14. 14 http://www.colourlovers.com/

↑ Back to top Tweet itShare on Facebook

Amy Balliett is the co-founder of Killer Infographics, an infographic design agency located in Seattle, WA. Killer Infographics began as Submit Infographics, a user generated infographic gallery allowing designers to submit their work for review from a team of artists. After many requests, the company shifted into a design agency while still running the submission gallery. Since its inception in the fall of 2010, Killer Infographics has produced over 750 viral infographics for companies large and small.

Advertising
  1. 1

    This is nice satire on infographics and data visualization. I got a good laugh out of it!

    Nice work!

    4
  2. 52

    A direct critique of this article is up on flowingdata.com. It’s informative, but not flattering.

    http://flowingdata.com/2011/10/19/the-donts-of-infographic-design/

    4
  3. 103

    As a student of Information Design I am very pleased that so many people are mentioning Tufte.
    I am glad this article defines itself as ‘data viz’ a poor phrase I think should be reserved for exactly this kind of chart junk. We can call quality, clear, subtle work good design.

    3
  4. 154

    I feel moved to comment.. (I work in this field, and feel passionate about it)

    Were this article written in the spirit of “here are things I happen to like – take it with a grain of salt” I would have no complaint.

    But this was written as “here are good practices…” then it proceeds to highlight horrible practices. That twitter gauge? It fails in a number of ways. And I haven’t the faintest idea of what the airplane-seat graphic is trying to communicate. Anybody serious in this field would never publish such things.

    I urge those who may be new to data visualization to broaden their reading (many good links in the comments already). Please do not take this article as the final word.

    5
  5. 205

    @LDR: I think – but I am not sure – that this article may be meant as a joke. So for the benefit of everyone here, please can the author now clarify this.

    0
  6. 307

    I think some of the ways of displaying information are so unique that it makes them hard to read. (Bar graphs may be boring but they’re about ten times easier to read than the Twitter speedometer.) Also, too many infographics work too hard at being pretty and throw quantifiability out of the window. It should be possible to deduce percentages or ratios from the visuals, or as a last resort it should be written down. Designers should read up on Neurath and think a little harder.

    1
  7. 358

    The article was interesting, yet I can still agree with most people’s comments on how some of the examples are quite incomprehensible. I’m quite interested in infographics in particular, and I always tend to go data first, design next. It may be boring sometimes, but when I was making infographics for a newspaper, I couldn’t get TOO creative.

    I think the color part of the article was a bit too simple as the issue is much more complex. While those tips on color palettes may occasionally work well, color has a very important role in conveying messages and you cannot always stick to the suggestions presented. For example, when color is used to label something in infographics, it’s a particularly strong attribute distinguishing elements from each other. In these labeling cases it’s most efficient to use colors with distinguishable names – in other words, completely different hues, such as blue, green, red, yellow, brown, orange, etc… The need to label more than five elements already breaks the relatively good guideline of limiting the palette to five different colors (not of completely different hues). However, qualitative scales are best presented this way.

    While the bad color palette example with different shades of blue would not work for most purposes, it would be the best way to represent quantitative data. Such sequential color scales are very intuitive to read in some cases; just think of maps, for example, which are pure infographics! That blue color scale could be used to present the depth of seas, for example – and also pretty much the only sensible way to do that! And while we’re not always creating geographically accurate maps, there are various cases in which we need to visualize quantitative data, and in most cases using only one hue makes the graph more comprehensible at first glance.

    Sure, the color issue wasn’t widely dealt with in this article, but I just wanted to point this out because you cannot simply define some color palettes “bad”. You could write multiple articles on color usage in infographics alone, it’s such a vast area to research.

    0
  8. 409

    You make out like infographics is a new web based term… although I’m now a web based creative my background is in design and illustration for educational publishing. Infographics are a great way to display information to kids in text books in a visual form. This is a term and practice I’ve been using for almost 20 years.

    0
  9. 460

    Am I alone in thinking that almost every example on this page is terrible?

    I believe the Tuftean term is “Chart Junk.”

    0
  10. 511

    talentless in seattle

    October 25, 2011 12:32 pm

    I disagree with most every statement made in this article. First off any “good designer” can design an info graphic. That’s what design is, ordering and displaying information so that it can be easily read, understood and hold your interest while doing so no matter if its typography or image.

    Maybe if you were offering enough pay, or pulling from a pool that actually included good designers, and not people who stole a copy of the creative suite and now call themselves designers you could understand this. When you’re only willing to invest in trash, you’re only going to get trash. If you are crowd sourcing, well then consider the crowd. who has time to submit work they have done for free to someone else? Most likely people who are not good enough to get paid for it

    The examples are rubbish and the reasoning behind them is shallow at best, and your comments only serve to prove that point.

    0
  11. 562

    Dataviz Schmataviz, esp. the ‘planes thingy. I identified straight away with the Dr Strangelove version, and glad it wasn’t just me that stared vacantly at the picture of a clutch/brakedrum/Dalek’s eyeball/beermat (the round thing) for at least five seconds before moving swiftly on. By the way, what’s a “Spedometer”? Shurely shome mishtake?

    On a positive note, I always thought that Infographics laid eggs, so I learned something today.

    0
  12. 613

    Interesting upto a point but in the ’empty seats’ example the second picture never included the Snakes which was by far the part i was most interested in.

    0
  13. 664

    The infographics are too cluttered and busy and hard to understand. The purpose of a data visualization is to get your point across as clear and concise as possible, You should not have to sacrifice functionality for glitz.

    0
  14. 715

    Information Design: Not For Sale
    Many people have responded to Amy Balliett ‘s article on The Do’s And Don’ts Of Infographic Design, including Nathan Yau’s rebuttal. You will find many comments about why her points don’t make much sense, and why we all believe she needs to learn more about information design basics (I mean, do you understand the chart above?). Rather than continue on specifics about the actual infographics, I’d like to elaborate on the deep personal disappointment I felt when I read Balliet’s Do’s and Don’ts.
    See full post: http://www.humantific.com/information-design-not-for-sale/

    1
  15. 766

    Amy, thank you for this article! It is well done and draws out many great points that help us think about what we are doing and why we are doing it.

    Love the point about if they wanted just a bar graph they would of used Excel.

    Whilst there is a debate going on, my applause to you for the work to create this article and put it out in the discussion.

    I forget the latin, but it means the following: “In matters of opinion, there can be no agreement.”

    However, I agree…nice work!
    :)

    -1
  16. 817

    Amy,
    Let me say “Well presented” first. There may be different views for different people, even I can’t full agree with few things, but those are not for a fight. I read the idea you try to present here and you succeed in that.

    Thanks

    0
    • 868

      People, please, STOP IT!
      Reading through some comments makes me fell that people who write them have zero knowledge on the topic or just don’t want to hurt someone’s feelings. Critical view is way more useful than complimenting bad result! This article presents vague and inaccurate explanation accompanied by critically bad visual examples. That is fact, not a point of view.
      Due to article’s exposition, it’s not something that should be left out with the idea that at the end of the day it is not that bad. It is. Popular articles like those make various CEOs want to present their data through crappy “infographics” which present more colors than data, more icons than information, more lenght than detailed view… As many people misunderstand, data visualization is not advertising. Author of this article, as well as few other people commenting here, clearly don’t see the difference. And there is nothing bad about telling them that they are wrong.

      0
  17. 919

    Dee, I completely agree with you. I’m sorry but this is the worst article I’ve ever read on information design, clearly displaying lack of knowledge on what design and information design is all about. A ‘true designer’ would recognize that her commentaries and examples make no sense; it is sad to learn that now when the opportunity exists to take design to the next level, this is the type of articles being written.

    1
  18. 970

    Amy,
    Very well said: “A rule of cinema is to show, don’t tell”. A quote to remember for all the app designers from PC to web to mobiles.

    Superb insights on how creative can be infographics and overall color themes.
    Have you come across some dynamic infographics generation services ?

    0
  19. 1021

    In follow up to Gerd Wippich’s comment above, please everyone, don’t forget the #1 rule: provide alternative text. It’s one of the oldest and most basic web accessibility rules, and so many people still miss this. This is good not only for accessibility, but also for SEO and when the image cannot be rendered (due to broken image source link, lowband, images turned off, etc).

    1
  20. 1072

    As an infographic designer i both agree and disagree with your points, i think that most graphics cannot support themselves on visual data alone and that text is very much needed. I also see that you used this as a promotional tool, i am not certain that i agree with this, i also used to write for Smashing and would never have based a post around my own work. There are many many more fantastic examples to prove your ideas.

    thanks killer_bunnie

    0
  21. 1123

    Great article. Might should have had most of the seats “empty” in the infographic. Maybe have some percentage with a person’s silhouette. Or leave lots of blank on the real estate. See, commenters should give useful feedback.
    As to the article, I say “Bravo!” One theme I took away was a good Infographic stands on its own and represents its owner. Its something someone would want to print out to decorate their office or cube. Thanks for the article.

    0
  22. 1174

    No matter if some one searches for his essential thing, so he/she wants to be available that in detail, so that thing is maintained over here.

    0
  23. 1225

    You brought up some good points here. I echo your sentiment regarding story telling.

    One thing that I don’t like about most infographics is that they are too data-centric. Too much stats and data can make the infographic seems boring.

    I think an infographic is more compelling when it tells a story using a combination of data, stats, images, and illustrations. The secret is to organize the flow of information and data in a way that it is telling a story with characters, problems & conflicts, and include some takeaway messages to resolve the problems. As most studies have indicated, story has a powerful effect on people.

    We recently did an inforgraphic on Internet privacy. Originally, the designer made it very data intensive. After adding the images and cartoons, it tells a better story. You can see it here, http://blog.hotspotshield.com/2013/07/22/who-is-tracking-you-online/

    0
  24. 1276

    I think that internet is a battlefield for a really good design ideas. If you are not good enough you are going out of the map. Infographics is your weapon which can beat the competition at this fast growing world.

    0

↑ Back to top