Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

The Do’s And Don’ts Of Infographic Design

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.

Further Reading on SmashingMag: Link

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 them6, 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 And Infographic Design Link

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 Link

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 ViralMS7 as an example:

infographic design8
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 Link

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 viz9
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 examples10
Ways to dress up simple graphs for an infographic.

Typography Should Not Be a Crutch Link

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 typography
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 visualization11
An example of how to visualize the TravelMatch data, rather than relying on typography.

Typography Has Its Place Link

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.

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

Organization And Storyline Link

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 Link

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 Link

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 layouts13
There are many unique ways to lay out an infographic that will keep the viewer engaged.

Tell a Story Link

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 Link

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 infographics14
Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis.

Cleaning Things Up With Color Link

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 Link

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 Link

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 Link

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 Kuler15 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 COLOURlovers16. 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 palettes17

Final Thoughts Link

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.


Footnotes Link

  1. 1 /2011/10/21/the-dos-and-donts-of-infographic-design-revisited/
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9 /wp-content/uploads/2011/10/tweet-o-meter-uptodatenew.gif
  10. 10 /wp-content/uploads/2011/09/dressed-up-graphs.gif
  11. 11 /wp-content/uploads/2011/10/Plane-newest.gif
  12. 12 /wp-content/uploads/2011/09/infographic-headings.gif
  13. 13 /wp-content/uploads/2011/10/unique-infographic-layouts.jpg
  14. 14 /wp-content/uploads/2011/10/hooks.jpg
  15. 15
  16. 16
  17. 17

↑ 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.

  1. 1

    Emiel Kwakkel

    October 14, 2011 3:08 am

    Should have been posted like one week earlier. Then that awkward standard chart on my infographic wouldn’t have made it through I guess. Thanks for the great tips!

  2. 2

    I understood the text version of the “empty seats” data. Even though I saw that first, I still can’t get to grips with the infographic version. I know it should be telling me that there are enough empty seats to fill enough flights to keep a big airport busy for two-thirds of a year, but I don’t get it.

    I can understand infographics are meant to be more appealing, but they should still give us the meaning.

    • 3

      I totally agree. I thought the first empty seat graphic was easy to understand with a hilarious “snakes on a plane” reference :)

      The infographic is hard to understand and removes all focus away from the actual message. I feel like counting seats, and then fall asleep…

    • 4

      Glad someone else feels the “Airplane empty seats” infographic is illegible. The original “text-heavy” graphic is much better.

      Sometimes words ARE better than pictograms, and learning how to assess that is as important as having visual skills. In the Airplane Empty Seats example, the story in words is just that: a story. Yes, it has data in it. And yes, it has a hook. But the sequencing of the data in words (plus some humor) + the drama of all those patading jets make it far better at conveying its message than the jumble of tiny icons found in the infographic.

    • 5

      Some so called ‘cool’ infographics’ are very difficult to understand. It took less than a minute to understand the first ’empty seats’ graphic where as the infographic one did not make any sense to me even after 3 minutes. Most of the infographics examples here are over-kill.

    • 6

      oh man I sat here and stared at the plane one for about 5 minutes and felt completely stupid.

      anyway…. anyone else here just sick and tired of info graphics? I tend to just ignore them

      • 7

        I’m afraid I gave up reading after the abominable plane graphic.

        I’m not completely sold on Tufte, but I do like his idea of “chartjunk” – clutter that adds nothing to a piece of visual communication. I’m all in favour of a bit of chartjunk now and then, but the plane graphic is almost entirely junk. As a result, it’s almost entirely meaningless.

        I prefer the first – but I don’t think it’s fair to critique it as an infographic. Because it’s not an infographic, it’s an illustrated piece of text. And that’s the best way to present that particular piece of information.

        Oh, and the cool kids don’t call it “data viz”. I know, I asked them.

    • 8

      Phew, I am not the only one. I have tried reading that infographic about 5 times now, and I still don’t understand a thing about it.

      Also, does anyone else feel that Graph A (the bar chart) for the Twitter thing is easier to read that the other speedometer one?

      The speedometer one just has too many elements in it, and it’s annoying to keep flicking to the legend, and then flick back to see the numbers on the chart.

      I find that a lot of infographics nowadays rely too much on making things fancy with all sorts of graphics. Sure, you should keep things interesting, but don’t make it so fancy that it’s unreadable.

      • 9

        I agree – Graph A is far from perfect but it is a much clearer presentation of the information than Graph B. The client didn’t hire you because they wanted to get away from Excel, surely they hired you because they wanted to get their (data) message across. I also agree that the proposed infographic on empty seats on planes is no better and possibly worse than the original. And as for the 3 “hooks” – I could only see the NFL helmet as a hook, other two seemed just part of the clutter.

      • 10

        I completely agree with you.

    • 11

      I also couldn’t understand the “improved” infographic. I also thought in your A/B test that A was much easier to process, even if the color pallet was a little week and the bars were backwards (traditionally tallest is on the right in roman languages so the bar chart gets TALLER with time not shorter…

    • 12

      I thought this was a horrible example of trying to improve an infographic. The fact is, the reason we use inforgraphics is to display information in an easy to understand and visual manner. I believe the first example did everything needed from an infographic. It caught your eye, explained its purpose, and gave you the information it needed to.

      The second infographic may look nice, but if you wanted people to get that information, it failed miserably. While I did get it, after looking for a minute, not everyone will. I had to look at it for a longer than I would have liked to just to get the same information the other one gave me in seconds.

      The whole point of infographics is to give information in a visual manner. I don’t think using text takes away from it’s visual appeal. I do know that loosing the information in the design does not get the job done.

      I did really enjoy this post. Great information other than disagreeing with the TravelMatch example.

  3. 13

    I just wanted to jump in real quick and point you to alternative views on the subject. As some of you might know there’s a bit of a quarrel going on in the infographic community regarding best practices of visualization. I guess many design communities have similar camps battling out “The Truth.”

    While Amy does a great job motivating her design choices there are a few statements that some people who come to visualization from the scientific angle would take issue with, like the fact that she denounces bar charts in favor of more flourished visualization.

    It boils down to the fight between David McCandless and Stephen Few, both highly regarded professionals and leaders in their field, but adamantly in opposition to certain design practices that their nemesis holds dear. Obviously there is some common ground between them and viable alternative views on the subject, but I thought I’d mention that the “do’s and don’ts of infographic design” can vary greatly depending on the school of thought you subscribe to and need not be the one this article put forth.

    Please don’t take this as opposition to the article Amy wrote, but rather a suggestion for further reading:

    Both Enrico and Andy provide a great resource for beginners and advanced designers alike, so please check out their blogs if you haven’t already.

    • 14

      Jakob you make a very good important point. Coming from information visualization my first reaction to many info-graphics is not favorable. But, there is a place for them when they are done well. I personally fall in favor of Stephen Few in that battle you mention.

    • 15

      I’ve always been puzzled by the David McCandless vs Stephen Few thing (which, as you say, pretty much summarises every argument about information graphics, ever).

      They’re two separate fields: journalism and business intelligence. One makes graphics for communications, the other, for analysis. One’s goal is distinctive graphics that can attract passive audiences, the other, versatile graphical formats that can be interrogated by committed audiences.

      The only thing they have in common is making visuals based on numbers. Why is there any conflict? It’s like asking, who makes the best vehicles: Ferrari or JCB? Or criticising Ferrari for making vehicles that are of little use on a building site. Or criticising JCB for making vehicles that don’t swoosh as they go by.

  4. 16

    If the message of the data is lost in the visualisation, then the infographic has failed. The ’empty seats’ example falls foul of this: I understand the original version better than the ‘reworked’ one.

    Also, though the overall colour palette of the ‘tweets per second’ speedometer is fine when taken in isolation, it’s completely off-brand for Twitter. The information is clearer than the original version, but the indicators on the dial don’t stand out from the background enough. I’d have muted the background a bit more rather than relying on a dropshadow to separate them out.

    Like any piece of design, you need to consider your audience and the context in which the infographic will be viewed. If it’s to go on a very businesslike website – where the main design features are clean edges, whitespace, and a minimalist approach to its colour palette – then anything involving cutsey icons is out. Don’t make the mistake of speaking down to your audience.

  5. 17

    Some of those infographics utterly fail in their job of actually conveying information. That to me is a rather significant “don’t”.


  6. 18

    I understand what the article is trying to say, but the ‘best’ examples are actually not good at telling their own story/showing the info.

    1. The improved twitter infographic is difficult to understand because there isn’t much contrast.

    2. The empty plane seats was confusing.

    3. The green “hook” example didn’t really look like it was a hook.

    Perhaps the team can go back through the article and switch it up with better examples to illustrate the point. :)

    • 19

      I agree, the versions A in the examples are better and what I’ve learned from the article and comments is: use a good design, don’t need to be trendy, be clear.

    • 20

      well stated.

  7. 21

    Thanks for the article, Amy. I appreciate your ambition to create a different and unique experience.

    Unfortunately, your examples may suggest the opposite of your actual point.

    Most people are familiar with excel charts and find them intuitive to read and use. Whether or not they are ugly and boring is entirely in the eye of the viewer. The primary goal should be to speak to your audience and bring your point across wherefore it’s necessary to make the information accessible.

    The experience for the reader can be enhanced by adding eye-candy, but it’s always a compromise with usability. There is no point in making something pretty just because you can if it leads to a frustrating reading experience. A very fine line to walk I’m afraid.

  8. 22

    Digital Essence

    October 14, 2011 5:03 am

    For me, you can’t beat the simplicity of Isotype

  9. 23

    I do believe that infographics are essential to the web, I’m afraid this article is making the case for eye candy, which brings the quality of an infographic down. Creativity? Yes. Creativity is necessary to properly portray data, but it’s more of an effort to show data clearly and accurately, not with “bling”. I’m afraid that the bling takes attention away from the data, and can often skew it in the name of hipness.

  10. 24

    These responses are great and I appreciate everyone’s input! As Jakob put it, there is a big debate in the infographic industry regarding what an infographic is and I clearly come out in favor of “eye candy” side of things, as we’ve found more success for our clients in that arena.

    In this article, I am trying to show examples of visually stimulating choices, but your comments make it clear that my examples came up short so I apologize for that. The point is that infographics offer a great opportunity to think outside the box, and in our experience, there is a preference for unique forms of visualization rather than simple charts and graphs. Still, as you’ll note in our portfolio ( there is a mix of both because certain topics call for certain design choices.

    Unfortunately, I was limited with the examples I could rework, as I had to get permission from the original owners of the work to use their infographics as “don’ts.” Next time, I’ll have our design team mock up some do’s and don’ts rather than go this route. All that said, the primary points of the article remain the same – don’t miss an opportunity for data viz, tell a story with your design, don’t rely too heavily on typography, and choose a color palette that is welcoming and easy on the eyes.

    Please keep up the candor in this discussion. It’s great to hear your thoughts! This is my first time posting on Smashing Magazine and I have already gained a great deal just from this conversation alone!

    • 25

      Hat tip for a fair response to fair criticism and for unreservedly making the case for eye candy. When the brief is to attract attention, make something that attracts attention. When the brief is to visualise data, then is the time to follow best practices and crack out the Tufte books. Don’t try to shoe-horn one into the other, making boring visualisations of weak data sets or turning important data into shallow eye candy.

  11. 26

    This is more of decor than design. It’s prettier but not more functional.
    Good design is knowing when a bar chart conveys the correct information faster and more comprehensible.

  12. 27

    I think an important facet here that needs to be addressed is lead generation. Upon simply reading the art of the graphics you can see they do a great job of informing us, but one thing a client is going to want that coincides with aesthetics is to create traffic. Infographics build inbound links for a fraction of the cost of a traditional online marketing campaign and generate brand awareness. They just need to be captivating. Creating monotonous bar graphs and pie charts can be risky simply because you may not be re-posted. You want to get peoples attention, so much so that those people want to tell somebody else about it. I understand this process and an aesthetic approach creates a high probability of the content being shared. This gets a thumbs up from me.

  13. 28

    With apologies, I agree; the “empty seats” infographic is incomprehensible at first glance and counter-intuitive on closer inspection. As the article – excellent in many other ways – points out, infographics need to be eye-catching; but they also need to communicate complex information in a simple and easy-to-understand manner.
    – The actual calendar month references don’t add to our understanding; in fact, they add a “red herring.” Does it matter which month is which, if you’re not segmenting the data on a monthly basis?
    – The arrow pointing at the text label for the 217 days makes It look like the amount of space allotted for that 217 days is the white space where the text is, when it’s actually the opposite.
    – Why are half the plane seats upside down, when no other elements are?
    – The data key in the center is inconsistent: one data point isn’t rounded, while all the others are. If there are 237M seats, that should translate to 522K empty planes, not 522,016.
    – The icon equivalency info should be below the data from which it’s drawn, not above; when you see it first, it doesn’t mean anything.
    – The info that 1 plane icon = 6.5K planes and 1 seat icon = 2.9M seats is totally random, obviously assigned after the design, to justify the number of icons the design allowed. This is an unfortunate example of a design idea trumping the data it’s supposed to represent.
    – Overall, there are too many “micro” elements, at the expense of “macro” communication of the main point. And visually, it’s just a carpet of little elements that dull the senses and don’t resolve into direct communication.

  14. 29

    Thanks for this I can’t help but click a link to view an infographic, most are well done and are great for quickly getting a message across.

  15. 30

    Thanks for this inspiring article, but IMHO an important aspect is missing: if you are designing infographics for the web, accessibility should be incorporated. This does not have to result in dull graphics, of course.

    For more information please read this article by Wilson Miner on «A List Apart»:

    And there’s this really excellent book on data visualization written by Brian Suda:

  16. 31

    I’m excited to see an article on data visualization on Smashing, as it’s an area of design I really enjoy. However, despite your commendable efforts, I don’t think this article is accurate.

    The primary goal of a data visualization is to clearly convey the significance of data using visual design. In all of your reworked examples, it is more difficult to understand the significance of the information than in the original version. The plane example is particularly confusing, and in the Twitter example, the bar graph was much easier to understand at a glance (although I still think it could be done more successfully than a bar graph).

    If your pretty design is obscuring the data, it has failed as a visualization. This article is a huge “don’t” of infographic design.

  17. 32


    October 14, 2011 2:54 pm

    None of these examples are good. Sorry to say that the excel chart at the top is easiest to read quickly. Is it the best way to render the data? That is debatable. But the chart below it is very difficult to read.

    If any of these charts were used to try to save people’s lives, you just got them killed…. (see Tufte’s Challenger excerpt from “Visual Explanations”)

    • 33

      Sally Bigwood

      October 21, 2011 8:53 am

      I am inclined to Tufte’s quote: If you numbers are boring, get some more numbers…” More effective, perhaps, than decorating the tedious numbers you’ve got.

  18. 34

    Sorry Smashing Mag,

    These are (almost) all chart junk.

    As someone else has said, please see Tufte for better advice.

    • 35

      Tufte is amazing, but I always want to like his data more than I do. Too academic for me to process, which ironically misses the point of visual data in my mind. In the micro he has good points but in the macro he’s more ironic than informative.

      • 36

        I’m also a Tufte fan and I think his principles are good ones to follow. Occasionally his work is a bit too minimalist though.

        I’m happy to see an article on infographics but have to agree with the majority of comments here – design should always show the data clearly or what’s the point?

  19. 37

    Overall I thought the post was solid. I think that people have short attention spans, and that eye candy keeps them captivated. Not sure why people are so upset about eye candy?

    • 38

      Not upset about the eye candy, just unable to understand the graphics. I’m a numbers person, and still could not figure out how the graphics represent the stories. The more simple graphics are easy to understand and tell the story instantly. Isn’t that more important?

  20. 39

    Sorry. Normally a big Smashing fan, but this article falls short of the mark for me. Too much emphasis on clever vs. communicative.

  21. 40

    It may just be me, but I don’t find the examples to be providing opportunities for particularly compelling stories. They seem to be providing 2 ‘dimensions’ of information in a 2 dimensional space which is never going to capture people’s imaginations as a story regardless of how it is dressed up graphically. For example: in the twitter example, what makes this information interesting? Is it that the top 3 events all relate to Japan (Tsunami, New Year’s, and Japan v US in the World Cup final)? Is it that of the top 5, they are all related to either Japan or the US or both? How can this comparison be highlighted so that there are 3 or 4 dimensions of information in a 2 dimensional space?
    Is the first question that the visual designer has to answer: “why is this interesting?”

  22. 41

    Perhaps some of the examples here aren’t the most intuitive, but they certainly are more visually interesting than the “before” images, and to be honest, compelling graphics are what clients really want.

    I think it’s important to remember that infographics are a huge tool for brand building and link building, and that overall clients tend to care more about compelling visuals and branding than they do meaningful data. In fact, a lot of clients (and designers!) don’t have the mind for data visualization the way they do for design so it can be tough to hit the mark every time.

    In doing infographics for clients, I’ve come to realize something that I think a lot of freelance designers don’t understand until they’ve worked with clients for a while: Yes, what I do is creative and artistic, but I have to also remember that that I am also providing a product. I have to take into account the needs of the client, and best practices for infographics are ultimately based on the balance between client needs, eye candy and maintaining the integrity of the data – all of which Amy outlines quite well.

    It is totally possible and best practice to visualize any piece of data that you have, even if it is with simple pictograms – it is possible to simply complicated data with practice. If you’re worried about the integrity of your data viz, then keep the graphs simpler and focus on the typography and maybe add a textured background to pretty up the design. And Amy is right – plan bar charts and pie charts are a no-no! Anyone can make those!

    Considering that this post is written for and by someone that works with clients, I think Amy does a great job of conveying what makes a good infographic. I agree with her that “eye candy” is an annoying thing to undertake, but if you’re working with clients you just have to grit your teeth and find a balance that works.

    • 42

      I respectfully disagree with your assertion that “compelling graphics are what clients really want.” Generally in web design, what clients really want is a successful solution to a business problem (e.g. elevated brand image, more customers, more sales, greater brand exposure). Compelling graphics are just one part of that solution.

      Part of a designer’s job is to steer the client toward what they need, not always what they want (the classic example being a client who wants to take up whitespace with an awkwardly large logo). In the real world, we often have to make concessions, but in my experience the client often ends up less satisfied in those situations.

      Data visualizations can be analyzed similarily. Eye candy is important, but if you’ve decorated it so much that the data is obscured, that is not a successful project. In that case, why not just make a typographic or illustrative poster rather than a data viz?

  23. 43

    I’m a little bump by the diminished importance of typography in an infograph. In my 6 years experience designing exhibitions for a Science Museum, type is as important as the focal [graphics] point.

    It is true that data visualization is practically taking the Excel document and enhancing it visually but that doesn’t mean not considering type. Typography is truly important because it gives structure, tone (how do you explain the data), aesthetics and hierarchy to the infograph.

    I have to add, that an iconic illustration of a subject-matter won’t necessarily mean that it’ll be functional. For example, the “% Healthcare paid by government” is misleading because it shows the higher the percentage the more its government pays and the IV bag is fuller; however, in reality, it should be the opposite, the fuller the IV bag the less the bag is used, or in this graphic definition, the less the government spends.

    • 44

      I don’t think Amy is diminishing the importance of typography – she is just saying that typography should not be a replacement for data visualization.

      • 45

        Kelvin Chiang

        October 14, 2011 6:25 pm

        true. I think diminish is not the appropriate word.
        My thought was that there should be example of proper use of type in an infograph, a piece as functional as one with a big graphic piece. Just to compare the two and how functional each one can be

  24. 46

    So the hook should be a the start, middle or end…
    Normally I come away with something new at the end of a sm post, this just left me feeling that I will steer clear of the cool kids ‘data viz’. it appears to me that it’s another example of style over substance. The bar chart was by far the clearest example of data visualisation. Sorry but this post has utterly failed it’s objective for me.

  25. 47

    bang man it’s such a nice article. It’s change my thinking for the chart design.

  26. 48

    Sorry, but this post is equal to Soulja Boy talking about how music should be done. One look at the website and there is no need commenting on the infographics. Data visualization is much more than just (poor) graphic design – that is rule number one. This hip wave, where anybody feels like making infographics, is taking the overall quality and general consciousness so much down. Posts like this one – no, actually the people who write them – just make it faster and steeper.
    I don’t want to be mean I just don’t want to be too nice to people with lack of self criticism either. Try to take it as feedback…

  27. 49

    Well I’m really not digging this article. It seems in these infographic-is-the-new-black-times you want to make an original designed infographic for every dataset. I think that you should really consider when to design a new way to show things and when not to. I think the tweetometer is too complex and the bargraph does the job better and gives a faster overview.

  28. 50

    I’m glad to see so many people are taking issue with this post, but I also totally get the balancing act of needing to please clients. I agree Tufte can be overly academic for some contexts, but I find that knowing what he teaches let’s me break his rules and add ‘bling’ in smart ways. In truth, the best way to design an infographic can vary quite a bit depending on the audience, but starting with known best practices helps to avoid doing more harm than good with decorations.

    I am disturbed by the typography comment as well. There are times when a graphic should make sense with no words…like if it’s for people who can’t read. That’s a valid point in some cases, such as if crossing language barriers. Otherwise, words really help to convey meaning. That’s why we’re all using them to comment on this post.

    The comment about this being just like clients who want to fill up all the whitespace with a giant logo is right on. I’ve worked on projects where the client was stuck on a certain visualization method and could have gotten the message across more artfully and clearly with the help of more words and fewer symbols to decode via legends. Of course, ultimately the client gets what they want, but I wouldn’t advocate taking whatever clients want and calling it the new best practices.

  29. 51

    Ryan Bollenbach

    October 15, 2011 6:52 pm

    This is a brilliant article, infographics are here to stay and I love ’em.

  30. 52

    At first, I thought this was going to be an article about how to not overdo infographic, using the empty seat graphic as an example of what not to do, but the author takes the opposite position–visualize at every opportunity possible. The objective of having charts is to help viewers quickly grasp the data they represent, it should not be viewed as an opportunity to exercise the most imaginative design.

    Take the Top 5 Twitter Moments for example. Which one can you see the ranking and the magnitude of each moment in relation to the others the quickest?

  31. 53

    Take a look at some interesting work by Nicholas Felton – he’s been producing a personal “annual report” for several years that feature some very nice “data viz” design:

  32. 54

    Thanks Amy for breaking the subject down.
    Colour transmission also has cultural associations in its usage. As a UK and OZ designers the palettes tend to be quite a different series. To me the palette you use is sophisticated and very US style. These don’t adhere to hard and fast rules, the OZ palette is one all of it’s own. Colour is affected by our surroundings and palettes tend to group and be associated with industry groups and so forth.
    The Airplane seat ‘stat’ is stunning enough in itself, the blue sky places the subject straight away and also the trivia snippet about, what look like jelly snakes, bringing in the fun element. Might make me look longer.
    If there are 237M empty seats then has some opportunities coming there way flying snakes and all.
    As for type, when there is a systemised hierarchy the reader catches on very quickly and scans the topics.
    Thanks for the links.

  33. 55

    Well, this is surely a great article.
    What I do recommend is, for every designer that would like to start making an infographic, check out these 2 templates which can give you a great start. The first one is: and the second is

  34. 56

    Excellent comments going on here on what is a polemical issue. Out of interest I did a Ctrl+F for SEO and found no instances of the term on the page. What I am trying to say is that if a consideration of how you expose the data and message is not contemplating search indexability, then it’s a sore oversight as their are options for how provoke user embeds, shares and expose the underlying data in search rich methods that will essentially amplify the reach of your message.

  35. 57

    Craig Broadway

    October 17, 2011 2:56 am

    I honestly do not see what is so wrong with using text! It can generally be assimilated more quickly, and clients don’t have to pay you for creating pretty pictures when text will do. Flare pieces are great, yes. And infographics certainly have a role in design and information dissemination. I just see warning lights in regards to the ability to read. I’ve already seen how ‘grate’ some ‘ppl’ can spell.

  36. 58

    Marc Archambault

    October 17, 2011 3:44 am

    The goal of any infographic should be to share an idea as clearly and as completely with as many people as possible. For the twitter example, yes, B is a slicker design, but the information is easier to grasp more quickly in example A, the dull ol’ bar graph. Honing in on information and clarifying meaning is also a good use of a designer’s brain.

  37. 59

    Marcus Marritt

    October 17, 2011 4:28 am

    Good read Amy, we design plenty of infographics at Zabisco and I cant think of any briefs when we dont apply the ‘rules’ you discuss. Although a couple of points from me: the anti aging infographic you pull out in terms of pushing the visual ‘hook’ theme, I find this to be a poor example of the concept as I cant deciphor one key strong hook from this, there seems to be no one single illustration that pulls off the page above all others (and isnt this what the ‘hook’ should be doing).
    Some briefs ask for a visually stimulating infographic, which is when we can focus more on the design and illustration, while other briefs that are probably driven by a heavier content type require more a emphasis on displaying the content itself. The airplane example above is a good way to explain this point, if the brief for this was to show the content in a visually engaging way then I think the second circular version has nailed the brief. However, if the brief needed a bigger emphasis on being able to read the message in seconds, then the first landscape visual hits this brief.
    Whenever working on a brief with our design team, I find it vital to ensure we have the right balance of pushing the level of design and displaying the data / content in a easy to digest way. I find alot of infographics are overly designed, too much emphasis on great illustration and forgetting the whole purpose of creating a infographic which is to make a data / content story as easy to digest as possible and not just display in a overtly creative way just for the sake of it. Although this is driven by the brief itself, not all infographics need to give the user access to information in seconds (if this was the case then simple bar and pie charts would do the job).
    One of the reasons, and there are many, why I love working on infographics is because the possibilities are limitless – including industry pros who can have vastly different opinions. Lets keep pushing the field of infographics

  38. 60

    just looking at the ViralMS Twitter graphic – they are trying to get something very simple across – the most active twitter moments, not as your version shows – which of the highest activity tweets were highest (of secondary importance), hence no need for visual representation.

    Top do – understand what the graphic is aiming to show!

  39. 61


    October 17, 2011 9:12 am

    Firstly, I want to thank Amy for submitting this story, I enjoyed all your tips and certainly see some valid points in there.

    Although for me, your edict on infographics was just too simplistic, and could have been vastly improved by simply looking at your examples purpose before submitting them.

    Some infographics are there to be pondered like a piece of fine art (as you have attempted with the planes graphic), while others (like the original Travelmatch infographic) exist between the clicks of a mouse.
    In such a small time frame I must disagree with your assessment that a ponderous graphic would have been a stronger solution in place of type.
    A graphic such as the one you suggested would have slowed the pace, reduced the audience and ultimately failed in its purpose.

    By disregarding the purpose of the infogrphic you disregard its very reason for existing, and in doing so cant possibly make a true assessment of its worthiness.

  40. 62

    Thanks. That was a fantastic article. I’ve noticed quite a few bad (overwhelming) info graphics myself. However, I still can’t help myself from clicking on a tweet labeled [Infographic] Curiosity always gets the better of me.

  41. 63

    This article has some good points, but I can’t help but feel that some of the suggested alternative visualisations for infographics that are not sticking to the article’s suggestions, are worse than the originals.

    • 64

      Peter Paul De Leo

      October 26, 2011 5:55 am

      True. The redesigned graphics are visually more exciting but far more confusing. Don’t over intellectualize. If your trying to attract consumers thru visually attractive graphics with few words and still gets to the point. Example: If your selling shaving cream for men, a picture of a beautiful woman and the words Shaving Cream, that should do it.

  42. 65

    I believe that many infographics lose their original interest and purpose.

    The designer, more often than not, discociates the visual from the communicational aspect of an infographic and it results into beautiful, yet not verry understandable graphics.

    Every infographics designer should plan ahead considering that he/she should make something better than a standard graphic, more appealing, and more impacting since that is the main goal of such a project.

    I think that the key elements of an infographic are (in equivalent importance) :
    1. Clarity
    2. Hierarchy
    3. Identity ( Concordance with the client’s image)
    4. Relative originality.

    Saad Benryane

  43. 66

    Although there is some really great advice in here – the examples of the ‘redesigned’ info graphics you provided are not much better than the originals. In some cases, like the airline seat one, I had a harder time deciphering the ‘visualized’ one than the original. Please try to spend some additional time looking for information graphics that are actually beautiful AND functional. To echo Saadcreative:

    1. Communicate clearly: I don’t want to spend 5 minutes trying to navigate the ‘eye-candy’. Just because it LOOKS better doesn’t mean it works better.

    2. Clear visual hierarchy – Show me where I should start my journey through the visualized data.

    3. Honesty. Be careful that your graphics don’t distort the data. I see this happen so often and it is very troubling.

  44. 67

    Martin Silvertant

    October 18, 2011 12:48 pm

    Very nice article. One question though. Why are the color palettes on the left considered to be bad? I understand it for most because there’s too little contrast between the colors, but what’s wrong with the last one? Why do the ones on the right work? They are also fairly monotone.

  45. 68

    intresting artical, i found the idea of making neat and clean images’ graphics’ beeter then do noise. that way’ we can really read the visualtext.

  46. 69

    Great article Amy, loved your examples.

  47. 70

    I think the autor needs to learn the first basic rule of a good infographic design: give the information fast and clearly. Even the “good” twitter infographic is slow to read, always look at the colour and which is what… That’s a big fail, i prefer the “excel” one.

  48. 71

    Great article!

  49. 72

    I’m curious to hear what the author (Amy) has to say in response to all the criticism surrounding this article.

  50. 73

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

    Nice work!

  51. 74

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

  52. 75

    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.

  53. 76

    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.

  54. 77

    @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.

  55. 79

    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.

  56. 80

    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.

  57. 81

    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.

  58. 82

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

    I believe the Tuftean term is “Chart Junk.”

  59. 83

    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.

  60. 84

    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.

  61. 85

    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.

  62. 86

    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.

  63. 87

    Elizabeth Pastor

    October 31, 2011 10:04 am

    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:

  64. 88

    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!

  65. 89

    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.


    • 90

      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.

  66. 91

    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.

  67. 92

    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 ?

  68. 93

    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).

  69. 94

    claire stokoe

    August 12, 2012 11:18 pm

    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

  70. 95

    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.

  71. 96

    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.

  72. 97

    Peter Nguyen

    July 25, 2013 10:22 pm

    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,

  73. 98

    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.


↑ Back to top