Huge Infographics Design Resources: Overview, Principles, Tips and Examples

Imagine what would happen if you were speeding on a highway, and trying to read a traffic sign that contains too much information, would you be able to read the information exactly? Compare if you were just seeing a place name, a mileage, or an arrow-sign, which one would be more effective for you? Well, that’s just a simple instance.

Simply due to the unclear information given, anyone who sees and reads it could miss the important message on it. Data visualization to overcome this has been used worldwide for many years, where a complex piece of information needs to be delivered fast and clear.

Infographics Design Resources


We can see in recent years that patterns of communication are becoming more effective, delivering information that people need to know. Nowadays the information itself appears more prominently in a conceptual graphic model called infographics, in the hope that people will understand better through data visualization and information. But sometimes it still confuses people as to the real message that the author intends to convey to the public, which, in the end, will result in misleading information. In this article we’ll talk about infographics.

A History of Infographics

I think it is a good idea to begin this article by imparting some historical knowledge about Infographics. Nowadays, infographics and pictograms are greatly used by the people all over the world, and seen by almost everyone in commercial places, public facilities or even residential areas.

A History of Infographics
Images credit: Public Transport Infographics

I still remember seeing the people in my neighborhood doing a social campaign, they were carrying a board containing a composition of information and some attractive icons! Infographics is an instructive image that’s commonly purposed to simplify a complex piece of information so it becomes more comprehensive with an illustration or a graphic icon.

Basically a pictogram image is used to replace words or actions by means of visualizing it, either to replace or just as a textual instruction. Do you remember learning about the pictures on the cave walls carved by cavemen in the prehistoric ages?

A History of Infographics
Image credit: Jan08 407

Both infographics and pictograms have been used for hundreds or even thousands of years, with various marks they created a ‘cave painting’, as well as hieroglyphics in Ancient Egypt. But now, we see infographics and pictograms commonly used as signs, warnings, or other markers in public places. Now Infographics are widely used in our society, in mathematics, mapmaking, signage, news media, education, travel, medicine, politics and even religion.

No aspect of our lives are untouched by the application of infographics, simply because they convey knowledge and advice, even mandatory orders, in a form which the human brain readily recognizes and associates with the information behind the representation – known as visualization. Make no mistake, a modernity of infographics can help to spread your message and attract attention from readers through this media, both print and web design infographics.

Brief Description of Infographics

Now let’s continue to this section. We already know a short history of infographics that we’ve just discussed, so what is the definition of infographics itself? Information graphics, or better known as infographics, is a visual representation of information, data, or even knowledge. A graphic is used when a complex piece of information needs to be described precisely, clearly and will not confuse people when they read it.

Traditionally infographics are considered as visual elements like signs, graphics, maps or diagrams which are used as media to help people to understand the meaning of text-based content. This information visualization focuses on representing a particular sequence of data or specific information from statistical data. Usually it will look similar to a graphic or diagram, and nowadays infographics look more creative and imaginative.

Brief Description of Infographics
Image credit: Making of F1 Infographics 2008

Just like anything else – it can go wrong, this visual representation can, at it’s worst, result in providing misleading information. Cases such as: too much or even too little given information, the incorrect format usage in representing the information, and other failures which globally cause the infographics themselves to be hardly understood, confusing and raising many questions. Therefore we need to know about the basic principles of infographics before we can discover exactly their main purpose. The points below might be used as a simple parameter to remember whilst working on designing infographics.

  • This is global and must be universal in format, so it can be understood by anyone, even a kid. So it has no specific standards about it “this infographics is designed for professional clubs only” no, don’t do this!
  • It shows and reveals information which was previously hidden, taboo, unclear, or even buried information (unrevealed).
  • Describes visually things that can contribute to understanding its content easier, figure or do something related to the information.
  • It is a visual view, so if necessary, try to integrate word by word with image and the method (matter and solution) dynamically.
  • This infographic is stand-alone and it must have clear information so there’s no question raised when people see it.
  • Later this infographic must give readers the right comprehension about the information included, it must be remembered that consistency in point no. 2 above is significant.

Or maybe you want to know about the classification of the infographics framework? Here it is.

Infographics

Further references:

Designing an Effective Infographic

Information will have a strength about it if we just understand how to process it in the right way. On the other hand, information can fail to inform the people out there who need it. Therefore creativity while processing and managing infographics is very important, an infographic as an information model which captures the readers by visual projection must look attractive and friendly, and also comprehensible for the readers as we’ve discussed before. So that the infographic not only has strength in delivering the message, but also has a great and beautiful design so it doesn’t make the readers feel bored while reading it.

Designing an Effective Infographic
Image credit: Infographics Conference 2010, Zeist

And now infographics can be found in all modern world aspects. So what are the steps needed to make infographics become more effective in the way of information delivery process to the public? Okay then. Let’s move on to the points below one by one.

Information Organizing

In the infographics world, the first thing that flows is the information. You may have an unclear or bad design for, let’s just say, some fun, but not for the information that you’re wishing to spread! Because without information, infographics will never achieve its purpose to deliver the information to the people. Make sure you have collected all the data for the activity, relating to the facts and the accuracy of data in the field, and make sure you are capable of organizing and arranging the datas to a contextual design.

Design at this point is just a representation tool, and it’s not the target aim of infographics. Design is just a graphic that makes it easier for the readers to understand through elements of it. Remember, the more information you have, the better, and most importantly, the content must be well-organized to help and guide the readers. Don’t let your readers say “I’ve been wasting my time reading this!”

Make it Simple Sweetie!

As we discussed in the beginning, visual complexity and organizing the information represented by infographics is very important. What I mean here, is the simplification of a matter and knowing who exactly your target audience is, is all important, because it will be easier for readers to comprehend and interpret the infographic itself with a simple and direct representation. Color usage and visual appearance are also important things to think about in an infographic. Just make it simple, clean and clear.

Showing Cause and Effect

Imagine you’re standing on the ground and staring at an infographic and trying to take in all of the elements shown by the information, we’re browsing for information to understand its work mechanism and also the reasoning of its cause. It will help readers to understand the information they see, from the cause to the effect that it resulted in.

I still remember when Asia was striken by the SARS plague, and how an infographic was able to show and tell people about the virus spreading pattern informatively, creatively, and imaginatively, also showing the cause and effect pattern and other things concerning the SARS virus. So what did people gain from reading it? They became much more aware, making them respond with an action or an attitude. That’s the proof that the information was successfully imparted to the people through infographics media.

Make Boundaries or Scope of Theme

After you have enough reliable information, the next step is to begin to design a visualization from your imagination based on the information that you now have. Sometimes maybe you’re tempted to break away a little bit from the line that should be followed.

Functionally it’s often added quickly, but you have to remember that your aim is to answer one question and communicate in brief – None of us have much spare time. Adding too much information will push aside your message and readers will turn their attention to other important things.

Use of a Color Scheme

I’m sure no one doubts that color is the best element and the most effective way for authors to guide their readers. Conceptually, color can give readers varied impressions and color also has an important role in infographics. It doesn’t matter if later you prefer to print your design in Black and White format. Erase color that you think inappropriate to adapt to your theme. We can use a dark color scheme to make readers more focused and pay more attention to the object. And remember, always use tone and also adjust your infographic’s color contrast evenly, How do you want your infographic to look: striking on colors, or just like a notice board?

Combine with Typography, Illustration, Chart or Icon

Of course you don’t want your infographic to look like a simple newspaper page. Try to combine it with typography, illustration, image, chart, diagram or icon so it looks more attractive. Adapt the trend that’s popular at the time you create it, is it a handwriting / serif / roman typography, or will it use striking colors to attract readers? It’s all up to your creativity what your infographic will finally look like later. You can also put a logo on your infographic if the issues or clients are related to a company or institution.

Just Answer One Question

This is the most important part in creating or designing an infographic. Here you need to decide carefully what the question is, and how you want to, or the best way to answer your question. The more time you spend on this part, the visualization you end up with will be more effective and imaginative.

Stick to one question to be answered, to make it easier to describe what you want to communicate to the public. For instance I’d like to discuss the SARS virus, I can begin with the question “What is SARS and what kind of effective efforts can we make to prevent ourselves from getting it?” To maximize the influence of the message, you have to be more and more specific on the question. Pretend you are telling a story, and the question that you ask will determine the data that you need to have, and how you visualize it as a design of an infographic.

I think that’s quite enough discussion about points to consider for infographics, although we all know that a process needs time and that we need to keep learning and stay aware of the trends of data and information visualization, one way of doing which is through the infographics media.

More Resources for Future Reference:

Great examples of Infographics for Inspiration

Infographics are a form of concentrated nutrition for data consumers. They are multi-vitamins, fulfilling basic info requirements in a simple hassle-free way. Like a pill, knowledge is condensed into essential components, enough to satiate your basic informational needs. They give you a general overview, one you can convert into talking points and social currency.

Alright we’ve just discussed many points above, now we’re going to take a look at some great examples of infographics, which perhaps can be our inspiration and issues for further study in infographics. In this section I’ve collected some infographics examples from many categories that are trendy and suitable for the modern times we live in, just in a case you need to adapt a topic for your next assignment or just for practice. Then here it is.

Trend Stream Social Web Involvement
Trend Stream Social Web Involvement

The Internet Undersea World
The Internet Undersea World

Facebook Vs Twitter
Facebook Vs Twitter

Building a Company With Social Media
Building a Company With Social Media

Breakdown of the Blogosphere
Breakdown of the Blogosphere

Michael Anderson – Resume Infographics
Michael Anderson – Resume Infographics

The Global Warming Infographic
The Global Warming Infographic

Get to Know Your Street Vendors
Get to Know Your Street Vendors

The Magic Bean Shop & The Fries That Bind Us
The Magic Bean Shop & The Fries That Bind Us

Evolution of Storage
Evolution of Storage

How Come Cheap Flights Are So Cheap
How Come Cheap Flights Are So Cheap

How Long Will Our Resources Last
How Long Will Our Resources Last

Humans Vs. Animals
Humans Vs. Animals

How To Pick Up Girls Using Your iPhone
How To Pick Up Girls Using Your iPhone

On Driving
On Driving

Swine Flu, the Piggy Trouble
Swine Flu, the Piggy Trouble

Global Financial Crisis
Global Financial Crisis

15 Things You Should Know About Breasts
15 Things You Should Know About Breasts

60 years of Federal Republic of Germany
60 years of Federal Republic of Germany

Seasonal food chart
Seasonal food chart

US data consumption in one day
US data consumption in one day

Blog Post Journey
Blog Post Journey

Which Blogging Platform Should You Use?
Which Blogging Platform Should You Use?

Other Resources

Data Visualization Tools

There are so many tools and services out there and data visualization tools are changing the way we view content. I found the apps both visually stunning and delightfully useful from navigating the whole internet that may help you when representing your data.

Axiis
Axiis is a Data Visualization Framework for Flex. It has been designed to be a concise, expressive, and modular framework that lets developers and designers create compelling data visualization solutions.

Axiis

Chronoscope
If you need to visualize thousands or millions of points of data, check this out. Very well designed and can be navigated with the keyboard or mouse. There's a Javascript API, a Google Visualization API or try it as a Google Gadget on Google Spreadsheets, iGoogle, or Open Social.

Chronoscope

Flex
Flex has built in chart controls: area, bar, bubble, candlestick, column, HLOCC, Line, Pie, Plot. Quick tutorial here that can get you up and running with nicely styled charts using effects. Flex uses FXG, a graphical interchange format developed by Adobe and is similar in many ways to SVG. Nice article here by James Whittaker looking at FXG and Degrafa. And you should definitely have this book on your desk if you are using Flex: Creating Visual Experiences with Flex 3.0.

Flex

JSCharts
JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.

JSCharts

MilkChart
A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

MilkChart

Ajax.org
Ajax.org Platform is a pure JavaScript application framework for creating real-time collaborative applications that run in the browser.

Ajax.org

BirdEye
BirdEye is a community project to advance the design and development of a comprehensive open source information visualization and visual analytics library for Adobe Flex. The actionscript-based library enables users to create multi-dimensional data visualization interfaces for the analysis and presentation of information.

BirdEye

KartOO
KartOO is a visual search engine that employs several different visualization methods. In the following search for “The Sopranos,” the left side reveals folders with additional related topics, while the right presents a cloud of potential links to follow. Upon mousing over one of these links, the left side is replaced with a Snap.com-style preview, while the right side shows how the link relates to other topics.

KartOO

Google Chart API
The Google Chart API lets you dynamically generate charts.

Google Chart API

JFreeChart
Creates charts such as bar charts, line charts, pie charts, time series charts, candlestick charts, high/low/open/close charts, wind plots, and meter charts. I wish these charts looked better out of the box, because the features and functionality are good, but the visual design really detracts from the graphs. JFreeChart guys- email me- together we can make the world of JFreeChart a prettier place.

JFreeChart

Protovis
Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.

Protovis

DojoX Data Chart
An addition in the Dojo 1.3 release is the new dojox.charting class. Its primary purpose is to make connecting a chart to a Data Store a simple process.

DojoX Data Chart

Dundas
Dundas has a wide range of data visualization solutions for Microsoft technologies. They offer a number of data visualization tools including: Chart, Gauge, Map and Calendar for .net and Dashboards for Silverlight.

Dundas

Degrafa
Degrafa is a declarative graphics framework for creating rich user interfaces, data visualization, mapping, graphics editing and more.

Degrafa

Flex Monster Pivot Table and Charts
Flexmonster provides Pivot table Flex/Flash components rich internet application (RIA) development services.

Flex Monster Pivot Table and Charts

Further References and More Examples

  • 20 Essential Infographics & Data Visualization Blogs – Huge list from Inspired Mag’s, it has collected all the blogs with cool data visualization eye candy in the same place!
  • Data Visualization and Infographics Resources – Data visualizations and infographics can make complex datasets easier to understand and comprehend. By creating a graphical represenatation of data and statistics, complicated concepts and information can make more sense in less time. In this article via Smashing Magazine, Cameron Chapman will explain about it and give you more resources.
  • Nixlog –The infographics weblog an exhaustive list and collection of infographics available online, found on the web through research and the submissions of many individuals.
  • Gallery of Data Visualization – Good and bad infographics. This will displays some examples of the Best and Worst of Statistical Graphics, with the view that the contrast may be useful, inform current practice, and provide some pointers to both historical, ideas and current work. This article goes from what is arguably the best statistical graphic ever drawn, to the current record-holder for the worst.
  • Top 35 Flickr Groups for Infographics and Data Visualization – One of the best places to find tons of new infographics, maps, charts and other forms of data visualization goodies for examples without limit is, without question, Flickr Groups!
  • Ranking With Guestographics - A post that teaches people how to get the word out about the awesome infographics that they create.