18
Nov

The Anatomy Of An Infographic: 5 Steps To Create A Powerful Visual

Information is very powerful but for the most bit it is bland and unimaginative. Infographics channel information in a visually pleasing, instantly understandable manner, making it not only powerful, but extremely beautiful. Once used predominantly to make maps more approachable, scientific charts less daunting and as key learning tools for children, inforgraphics have now permeated all aspects of the modern world.

Infographics Anatomy

I designed a couple of infographics back in college, the need arising especially around the time Soccer World Cup fever spiked. It was a fun process representing the different groups, predicting winners in each group at each stage and creating a mock pairing of teams that would clash all the way leading upto the finals. I was a devout Argentinian supporter at the time.

Infographics can appear daunting to some with the sheer amount of data they present, but designed in the right manner and step by step, they can actually be one of the most fun things you will ever create.

Today I am going to walk you through the anatomy of an infographic, its different levels and sub-levels and a 5-step process to ensure that your infographic is not only conceptually sound, but accurate and easily understood.

I have used a very simple infographic designed by Jane Genovese of Learning Fundamentals. It is an infographic about combating global warming

Anatomy Of An Infographic

The core infographic is composed of 3 very important parts.

  1. Visual
    • Color Coding
    • Graphics
    • Reference Icons
  2. Content
    • Time Frames
    • Statistics
    • References
  3. Knowledge
    • Facts
    • Deductions

A One-Level Deep Infographic is a simple infographic barely skimming and brushing through the 3 core parts. It has a visual which is usually common throughout the design. It has some content to compliment the visual. It imparts knowledge based on the visuals and content.The one-level design may incorporate one or two sub-parts from visuals and content but the representation is very basic.

A Two-Level Deep Infographic is a more advanced infographic. It encompasses the 3 core parts of the design but delves in deeper. Within the realm of Visuals, the infographic has the thematic defining graphics of the design. In addition it has reference icons to condense and compact a lot of data visually. Color coding becomes a must in this type of infographics because visually separating content via color becomes key in relaying information.

Within the realm of Content, the two-level infographic not only presents factual data, but also makes references and calls on statistics very regularly. There may be additional snippets of data in the form of notes. With the increase in the amount of data as the design goes two-level deep, it becomes very essential to utilize all the graphical resources available to you in the form of icons, image holders, shape groupings, color and time frame integration.

5 Essential Steps To A Good Infographic

Infographics Anatomy

1. Skeleton & Flowcharts

Approach an infographic as you would, any other form of design. Put together a skeleton of words and arrows, grouping relevant data together and visualizing the flow of information using flowcharts. Because infographics are usually complex, flowcharts will simplify the process and connect everything precisely for you.

2. Devising A Color Scheme

Infographics Anatomy

A color scheme is very important to convey a wide array of messages while keeping the reader confined inside the infographic. With huge and complex infographics, readers will become quickly confused and their perceptions will be scattered all over the place if they don’t have colors tying down their thoughts visually. You can have 2, 3 or 10 colors but assigning them before you begin designing will be the most important thing you do.

3. Graphics

Infographics Anatomy

There are two kinds of graphics in an infographic. They are theme graphics and reference graphics.

  • Theme graphic is the defining visual of the design and is usually always included in the infographic, except when the infographic is more statistic based. Choosing the right theme graphic will tell you reader at a glance what knowledge you wish to share.
  • Reference graphics are not mandatory in the design. They are usually icons used as visual pointers to avoid cluttering up the design when a lot of content needs to be represented. They are brilliantly capable of making numerous references using the same instance. Sometimes words aren’t even necessary if powerful reference icons are used, a practice more and more designers are using in a bid to make their infographics as word-free as possible.

4. Research And Data

Infographics Anatomy
It goes without saying that all infographics must be thoroughly researched and the data presented must be backed up by established facts. While doing that, you will inevitably end up with piles of data. Sifting through that you must condense and decide what data is the most relevant and how you are going to present it. The ratio of data to the graphics works best if it is 1:1.

Another extremely important point to remember is demographics. Who is going to be using your infographic? Are they regular office going people who are used to staring at suburban train line infographics or tourists from a non-English speaking country or 10 year old impressionable kids who are being taught to recognize bullying and raise a voice against it. Depending on the demographics, your infographics will accordingly reflect colors, icons, knowledge and complexity.

5. Knowledge

Infographics Anatomy

Highlighting important content to easily provoke deductions is an art. As I mentioned before, knowledge is powerful and the imparting of that knowledge must be powerful too.

If your infographic is concentric, having the most important content both visual and factual in the middle is a plus. If your infographic is horizontal, the extreme left and extreme right are the starting and ending points of a reader’s deductions and thoughts, so having your say in those spots will be extremely beneficial. Choosing the right colors and imagery is vital because you cannot show child labor statistics in a subtle yet cheery shade of daffodil. That would just not be right, because sunny yellows are associated with joy and happiness, something that child labor is not.

In the end, an infographic can be as simple and as complicated as you want it to be. A good infographic will not confuse you and make you feel like an idiot, that is a true tribute to the designer designing it. Put yourself in the shoes of the people who are going to be using your infographics and you’ll design a great one!

Your Turn To Talk

Have you ever designed an infographic? How did it go and what was your design process like? Please take a minute to share your stories with the rest of us, I’m sure we could all learn a thing or two. :)

jump to the comment form ↓

  • User Gravatar Benjamin Wiederkehr
    November 18th, 2009

    Thanks for the article, Sneh. You mentioned some vital parts of a solid infographic. One thing I would like to add, that’s missing here is “Action”. Infographics should not only present the status quo in an understandable manner but also ignite action like changing behavior or starting discussion. Including a call-to-action in an infographic is a powerful instrument to convert the gained knowledge into changes.

  • User Gravatar Richard Williams
    November 18th, 2009

    Love it, love it,love it! Been a big fan of infographics for along time, but afraid to tackle it because of the seeming complexity. Your article provides a detailed breakdown of the overall process which will go far in disarming the hesitancy on my part to pursue this type of design. Thank you!

  • User Gravatar Big Bear
    November 18th, 2009

    Thanks, Very useful article!

  • User Gravatar Mike Smith
    November 18th, 2009

    wow. nice post Sneh. really informative. delicious bookmarks here we go!

  • User Gravatar Richelle
    November 18th, 2009

    Awesome article.. thanks :) I actually used to create infogrpahics like this but called them mindmaps for studying subjects way back when in highschool… great visual way to get ideas across with colour – and clear and concise!

  • User Gravatar Alvin Lai
    November 18th, 2009

    You might like to check out pearltrees.com, they organise your stuff much like an infographic too :)

  • User Gravatar Gaird
    November 18th, 2009

    Great article, and nice breakdown of the creative process. Along with the other items in #3 I would suggest Metaphor and Context. It is not always possible or apropos depending on the graphic, but when used well it can be another powerful communicator of the essence of the idea. By using something common, the graphic can leverage the familiar to help communicate something new or abstract.

    The folks at XPlane do awesome work in this regard: http://www.xplane.com/

  • User Gravatar Sneh Roy
    November 18th, 2009

    Benjamin Thanks! You are right about Actions. In a way I am trying to get at that point through “Deductions” in the Knowledge group. In this particular case, I have pointed out that the infographic gives the reader the confidence that minor lifestyle changes can impact bigger things, hence prompting them to take action from those deductions :)

    Gaird Thanks! Metaphor and Context is a brilliant addition to the Knowledge group, I like those infographics that make you see the relation between the data using everyday things as props to support a very different theory. I’ll be sure to add those 2 points in my files.

    Thanks everybody. Glad you enjoyed the article :)

  • User Gravatar Brad C
    November 19th, 2009

    Great idea for a post Sneh, good information too. For your next post you should create it as an infographic ;)

  • User Gravatar Design Informer
    November 19th, 2009

    Very helpful article. I have tried several times to create a powerful and useful infographic, but it hasn’t always turned out well. I will try again, using this article as a guide.

  • User Gravatar Sneh Roy
    November 22nd, 2009

    Good idea Brad! :)

  • User Gravatar Gavin
    February 22nd, 2010

    Hi Sneh,

    Really liked your guide to designing an infographic. I have read Edward Tufte’s 7 principles on data visulaisation but your 5 steps are so much clearer. I am a fourth year student and my design study is on Infographics could you give me any pointer’s on good topics to start my visuals on? I was considering the recent Haiti earthquake?

    Cheers

    Gav

  • User Gravatar Sneh Roy
    March 7th, 2010

    Hey Gavin! Sorry I missed your comment :(. Thanks for stopping by and I am glad you found the steps outlines useful. The Haiti infographic sounds like a good idea. A lot of design folks have been raising funds for relief by creating/sharing/selling artwork that pays a tribute to the souls lost in Haiti. Have you started work on the infographic? Would love to see it! Cheers!

  • User Gravatar Smashing Share
    March 7th, 2010

    Nice stuff. Will try and see how it works :)

  • User Gravatar Mari
    March 12th, 2010

    Hey! I’m doing a assignment at uni right now, we have to make an infographic about social networking and we can choose whatever approach we want – as long as the reader knows what social networking is all about after seeing the infographic about it. Any ideas? Btw – great article!

  • User Gravatar Rob Griggs
    July 19th, 2010

    Thanks for such a great post on the thought processes that go into creating an infographic. I have been looking to learn more about infographics and how they can be used as viral content/link bait. Will come back to this post regularly I am sure. Nice Job!!

  • User Gravatar DavidTan
    July 28th, 2010

    Lovely!

  • User Gravatar Sena Çeyiz
    July 29th, 2010

    thanks for sharing. good day

  • User Gravatar GuvercinTR
    July 29th, 2010

    oh nice . thanks man

  • User Gravatar Dido
    August 9th, 2010

    It’s defiantly the best article I read about Infographics. Thanks, Sneh.

  • User Gravatar Mel Menendez
    August 20th, 2010

    Sneh,

    Creative and insightful. Thank you for sharing.

Who Linked To This Post?

  1. designfloat.com
  2. CSS Brigit | The Anatomy Of An Infographic
  3. The Anatomy Of An Infographic: 5 Steps To Create A Powerful Visual | SpyreStudios on Datavisualization.ch
  4. The Anatomy Of An Infographic: 5 Steps To Create A Powerful Visual | Design Newz
  5. links for 2009-11-19 « Ross Notes
  6. 90+ Fresh Community Pick for Designers and Developers | tripwire magazine
  7. Weekly Link Roundup – November 21, 2009 « Technosiastic!
  8. Mes favoris du 18-11-09 au 21-11-09
  9. The Anatomy Of An Infographic – 5 Steps To Create A Powerful Visual | Little Box Of Ideas
  10. This Weeks Twitter Design News Roundup N.12 : Speckyboy Design Magazine
  11. Things I learned this week – #2 | dougbelshaw.com/blog
  12. Designing The “World Of Programming” Infographic - Smashing Magazine

Share your thoughts, leave a comment!