HOW I CREATE AN INFOGRAPHIC - PART 2
In the first part of "How I create an infographic" I focused on some details that you should know when creating an infographic. This page is part 2 and gives even more tips.
​
"Which online tools do you recommend?"
Here and there I receive emails from design students who ask me which online tools I would recommend to create professional infographics. My honest answer: none. I cannot recommend any online tools because I as a designer don’t use any online tools. I design infographics from scratch with Adobe Illustrator.
The problem with such online tools: They might be handy if you need to create a free or cheap infographic very quickly. But most of these infographics simply look the same or very similar.
Also, it tempts non-designers to “design” an infographic. That means that people who have no design expertise think such an online tool could substitute the lacking design expertise – however, this is not the case. Since there are more and more online tools out there, I keep seeing more and more poorly done infographics, more than good ones. This is the dilemma. You cannot create a great infographic without design expertise about colours, shapes, typography and so on. This is mostly the point where data visualization projects fail. So my honest opinion: Don’t use online tools, either you simply don’t create a data visualization or you hire a pro.
​
DATA - STRUCTURE - EXECUTION
The order of steps that need to be taken in the course of an infographic creation, play an important role that should not be underestimated. Because: The readability of a data visualization has a lot to do with the structure of the infographic. Don’t just use a template from the internet and chuck your data into it.
1. DATA
First you need the data.
2. STRUCTURE
Then you build a structure based on this data, a rough grid that adds logic to the infographic.
3. EXECUTION
Then you should create the infographic, not before.
​
VISUAL ANCHOR POINTS
Especially infographics that are quite long and tell a complex story, need visual anchor points. The entire information is visually split into small groups and you don’t lose your orientation.
For example, you can use colourful bars for headers, like the light-blue bars in this example:
GRAPHICS VS. TEXT
I find graphics should be more prominent than text. It is called an infographic, not an infotext, right? It’s important that the text in infographics is no long, elaborating PR text, but short and to the point. The text shall support the graphic, not upside down.
ICONS FROM THE INTERNET
Data visualization is all about showing relations between different things. This means you have to visualize these relations with a graphic or an icon. Of course this can only work when you design everything yourself. A few examples of relations can be seen here:
​
Inflation rates in different countries: Countries with a high inflation rate are shown big, countries with a small inflation rate are shown small.
Olympic Winter Games in Innsbruck: You see the relation between male and female athletes.
Another example is this data visualization about water usage in Germany. I show that only 8 % accounts for private households, in the black drop on the left you see how little that actually is compared to the overall water consumption in Germany. And on the right you see how these 8 % are used in private households.
This way of visualising relations you of course cannot download from the internet, you have to draw this yourself.
If you do download icons from the internet, like the man and woman at 31 % toilette in this example, you should definitely amend the symbols to make them match the look of the rest of the infographic. I recommend SVG files here because you can open them in any version of Adobe Illustrator without problems (no matter if with or without cloud) and then you can adapt the symbols without quality loss.
But careful: Using symbols from the internet from various sources and wildly mixing them will definitely make your data visualization look cluttered and unprofessional. So be careful with that.
​
CALCULATIONS FOR GRAPHICS
Graphics have to be displayed correctly of course. Wrong graphics and diagrams make an infographic non-credible. A good knowledge in maths is definitely required here and there.
You see an example on the following page. A half-round circle equals 100 %, the coloured parts represent the actual data. As you can see, the yellow Exceptional with 3.5 % is only a small part of the entire half-round circle. The red Unacceptable accounts for 94 % and almost the whole half-circle is red. This example was a bit tricky because I had to find a way to calculate round shapes correctly. A whole circle is 360°, hence a half-circle is 180°. And if 180° equals 100 %, how many ° do equal 3.5 %? There were three or four steps involved in order to visualise this correctly in Adobe Illustrator.
I guess you get a feeling for the maths level you have to get to in order to draw correct infographic elements here. Maths plays a big role in infographics, don’t underestimate that.
ANIMATED WEB INFOGRAPHICS
Apart from static data visualizations for print and digital, you can of course also create an animated web- infographic. You can see an example by clicking here. This animated web-infographic was created with HTML5. All design elements were drawn in Adobe Illustrator.
​
ANIMATED GIFOGRAPHICS
​
If you like to animate a data visualization that can be used as a picture file to embed in your website or on social media, a gifographic is perfect in this situation. This is a gif file which shows the animation as auto-play frames. However, the data visualization still has to be created in a vector program upfront!
You can also download this topic as a free whitepaper.
A handy audio version of this topic can be found in this podcast: