Ein Design System ist die verbindliche Sammlung aller Bausteine, aus denen die Oberflächen einer Marke gebaut werden, zusammen mit den Regeln für ihren Einsatz. Es umfasst Farben, Schriften, Abstände und Bedienelemente samt ihren Zuständen. Anders als eine reine Sammlung von Vorlagen wird es gepflegt und weiterentwickelt.
- Design System
Gepflegte Sammlung aus Gestaltungsregeln, wiederverwendbaren Bausteinen und deren Dokumentation, gültig für alle Oberflächen einer Marke.
Beispiel: „Der neue Button kommt aus dem Design System, deshalb sieht er im Portal genauso aus wie auf der Website.“Abgrenzung zum Styleguide: Ein Styleguide beschreibt, wie etwas auszusehen hat. Ein Design System liefert die Bausteine gleich mit, im Design-Tool und im Code.
Abgrenzung zum UI-Kit: Das UI-Kit ist die Bausteinsammlung für die Gestaltung und damit ein Bestandteil eines Design Systems, das darüber hinaus Regeln, Dokumentation und Code enthält.
Was in einem Design System steckt
Am Anfang stehen die Design Tokens: benannte Werte für Farben, Schriftgrößen, Abstände und Radien, die überall referenziert werden. Ändert sich der Wert an einer Stelle, zieht die Änderung durch alle Produkte. Darauf setzen die Bausteine auf. Ein Button wird deshalb in allen Zuständen angelegt, die er annehmen kann: Normalzustand, Hover, aktiv, deaktiviert und im Ladezustand.
Der dritte Teil wird gern unterschätzt und entscheidet trotzdem über den Nutzen: die Regeln. Wann wird ein primärer Button eingesetzt und wann ein sekundärer, wie viele davon dürfen auf einer Seite stehen, welche Fehlermeldung erscheint an welcher Stelle. Ohne diese Antworten wird das System zu einer Bausteinkiste, aus der jeder etwas anderes zusammensetzt.
Wie ein Design System im Alltag benutzt wird
Der Nutzen zeigt sich in der Geschwindigkeit neuer Seiten. Wer eine Landingpage baut, setzt vorhandene Abschnitte zusammen; über Schriftgrößen und Abstände ist längst entschieden. Die Diskussion verschiebt sich damit von der Gestaltung zur Inhaltsfrage, und das ist meist die Diskussion, die den Ausschlag gibt.
Der zweite Effekt betrifft die Konsistenz über die Zeit. Ohne System driften Oberflächen auseinander, weil jede Erweiterung ihre eigenen Entscheidungen trifft. Nach drei Jahren existieren dann fünf Blautöne und vier Abstufungen von Abständen, ohne dass jemand das beschlossen hätte. Mit Tokens bleibt diese Zahl klein, weil eine Abweichung auffällt, sobald sie nicht aus dem Vorrat kommt.
In der Zusammenarbeit ist das System außerdem die Stelle, an der Design und Entwicklung dieselbe Sprache sprechen. Ein Baustein hat einen Namen, den beide Seiten benutzen, und dieselben Zustände in beiden Werkzeugen. Sichtbar wird das oft in einem Living Styleguide, der die Bausteine aus dem Produktivcode zeigt.
Wann sich der Aufwand lohnt
Ein Design System kostet in der Anlage deutlich mehr Zeit als ein klassischer Entwurf und zahlt sich erst über die Menge aus. Aus unserer Erfahrung lohnt es ab dem Punkt, an dem mehrere Oberflächen dieselbe Marke tragen: Website, Kundenportal, Shop, App. Für eine einzelne Unternehmenswebsite mit zwanzig Seiten reicht ein sauber aufgebautes Template mit klaren Bausteinen.