In den letzten Jahren ist die Größe und Komplexität von Apps und Websites stark angestiegen. Hunderte von Seiten oder Screens sind daher keine Seltenheit mehr. Teams setzen daher vermehrt auf Design Systems um ihre Designs pflegbar und skalierbar zu machen.
Definition
Es gibt unterschiedliche Definitionen darüber was ein Design System ausmacht. Im Kern kann man sich aber folgende merken: Ein Design System ist eine Sammlung von Regeln um mit wiederverwendbaren Components und Pattern neue Designs zu erstellen.
Bestandteile eines Design Systems
Ein Design System kann viele unterschiedliche Bestandteile beinhalten. Am häufigsten besteht dieses in der Basis aus: Style Guide, Component Library und Pattern Library.
Style Guide
Ein Style Guide besteht aus mehreren Teilen, welche meistens der Brand Guide (Farben, Typographie, Logos, Abstände ...) und Editorial Guide (Voice of Tone und sprachliche Empfehlungen) sind.
Damit nicht irgendwelche Farben oder Abstände innerhalb unserer Designs verwendet werden, ist es nötig eine bestimmte Auswahl in Sets zusammenzufassen. Die einzelnen Elemente der Sets werden Design Token genannt.
Beispiel: Wir definieren in einer Tabelle die Farben für Primär, Sekundär, Danger, Succes, Warning und Info. Diese können wir dann in unseren Components verwenden.
Component Library
Die Component Library stellt im vornherein bestimmte, wiederverwendbare UI Elemente zur Verfügung, welche die im Style Guide definierten Design Token verwenden.
Häufig wird eine Website für die Component Library entwickelt, in der Designer und Developer mit den Components interagieren, sowie weitere Informationen wie Name, Beschreibung, Code Snippet, States, Beispiele usw. erhalten können.
Dieser Bestandteil eines Design Systems wird von vielen mit einem Design System assoziiert.
Beispiel: Die Farben des Style Guides können wir nun wunderbar verwenden um unterschiedliche Input und Button Varianten zu erstellen. Diese beiden Elemente machen aber noch kein fertiges Formular aus.
Pattern Library
Für viele hört ein Design System schon bei der Component Library auf, da einige Pattern dort bereits definiert oder erst im Development Prozess entwickelt werden.
Der größte Unterschied zwischen den beiden Libraries ist jedoch folgender: Eine Component Library stellt individuelle UI Elemente zur Verfügung, eine Pattern Library kombiniert diese um daraus Layouts zu erstellen.
Diese Gruppen (Pattern) können Content Strukturen, Layouts und/oder Templates sein.
Beispiel: Die zuvor erstellten Components können wir nun in unterschiedlicher Reihenfolge arrangieren um z.B. ein Kontakt- oder Registrierungsformular zu kreieren. Beide Formulare nutzen hierbei die selben Elemente, jedoch sind diese anders angeordnet um den jeweiligen Zweck zu erfüllen.
Fazit
Ein Design System besitzt viele Bestandteile die in Kombination und mit der richtigen Implementierung einen optimierten Workflow und konsistente Ergebnissen zur Folge hat. Material (Google) und Spectrum (Adobe) sind sehr gute Beispiele für funktionierende Design Systems.
Jedoch ist die Pflege und stetige Weiterentwicklung sehr zeitintensiv und kann bei schlechter Umsetzung sogar bremsen. So ist ein Design System auch nicht für jedes Projekt eine geeignete Lösung.
Wann es Sinn ergibt ein Design System zu verwenden und wann nicht, diskutieren wir in einem anderen Artikel.