Farbkonzept

In diesem Dokument wird unser Farbkonzept erläutert, welches eine einheitliche und intuitive Nutzerführung sicherstellt. Die Farben spielen eine wesentliche Rolle in der Gestaltung und Funktionalität unserer Lösungen und sind klar definiert, um Statusinformationen, Aktionen, Hinweise und Fokuselemente deutlich zu kommunizieren.

Status- und Warnfarben

Unsere Status- und Warnfarben folgen einem Ampelprinzip, das allgemein intuitiv und leicht verständlich ist:

• Grün:
  Wird verwendet, um positive Zustände oder erfolgreiche Aktionen zu signalisieren. Beispiele:

  • Prozess abgeschlossen

  • Alles im Normalbetrieb

  • Keine Probleme erkannt

• Gelb:
  Kennzeichnet einen neutralen oder warnenden Zustand, der Aufmerksamkeit erfordert, jedoch keine kritische Dringlichkeit hat. Beispiele:

  • Prozess in Bearbeitung

  • Leichte Abweichungen vom Plan

  • Aufmerksamkeit erbeten

• Rot:
  Signalisiert kritische Zustände, Fehler oder dringende Probleme, die sofortige Maßnahmen erfordern. Beispiele:

  • Systemfehler

  • Kritische Abweichung

  • Handlungsbedarf

Hinweisfarbe

• Orange:
  Diese Farbe hebt temporäre Zustände oder wichtige Hinweise hervor, die für den Nutzer relevant sind, aber keine unmittelbaren Maßnahmen erfordern. Beispiele:

  • Hinweis auf laufende Simulationen

  • Anstehende Wartungsarbeiten oder Systemneustart

  • Temporäre Einschränkungen

Aktionsfarben

• Dunkelblau:
  Dunkelblau wird konsistent für interaktive Elemente verwendet, wie Buttons oder Bedienelemente. Dies stellt eine klare Abgrenzung zu Statusfarben sicher und signalisiert Handlungsaufforderungen. Beispiele:

  • Plus-Button: Hinzufügen von Elementen

  • Erstellbutton: Erstellung neuer Inhalte oder Prozesse

  • Speicherbutton: Sicherung von Daten

  • Login-Button: Anmeldung im System

Fokusfarbe

• Cyan:
  Cyan wird verwendet, um den aktuellen Fokuspunkt oder die gewählte Auswahl im System hervorzuheben. Dies ermöglicht eine klare Orientierung und Übersicht, insbesondere bei komplexen Eingabeprozessen oder Interaktionen. Beispiele:

  • Markierung des aktuell ausgewählten Feldes in Formularen

  • Hervorhebung des fokussierten Elements in einer Liste

  • Fokus in Navigationselementen oder aktiven Dialogen