In dieser Arti­kel­se­rie zeige ich dir, wie du für deine Nonpro­fit-Orga­ni­sa­tion Info­gra­fi­ken erstellst und verbrei­test. In diesem Arti­kel gebe ich dir Tipps zum Design der Info­gra­fik für deine Non-Profit-Orga­ni­sa­tion.

Über­sicht über die Arti­kel­se­rie

Farb­wahl für deine Info­gra­fik

Bei der Farb­wahl gilt für Diagramme: Weni­ger ist mehr. Einige Wege zu einem Farb­schema für deine Info­gra­fik:

  1. Du nutzt die Farbe deiner Orga­ni­sa­tion, des Projekts oder der Publi­ka­tion, in der die Info­gra­fik gedruckt wird. Diese Farbe, einige ihrer Schat­tie­run­gen und einige Grau-Töne erge­ben dein Farb­schema. Anstelle der Grau-Schat­tie­run­gen kannst du auch eine andere helle, neutrale Farbe wählen.
  2. Du erstellst ein Farb­schema aus einer oder zwei Schmuck­far­ben, ihren Schat­tie­run­gen, plus Grau-Schat­tie­run­gen. Anstelle der Grau-Schat­tie­run­gen kannst du auch eine andere helle, neutrale Farbe wählen.
  3. Du erstellst ein Farb­schema mit verschie­de­nen bunten Farben, die zuein­an­der passen. Dabei helfen dir die Tools, die ich dir unten vorstelle. Ein neues Farb­schema macht Sinn, wenn du die Thema­tik der Info­gra­fik auch mit Farben darstel­len willst, z. B. das Thema „Umwelt“ in Grün- und Braun­tö­nen oder „Kinder“ in bunten Farben. Oder wenn deine Info­gra­fik aus einer Illus­tra­tion besteht, die mehr Farben benö­tigt.

Einsatz von Grau

Grau eignet sich, um Elemente hervor­zu­he­ben. Setze das, was wich­tig ist, in Farbe. Das, was weni­ger wich­tig ist, aber zum Verste­hen essen­ti­ell, setzt du in grau.

Die folgende Grafik legt den Fokus auf den Anteil der Schü­ler, die ihre digi­ta­len Kompe­ten­zen erwei­tert haben. Die ande­ren 5% sind im neutra­len Grau gehal­ten.

Infografiken mit großer Prozentzahl, Donut-Diagramm und Schrift. Orange gehalten sind "95%" plus der dazugehörige Anteil am Donut-Diagramm, der Rest ist grau

Beispiel: Die Kate­go­rie „weiß nicht“ wegzu­las­sen, wäre nicht rich­tig. Schließ­lich fehlt so ein großer Teil der Antwor­ten. Die Antwort­zah­len wären für den Betrach­ter verzerrt. Das Grau zeigt dem Betrach­ter, welche Antwor­ten rele­vant sind, in diesem Fall „ja“ und „nein“. Liegt dein Fokus auf der Zahl der Menschen, die „weiß nicht“ geant­wor­tet haben? Dann färbe die ande­ren Antwor­ten in Grau­tö­nen und diese Antwort in Farbe.

Eine Frage mit mehreren Antwortmöglichkeiten: ja, nein, weiß nicht. Ja und nein sind farbig, "weiß nicht" in grau.

Farben konse­quent nutzen

Nutze Farben konse­quent: Die Farbe deiner Über­schrif­ten bleibt gleich. Du hast einen Grund, die Farbe der Über­schrif­ten zu ändern? Etwa damit unter­schied­li­che Themen­be­rei­che unter­schied­li­che Farben erhal­ten? Dann mach das. Aber: Ändere nicht grund­los stän­dig die Farbe deiner Über­schrif­ten glei­chen Rangs, die Farbe der Beschrif­tun­gen, etc.

Nütz­li­che Tools bei der Farb­wahl

In meiner Tool­liste zu Design findest du Tools, die dir bei der Farb­wahl helfen. An dieser Stelle möchte ich dir noch zwei Tools vorstel­len, die beson­ders für die Daten­vi­sua­li­sie­rung nütz­lich sind.

Für Daten­vi­sua­li­sie­run­gen, etwa Kreis­dia­gramme, benö­tigst du häufig Schat­tie­run­gen einer Farbe. Diese lassen sich ganz schnell und einfach mit dem Chromas.js Color Scale Helper finden. Gib einfach eine Start­farbe, etwa die Farbe deiner Orga­ni­sa­tion, und mindes­tens eine zweite Farbe, etwa ein dunk­le­rer Ton der Farbe, ein. Daraus erstellt das Tool dir eine Reihe von Farb­tö­nen. Die Anzahl der Farben, die du brauchst, wählst du einfach aus. So habe ich im Hand­um­dre­hen Schat­tie­run­gen zu  meiner Blog­farbe gefun­den:

Schattierungen meiner Blogfarbe

Im Color­pi­cker for Data erstellst du Farb­ver­läufe und erhältst die Farben aus dem Verlauf für deine Daten­vi­sua­li­sie­rung. Das Tool zeigt dir, wie die Farben in einer Visua­li­sie­rung zusam­men ausse­hen anhand einer Karte der USA.

Viz Palette hat mehrere prak­ti­sche Funk­tio­nen: Kopiere einfach die hex-Werte deines Farb­sche­mas in das Käst­chen links. Du wählst unter „Color Popu­la­tion“ verschie­dene Farb­seh­stö­run­gen aus und siehst, ob sich deine Farben auch mit einer Farb­seh­stö­rung ausrei­chend vonein­an­der unter­schei­den. Außer­dem zeigt dir das Tool, wie die Farben zusam­men in Diagram­men wirken. Weiter unten zeigt dir das Tool, ob die Farben auf großen oder klei­nen Flächen oder als dünne Linien schwie­rig zu unter­schei­den sind.

Hilfe, wie finde ich denn jetzt die rich­ti­gen Farben?!

Du brauchst mehr Hilfe, um ein Farb­schema zu entwi­ckeln? Laura Eliza­beth zeigt dir Schritt für Schritt, wie du eine Farbe, eine Akkzent­farbe und Grau­töne zu einem Farb­schema kombi­nierst. Willst du mehr Farben mitein­an­der kombi­nie­ren oder hast noch keinen Plan? Dann sieh dir den Arti­kel von Came­ron Chap­man zu Farben für Desi­gner an, der dir viele verschie­dene Farb­sche­mas zeigt und erklärt, wie du zu einem eige­nen Farb­schema kommst.

Achtung, Lesbar­keit

Hast du Farben gefun­den?

Prüfe kritisch, ob deine Schrift­farbe und der Hinter­grund genug Kontrast aufwei­sen. Es soll den Leser nicht anstren­gen, deine Info­gra­fik zu lesen! Vermeide Farben, die die Augen anstren­gen, z. B. kras­ses Pink. Das kann sich in Print und Online durch­aus unter­schei­den.

Genü­gend Kontrast sollte auch zwischen den Farben, die du in Diagram­men oder auf Karten einsetzt, bestehen.

Barrie­re­freie Farb­wahl

Auch wenn du viel­leicht denkst, „Meine Leser werden das schon lesen können“, Kontrast ist wich­tig, damit der Text auch für Menschen mit einge­schränk­ten Sehfä­hig­kei­ten zugäng­lich ist.

Diese drei Tools helfen dir, den Kontrast zwischen Farben zu testen. Suche dir eins aus, welches in der Bedie­nung gefällt:

Das Tool Contrast Checker gibt an, ob der Kontrast zwischen den gewähl­ten Farben für Online-Grafi­ken ausrei­chend ist. Das Tool Acces­si­ble Colors liefert dir sogar einen alter­na­ti­ven Farb­wert, wenn die Lesbar­keit deiner gewähl­ten Farben im Web nicht ausreicht. Mit dem Kontrast­rech­ner von leserlich.info lassen sich die Lesbar­keit für Web und Druck berech­nen.

Außer Kontrast soll­test du beach­ten, Farben so einzu­set­zen, dass auch Menschen mit einer Farb­seh­stö­rung deine Grafi­ken verste­hen. Deine Farb­pa­lette kannst du, wie beschrie­ben, bei Viz Palette testen. Bei Coblis kannst du ein Bild hoch­la­den und dir anse­hen, wie Menschen mit Farb­seh­stö­rung das Bild wahr­neh­men. Wie du das Farb­schema änderst, falls es nicht barrie­re­frei ist, erklärt dir Gregor Aisch.

Probleme beim Farben finden? Zu wenig Farben, nicht barrie­re­frei oder schwer zu unter­schei­den? Graphic gibt Tipps, wie du Probleme bei der Farb­wahl löst.

In dieser Arti­kel­se­rie zeige ich dir, wie du für deine Nonpro­fit-Orga­ni­sa­tion Info­gra­fi­ken erstellst und verbrei­test. In diesem Arti­kel gebe ich dir Tipps zum Design der Info­gra­fik für deine Non-Profit-Orga­ni­sa­tion.

 

Die Arti­kel­se­rie zu Info­gra­fi­ken

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Wenn du möchtest, kannst du einen Namen, eine Website und eine E-Mail-Adresse angeben. Diese Daten sowie dein Kommentar und das Datum werden solange gespeichert, bis du widersprichst.

Deine IP-Adresse wird nicht gespeichert. Mehr Informationen zum Datenschutz erhältst du in der Datenschutzerklärung: Zur Datenschutzerklärung