The Onions of Modern Infographics

The web is brimming with infographics. Where did they start, and where are they headed? What are the principles intrepid infographic designers abide by, and how do they apply to you? In this article we’ll discuss the illimitable power of data visualization, how to approach good infographic design and the importance of interactive design on the web.

Infographics are a timeless way to represent data, and have been used for centuries much in the same way we use them today. When used properly, infographics make it easier to quickly convey a wealth of information in a small amount of space to communicate otherwise dry or hard to interpret information.

I recently came across an infographic that was created by Florence Nightingale and I was blown away by the fact that stylistically, it’s something that could easily have been created yesterday.

Polar area diagram by Florence Nightingale illustrating causes of mortality during the Crimean War (1857).

As amazing as that was, her depiction of the causes of mortality during the Crimean War was hardly the first of its type. Some of the earliest surviving infographics were believed to have been published in 1626 in a book discussing the sun’s rotational patterns. Surprisingly detailed infographics were used to illustrate the various rotational patterns.


The debate over what constitutes a good infographic ripples through the design community, and people seek to find concrete definitions in an area that’s in constant flux and evolution. Clearly, there’s something to infographics whether you subscribe to their value or not. They have survived for centuries and people still love them. Today, they even save them and collect them. Perhaps, more importantly, they share them.

Last year, a study found that infographics shared on Twitter receive more than 800% retweets than the sharing of other linked content, including articles and images.

“Those featuring infographics were shared a total of 1,091 times, while articles with only images or text were shared just 243 times.“

That’s a lot of visibility.

What is drawing all of those people to infographics?

Visual LearningThe world is full of different types of learners but by and large most people are visually wired. For visual learners, infographics can be particularly welcome as they make it easy to digest a large volume of information in a shorter amount of time. Infographics can also make it incredibly easy for publishers who need to disseminate large quantities of information, or are limited to space restrictions. People are naturally drawn to the educational information presented in infographic designs in ways that are viewed as more efficient, entertaining, and engaging. As curious beings we crave learning, and infographics can assist in a higher level of comprehension and retention of information to satisfy the human motive to expand our intelligence. As an infographic designer, you have greater control over this communication and leave less room for misinterpretation of statistics.

So, what makes for a good infographic?

The principles described by B.C. Roman engineer and architect Vitruvius may have had the largest influence on my design career, who proposes the following standards to which all structures should adhere:

  • Soundness – Ensuring resonance of your message by laying a solid foundation of information.
  • Utility – The design has appeal, purpose, and lends itself to compression and retention.
  • Delight – The design conveys beauty through order, arrangement, eurhythmy and symmetry

Any memorable design adheres to the tenets of these principles. An exceptional infographic designer takes into consideration all three.

Above all else, it’s important to start with a solid idea

That seems like a bit of a no-brainer, but some of the infographics I have seen were clearly slapped together without any real thought or planning. The best infographics are those that are:

  • Relevant – Does your information tell a harmonious story?
  • Informative – Are you presenting accurate and intriguing facts?
  • Entertaining – Is the viewer drawn in and excited to be a part of your story?
  • Different – Is your infographic new? Has it been done before?
  • Fresh – How will your design stand out from the crowd?

Most importantly, consider the objectives of your infographic and how you want your message to resonate with your audience. Ultimately your final product should frame your idea in a clear and palatable manner. Be creative, yes, but also be disciplined. The graphical art is what should draw the reader in, but the data presented needs to be succinct – don’t let the medium overtake the message. A successful infographic is draws your audience in for more and easy to digest.

The web isn’t static; your information shouldn’t be either

How Search Works

How Search Works – an interactive infographic from Google which uses animation and scroll effects to control the hierarchy of information

When viewing information online, your audience has a heightened expectation for dynamic designs which encourage engagement. Interaction is the order of the day. Animation and motion are excellent vehicles for guiding the user through a visual hierarchy of the information that you wish to depict. A single image can be a successful way to present a limited amount of information, but when you need to provide in-depth insight into more complex relationships, interactivity is the way to go.

A beautiful thing about interactive infographics (or webgraphics) is they hit the mark for both visual and kinetic learning. A static image is great, but it has its limits. With interactive infographic design, you have the opportunity to:

  • Update information in real time, keeping statistics and supporting information current
  • Encourage exploration and participation of your data rather than leave the narrative up to the viewer
  • Tell a story through multiple layers (as opposed to working with a fixed static hierarchy)
  • Offer multiple paths for discovering stories through interactive engagement

By presenting information in a visual manner and offering the ability to connect with it through physical activity, an interactive infographic strengthens upon the already powerful foundation of data visualization in order to make data more effective and memorable through interaction. Using motion as a design language when building your infographic can engage users on multiple levels, giving emotional appeal to an otherwise linear story.

With great power comes great responsibility

HTML is a powerful platform for weaving a story of data through interactivity and motion. What could otherwise be dry, stale, or rather boring information suddenly becomes vibrant, engaging, and entertaining. Interactive infographics make it possible for you to truly capture your audience and engage with them in a manner that simply is not possible when merely citing dry facts or statistics. HTML gives you an entirely new medium for presenting the story of your data.


UK Energy Guide, an inspiring example of using interaction to encourage the viewer to learn more about the statistics of energy consumption.

The HTML platform gives us an endless breadth of options you can utilize for giving the user control and capturing their imagination. It can be something as simple as a scrolling effect or you can kick it up a notch and employ multipagination. Hide and reveal effects, rollovers, animation and interactivity are effective techniques for revealing data.

A responsible designer uses the power of animation and interaction as part of their design language; while it can be tempting to stick in as many neat little tools as possible, it’s important to avoid overkill. Widgets that are confusing, displays that are just plain incomprehensible, and even slow response times can result in losing the opportunity to connect with your audience. Not only can they introduce errors into what could otherwise have been a beautiful final product, but they also have the tendency to drive away users.

Whether it’s editorial design, annual reports, brand campaigns or trending topics, interactive infographics make it possible for you to extend your design, provide more in-depth information in a limited amount of space while inviting the viewer to engage with your brand and message.

Your knowledge is only as good as your ability to share it.

Get started

Fortunately the appetite for web-based infographics has not been neglected by pioneers of the web. Here’s a list of tools and applications that can get you started, or points of reference for inspiration.

Adobe Edge Animate
Animate is an HTML animation tool which allows you to add motion to web graphics, enabling you to extend your custom designs with interactivity and movement. Integration with other Adobe creative tools offer a seamless bridge between design and HTML as you create for the web.

Piktochart is a free service (with a paid pro option) offering a wide range of customizable themes with a slick data importing utility. is a free service (with paid a paid pro option) offering templates, spreadsheets and other utilities to build out visual graphs
While the price point of can seem a bit steep (they’ll make you an infographic based on a creative brief starting at $999) their community is haven of inspiration when looking to start your own infographic project

179,889 total views, 8 views today

Posted on December 6, 2013 by Sarah · 2 comments


Leave a Comment

Your email address will not be published. Required fields are marked *