Design System

UX

Ein gemeinsamer Baukasten für digitale Produkte: Gestaltungswerte, fertige Bausteine und die Regeln für ihren Einsatz. Er sorgt dafür, dass Design und Entwicklung dieselbe Sprache sprechen.

Ein Design System besteht aus drei Schichten. Grundwerte wie Farben, Abstände und Schriftgrößen, oft Design Tokens genannt. Komponenten wie Schaltflächen, Formularfelder und Karten – gestaltet und programmiert. Und Regeln: wann welcher Baustein passt, wie man schreibt, was barrierefrei bedeutet.

Der Unterschied zum klassischen Styleguide ist die Verbindlichkeit im Code. Ein Styleguide beschreibt, wie etwas aussehen soll; ein Design System liefert den Baustein, der so aussieht. Ändert sich der Wert an einer Stelle, ändert er sich überall.

Der Nutzen wächst mit der Zahl der Produkte und Teams. Wer eine einzelne kleine Website betreibt, braucht kein Design System, sondern ein sauberes Stylesheet. Wer Website, Kundenportal und App parallel entwickelt, spart mit jedem wiederverwendeten Baustein Abstimmung, Tests und Fehler.

Aus Sicht der Anforderungen ist ein Design System vor allem eine Organisationsfrage: Wer pflegt es, wer entscheidet über neue Bausteine, wie kommen Änderungen in die Produkte? Ich habe Systeme gesehen, die technisch hervorragend waren und trotzdem verwaisten, weil niemand zuständig war. Die Zuständigkeit ist die erste Anforderung, nicht die letzte.

Ab wann lohnt sich ein Design System?

Sobald mehrere Produkte oder Teams dieselbe Marke umsetzen – oder ein Produkt so groß wird, dass gleiche Dinge mehrfach unterschiedlich gebaut werden. Vorher genügt eine kleine Komponentenbibliothek.

Was sind Design Tokens?

Benannte Gestaltungswerte wie „Primärfarbe“ oder „Abstand mittel“, die zentral gepflegt und von Design-Werkzeugen wie vom Code verwendet werden. Sie sind die kleinste Einheit eines Design Systems.

  • Design System
  • Komponenten
  • Design Tokens
  • Konsistenz