7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 1/7

Knowledge needed: Information design, graphic design

Requires: Graphic design software (Adobe I llustrator recommended) Project time: 20 hours

By Matthew Scharpnick on February 16, 2012 | 1 comment

Great infographics can be a powerful tool for communicating complex ideas quickly and

beautifully. In this tutorial Matthew Scharpnick, co-founder of Elefint Designs, puts you on

the right track to create beautiful and meaningful infographics

In an internet age dominated by readers scanning short-form articles, how can we

communicate something complex, nuanced, or dense in a short period of time? Queue the

infographics.

TWIT

Discover the best CSS tutorials!

HOME   NEWS   TUTORIALS   FEATURES   INTERVIEWS   OPINIONS   SHOP

How to create great infographics

Tweet   Like   ShareShare Des

20 t

kno

15 t

for

The

Rap

Kno

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 2/7

If you read design-influenced publications such as GOOD, Fast Company, or Mashable, you

have undoubtedly seen the flood of infographics that hit the web in recent years. Every day

new infographics pop up on a wide range of topics including politics, economics, pop culture,

technology, films, sports, and a whole lot more. At their best, these mixtures of design and

data have the effect of drawing users in and conveying a lot of information in a small

package.

Unfortunately, many of these infographics are created about trivial topics and many ignore

important principals of information design. In the tutorial below, we help you separate the

good from the bad, and show you how you might just get some great PR out of your

creation. I use the example of Full Circle Fund (FCF), a non-profit we recently worked with to

guide the discussion.

ADVERTISEMENT

The strategy – what is the purpose? Who is theaudience?

The key to any great design deliverable is to understand its purpose. Ask yourself, do you

really need an infographic? Why? What is it that you are trying to communicate and to whom,

and why is this the best medium to do it? Take some time to figure out the audience(s) and

the message before you move into design. Some good uses for infographics include

drawing attention to complex issues, providing clarity about the mission and activities of a

program or organisation, visualising and beautifully displaying data, and drawing rich

comparisons between competing positions, products, or ideas. Generally the more complex

and rich the data, the more design is needed to simplify it. Once you are clear on the

strategy, it's time to track down the right data.

Full Circle Fund (FCF)

For Full Circle Fund, the key was to explain the organisation and its activities in a simple way

that engaged viewers.

Comment o

newsletter

Enteryour

New d

becom

to pro

questi

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 3/7

Gather data and synthesise

Once you decide an infographic is a good fit for your project, you have to gather the data

that will be used in the piece. To create a good infographic, you want to strip away the

unimportant data, and highlight what people actually care about. The source data can take

many forms depending on the type of infographic you are creating.

FCF

Gathering the data on this specific project meant digging through PowerPoint presentations

and web pages to identify the most important pieces of information. FCF has a unique

model, where it groups successful professionals into circles that lend time, money, expertise,

and connections to local non-profits in a highly engaged model of philanthropy. Highlighting

this unique model in a way that was fun and digestible became the focus of the piece. We

then looked through all of their collateral materials to f ind the most important pieces of

content and started figuring out how the whole thing would fit together.

An example of a piece of existing FCF collateral

Design

Rafa

Ian

.n

11,293 peop

Facebook

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 4/7

At Elefint, we always like to start out our design process with some sketching. This allows

you to get all the relevant pieces down on paper, and start to figure out the best way to tie

things together into a coherent theme. It’s important to f igure out which pieces of content are

the main focus of the piece, and which pieces are secondary. Some infographics lump

everything together into a long scrolling document, and while this can sometimes be the best

design, we often like to use sidebars to break things up and make the design more digestible.

 

The content and presentation begin to come together in this sketch

Once you know where everything is going, and the design phase begins, it's really important

to use the best principles of information design. By far our favourite source for these ideas isthe work of the brilliant Edward Tufte. His books are incredibly valuable for anyone designing

infographics.

Here are a few information design principles we always consider:

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 5/7

Data Density: how much information can you work beautifully into a small space? Generally,

the more points of data you can clearly show, the better. We think the best infographics

compile large amounts of data into a story that gives the viewer deeper levels of

understanding.

Accuracy: Some graphics, unintentionally or otherwise, use things such as multiple scales or

distorted perspectives to present data in ways that mislead viewers. Make sure your data is

correct, and that the design doesn’t misrepresent the conclusions of the data.

Ease of use: Think about the viewers. Where are they going to see this piece? Will it be

displayed online or in a PowerPoint presentation? Will someone want to print it out? This not

only determines the aspect ratio and size of the piece, but encourages you to do things like

label graphs rather than use legends, or at least put legends in a place that viewers can very

easily refer back to.

FCF

For this infographic we wanted to make a dramatic departure from Full Circle Fund’s existing

charts full of a variety of shapes and paragraphs of text that made them somewhat confusing

and hard to engage. We used people and icons drawn in a playful and friendly style to make

this chart something a kid could understand. Combined with carefully selected content, we

ended up with an infographic that was fun, simple, and full of important data.

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 6/7

RELATED ARTICLES

15 fantastic data visualisations

Create a cool data visualisation

Create an SVG data visualisation with PHP

Shutterstock reveals design trends

Matthew Scharpnick

elefintdesigns.com

Matthew Scharpnick co-founded Elefint

Designs with Gopika Prabhu to bring

great design to good causes. Infogra.ph is

an Elefint project focused on advancing

important causes with infographics and

data visualisations.

The final design after a few rounds of revisions incorporating client input

PR

PR is a subject all of its own. However, at Elefint we have found that infographics are

particularly attractive to certain media outlets and blogs. A Google search will turn up a lot of

online platforms that regularly feature infographics. If you do quality work on a subject thatmatters and is timely, you have a good chance of getting your work featured. In addition to

these, think about who might care about the content of your infographic. For example, if you

are creating a piece on politics, check out political publications. Depending on the subject of

your piece, there are likely a number of outlets that would love to liven up their text heavy

coverage with a beautiful and illuminating infographic.

Conclusion

Infographics are getting really popular these days. In our experience the best ones are about

important subjects where carefully selected content can provide new perspectives. The best

infographics combine the most important principles of information design with visual design

styles that make them accessible and desirable to viewers. When all these elements come

together, you have a work of art that will attract attention and promote better understanding

of important issues.

Tweet

 

Like

43 

TAGS DESIGN

1 COMMENT

36

ShareShare

dforge

Yesterday at 23:20

This is a great solution to presenting information to potential clients in a quick, easy to understand

and aesthetically pleasing way.

Thanks for the tutorial!

1

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf

2/16/2012

7/27/2019 FCFpress_.netmag_021612.pdf

http://slidepdf.com/reader/full/fcfpressnetmag021612pdf 7/7

Other .net sectionsRSS

Hosting directory

Premium area

Advertising enquiries

Terms and Conditions

Privacy Policy

Contact us

We love to get feedback, and we do our

very best to answer every email

accurately and promptly. If you’ve got an

idea for an article that you’d like us to

run, a product you’d like to pimp, or if you

simply want to ask a question of the team

 – nothing kinky, mind – then drop us a

line. Just click the link below. It really is

that easy.

Contact us

 About .net

.net is the world’s best-selling magazine for

web designers and developers, featuring

tutorials from leading agencies, interviews

with the web’s biggest names, and agenda-

setting features on the hottest issues

affecting the internet today.

Read more about us

Subscribe to .net magazine

Current issue of .net

Copyright 2006 - 2012 Future Publishing Limited,

30 Monmouth Street, Bath, BA1 2BW, United Kingdom

England and Wales company registration number 2008885

Report abuse

You need to login or register to post a comment

Username   Password   Login  Forgot username/password?

to create great infographics | Tutorial | .net magazine http://www.netmagazine.com/tutorials/how-create-great-inf