Blog / Newsletter

[Design] Alles so schön bunt ...

 
Picture of Martin Smaxwil
[Design] Alles so schön bunt ...
by Martin Smaxwil - Monday, 27 November 2017, 2:57 PM
 

Tag zusammen.

Farben sind ja so eine Sache, für viele vor allem eine Geschmacksfrage, die aber auch schnell die Grenzen zu Benutzendenfreundlichkeit (also z.B. Lesbarkeit, Kontrastwahrnehmung), Harmonie (z.B. komplementäre vs. monochrome Farbpaletten), und im beruflichen Umfeld auch Vereinheitlichung (im Sinne von Designstandards) und Wiedererkennung (im Sinne einer Corporate Identity) streift.

Hauptfarben

Für mich hat sich seit der Einführung des neuen Logos und der neuen Farben an der THGA ein Satz an Farben herauskristallisiert, den ich (zumindest in meinem Arbeitsfeld) regelmäßig nutze. Als erstes natürlich die beiden neuen Hauptfarben THGA-blau und THGA-rot:




Unter anderem für das neuen Design der Lernplattform wurden Abstufungen des Blau- und Rottons (im Sinne monochromatischer Farbpaletten) und verschiedene Graustufen verwendet:

















Kontrastfarben

Neben den monochromen Paletten werden für farbliche Akzente und Hervorhebungen häufig Farbpaletten verwendet, welche im Farbkreis dreieckig angeordnet sind (sog. Farbtriaden) und in denen jede Farbe den "gleichen Abstand" zu seinen beiden Partnern hat. Da die beiden "neuen" THGA-Hauptfarben nicht exakt einen "1/3-Farbkreis-Abstand" aufweisen, habe ich zwei Farbtriaden erstellt und miteinander verknüpft, wodurch sich drei Kontrastfarben (je ein Gelb-, Grün- und Blauton) ergeben:








Infoboxen

Jenseits der monochromatischen Paletten und der Triadenpalette nutze ich in der Lernplattform auch noch das gestalterische Element der "Infoboxen":

Warnung
Hinweis / Frage
Tipp
Info

Die stehen übrigens jedem Moodle-Benutzendem in beiden Editoren auch in den Formatvorlagen zur Verfügung:

Das hier verwendete Dunkel- und Hellrot sowie Dunkel- und Hellblau sind natürlich den oben erwähnten monochromatischen Paletten entnommen, um nicht zu viele Schattierung einer Farbe zum Einsatz zu bringen. Trotzdem summiert sich die Anzahl der eingesetzten Farben bis hierhin bereits auf 22 verschiedene Farben: Fünf Rottöne + fünf Blautöne + fünf Graustufen + drei Kontrastfarben + zwei Grün- und zwei Gelbtöne für die zusätzlichen Infoboxen.

Das Ganze wird nun noch weiter durch die Tatsache verkompliziert, dass jede Anwendung andere Farbräume (vereinfacht gesagt: Die Art, wie Farbtöne alphanumerisch codiert werden) unterstützt, z.B.: RGB (also Werte für Rot, Grün und Blau, welche in ihrer Mischung die Zielfarbe ergeben) oder CMYK (= Cyan, Magenta, Yellow, Key) und - je nach Farbraum - unterschiedliche Codierungen.

Beispiel Moodle:

Hier werden am Ende des Tages ja eigentlich Webseiten produziert, welche im Browser angezeigt werden können. Diese werden in HTML und/oder mit CSS gestaltet. In dieser Umgebung werden Farben im RGB-Farbraum definiert. Das passiert entweder durch

  • eine RGB-Angabe mit je einem Wert für Rot, Grün und Blau, in Form einer rgb(Rot, Grün, Blau)-Angabe (hier ausprobieren) oder
  • eine RGBA-Angabe incl. eines Alpha-Wertes für die Deckkraft der Farbe, in Form einer rgba(Rot, Grün, Blau, Alpha)-Angabe oder
  • eine 24-bit Hexadezimal-Angabe für Rot, Grün und Blau in Form von #RRGGBB (hier ausprobieren).

Diese können Sie natürlich im HTML-Modus der Editoren (<>-Button) direkt als Code verwenden. Außerdem haben wir im Standard-Editor (Atto) bereits alle hier erwähnten Farben sowohl dem Farbwähler für die Schriftfarbe als auch dem Farbwähler für die Hintergrundfarbe hinzugefügt:



Beispiel Office:

Auch hier sind (etwas versteckt) RGB-Angaben möglich. Diese findet man in jedem Farbmenü unter "Weitere Farben" auf dem Reiter "Benutzerdefiniert". Bei eingestelltem Farbmodell RGB können die Werte für Rot, Grün und Blau eingegeben werden:



Das THGA Color Cheat Sheet

Damit ich nicht für diese 22 Farben sowohl hexadezimale als auch RGB-Farbwerte auswendig lernen muss, liegt auf meinem Tisch das THGA Color Cheat Sheet smile

Aus dem gehen alle Farbwerte sowohl in RGB- als auch in hexadezimaler Codierung hervor. Das Sheet habe ich nun noch einmal etwas aufgehübscht und um eine weitere Deko-Farbpalette ergänzt. Sie können es hier (JPG, PDF) herunterladen.

Vielleicht hilft Ihnen das ja weiter... Wenn ja: Gern geschehen smile

Beste Grüße,
Martin Lukas