Infographicstakecomplex data and informationand translate it into easy-to-understand visuals. In today’sfast-paced world, graphic designers need toget the point across simply and efficiently.
In this article, we’ll take a look at several infographics and their inherent qualities, then offers a brief tutorial to help youcreate your own!
Text data to graphic data
To the right we see a graphic designer’s resume thatwas designed likean 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 toadd color and aesthetic intrigue—two factorsthat naturally stand out from a traditional resumeand 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 simplepie chart.He uses other clever approaches, like icons for his hobbies and “meters” toquickly display his skill level in various programs and design concepts.
Instantaneously, wesee 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 wortha thousand words
Everyone knows the famous saying “a picture is worth a thousandwords”. 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 showquickly 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. Thisis important to rememberwhen designing an infographic. As with any piece of design, the designer is responsible for bringing the viewers eyethrough thedesign.
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 3of 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 thisdoesn’t necessarily give us any more information or feeling about thisstepbeyond 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 complexand 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 thegraphics 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 dataattractive
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 springis 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 thedata than a simple text layout.
How to make your own infographic
In this tutorial we will be using Photoshop to create an infographic that representsa 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 bepasted into our Photoshop file and desaturated. In learning from the initial Tibor van den Brink examplewhich addressescolor and aesthetic attraction, the route in comparison can behighlighted in yellow.
The mapframe is also colored yellow, and designed to leaveroom 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 ofstrengthening your own infographic design skills!
