Mit Infografiken lassen sich komplexe Dinge veranschaulichen. Im Content-Marketing spielen sie deshalb eine zentrale Rolle. Aber wie einfach ist es, Infografiken in Eigenregie zu erstellen? Wir haben ein paar wertvolle Tipps für Dich.
Was ist eine Infografik?
13 Millisekunden! In dieser Zeit schafft es unser Gehirn, eine visuelle Information zu verarbeiten. Daher sind Infografiken perfekt, um vermeintlich Kompliziertes zu erklären oder eine Story zu erzählen. Entsprechend finden sie sich längst nicht mehr nur in Schulbüchern.
Aber was ist eine Infografik? Laut Wikipedia ist eine “Informationsgrafik” (kurz: Infografik) die visuelle Repräsentation von Gesamtzusammenhängen in einer Abbildung. Infografiken bemühen sich um eine möglichst effiziente Vermittlung von Fakten und legen dabei großen Wert auf Klarheit, Genauigkeit und Anschaulichkeit.
Was macht eine gute Infografik aus?
Das Wichtigste vorweg: Allen voran muss eine Infografik selbsterklärend sein, d. h. auch losgelöst vom restlichen Inhalt eines Artikels für den Betrachter verständlich sein. Ist es hingegen notwendig, zum Verständnis eine Textpassage zu lesen oder weitere Infografiken zu betrachten, erfüllt sie dieses Kriterium nicht.
Wenn die Infografik nicht selbsterklärend ist, eignet sie sich nicht zum Teilen in den sozialen Netzwerken. Das ist unvorteilhaft, denn laut Studien werden Beiträge mit Infografiken 30-mal häufiger angeklickt.
In diesem Beitrag erklären wir Dir, was beim Gestalten von Infografiken empfohlen wird. Insbesondere für den Einsatz im Content-Marketing.
Der optimale Aufbau einer Infografik
Prinzipiell solltest Du bei der Erstellung Deiner Infografik einige Grundsätze beachten. Darunter fallen Normen unserer Kultur, wie das Lesen von links nach rechts und von oben nach unten. Darüber hinaus solltest Du in Deiner Infografik eine gängige Symbolik verwenden. Zeichen und Farben haben in Kulturen zum Teil verschiedene oder gar gegensätzliche Bedeutungen.
Beispiel: Das uns bekannte Stop-Schild ist achteckig. In Japan ist das Stop-Schild dreieckig.
Das setzt voraus, dass Du Deine Zielkunden genau kennst. Welches ihrer Probleme soll gelöst werden? Wie sind deren Vorkenntnisse? Welche Begriffe kennen sie?
Das Hauptelement
Das Hauptelement einer Infografik zieht die gesamte Aufmerksamkeit auf sich. Es transportiert die Kernaussage der Infografik. Alle anderen Elemente erscheinen deutlich weniger präsent.
Unterstützende Elemente
Mit unterstützenden Elementen unterstreichst Du die Aussage oder Geschichte Deines Hauptelementes. Achte bei der Erstellung darauf, dass die Wirkung des Hauptelements nicht geschwächt, sondern gestärkt wirdf. Nur mit unterstützenden Elementen kann das Hauptelement den gewünschten Effekt erzielen.
Anordnung der Elemente
Die Anordnung der Elemente einer Infografik ist äußerst wichtig. Grundlage dafür bilden die sogenannten wahrnehmungspsychologischen Aspekte. Diese Gesetze dienen einem besseren Aufbau und sollten bei der erstellung von Infografiken beachtet werden:
Achte unbedingt auch auf die Gestaltung des Kopf- und Fußbereichs beim Infografik erstellen:
Kopfbereich
- Gesetz der Nähe: Elemente, die nah beieinanderliegen, werden als inhaltlich verwandt betrachtet.
- Gesetz der Ähnlichkeit: Elemente, die ähnlich oder gleich aussehen, werden als inhaltlich verwandt betrachtet.
- Gesetz der Geschlossenheit: Geschlossene Formen setzen sich (visuell) stärker durch als offene.
- Gesetz der Erfahrung: Formen/ Objekte, die auf Erfahrungen des Betrachters beruhen, werden leichter erkannt.
- Gesetz der guten Gestalt: Einfach, voraussehbar und gesetzmäßig gestaltete Formen vermeiden Irritationen.
Im Kopfbereich kannst Du eine Überschrift platzieren. Achte jedoch darauf, dass diese nicht präsenter als das Hauptelement erscheint.
Fussbereich
Im Fußbereich (“Footer”) der Infografik kannst Du ergänzende Informationen wie eine Legende und eine Quellenangabe platzieren. Der Bereich sollte aber deutlich schwächer hervorgehoben sein als der Kopfbereich.
Grafische Grundelemente
Prinzipiell besteht eine Infografik aus fünf verschiedenen Grundelementen: Punkt, Linie, Fläche, Körper und Farbe. Jede Platzierung dieser Elemente hat eine Bedeutung. Demnach gibt es keine Elemente, die keine Aussage besitzen. Gerade deshalb ist die Anordnung und Gewichtung dieser Elemente besonders wichtig:
- Gewichtung durch Größe: Die Größe der Elemente sollte nur dann verändert werden, wenn es inhaltlich sinnvoll ist.
- Gewichtung durch Farbe: Dunkle Objekte werden schwerer eingestuft, als helle Objekte. Folglich ziehen diese auch mehr Aufmerksamkeit auf sich. Man beachte: Das, was Leser als erstes wahrnehmen, wird als Wichtigstes eingestuft.
- Gewichtung durch Kontraste: Für die Gestaltung einer Infografik lassen sich Farb- Form- und Größenkontraste nutzen. Sie helfen Dir bei der Strukturierung und machen Infografiken lebendig.
Farbwahl
Mit Farben kannst Du Deine Infografiken nicht nur verschönern, sondern die Aufmerksamkeit in eine ganz bestimmte Richtung lenken. Vor allem, wenn Du den Weißraum und somit entstehende Kontraste ganz bewusst einsetzt. Doch Vorsicht: Je Kulturkreis sind Farben mit unterschiedlichen Bedeutungen aufgeladen. Damit Deine Infografik positiv “ins Auge springt” und nicht als störend empfunden wird, solltest Du dich mit diesen kulturellen Gepflogenheiten auseinandersetzen. Für Europa gilt:
Quelle: Color Meanings
Tipp
Setze so wenig unterschiedliche Farben ein, wie möglich. Am besten nicht mehr als drei oder vier (inkl. Text und Hintergrund).
Schriftwahl
Für die Schrift gilt: Alles, was unter 11 Punkt Schriftgröße ist, gilt als unlesbar. Ab 16 Punkt wird das Lesen als angenehm eingestuft. Nutze jene Schriftart, welche Du auch im Text und anderswo einsetzt. Gut geeignete Schriftarten für Infografiken sind: Verdana und Tahoma, Roboto und Axel. Letztere eignet sich speziell für die Zahlendarstellung in Tabellen. Eine Serifenschrift hat im Web nichts verloren, weil es schlecht Lesbar ist.
Bei der Gestaltung von Text steht die Lesbarkeit im Vordergrund. Text ist erst dann gut lesbar, wenn sich die einzelnen Zeichen gut voneinander unterscheiden. Besondere Aufmerksamkeit gilt dabei den Buchstabenkombinationen, wie “rn” oder “il”, die sich stark ähneln. So solltest Du z. B. Kunstschriften vermeiden, denn diese sind oft nicht eindeutig erkennbar.
Textgestaltung
Zweifelsohne sollten Faktoren wie Schriftgröße, Schriftfarbe- und Kontrast, Zeilenabstand und Zeilenlänge bei der Gestaltung ebenso beachtet werden. Zudem sollten die Textblöcke möglichst kurz gehalten werden.
Darüber hinaus gilt: Jedes Element, welches nicht intuitiv einem Begriff oder einer Zahl zugeordnet werden kann, sollte beschriftet werden!
Tipp
Um zu prüfen, ob eine Schriftgröße gut gewählt ist, empfehle ich Dir die Infografik stark zu verkleinern. Ist der Text jetzt noch relativ gut lesbar, hast Du die richtige Schrift eingesetzt!
Hintergrund
Nur mit einem passenden Hintergrund kann die Infografik funktionieren. Dafür eignen sich insbesondere Farbhinterlegungen (neutrale, harmonische Farben einer Farbfamilie) oder Abbildungen, die nicht zu unruhig wirken. Wichtig ist, dass Text vor dem Hintergrund gut lesbar bleibt.
Ein Hintergrund kann sinnvoll sein, um eine „Klammer“ um die Grafik zu spannen, d.h. alle Inhalte zu gruppieren. Ist der Hintergrund eines Artikels als auch der Artikel gleichfarbig, ist eine fehlende Gruppierung oft irritierend für das Auge des Betrachters.
Achtung: Farbverläufe und feine Hintergrundmuster funktionieren nur bei hoher Farbtiefe. Die Grafik lässt sich dann kaum noch auf 8 oder 16 Farben reduzieren, ohne dass es zu enormen Qualitätsverlusten kommt.
Diagramme
Um Zahlen zu visualisieren werden häufig Balken, Säulen, Torten, Liniendiagramme oder Ablaufdiagramme eingesetzt. Bei der Beschriftung der Diagramme appellieren wir an das Gesetz der Nähe. Beschriftungen sollten in unmittelbarer Nähe der Abbildungen angebracht werden. Dafür eignen sich Legenden, die einem Diagramm häufig zugeordnet werden können.
Tipp
Vorsicht mit feinen Hintergrund-Mustern und -Verläufen: Bei der Reduktion der Farbtiefe können unschöne Flecken entstehen. Belässt man die Farbtiefe, ist das Speichervolumen der Grafik ist unnötig groß.
Balken
Mit Hilfe von Balken werden verschiedene Werte ( z. B. Zeiten, Geld, Umsatzzahlen) dargestellt. Bei positiven Werten verlaufen sie von links nach rechts, bei Negativen umgekehrt. Die Beschriftung sollte, wenn möglich, innerhalb der Balken oder unmittelbar daneben untergebracht werden.
Säulen
Ähnlich zu den Balken werden auch Säulen dazu eingesetzt Werte darzustellen. Prinzipiell werden sie von oben nach unten aufgebaut. Bei negativen Werten sollten die Säulen nach unten verlaufen. Vor allem eignen sie sich besonders um kleine Wertunterschiede sichtbar zu machen. Einziger Nachteil: Sie lassen sich nicht so gut beschriften wie Balken, denn oftmals muss bei der Beschriftung mit Zuordnungslinien gearbeitet werden. Solltest Du dennoch mit Zuordnungslinien arbeiten, empfehle ich Dir die Schriftblöcke in einem Winkel von 45° zu kippen.
Torten
Tortendiagramme eignen sich hervorragend, um die Aufteilung eines Ganzen darzustellen. Wichtig dabei ist, dass sie sich immer zu 100% aufaddieren lassen müssen. Andernfalls wirken sie unglaubwürdig. Zudem sollten sie möglichst immer auf 12 Uhr beginnen.
Für das bloße Auge sind Tortendiagramme vielleicht schön anzusehen, aber leider überwiegen die Nachteile. Es lassen sich keine negativen Werte darstellen, kleine Wertunterschiede sind nicht gut sichtbar, sie lassen sich nicht besonders gut miteinander vergleichen. Darüber hinaus sollten Tortendiagramme unter keinen Umständen verzerrt oder gekippt werden.
Liniendiagramme (Fieberkurven)
Mit Liniendiagrammen lassen sich primär große Mengen an Daten darstellen, die sich im Zeitverlauf ändern (z. B. Aktienkurse). Dabei werden die Werte auf einer Skala eingetragen und miteinander verbunden.
Ablaufdiagramme
Ablaufdiagramme haben ihren Ursprung im Projektmanagement. Häufig werden damit Prozesse oder Abläufe dargestellt. Die Darstellung von Ablaufdiagrammen ist vielfältig: Ob vertikal oder horizontal, als Zickzack oder als Schleife, es hängt von Deiner zu erzählenden Geschichte ab!
Infografiken für das Web optimieren
Deine Infografik sollte auf jedem Endgerät eine gute Figur machen. Daher gibt es ein paar Besonderheiten zu berücksichtigen:
Layout
Es ist meistens ratsam, für Infografiken ein horizontales Layout in einem 3-zu-2-Verhältnis zu wählen (“Landscape-Modus”). Viele soziale Netzwerke und auch die Google-Bildsuche sind auf entsprechende Bildlayouts ausgerichtet.
Dateiformat
Infografiken im Web basieren naturgemäß auf den RGB-Farbraum. Speichere sie am besten als PNG-8 ab, denn selten benötigst Du einen Farbspektrum von mehr als 32 Farben. Falls doch, entferne bunte Verläufe in der Grafik. Andernfalls riskierst Du eine zu hohe Speichergröße. Merke: 10 KByte sind toll, aber 100 KByte sind schlecht.
Mit Hilfe gängiger Software wie Adobe Photoshop oder Illustrator lässt sich RGB einfach über die Funktion “Für Web speichern” einstellen.
Das Optimum für Infografiken im Web: WebP als Bildformat
Das leistungsstärkste Bildformat ist aktuell WebP. Es wurde 2010 von Google ins Leben gerufen. Leider unterstützen nicht alle Browser dieses Format, weshalb bei der Nutzung mit Fallbacks gearbeitet werden sollte.
Infografik erstellen mit speziellen Tools
Fazit
Eine Infografik zu erstellen ist kein Hexenwerk, sofern Du die wichtigsten Grundregeln verinnerlicht hast. Tipp: Verzichte anfangs auf Spielereien und fokussiere Dich auf die Kernbotschaft. Gute Infografiken zeichnen sich durch Klarheit aus.
Moin aus Hamburg! Mein Name ist Frank und ich beschäftige mich bereits seit 25 Jahren mit E-Mail- und Content-Marketing. Als Diplom-Wirtschaftsinformatiker interessiert mich vor allem die Schnittstelle zwischen Mensch und Maschine. Falls Du mehr zu einem Thema wissen willst oder selbst als Autor*in in Aktion treten möchtest, melde Dich!