The first great mainstream information graphic I remember seeing was of a New York Times article showing the casualties of war in Iraq around 2003/2004. The graphics were of bathroom-style stick figure men representing actual lives lost. What made it special was that it dramatically changed some boring statistics that you would normally ignore into mind-blowing facts.

Good.is — Transparency: The Largest Bankruptcies in History

The New York Times still prints great information graphics but for online, they have stepped up their game to do some of the best interactive graphics in journalism today. You can read this profile article for more on this aspect of information graphics.

The focus of this article will be less on interactivity and more on the simpler, static information graphics.

Examples of Recent popular Information Graphics Around the Web

Mint.com — Flower Power: A Look at February’s Booming Floral Economy

Gigaom.com — Google vs. Apple

Mashable.com — Visualizing 6 Years of Facebook

Good.is — Food Assistance

You can think of every Information Graphic (IG) as an article within itself. Depending on the subject matter at hand, you may have to emphasize different aspects of the design. For instance, some may require an intro or an explanation like Economic IGs, but something very easy to understand like What Americans Eat may not require much more than a descriptive title.

Here are 7 concepts you may want to consider when designing your IG:

1. Storytelling

Never forget that your IG is telling a story about a specific topic. Like any communications design project — it’s up to you to make sure that the audience understands what you are trying to say.

It should be easy to understand and scan-able for different levels of viewer interest but also have enough detail to fully engage viewers to facilitate sharing.

You should also realize that employing clever tactics and unique concepts are valid story-telling methods, keep in mind that they should accentuate your story and not distract or sensationalize what you are trying to communicate. Viewers will see that your IG is phony and will reject your message if you go the later route.

2. Metaphors

One of the best ways to grab attention is to bind your IG design to a graphic element that properly summarizes the topic at hand. Your viewers will instantly get it without further reading and if done properly will continue to allow you to build on that initial concept.

In the example above, the IG is about the economy. The artist uses a cash register receipt rolls as the main metaphor and then builds on that concept for highlighting other data — highlighting shopping days is formatted like a typical receipt and they use ASCII art and fonts to draw illustrations.

The best websites are able to turn a IG into something worthy of printing posters of.

3. Typography

To quote Robert Bringhurst, the legendary author of The Elements of Typographic Style — “Typography exists to honor content.”

Functional and versatile choices will be most useful to you as you can apply them to different sets of images, charts and diagrams. Inspired uses of specialty fonts may be that extra kick your IG needs but beware that legibility may come into play if your IG specs have space restrictions. If that is the case, try working with the final output size and reserve the font for usages that always appear large like headlines.

Remember, less is more and consider a font with a versatile set of weights.

4. Scale

Charts and graphs are boring. They may be more accurate and have their place in TPS reports — but IG designers are telling stories and can employ more interesting techniques.

One of those tactics is scale. The juxtaposition of a large object next to a tiny object not only communicates your message but attaches a emotional response (if done correctly) to it in a way a chart cannot. It makes them care, which can be very important if you want them to understand your plight.

5. User Interaction

Clever, understated user interaction can be used as a tool for you to illustrate your point. If you are designing the layout of the IG to take advantage of height or width, you can employ the browser to help your cause.

“The Descent into Credit Card Debt” (above image) is a perfect example. As the viewer scrolls down they are slowly descending along with the story. The IG is fairly long (almost 5,000 pixels) so the viewers are understanding on a tactile level the deepness of credit card debt. This will add a further dimension of emotional depth to the message.

6.Color

Don’t be afraid to use color to help illustrate your message better. I hate to reference a FedEx Kinkos commercial but people are more responsive to charts and graphs when they are presented in a more colorful manner.

Using that same logic on your IG is a no-brainer. Keep in mind that your IG will probably communicate better the more straight-forward it is. Try choosing a reserved palette that has some connection with the topic at hand.

There is a certain value to employing contrast in your color selections as well as they tend to look more dramatic and exciting. While going overboard sometimes can make the IG look less credible (especially if images are involved), finding the right balance can be a boon to your story-telling.

7. Experiment

As IGs become more popular, the viewer’s expectations will become more sophisticated. As with any medium, you want to innovate and advance the techniques instead of being satisfied with the status quo. Try to experiment and figure out what works and doesn’t work for your specific industry.

A website called “The Oatmeal” adopted the IG format to do online comics. Some are more irrelevant and comedic than factual but I think it’s a good way to interpret the traditional comic “strip” as space limitations no longer apply in the online world.

Questions? Comments? Let us know in comments!

This entry was posted on Tuesday, February 16th, 2010 at 12:41 am and is filed under Design, Information Graphics, Showcase, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.