Material Design Farben

Ein eigenes Farbschema mit dem Google Material Design-Farbsystem erstellen

Das von Google entwickelte Material Design ist ein anpassbares System von Richtlinien, Komponenten und Tools, das es sich zum Ziel gesetzt hat, möglichst viele Best Practices für das Design von Benutzeroberflächen zusammenzufassen und damit das schnelle Entwickeln schöner Apps und Webseiten zu unterstützen. Ein wesentlicher Bestandteil ist das Google Material Design-Farbsystem, mit dem es möglich ist, ein Farbschema zu erstellen, das einer Marke oder einem bestimmten Stil entspricht.

Erstmals vorgestellt wurde Material Design im Juni 2014 auf Googles Entwicklerkonferenz I/O. Eine wesentliche Eigenschaft des Material Designs ist die Orientierung an physikalischen Gesetzen (Schatten, Bewegungen, Tiefe, etc.).

Primär- und Sekundärfarben

Im Material Design-Farbsystem wird in der Regel eine Primär- und eine Sekundärfarbe ausgewählt. Dunklen und hellen Varianten der Farben werden dann auf der Benutzeroberfläche angewendet. Diese werden als Primär- und Sekundärpalette bezeichnet.

Mit den Primär- und Sekundärfarben Ihrer App und ihren Varianten kann ein harmonisches Farbschema erstellt werden. Allerdings ist bei der Auswahl der Paletten immer darauf zu achten, das eine barrierefreie Nutzung aller Benutzeroberflächenelemente möglich ist.

Zum einfachen Erstellen einer Palette mit den Primär- und Sekundärfarben sowie zum Generieren der hellen und dunklen Varianten stellt Google das Materialdesign-Palettenwerkzeug (https://material.io/tools/color) zur Verfügung. Das Tool bietet die Möglichkeit Farben aus der Material-Palette auszuwählen oder eine frei wählbare Farbe als Primär- und Sekundärfarbe festzulegen und mit den Farben ein User-Interface zu simulieren. So ist es möglich, die gewählten Farben schnell und einfach zu wählen und direkt in einer App zu sehen. Schneller kann man eine Farbpalette nicht testen.

Hat man sich für eine Primär- und Sekundärfarbe entschieden, kann die Primär- und Sekundärpalette für Android, iOS und als CodePen exportiert werden. Ein Export für Android besteht aus einer colors.xml Datei mit dem folgenden Inhalt.

<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
  <color name="primaryColor">#3f51b5</color>
  <color name="primaryLightColor">#757de8</color>
  <color name="primaryDarkColor">#002984</color>
  <color name="secondaryColor">#ffc107</color>
  <color name="secondaryLightColor">#fff350</color>
  <color name="secondaryDarkColor">#c79100</color>
  <color name="primaryTextColor">#ffffff</color>
  <color name="secondaryTextColor">#000000</color>
</resources>

Der Export für iOS besteht aus einer colors.swift Datei mit folgendem Inhalt:

let primaryColor = UIColor(red: 0.25, green: 0.32, blue: 0.71, alpha: 1.0);
let primaryLightColor = UIColor(red: 0.46, green: 0.49, blue: 0.91, alpha: 1.0);
let primaryDarkColor = UIColor(red: 0.00, green: 0.16, blue: 0.52, alpha: 1.0);
let primaryTextColor = UIColor(red: 1.00, green: 1.00, blue: 1.00, alpha: 1.0);
let secondaryColor = UIColor(red: 1.00, green: 0.76, blue: 0.03, alpha: 1.0);
let secondaryLightColor = UIColor(red: 1.00, green: 0.95, blue: 0.31, alpha: 1.0);
let secondaryDarkColor = UIColor(red: 0.78, green: 0.57, blue: 0.00, alpha: 1.0);
let secondaryTextColor = UIColor(red: 0.00, green: 0.00, blue: 0.00, alpha: 1.0);

Bei einem Export als CodePen wird in einem neuen Browser Fenster https://codepen.io/pen/define/ geöffnet und die Farbwerte übergeben.

Die exportierten Dateien können dann direkt in die entsprechenden Projekte in Android Studio, Xcode, etc. importiert werden. Damit stehen die Farben direkt zur Verfügung und können verwendet werden.

Prinzipien bei der Wahl der Farbpaletten

Bei der Wahl der Farben sollten 3 Grundprinzipien eingehalten werde.

  • Hierarchisch
    Farben sollten so gewählt werden, dass sie die Beziehungen der Elemente untereinander unterstützen und zeigen, welche Elemente momentan aktiv sind und mit dem Anwender interagieren können. Wichtige Elemente sollten herausstechen und dem Nutzer direkt auffallen.
  • Lesbar
    Der Kontrast zwischen dem Hintergrund und dem Vordergrund/Text sollte möglichst so gewählt werden, dass alle Symbole, Texte und UI-Elemente leicht erkennbar sind und die Lesbarkeitsstandards erfüllen. Dabei ist es wichtig, auch auf mögliche Probleme der Nutzer (z.B. Rot/Grün Schwäche) zu berücksichtigen. Einige Android Handys bieten hier eine einfache Möglichkeit, sich besser in die Situation zu versetzen, indem man in den Entwickleroptionen die „Farbraum Simulieren“ Option wählt. Damit wird es möglich, verschiedene Sehschwächen in Bezug auf die Farben zu simulieren.
  • Ausdrucksvoll
    Eine ausdrucksvolle App hat wesentlich bessere Chancen auf einen Erfolg als eine App die dem Nutzer langweilig und farblos erscheint. Eine gut gewählte Farbpalette kann die Wahrnehmung der App positiv beeinflussen und damit die Erfolgschancen deutlich verbessern.

Die Primärfarbe und die Sekundärfarbe

Als Primärfarbe wird die Farbe bezeichnet, die auf den Screens der App am häufigsten angezeigt wird. Sie wird unter andrem für die Statusleiste und die Appbar verwendet. Die Sekundärfarbe bietet zusätzlich zur Primärfarbe die Möglichkeiten, ein Element der App hervorzuheben. Die Sekundärfarbe  ist im Material Design optional und sollte nur sparsam angewendet werden.

Sekundärfarben eignen sich am besten für:

  • Floating Action Buttons
  • Auswahlsteuerelemente wie Schieberegler und Schalter
  • Ausgewählte Texte
  • Fortschrittsbalken
  • Links und Überschriften

Weitere Farben im Material Design

Neben Primärfarbe und die Sekundärfarbe definiert das Material Design noch die Oberflächen-, Hintergrund- und Fehlerfarben, die nicht unbedingt durch die Corporate-Identity der App bestimmt sein müssen.

  • Oberflächenfarben
    Finden Verwendung in Komponenten wie Karten, Blättern und Menüs
  • Hintergrundfarbe
    Erscheint hinter scrollbaren Inhalten.
  • Fehlerfarbe
    Wird in Formularen und anderen interaktiven Screens verwendet, um z.B. ungültige Eingaben zu visualisieren.

Fazit

Das Material Design Farbsystem ist ein gut durchdachtes und umfangreiches System, das den Designer/Entwickler einer App oder einer Webseite mit Tipps, Tools, vordefinierten Farben und einigen Regeln dabei unterstützt, die Beste Farbgebung zu finden.

Weitere Informationen zum Material Design Farbsystem können unter https://material.io/design/color/ nachgelesen werden