Wie eine Weboberfläche ihren Stil behält
Von Oliver Schmalzl · Ausgearbeitet: · Archiv-Funddatum:
21.07.2022 · Archivdatum
Eine Oberfläche wirkt zusammengehörig, wenn ähnliche Dinge ähnlich aussehen und sich ähnlich bedienen lassen. Das beginnt bei Farben und Abständen, reicht aber bis zu Fehlermeldungen und dem Verhalten eines Knopfs.
Eine kleine Gestaltungsbeschreibung kann diese Entscheidungen festhalten. Statt „modern und aufgeräumt“ stehen dort konkrete Regeln: eine Schrift für Fließtext, eine gut erkennbare Hervorhebung, feste Abstände zwischen Abschnitten und eine verständliche Beschriftung für Aktionen.
Ein Knopf hat mehrere Zustände
Für eine erfundene Merkliste könnte der Speichern-Knopf normal, mit Tastatur fokussiert, während des Speicherns beschäftigt oder nach einem Fehler wieder verfügbar sein. Alle Zustände gehören zur gleichen Funktion. Wenn nur der schönste Normalzustand gestaltet wird, bleibt ein großer Teil der tatsächlichen Nutzung offen.
Storybook dokumentiert solche Komponentenbeispiele als Stories. An dem Ansatz ist die getrennte Betrachtung interessant: Man kann einen Zustand ansehen, ohne erst durch die ganze Anwendung zu klicken.
Dasselbe gilt für kleine Bedienelemente. Ein Schieberegler braucht eine erkennbare Bedeutung und gegebenenfalls eine lesbare Wertanzeige. MDN beschreibt das HTML-Element dafür. Für die Auswahl einer genauen Zahl kann ein zusätzliches Eingabefeld sinnvoller sein als langes Ziehen mit der Maus.
Konsistenz erleichtert Veränderungen
Wenn eine Farbe später geändert wird, sollte sie nicht an zwanzig Stellen neu erraten werden müssen. Dokumentierte Gestaltungswerte machen Änderungen nachvollziehbar. Noch wichtiger ist, dass die gleiche Aktion überall die gleiche Bedeutung behält.
Ein Designsystem muss dafür keine große Sammlung sein. Für eine kleine Website reichen wenige gute Entscheidungen, die auch in den weniger hübschen Zuständen Bestand haben.
Ursprüngliche Funde
Diese Links waren der Ausgangspunkt für den Beitrag. Die Einordnung im Text stammt von mir; die verlinkten Beiträge sind keine eigenen Tests.
- Ein Schieberegler aus HTML, CSS und JavaScript
- Ein Designsystem in einer DESIGN.md
- UI-Komponenten mit Storybook einzeln betrachten
- Parallax-Webseiten als Gestaltungsdemo
Zum Datum: Dieser Beitrag wurde am 11. Oktober 2026 ausgearbeitet. Das Archivdatum entspricht dem frühesten zugehörigen Fund in der Sammlung, nicht einer damaligen Veröffentlichung. Technische Einordnungen und nachträglich ergänzte Quellen beziehen sich auf die Ausarbeitung.