The Do’s And Don’ts Of Infographic Design

• 12 min read
• Design,Data Visualization,Infographics
• Saved for offline reading
• Share on Twitter, LinkedIn

Since the dawn of the Internet, the demand for good design has continued to skyrocket. Vom Web 1.0 bis zum Web 2.0 und darüber hinaus haben Designer die Trends und Erwartungen unseres Online-Universums mitbestimmt.

Anmerkung der Redaktion: Lesen Sie den Artikel The Do’s And Don’ts Of Infographic Design von Nathan Yau: Revisited hier auf Smashing Magazine, der eine Antwort auf diesen Artikel ist.

Seit den Anfängen des Internets ist die Nachfrage nach gutem Design weiter in die Höhe geschossen. Vom Web 1.0 bis zum Web 2.0 und darüber hinaus haben Designer die Trends und Erwartungen an unser Online-Universum mitbestimmt. Das Internet ist eine großartige Spielwiese für Designer, und die Online-Unternehmen wissen immer mehr zu schätzen, was man mit einem gut gemachten Augenschmaus erreichen kann. In den letzten zwei Jahren hat sich diese Tatsache zum Rückgrat eines wachsenden Trends im Online-Marketing entwickelt: die Infografik.

Infografiken sind visuelle Darstellungen von Informationen, oder „Data Viz“, wie die coolen Kids es heutzutage nennen. Der Begriff „Data Viz“ kommt von „Data Visualization“, was bedeutet, dass Datensätze in einer einzigartigen Weise dargestellt werden, die man sehen und nicht nur lesen kann. Diese Visualisierung sollte nicht der Interpretation überlassen werden, sondern so gestaltet sein, dass sie für alle Betrachter eine universelle Schlussfolgerung bietet. Einfach ausgedrückt, unterscheiden sich Infografiken nicht allzu sehr von den Diagrammen und Grafiken, die Programme wie Excel seit Jahren ausspucken.

Weitere Lektüre auf SmashingMag:

• Anregende Beispiele für interaktives Infografik-Design
• Ressourcen für Datenvisualisierung und Infografik
• Stellen Sie sich ein Tortendiagramm vor, das für immer auf einer Infografik herumtrampelt
• Spaß mit Physik in der Datenvisualisierung

Natürlich, so wie Web 2.0 das 1.0 verändert hat, sind die Infografiken von heute viel auffälliger als einfache Torten- und Balkendiagramme. Heutzutage fassen Infografiken viele verschiedene Datenvisualisierungen in einem zusammenhängenden Stück „Augenweide“ zusammen. Sie haben sich mit den Designtrends weiterentwickelt und einige kreative Facelifts erhalten, und das Internet wird nun mit interessanten Informationen gefüllt, die auf spannende Weise vermittelt werden.

Während einige Designtrends kommen und gehen, sind Infografiken hier, um zu bleiben. Mit Marken wie USA Today, The New York Times und Google und sogar Präsident Obama, die sie unterstützen, werden Infografiken zu einem mächtigen Werkzeug, um große Mengen an Informationen an die Massen zu verbreiten. Große und kleine Unternehmen nutzen Infografiken, um ihre Marken aufzubauen, ihr Publikum zu informieren und ihr Suchmaschinenranking durch Linkbuilding zu optimieren. Deshalb ist es ein Muss, zu lernen, wie man eine gute Infografik entwirft, und die üblichen Fallstricke bei der Gestaltung von Infografiken zu vermeiden, könnte den Unterschied zwischen dem Gewinn eines großen Kunden und dessen völligem Verlust bedeuten.

Wrapping Your Mind Around Data Viz And Infographic Design

Die Gestaltung einer Infografik ist nicht dasselbe wie die Gestaltung einer Website, eines Flyers, einer Broschüre usw. Selbst einige der besten Designer mit Portfolios, die Sie zum Schwärmen bringen würden, sind nicht in der Lage, eine Infografik effektiv zu gestalten. Die Erstellung von Infografiken ist eine Herausforderung und erfordert eine Denkweise, die nicht für jeden selbstverständlich ist. Aber diese Denkweise kann man sich durch Übung aneignen und indem man sich an bestimmte Standards hält, von denen der wichtigste darin besteht, die Datenvisualisierung zu respektieren und zu verstehen. Hier sind einige einfache Regeln, die man befolgen sollte, wenn man sich mit der richtigen Datenvisualisierung beschäftigt.

Show, Don’t Tell

Eine Filmregel lautet: Zeigen, nicht erzählen. Das Gleiche gilt für die Gestaltung von Infografiken. Als Infografikdesigner können Sie das Konzept festlegen oder auch nicht und die gesamte Forschung für das endgültige Design zusammenstellen, aber in jedem Fall sind Sie dafür verantwortlich, diese Informationen in ein visuell anregendes, zusammenhängendes Design zu verwandeln, das eine Geschichte erzählt und keine einzige Gelegenheit zur Visualisierung von Daten auslässt. Nehmen Sie diesen Teil einer Infografik über Twitter von ViralMS als Beispiel:

Was ist falsch an dieser Infografik? Sie bricht gleich zu Beginn die erste Regel. Wenn Sie die Möglichkeit haben, Informationen visuell darzustellen, sollten Sie sie nutzen. Hier hätte man die Tweets pro Sekunde zumindest in einem Balkendiagramm darstellen können. Durch die verschiedenen Höhen der Balken hätte das Auge schnell die Unterschiede in den Tweets pro Sekunde und Ereignis abschätzen können, ohne etwas lesen zu müssen.

Wenn Sie Schwierigkeiten haben, diese Regel einzuhalten, versuchen Sie, den gesamten Text auf einer Ebene Ihrer AI-Datei zu halten (mit Ausnahme von Text in Diagrammen und Grafiken). Schalten Sie von Zeit zu Zeit die Textebene aus und prüfen Sie, ob die Infografik noch Sinn macht. Wenn es keine Datenvisualisierung gibt oder wenn bei einigen Bildern der Kontext fehlt, dann erzählen Sie zu viel und zeigen zu wenig.

Wenn der Kunde eine Excel-Tabelle wollte, bräuchte er Sie nicht

Es mag hart klingen, aber es ist wahr. Wenn Infografiken so einfach wären wie eine Reihe von Standarddiagrammen und -grafiken auf einer Seite, dann bräuchten die Kunden keine großartigen Designer zu suchen. Es gibt viele Online-Tools, mit denen sich farbenfrohe Torten-, Linien- und Balkendiagramme erstellen lassen, so dass Sie die Dinge auf die nächste Stufe heben müssen, damit Ihr Design heraussticht. Welche der beiden folgenden Grafiken würde Ihrer Meinung nach einen Kunden glücklicher machen?

Wenn Sie mit Grafik B geantwortet haben, haben Sie es verstanden. Natürlich eignen sich nicht alle Daten für kreative und einzigartige Diagramme. Grafik A könnte sehr gut funktionieren, wenn der Rest der Infografik eine ähnliche Ästhetik aufweist. Manchmal müssen Sie einfach in den sauren Apfel beißen und ein herkömmliches Balken- oder Tortendiagramm erstellen; überlegen Sie jedoch immer, wie Sie es aufpeppen können, wie in den folgenden Beispielen:

Typografie sollte keine Krücke sein

Typografie kann ein Design ausmachen oder zerstören, aber sie sollte nicht die Lösung für ein Datenvisualisierungsproblem sein. Häufig beginnen Designer eine Infografik mit viel Energie und Begeisterung, verlieren aber schnell den Faden, wenn sie auf der Seite weitermachen. Dies führt oft zu schnellen Entscheidungen und schlechten Lösungen, wie z. B. die Verwendung von Typografie, um eine große Zahl zu präsentieren, anstatt sie auf irgendeine Weise zu visualisieren. Hier ein Beispiel:

Wenn ich das sehe, fühle ich mich an die Werbekampagne „Where’s the beef?“ erinnert, und ich denke: „Wo ist die Datenübersicht?“ Obwohl Sketch Rockwell eine meiner absoluten Lieblingsschriften ist, ist dies ein perfektes Beispiel dafür, dass man sich zu sehr auf die Typografie verlässt.

Wenn Ihnen eine Forschungszahl für eine Infografik vorgelegt wird, fragen Sie sich, wie sie visualisiert werden kann. Prozentsätze können immer mit kreativen Kreisdiagrammen visualisiert werden; numerische Werte in einem Satz können normalerweise in ein einzigartiges Balkendiagramm umgewandelt werden; und wenn die Zahlen nicht in eine einheitliche Skala passen, können Sie sie vielleicht in einem Diagramm visualisieren.

Typografie hat ihren Platz

All dies vorausgeschickt, hat Typografie ihren Nutzen, der bei der Erstellung einer Infografik nicht ignoriert werden sollte. In den meisten Fällen werden Sie Ihre kreativen typografischen Energien auf Titel und Überschriften konzentrieren wollen. Der Titel der Infografik ist die perfekte Gelegenheit, um eine lustige und auffällige Schriftart zu verwenden und sie passend zum Thema zu gestalten. Achten Sie nur darauf, dass der Titel nicht so ablenkend ist, dass er von dem Grund ablenkt, warum wir uns die Infografik überhaupt ansehen. Die Wahrheit ist, dass einige Infografik-Themen langweilig sind, aber das richtige Titeldesign kann die Leute so sehr fesseln, dass sie weiterblättern.

Auch Überschriften helfen dabei, eine Infografik aufzulockern und die Daten leichter zu erfassen, was Ihnen eine weitere Möglichkeit gibt, Ihre Font-Nerd-Fahne hochzuhalten.

Organisation und Storyline

Eine Infografik so zu organisieren, dass sie Sinn macht und das Interesse des Betrachters aufrecht erhält, ist nicht immer einfach, aber für die meisten Infografik-Designer gehört es zum Job. In der Regel werden Ihnen viele Daten zur Verfügung gestellt, aus denen Sie eine visuelle Geschichte erstellen müssen. Das kann anfangs eine Herausforderung sein, aber Sie können einige allgemeine Regeln befolgen, um die Arbeit zu erleichtern.

Drahtgitter für die Infografik

Das Drahtgitter für eine Infografik ermöglicht es Ihnen, ein Storyboard und ein Layout für das Design auszuarbeiten. Sie haben vielleicht eine Vorstellung von der Geschichte, die Sie erzählen wollen, aber wenn Sie mit der Gestaltung beginnen, stoßen Sie vielleicht an eine Wand und müssen von vorne anfangen. Es ist unglaublich frustrierend, wenn man einen großen Teil des Entwurfs bereits fertiggestellt hat und dann umorganisieren muss. Vermeiden Sie dies, indem Sie Ihre Storyline von Anfang an festlegen, um zu bestimmen, welche Daten auf welche Weise gezeigt werden sollen. Nehmen Sie sich eine Stunde Zeit, um die Dinge zu skizzieren und sicherzustellen, dass alles einen Sinn ergibt. So können Sie auch sicherstellen, dass die von Ihnen gewählte Farbpalette die Aufmerksamkeit auf die wichtigen Punkte lenkt und den Blick auf die Seite lenkt.

Think Outside the Box

Während Sie die Infografik skizzieren, werden Sie Abschnitte identifizieren, die helfen, die Geschichte zu erzählen. Die meisten Infografiken im Internet sind vertikal aufgebaut, wobei jeder Abschnitt mit einer Überschrift versehen ist, um ihn vom letzten zu unterscheiden. Das wird schnell langweilig. Eine gute Möglichkeit, die Monotonie zu durchbrechen, besteht darin, die Daten zu organisieren und die Informationen in Abschnitte zu unterteilen, ohne sich ausschließlich auf Überschriften und farbliche Unterbrechungen zu verlassen.

Anstatt das typische einspaltige Layout zu wählen, könnten Sie beispielsweise in bestimmten Teilen zwei Spalten verwenden. Sie könnten auch Abschnitte mit Rahmen oder Hintergründen in verschiedenen Formen auflockern oder dem gesamten Design ein Straßen- oder Wegthema geben. Hier sind einige unkonventionelle Layouts, die Ihre Kreativität anregen sollen:

Erzähle eine Geschichte

Alle guten Geschichten haben einen Anfang, eine Mitte und ein Ende. Infografiken verdienen die gleiche Behandlung. Zu Beginn der Infografik sollten Sie das Problem oder die These vorstellen. Untermauern Sie sie dann mit Daten. Beenden Sie die Infografik schließlich mit einer Schlussfolgerung.

Visualisieren Sie den Aufhänger

Jede gute Infografik hat einen Aufhänger oder eine Hauptaussage, die den Betrachter „A-ha!“ sagen lässt. In der Regel ist es am besten, den Aufhänger entweder in der Mitte oder ganz am Ende der Infografik zu platzieren, damit er mehr Aufmerksamkeit erregt. Geben Sie den wichtigsten Informationen die größte visuelle Bedeutung, damit die Betrachter wissen, was sie mitnehmen sollen. Hier sind einige Beispiele für gut visualisierte Aufhänger:

Aufräumen mit Farbe

Der Unterschied, den eine Farbpalette machen kann, ist erstaunlich, besonders in der Welt der Infografiken. Die richtige Palette kann helfen, eine Infografik zu organisieren, die Marke zu propagieren, das Thema zu verstärken und vieles mehr. Die falsche Palette kann ein großartiges Thema in einen Schandfleck verwandeln, dem Image der Marke schaden und die falsche Botschaft vermitteln. Hier sind einige Tipps, die Sie bei der Auswahl der Farben für Ihre Infografik beachten sollten.

Machen Sie es universell

Beim Webdesign ist es immer wichtig, eine Farbpalette zu wählen, die zum Thema der Website passt und die neutral genug für eine vielfältige Gruppe von Besuchern ist. Da Infografiken in erster Linie online verbreitet werden, ist es ebenso wichtig, die richtige Farbpalette für eine Vielzahl von Besuchern zu wählen. Sie müssen auch darauf achten, was online gut aussieht.

Dominante dunkle Farben und Neonfarben beispielsweise kommen in Infografiken in der Regel nicht gut zur Geltung; Neonfarben auf Schwarz können schwer zu lesen sein, und wenn es viele Daten gibt, wird es schwierig, sie alle aufzunehmen. Vermeiden Sie außerdem, wann immer möglich, Weiß als Hintergrund. Infografiken werden oft auf mehreren Websites und Blogs geteilt, von denen die meisten einen weißen Hintergrund haben. Wenn der Hintergrund Ihrer Infografik ebenfalls weiß ist, wird es schwierig zu entziffern, wo sie beginnt und wo sie endet.

Eine dreifarbige Palette ist angenehm für die Augen

Bei all den Daten, die in eine Infografik einfließen, muss sichergestellt werden, dass das Auge des Lesers leicht über die Seite fließt; die falsche Farbpalette kann ein großes Hindernis dafür sein. Wählen Sie eine Farbpalette, die die Sinne nicht angreift. Überlegen Sie sich das, bevor Sie mit der Gestaltung beginnen, denn das hilft Ihnen dabei, die verschiedenen Elemente zu visualisieren.

Wenn es Ihnen schwerfällt, eine Farbpalette auszuwählen, halten Sie sich an die Dreierregel. Wählen Sie drei Grundfarben. Von den drei Farben sollte eine die Hintergrundfarbe sein (in der Regel die hellste der drei), und die beiden anderen sollten die Abschnitte auflockern. Wenn Sie weitere Farben hinzufügen müssen, verwenden Sie Schattierungen der drei Hauptfarben. Auf diese Weise bleibt die Farbpalette kohärent und beruhigend, anstatt zu stören.

Nutzen Sie die Ihnen zur Verfügung stehenden Werkzeuge

Bei der Auswahl der Farben müssen Sie das Rad nicht neu erfinden. Es gibt eine Reihe großartiger Websites, die Ihnen bei der Auswahl der richtigen Farbpalette für Ihre Infografik helfen. Kuler von Adobe bietet neue Themen und eine durchsuchbare Datenbank sowie ein einfaches Tool zum Anpassen der gewünschten Palette. Ein Problem bei Kuler ist, dass alle Paletten fünf Farben haben und die Farben manchmal aus völlig unterschiedlichen Familien stammen und nicht nur Schattierungen einiger weniger Primärfarben sind, so dass die Suche nach der richtigen Palette wie die Suche nach einer Nadel im Heuhaufen sein kann.

Ein weiteres Tool zur Farbauswahl ist COLOURlovers. Diese Datenbank ist einfacher zu durchsuchen: Sie unterteilt die Paletten in verschiedene Themen und kann nach Favoriten sortiert werden. Die meisten Paletten bestehen zwar auch aus fünf Farben, aber die Farben werden nicht immer gleich gewichtet, sondern das Tool schlägt vor, welche Farben dominieren sollten. Hier sind einige gute und schlechte Farbpaletten für Infografiken:

Abschließende Überlegungen

Während diese Standards für die meisten Infografik-Designs wichtig sind, kommt manchmal eine Infografik daher, die alle diese Regeln bricht und trotzdem sehr erfolgreich ist. Letztendlich mögen Kunden „Augenweiden“ und Designs, die „knallen“! Solche Begriffe sind zwar subjektiv (und für die meisten Designer lästig), aber wir alle erkennen ein großartiges Infografikdesign, wenn wir eines sehen, und Ihre Kunden tun das auch. Nutzen Sie diese Regeln, um sich im Bereich der Infografik zurechtzufinden, aber entwickeln Sie Ihre eigenen Techniken und Standards, nachdem Sie etwas Erfahrung gesammelt haben.

(al)