Design: UI Color-Styles

Allgemein

  • Alle Farben, die in einem UI-Design angewendet werden können MÜSSEN in einer Farbpalette = Color-Styles definiert und angelegt werden.
  • Alle Farb-Zuweisungen in einem Design-Dokument (z. B. Figma) MÜSSEN über die Auswahl eines Color-Styles geschehen.

Umfang

Die Color-Styles SOLLTEN folgende Farben beinhalten

  • die Farben der jeweiligen Corporate Identity (CI).
    • jeweils eine helle und eine dunkle Abstufung. Bei Bedarf kann es weitere Abstufungen geben.
  • Basisfarben: schwarz und weiß
  • Ampelfarben für System-Feedback

Für komplexe App-Interfaces, bei denen die Farben vorranging zur Strukturierung und Information eingesetzt werden KANN zusätzlich zu oder anstatt der CI-Farben mit einem Farbsystem nach Farbnamen gearbeitet werden.

Naming

CI-Farben

Von einer Benennung anhand von Farbnamen (z.B. green) ist abzusehen, da sich die Farben der CI im Laufe eines Projektes ändern können. Somit wäre beispielsweise die Benennung einer grünen Primärfarbe als “green” nicht mehr angemessen, wenn sie durch rot ersetzt wird.

Die CI-Farben und Ihre Abstufungen SOLLTEN daher anhand ihere Präsenz im CI mit folgenden Namen benannt werden:

  • primary = CI Primärfarbe
  • secondary = CI Sekundärfarbe
  • tertiary = CI Tertiärfarbe

Sollten in der Corporate Identity mehr als drei Farben (mit Ausnahme von schwarz und weiß) verwendet werden, kann in Betracht gezogen werden, die Color Styles anhand der Farbnamen zu benennen (z.B. green). Dafür sollte sichergestellt werden, dass sich die Farben selbst nicht mehr ändern.

Abstufungen

Die Namen der Abstufungen SOLLTEN aus dem CI-Namen mit dem Zusatz -dark und -light bestehen:

z .B.

  • secondary-light
  • secondary-dark

Sollte es bei den Farben mehr als zwei Abstufungen geben, KANN alternativ mit den Namenszusätzen -100, -200, …, -900 gearbeitet werden.

z .B.

  • secondary-100
  • secondary-500
  • secondary-900

Basics

  • black
  • white

Ampelfarben

  • success
  • warning
  • error

Farbsysteme nach Farbnamen

z. B.

  • red-100, …, red-900
  • blue-100, …, blue-900

Table Of Contents