Grundlagen
Alle Teile des Designsystems, alle Komponenten, Muster und Seiten basieren auf Grundlagen der Gestaltung, die den Menschen in den Mittelpunkt der Nutzungserfahrung stellen.
Akustische Signale
Akustische Signale helfen den Nutzenden Aktionen und Ereignisse besser wahrzunehmen.
Barrierefreiheit
Barrierefreiheit ist einer der Haupttreiber der Entwicklung von GeFa, um eine intuitive Nutzung für möglichst viele Personen zu gewährleisten.
Darstellung nicht verfügbarer Funktionalitäten
Regel für die Darstellung von temporären oder permanent nicht verfügbarer Funktionalitäten (Buttons/Links/Tabs) in GeFa – Wann wird ausgeblendet, wann deaktiviert
Designprinzipien
Wie einem Nordstern folgend gestalten wir alle Elemente, Komponenten und Seiten nach Gestaltungsgrundlagen, die den Menschen beim Benutzen des Systems unterstützen, stets auf dem möglichst einfachsten und schnellsten Weg zum Ziel der Aufgabe zu gelangen.
Eingabe und Auswahlfelder
Es wird zwischen verschiedenen Typen von Eingabe- und Auswahlfeldern unterschieden, die sich in ihrer Funktionalität leicht unterscheiden, während manche Verhaltensweisen auch bei allen Feldern gleich sind.
Farben & Schattierungen
Farben und Farbschattierungen können unterschiedlich verwendet werden, bspw. um die Struktur der Seite zu verdeutlichen.
Ladezustände
Der Ladezustand beschreibt das Verhalten von Elementen, wenn Inhalte geladen werden müssen.
Logo
Das GeFa-Logo dient als Wiedererkennung und Absendemarke aller Inhalte von GeFa.
Mauszeigeränderungen
Die Maus oder der Cursor ändert sich, dabei kann es sich auf die Form, Größe oder Farbe des Cursors oder eine hinzugefügte Animation oder Wirkung beziehen.
Raster & Breakpoints
Das responsive Layout-Raster von GeFa passt sich an die Bildschirmgröße und -ausrichtung an und gewährleistet so die Konsistenz aller Layouts.
Schriften
In dem Typografie-Konzept werden verschiedene Schriftarten und Größen miteinander kombiniert, um immer die gewünschte Funktion zu erfüllen.
Scrollbar
Die Scrollbar ermöglicht es Nutzenden durch Bereiche zu scrollen, versteckte Abschnitte anzuzeigen und zu bestimmten Teilen des Fensters zu navigieren.
Symbole
Icons können zur bildlichen Auszeichnung von Funktionalitäten verwendet werden.
Zustände
Zustände zeigen an, in welchem Status sich ein Element befindet und welche Interaktion damit möglich ist.