Design-Systeme: So setzen wir sie ein

Design-System: Was es ist und was es kann

Zugegeben, der Name ist ein wenig irreführend, denn ein Design-System ist mehr als nur eine Sammlung von Design-Elementen. Es stellt die Verbindung aus Marken- und Marketing-Richtlinien, Design und Entwicklung dar. Das bedeutet, alle diese Bereiche beeinflussen und formen das System. Man darf es deswegen nicht als starres Konstrukt verstehen, sondern als eine Sammlung von Rahmenbedingungen, die auf Änderungen reagieren und sich an neue Umstände anpassen können.

Beispiel:

Am besten kann man sich ein Design-System wie ein Lego-Set vorstellen: Das Lego-Set besteht aus verschiedenen Bausteinen, die in unterschiedlichen Kombinationen zusammengesetzt werden können. Diese Bausteine entsprechen der Komponenten-Bibliothek im Design-System. Um aber einen bestimmten Screen zu erstellen, braucht es im Design-System, ähnlich wie beim Lego-Set, eine Bauanleitung, in der die einzelnen Komponenten beschrieben sind und erklärt wird, wie und wann sie eingesetzt werden sollen. 

Aufbau eines Design-Systems

Um ein Design-System aufzubauen, klären wir zuerst die Marken- und Marketing-Richtlinien. Je nach Unternehmen gibt es bereits Vorgaben für Schriftart, Farben und Icons oder eben die Freiheit, alles selbst zu definieren. 

Als Nächstes sammeln wir Anforderungen, die das Produkt für jeden User erfüllen muss – die User können Administrator:innen, Mitarbeiter:innen oder Endnutzer:innen sein. Damit wir denken und handeln wie sie, versetzen wir uns in ihre Lage und formulieren User-Stories. Das hilft uns, während der Entwicklung ein Gefühl für sie zu bekommen und den Workflow sowie das Design auf ihre Intuition anzupassen.

Dann werden auch schon die ersten Screens und Komponenten gestaltet. Wichtig ist, dass sie möglichst abstrakt gestaltet sind und somit wie Bausteine funktionieren, damit sie in verschiedenen Konstruktionen und Bereichen wiederverwendet werden können. 

Sind die ersten Workflows für das Look-and-Feel gestaltet und von den Kund:innen abgenommen, startet die Entwicklung. Design und Entwicklung sind dabei im engen Dialog. Unser wichtigstes Instrument dafür ist Storybook. Storybook ist ein Tool, das fertig programmierte Komponenten isoliert darstellt. So können wir sie einzeln auf Verhalten und Extremwerte prüfen. Der große Vorteil: Jede Komponente wird schon vorab auf Herz und Nieren getestet – das spart uns später beim Design-Review sehr viel Zeit. Außerdem stellen wir sicher, dass die im Design definierten Komponenten auch in der Entwicklung als Komponenten behandelt werden und zwei identische, saubere Bibliotheken entstehen.

Klare Dokumentation

Sowohl in der Dokumentation in Storybook als auch in Figma beschreiben wir das genaue Verhalten und den Einsatz jeder einzelnen Komponente. Das hilft beim ersten Handoff an die Entwickler:innen und auch später, wenn dieselbe Komponente auf eine andere Art eingesetzt werden soll.