WIE ICH EINE INFOGRAFIK ERSTELLE - TEIL 2

Im ersten Teil von „Wie ich eine Infografik erstelle“ ging ich auf einige Details ein, die man wissen sollte, wenn man eine Infografik erstellt. Diese Seite bildet Teil 2 und gibt weiterführende Tipps.

„Welche Online-Tools empfehlen Sie?“

Hin und wieder erreichen mich E-Mails von Design-Studenten, die mich fragen, welche Online-Tools ich zur Erstellung von professionellen Infografiken empfehlen würde. Meine ehrliche Antwort: gar keine. Ich kann keine Empfehlung abgeben, weil ich als Designer keine Online-Tools verwende und wirklich von null auf Infografiken in Adobe Illustrator erstelle.

Ich sehe solche Online-Tools etwas problematisch. Sie mögen zwar recht praktisch sein um in Windeseile eine kostenlose oder billige Infografik zu erstellen. Aber meistens sehen solche Infografiken gleich oder zumindest sehr ähnlich aus.

Außerdem verleitet es nicht design-affine Personen dazu eine Infografik selbst zu erstellen, weil diese glauben ein Online-Tool würde fehlende Design-Expertise ersetzen. Und genau das ist natürlich nicht der Fall. Seitdem es mehr und mehr von diesen Online-Tools gibt, sehe ich mehr schlecht gemachte Infografiken als gute. Ohne Design-Expertise in puncto Farben, Formen, Typographie usw. geht wirklich nichts. Und an diesem Punkt scheitert das Projekt Infografik meistens. Deshalb ist meine ehrliche Meinung: Finger weg von Online-Tools, da lässt man eine Infografik besser bleiben oder man beauftragt einen Profi.

DATEN - STRUKTUR - AUSFÜHRUNG

Die Reihenfolge der Schritte, wie man an eine Infografik-Erstellung herangeht, spielt eine nicht zu unterschätzende Rolle. Denn: Die Lesbarkeit einer Infografik hängt ganz entscheidend mit dessen Struktur zusammen. Man sollte also nicht irgendein fertiges Template aus dem Internet herunterladen und seine Daten dort „hineinstopfen“.

1. DATEN

Zu allererst benötigt man die Daten.

2. STRUKTUR

Die vorhandenen Daten müssen logisch strukturiert werden. So entsteht ein erstes grobes Grundgerüst für die Visualisierung von Daten.

3. AUSFÜHRUNG

Danach erst sollte man sich an die eigentliche Erstellung der Infografik machen.

VISUELLE ANKERPUNKTE

Gerade eine Big Data Visualisierung oder Infografiken, die sehr umfangreich sind und in Richtung Storytelling gehen, brauchen visuelle Ankerpunkte. So wird die gesamte Information optisch in kleine Grüppchen aufgeteilt und man wird nicht erschlagen. Ein Beispiel sind farbige Balken, wie die hellblauen Balken in dieser Infografik:

MENGENRELATION GRAFIKEN VS. TEXTE

Grafiken sollten grundsätzlich mehr Platz einnehmen als Texte. Es heißt ja schließlich Infografik und nicht Infotext. Wichtig ist, dass die Texte in Infografiken keine ausschweifenden PR-Texte sind zum Beispiel, sondern kurz und knackig, auf den Punkt gebracht. Die Texte sollen die Grafiken unterstützen und evtl. näher erläutern, nicht umgekehrt.

SYMBOLE AUS DEM INTERNET

Bei der Visualisierung von Daten versucht man Zusammenhänge und Relationen zu visualisieren. Das heißt, man muss Daten in eine Relation bringen und das mit einer Grafik visualisieren. Das kann natürlich nur funktionieren, wenn man selbst designt. Ein paar Beispiele für Zusammenhänge und Relationen sehen Sie hier:

Inflationsraten in verschiedenen Ländern: Länder mit hoher Inflationsrate sind groß, Länder mit kleiner Inflationsrate sind klein dargestellt.

Olympische Winterspiele in Innsbruck: Sie sehen das Verhältnis zwischen männlichen und weiblichen Athleten.

Ein weiteres Beispiel ist diese Infografik über den Wasserverbrauch in Deutschland. Ich zeige hier, dass lediglich 8 % auf Privathaushalte entfallen, links im schwarzen Tropfen sieht man wie wenig das im Verhältnis zum gesamten Wasserverbrauch eigentlich ist. Und rechts sehen Sie, wie sich dieser private Wasserverbrauch aufteilt.

Solch eine Darstellung von Zusammenhängen und Verhältnissen kann man nicht einfach aus dem Internet herunterladen.

Sollten doch einzelne Symbole aus dem Internet geladen werden, wie zB die Männchen bei „31 % Toilette“ im obigen Beispiel, empfiehlt es sich die Symbole so abzuändern, dass sie zum Look der restlichen Infografik passen. SVG-Dateien sind hier sehr zu empfehlen, die lassen sich mit jeder Version von Adobe Illustrator öffnen (egal ob Cloud oder nicht) und entsprechend adaptieren.

Aber Achtung: Fertige Symbole aus dem Internet 1 zu 1 zu übernehmen und wild zu mischen sollte man definitv vermeiden. Das sieht man auch hier und da und es sieht unprofessionell und billig aus.

BERECHNUNGEN FÜR GRAFISCHE ELEMENTE

Grafiken müssen natürlich korrekt dargestellt werden. Fehlerhafte Darstellungen und falsche Diagramme machen eine Visualisierung von Daten unglaubwürdig. Gewisse mathematische Vorkenntnise sind also wichtig.

Dazu ein Beispiel, das Sie im Anschluss sehen. Ein halbrunder Kreis entspricht 100 %, die farbigen Teile repräsentieren die tatsächlichen Daten. Wie Sie sehen, ist das gelbe „Exceptional“ mit 3,5 % nur ein kleiner Teil des ganzen Halbkreises. Das rote „Unacceptable“ macht 94 % aus und fast der ganze Halbkreis ist rot. All dies macht Sinn und ist stimmig. Dieses Beispiel war ganz besonders heikel, weil ich hier mit runden Formen rechnen musste. Das heißt ein ganzer Kreis hat 360°, ein halber Kreis hat 180°. Und wenn 180° 100% entspricht, wieviel Grad entspricht dann 3,5%. Das musste ich mir ausrechnen und dann in Illustrator korrekt zeichnen. Hier waren ca. drei bis vier Zwischenschritte erforderlich um alle Daten korrekt zu visualisieren.

Ich glaube, Sie sehen schon, in welche mathematischen Sphären diese Rechenreise gehen kann. Mathematik spielt also eine große Rolle bei Infografiken und das sollte man nicht unterschätzen.

ANIMIERTE WEB-INFOGRAFIKEN

Neben statischen Infografiken für Print oder Digital, kann man das ganze natürlich auch animiert auf einer Website darstellen. Ein Beispiel sehen Sie hier. Diese animierte Web-Infografik wurde auf

HTML5-Basis erstellt. Alle einzelnen Designelemente wurden zuvor in Adobe Illustrator erstellt.

ANIMIERTE GIFOGRAFIKEN

Möchte man eine Infografik animieren und sie dennoch als Bilddatei zum Beispiel auf der Website oder auf Social Media verwenden, so bietet sich die Erstellung einer sogenannten Gifografik an. Das ist eine Infografik als gif-Bilddatei, in der mehrere automatisch abspielende Frames die Animation erzeugen. Natürlich muss die Infografik aber zuvor in einem Vektorprogramm erstellt werden!

Sie können sich dieses Thema auch als kostenloses Whitepaper herunterladen.

Eine praktische Audio-Version dieses Themas gibt's in diesem Podcast: