Designsystem
Ein Designsystem verbindet Gestaltungsregeln, wiederverwendbare Bausteine und Nutzungshinweise. Es braucht Pflege und nachvollziehbare Änderungen.
Gemeinsame Regeln für digitale Oberflächen
Ein Designsystem ist ein gepflegter Zusammenhang aus Gestaltungsgrundlagen, wiederverwendbaren Komponenten und Regeln für deren Einsatz. Es beschreibt beispielsweise Farben, Typografie, Formularfelder und das Verhalten bei Fehlern. Zuständigkeiten und Änderungen gehören ebenfalls dazu.
In einem beispielhaften Unternehmen verwenden Kundenportal und interne Verwaltung dasselbe Eingabefeld. Das Designsystem legt Beschriftung, Hilfetext und Fehlerdarstellung fest. Die jeweilige Anwendung entscheidet weiterhin, welche Adresse oder Kundennummer fachlich gültig ist.
Eine Komponentenbibliothek liefert die Bausteine; ein Designsystem erklärt zusätzlich, wann und wie sie verwendet und weiterentwickelt werden. Eine Sammlung schöner Entwürfe allein erfüllt diese Aufgabe nicht. Der Umfang sollte zu den tatsächlich wiederkehrenden Oberflächen passen, damit Pflegeaufwand und Nutzen zusammenpassen.
Quellen
Verwandte Begriffe
- Design-TokenEin Design-Token speichert eine benannte Gestaltungsentscheidung. Er lässt sich in mehreren Komponenten verwenden und gezielt ändern.
- UI-KomponenteEine UI-Komponente ist ein wiederverwendbarer Baustein einer Benutzeroberfläche. Zu ihrer Aufgabe gehören Darstellung und das erforderliche Verhalten.
- FokusreihenfolgeDie Fokusreihenfolge bestimmt den Weg durch fokussierbare Elemente. Sie soll Bedeutung und Bedienbarkeit auch bei dynamischen Änderungen erhalten.
- FokusfalleIn einer Fokusfalle bleibt die Tastaturbedienung in einem Bereich stecken. Eine absichtliche Begrenzung im Dialog braucht einen bedienbaren Ausgang.
- Sprunglink zum HauptinhaltEin Sprunglink führt an wiederholter Navigation vorbei zum Hauptinhalt. Das Ziel muss auch für die anschließende Tastaturbedienung stimmen.
- Zugänglicher NameDer zugängliche Name benennt ein Bedienelement für assistive Technik. Er soll die Aktion verständlich machen und zum sichtbaren Text passen.
Beiträge zum Thema
Design & UX mit ASES
Nutzererlebnis, Oberflächen und Markenauftritt