The Do’s And Don’ts Of Infographic Design — — Readability

7/29/2019 The Dos And Donts Of Infographic Design www.smashingmagazine.com Readability

1/13

3/5/13 1:he Dos And Donts Of Infographic Design www.smashingmagazine.com Readability

Page 1ttp://www.readability.com/articles/y5ckebq9

smashingmagazine.com

The Dos And Donts Of

Infographic Design

by AMY BALLIETT OCT. 14, 2011

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 designers playground, and online businesses are growing more

and more appreciative of what can be gained from a bit of well-executed eyecandy. 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, todays 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 them, 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
http://www.whitehouse.gov/search/site/infographichttp://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/


2/13



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, Dont Tell

A rule of cinema is to show, dont 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 doesnt miss a

single opportunity to visualize data. Take this portion of an infographic about

Twitter byViralMS as an example:
http://viralms.com/images/happy-birthday-twitter.png


3/13



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

Whats 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 whats 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 youre 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 isnt 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 Wouldnt Need You

It might sound harsh, but its 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?
http://viralms.com/images/happy-birthday-twitter.png


4/13



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

If you answered Graph B, youre 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:
http://media.smashingmagazine.com/wp-content/uploads/2011/10/tweet-o-meter-uptodatenew.gif


5/13



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

an example:
http://media.smashingmagazine.com/wp-content/uploads/2011/09/dressed-up-graphs.gif


6/13



TravelMatchs infographic highlights too much.

Whenever I see this, Im reminded of the Wheres the beef? ad campaign, and I

think, Wheres 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 dont fit on a consistent scale, you might be able to

visualize them in a diagram. Here is another way the above data could have beenvisualized:
http://www.submitinfographics.com/full-size-infographics/image-153.jpg


7/13



n 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 isnt 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.
http://media.smashingmagazine.com/wp-content/uploads/2011/10/Plane-newest.gif


8/13



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 its part of the job for most infographic

designers. Usually, you will be given a lot of data and will need to create a visualstory 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
http://media.smashingmagazine.com/wp-content/uploads/2011/09/infographic-headings.gif


9/13



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.

Heres some outside the box layouts to get your creative juices flowing:


10/13



There are many unique ways to lay out an infographic that will keep the viewerengaged.

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
http://media.smashingmagazine.com/wp-content/uploads/2011/10/unique-infographic-layouts.jpg


11/13



away. Here are some examples of well visualized hooks:

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 intoan eyesore, harm the brands image and convey the wrong message. Here are

some tips to consider when choosing colors for your infographic.

Make It Universal

In Web design, its always important to choose a palette that fits the theme of the
http://media.smashingmagazine.com/wp-content/uploads/2011/10/hooks.jpg


12/13



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 infographics 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 readers eye

easily flows down the page; the wrong color palette can be a big barrier to this.

Choose a palette that doesnt 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 therule 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 dont have to reinvent the wheel. A number of great

websites out there will help you choose the right palette for your infographic.

Adobes Kuler offers fresh themes and a searchable database, as well as an easy

tool to adjust the palette that youre 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 COLOURlovers. 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
http://www.colourlovers.com/http://kuler.adobe.com/


13/13



given equal weight; instead, the tool suggests which should be dominant. Here

are some good and bad palettes for infographics:

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 theserules to guide you into the infographic realm, but create your own techniques and

standards after youve gained some experience.

(al)

Tweet

Original URL:http://www.smashingmagazine.com/2011/10/14/the-dos-and-donts-of-infographic-design/
http://twitter.com/share?count=horizontal&url=http%3A%2F%2Fwww.smashingmagazine.com%2F2011%2F10%2F14%2Fthe-dos-and-donts-of-infographic-design%2F&via=smashingmag&text=The%20Do%26%238217%3Bs%20And%20Don%26%238217%3Bts%20Of%20Infographic%20Designhttp://www.colourlovers.com/

The Do’s And Don’ts Of Infographic Design — — Readability

Documents

Transcript of The Do’s And Don’ts Of Infographic Design — — Readability