How to create great infographics | Tutorial | .

net magazine

http://www.netmagazine.com/tutorials/how-create-great-infographics

Discover the best CSS tutorials!

HOME

NEWS

TUTORIALS

FEATURES

INTERVIEWS

OPINIONS

SHOP

TWITTER

How to create great infographics
By Matthew Scharpnick on February 16, 2012 | 1 comment
T weet Like Share

Designing fo

Knowledge needed: Information design, graphic design

20 things ev know

15 top web d for 2012
Requires: Graphic design software (Adobe Illustrator recommended) Project time: 20 hours

The top 20 H

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.

Rapid and re Knockout.js

1 of 7

2/16/2012 4:17 PM

net magazine http://www. the key was to explain the organisation and its activities in a simple way that engaged viewers. I use the example of Full Circle Fund (FCF). and show you how you might just get some great PR out of your creation. economics. a non-profit we recently worked with to guide the discussion. or ideas. we help you separate the good from the bad. pop culture.com/tutorials/how-create-great-infographics If you read design-influenced publications such as GOOD. 2 of 7 2/16/2012 4:17 PM . you have undoubtedly seen the flood of infographics that hit the web in recent years. At their best. 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. ADVERTISEMENT Comment on articles newsletter and receiv Enter your email to r New designe become selfto progress. Unfortunately. In the tutorial below. technology. Once you are clear on the strategy.netmagazine. or Mashable. do you really need an infographic? Why? What is it that you are trying to communicate and to whom. sports. and drawing rich comparisons between competing positions. providing clarity about the mission and activities of a program or organisation. many of these infographics are created about trivial topics and many ignore important principals of information design. films. visualising and beautifully displaying data. Generally the more complex and rich the data. T question ever Ryan Dow The strategy – what is the purpose? Who is the audience? The key to any great design deliverable is to understand its purpose. it's time to track down the right data. Ask yourself. products. Fast Company. and a whole lot more. these mixtures of design and data have the effect of drawing users in and conveying a lot of information in a small package. the more design is needed to simplify it.How to create great infographics | Tutorial | . Some good uses for infographics include drawing attention to complex issues. Full Circle Fund (FCF) For Full Circle Fund. Every day new infographics pop up on a wide range of topics including politics.

netmagazine. We then looked through all of their collateral materials to find the most important pieces of content and started figuring out how the whole thing would fit together. where it groups successful professionals into circles that lend time. and highlight what people actually care about. and connections to local non-profits in a highly engaged model of philanthropy.net maga 11. Highlighting this unique model in a way that was fun and digestible became the focus of the piece. expertise.293 people like Rafa Ian An example of a piece of existing FCF collateral Facebook social plugin Design 3 of 7 2/16/2012 4:17 PM . FCF has a unique model. . money. FCF Gathering the data on this specific project meant digging through PowerPoint presentations and web pages to identify the most important pieces of information. The source data can take many forms depending on the type of infographic you are creating.com/tutorials/how-create-great-infographics Gather data and synthesise Once you decide an infographic is a good fit for your project.How to create great infographics | Tutorial | .net magazine http://www. you have to gather the data that will be used in the piece. you want to strip away the unimportant data. To create a good infographic.

It’s important to figure out which pieces of content are the main focus of the piece.How to create great infographics | Tutorial | .netmagazine. 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. and the design phase begins. The content and presentation begin to come together in this sketch Once you know where everything is going. By far our favourite source for these ideas is the work of the brilliant Edward Tufte. we often like to use sidebars to break things up and make the design more digestible.com/tutorials/how-create-great-infographics At Elefint. and while this can sometimes be the best design. Some infographics lump everything together into a long scrolling document. it's really important to use the best principles of information design. we always like to start out our design process with some sketching.net magazine http://www. His books are incredibly valuable for anyone designing infographics. and which pieces are secondary. Here are a few information design principles we always consider: 4 of 7 2/16/2012 4:17 PM .

the better. and that the design doesn’t misrepresent the conclusions of the data. 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. unintentionally or otherwise. the more points of data you can clearly show.net magazine http://www. and full of important data. 5 of 7 2/16/2012 4:17 PM . or at least put legends in a place that viewers can very easily refer back to. We used people and icons drawn in a playful and friendly style to make this chart something a kid could understand. we ended up with an infographic that was fun. Ease of use: Think about the viewers. 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. Make sure your data is correct. simple. We think the best infographics compile large amounts of data into a story that gives the viewer deeper levels of understanding. but encourages you to do things like label graphs rather than use legends.How to create great infographics | Tutorial | .com/tutorials/how-create-great-infographics Data Density: how much information can you work beautifully into a small space? Generally.netmagazine. Accuracy: Some graphics. use things such as multiple scales or distorted perspectives to present data in ways that mislead viewers. Combined with carefully selected content.

think about who might care about the content of your infographic. The best infographics combine the most important principles of information design with visual design styles that make them accessible and desirable to viewers. For example. Depending on the subject of your piece. 43 T weet Like 36 Share TAGS DESIGN 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. there are likely a number of outlets that would love to liven up their text heavy coverage with a beautiful and illuminating infographic. check out political publications. you have a work of art that will attract attention and promote better understanding of important issues. you have a good chance of getting your work featured. 1 COMMENT dforge Yesterday at 23:20 This is a great solution to presenting information to potential clients in a quick. However. When all these elements come together.com Matthew Scharpnick co-founded Elefint Designs with Gopika Prabhu to bring great design to good causes.How to create great infographics | Tutorial | . easy to understand and aesthetically pleasing way. If you do quality work on a subject that matters and is timely.ph is an Elefint project focused on advancing important causes with infographics and data visualisations. A Google search will turn up a lot of online platforms that regularly feature infographics.net magazine http://www. In addition to these. at Elefint we have found that infographics are particularly attractive to certain media outlets and blogs.com/tutorials/how-create-great-infographics The final design after a few rounds of revisions incorporating client input PR PR is a subject all of its own.netmagazine. In our experience the best ones are about important subjects where carefully selected content can provide new perspectives. if you are creating a piece on politics. Infogra. Thanks for the tutorial! 1 6 of 7 2/16/2012 4:17 PM . Conclusion Infographics are getting really popular these days.

BA1 2BW. It really is that easy.net magazine http://www. interviews with the web’s biggest names.com/tutorials/how-create-great-infographics Report abuse You need to login or register to post a comment Username Password Log in Forgot username/password? Other .2012 Future Publishing Limited. Read more about us Subscribe to . If you’ve got an idea for an article that you’d like us to run.net Proud to b a member Copyright 2006 .net . Just click the link below. featuring tutorials from leading agencies. Bath. and we do our very best to answer every email accurately and promptly. or if you simply want to ask a question of the team – nothing kinky.How to create great infographics | Tutorial | . United Kingdom England and Wales company registration number 2008885 7 of 7 2/16/2012 4:17 PM . 30 Monmouth Street.net sections RSS Hosting directory Premium area Advertising enquiries Terms and Conditions Privacy Policy Contact us We love to get feedback.netmagazine. mind – then drop us a line. a product you’d like to pimp. and agendasetting features on the hottest issues affecting the internet today.net magazine Current issue of .net is the world’s best-selling magazine for web designers and developers. Contact us About .