Text data to graphic data

To the right we see a graphic designer’s resume that was designed like an infographic. He’s cleverly turned his stats into stylish charts that make dry stats much more dynamic.

Visuals like this give Tibor van den Brink the opportunity to add color and aesthetic intrigue—two factors that naturally stand out from a traditional resume and pull a viewer in.

Here, we can quickly assess that Tibor is 100% fluent in Dutch and about 88% fluent in English, thanks to a simple pie chart. He uses other clever approaches, like icons for his hobbies and “meters” to quickly display his skill level in various programs and design concepts.

Instantaneously, we see that he is at a 75% skill level in Photoshop, Illustrator and InDesign. All of his information is communicated simply and concisely (and refreshingly), which beats long drawn-out sentences about his history with the Adobe Creative Suite.

Pictures (and diagrams) are worth a thousand words

Everyone knows the famous saying “a picture is worth a thousand words”. This saying speaks strongly to the power of infographics: Humans are visual creatures. Where text requires time and mental processing, images are often instant and visceral.

The infographic example above uses a series of diagrams to explain the workings of a Rubik’s Cube. Given the complexity of Rubik’s Cubes, it would take at least a thousand words to explain what these diagrams show quickly and visually. Further, this infographic is colorful and fun to look at. It is, without a doubt, preferable to a text explanation of a Rubik’s Cube.

Flow

Infographics have inherent visual flows. This is important to remember when designing an infographic. As with any piece of design, the designer is responsible for bringing the viewers eye through the design.

The infographic to the left depicts the process of making a shoe in three steps. If we were to critique this piece, we can say that the eye starts at the title at the top and naturally gravitates to the large shoe on the roof.

Then this large shoe then leads us to Step 3 of the process, found in the magnification bubble. Ouch! We were hoping to start at Step 1…

While this infographic is colorful and beautiful, it clearly has flow issues. One fix for this could be placing step three on the ground floor of this building and step one at the top near the big shoe.

In further critique, we can say that the graphics don’t necessarily communicate much text data or otherwise. For example, in the “Producing” step, we see two figures sitting in chairs holding shoes, but this doesn’t necessarily give us any more information or feeling about this step beyond the word “Producing”. The same could be said for “Designing” and “Sketching”.

Giving data feeling

Good infographics portray an emotion as well as a selection of data. In other words, they give the viewer a gut reaction as a result of the instantaneous and/or quick comprehension which infographics provide.

The example above portrays a simple percentage of land ownership, yet gives this data a complex feeling by offering a complex and life-like graphic. Most people might not know that land ownership in the United States is separated this way, and seeing this image of the earth cut apart and fenced off might naturally invoke feelings of concern, or an impulse to learn more about this subject matter.

Guidance with icons

In another style of infographic, icons are used in conjunction with text to help guide the viewer through the data. The example to the right accomplishes just that in explaining how to detect a lie.

In Step 1, rather than explaining what these hand gestures might look like in writing, three effective images are used. Ultimately these gestures are easier to show in illustration than in writing.

In another method, Step 2 directly connects a graphic to textual explanations, using the text as “captions” for the directions in which someones eye might look if they are lying. This approach is also effective and has a nice circular flow around the eye graphic.

Step 4 uses a graphic in a different way. To visually articulate “Listen for Vocal Indicators”, an image of a sound wave is used. This is less effective than the graphics in Step 1, as it doesn’t actually portray any data or information. With that said, it does provide visual intrigue and consistency with the rest of the design, which may be worth something and ultimately justify the graphic.

Making data attractive

Beyond the functional and practical qualities of infographics lies another use, which is making data attractive and beautiful. In the example above, the affect of climate change on the timeline of spring is visually represented in a “sun-dial” using data sets regarding birds, trees and temperatures.

While the subject matter is alarming, the graphic is soft, innocent and attractive. The color palette is fun and sophisticated and the geometric flower pulls the viewer into the design. The visually enthralling nature of this piece will likely inspire more readers to investigate the data than a simple text layout.

How to make your own infographic

In this tutorial we will be using Photoshop to create an infographic that represents a data comparison between biking and taking the train from Washington Square Park in Manhattan to downtown Williamsburg in Brooklyn. According to Google Maps it takes 18 minutes to bike between these two points and 30 minutes to take the train.

Let’s explore how we can represent this data graphically!

To start, a screenshot from Google Maps can be pasted into our Photoshop file and desaturated. In learning from the initial Tibor van den Brink example which addresses color and aesthetic attraction, the route in comparison can be highlighted in yellow.

The map frame is also colored yellow, and designed to leave room for text at the top. This content rests on top of a dark gray background for contrast and is overlayed with a subtle paper texture to give it a “map” feel.

Next, with the “How to Detect a Lie” example in mind, we can bring in some icons to help articulate the data. Here we will use a minimal bicycle icon and a minimal train icon. Riding this creative flow, we can add “trails” of varying length to the icons which roughly match the relative lengths of time for each trip.

A complementary blue-green is carefully chosen. Keep in mind, we want to make this data as attractive as possible!

Lastly we can add our text. A simple and concise title is chosen and the minutes are set in a large and easy-to-read font. This infographic is successful in that it translates a lot of text-based data graphically, including the map-route, transportation methods being compared and timing.

It is also successful in that it makes this data attractive. The design is colorful, professional, clean and simple.

Conclusion

Infographics come in many forms. They can hold illustrations, charts, colors, integrate text with icons or even be photographic. It is helpful for designers to understand the different types of infographics and to be able to distinguish when they do and don’t work.

Use this article as an introduction and see if you can break down the next infographic you come across as a way of strengthening your own infographic design skills!

Do you think the infographics in this article were successful? Comment below!