Was ein Design-System ist und wann es sich lohnt
Ihr merkt, dass euch ein Design-System fehlt, an der dritten Version derselben Farbe. Ein Design-System ist die Sammlung aller Gestaltungsentscheidungen einer Marke, gespeichert als Regeln statt als Dateien. Es legt fest, welche Farben es gibt, welche Schriftgrößen und welche Abstände. Aus denselben Regeln entstehen die Bausteine, etwa Buttons oder Karten. Der Unterschied zu einem Styleguide ist, dass die Regeln nicht beschrieben, sondern benutzt werden. Wer eine Farbe ändert, ändert sie überall. Es lohnt sich, sobald mehr als eine Person und mehr als ein Kanal mit der Marke arbeiten.
Was darin steckt, ist schnell erzählt. Es sind Werte, Bausteine und Regeln für ihre Verwendung. Wie das im Alltag aussieht, zeigen wir an unserer eigenen Website.
Ein Design-System speichert Entscheidungen, nicht Dateien
Die meisten Marken haben ihre Gestaltung als Dateien. Ein Logo in vier Varianten, eine Vorlage für Präsentationen, eine Farbliste im PDF. Das trägt, solange eine Person gestaltet. Kommt eine zweite dazu, entstehen Abweichungen, die niemand beschlossen hat.
Ein Design-System dreht das um. Es hält die Entscheidungen fest, und die Dateien entstehen daraus. Drei Teile gehören dazu.
- Werte, also Farben, Schriftgrößen, Abstände und Radien
- Bausteine, die daraus gebaut sind, etwa Buttons, Karten oder Formulare
- Regeln dafür, wann welcher Baustein benutzt wird
Im Corporate Design entsteht dieses System, zusammen mit Logo, Farben und Bildsprache. Das ist die Stelle, an der aus einem Auftritt ein System wird. Danach lässt es sich erweitern, ohne die Marke neu zu erfinden.
Der Gewinn zeigt sich erst beim zwanzigsten Baustein. Jedes neue Modul erbt Farben, Abstände und Verhalten, statt neu entworfen zu werden. Es gehört dann sichtbar dazu, ohne dass jemand es abgleichen muss.
Tokens sind benannte Werte, mehr nicht
Wer über Design-Systeme liest, stolpert schnell über das Wort Tokens. Gemeint ist damit kein Gegenstand aus der Kryptowelt, sondern ein benannter Wert. Statt eine Farbe an hundert Stellen einzutragen, bekommt sie einen Namen. So sehen diese Namen bei uns aus.
--color-ink-900: #00061a;
--spacing-m: 24px;
--radius-xxl: 36px;
--breakpoint-desktop: 1200px;Die vier Zeilen stehen für eine Farbe, einen Abstand, einen Radius und eine Bildschirmbreite. Der Wert steht genau einmal da, alles andere verweist darauf. In der Frontend Entwicklung ist das keine Metapher, sondern der Code selbst. Entwurf und fertige Seite benutzen dieselben Namen.
Ein Styleguide beschreibt, ein Design-System setzt durch
Ein Styleguide ist ein Dokument. Er erklärt, wie die Marke aussehen soll, und verlässt sich darauf, dass jemand nachliest. Bei einer Broschüre reicht das. Bei einem Produkt mit hundert Ansichten reicht es nicht.
Ein Design-System ist dagegen die Quelle, aus der gebaut wird. Wer sich nicht daran hält, muss den Baustein selbst bauen, und das fällt sofort auf. Die Regel steht damit nicht neben der Arbeit, sondern in ihr.
Im Product Design wächst dasselbe System in die Oberfläche hinein. Dort kommen Bausteine dazu, die eine Website nie braucht, und auch sie erben Farben und Abstände. Im Produkt heißen diese Bausteine Komponenten. Sie entstehen dort, wo die Nutzerführung und die Oberfläche entschieden werden.
Wie unsere eigene Website damit gebaut ist
Unsere Website ist selbst so ein System, und wir können es aufmachen. Im Stylesheet stehen 57 Werte, aus denen die ganze Seite besteht.
- 25 Farben
- 9 Abstände, von 3 bis 240 Pixel
- 9 Radien
- 12 Schriftgrößen
- 2 Bildschirmbreiten, weil die kleinste die Grundlage ist
Jeder dieser Werte kommt aus Figma, und keiner davon ist geschätzt. Kommt eine neue Section dazu, ziehen wir ihre Werte aus der Datei und vergleichen sie mit dem, was schon da ist. Was fehlt, kommt dazu. Was es schon gibt, wird benutzt.
Die Probe darauf war dieser Blog. Er hat Karten, ein Inhaltsverzeichnis, eine mitlaufende Seitenspalte und diesen Textkörper bekommen. Dafür ist kein einziger neuer Wert entstanden.
Zuletzt kam die Bewegung dazu. Handgetippte Kurven lagen an 44 Stellen im Code, dazu acht verschiedene Dauer-Skalen. Heute hat die Seite eine Kurve und drei Dauern, und beide stehen an einer Stelle.
Dieselbe Idee trägt auch ein Produkt. Unser eigenes Produkt Jardis® und seine Website kommen aus einem System, obwohl die eine Fläche erklärt und die andere arbeitet.
Ab wann sich ein Design-System lohnt
Für eine Person, die alles selbst gestaltet, lohnt es sich nicht. Die Regeln stehen dann im Kopf, und der Abgleich kostet nichts. Die Rechnung dreht sich, sobald die Arbeit geteilt wird.
Vier Anzeichen, an denen ihr das merkt.
- Ein zweiter Kanal kommt dazu, und die Marke muss dort neu gebaut werden
- Ein zweites Produkt entsteht, und es soll erkennbar dazugehören
- Jemand gestaltet weiter, der den Auftritt nicht entworfen hat
- Von derselben Farbe kursiert die dritte Version
Trifft eines davon zu, kostet das fehlende System bereits Zeit. Es fällt nur niemandem auf, weil der Aufwand in lauter kleinen Korrekturen verschwindet.
Bei uns entsteht ein solches System im Programm Headgent® Brand, zusammen mit der Identität und der Gestaltung. Davor steht die Frage, wofür die Marke überhaupt steht. Ohne diese Antwort hat ein System keinen Maßstab.
Marke und Produkt, die zusammen wachsen.
In 30 Minuten klären wir, was bei euch ansteht und welches Programm dazu passt.
Häufige Fragen zu diesem Thema.
Offene Fragen?
30 Minuten mit Niklas und Rolf, kostenlos. Danach wisst ihr, wie es weitergeht.
Ein Styleguide beschreibt, wie die Marke aussehen soll, und jemand muss darin nachlesen. Ein Design-System hält dieselben Entscheidungen als Regeln, aus denen direkt gebaut wird. Der Styleguide ist die Dokumentation, das System ist die Quelle. Beides nebeneinander ist üblich, nur ersetzt das eine das andere nicht.
Benannte Werte. Statt eine Farbe an vielen Stellen einzutragen, bekommt sie einen Namen, und alle Stellen verweisen auf diesen Namen. Dasselbe gilt für Schriftgrößen, Abstände und Radien. Der Wert selbst steht einmal da, und Entwurf und Code benutzen denselben.
Logo, Farbsystem, Schriften und Bildsprache. Dazu die Vorlagen, in denen das alles zusammenkommt. Das sind die sichtbaren Teile. Ein Design-System steht nicht daneben, sondern ist die Form, in der diese Entscheidungen festgehalten werden.
Wir arbeiten so, dort liegen die Werte, und aus Figma wandern sie in den Code. Ein anderes Werkzeug geht genauso, solange es eine Quelle gibt und nicht drei. Entscheidend ist nicht das Programm, sondern dass niemand einen Wert aus dem Gedächtnis einträgt.
Passt zu dem, was ihr gerade gelesen habt.
Build what's next.
Erzählt uns, was ihr vorhabt, und wir sagen euch, wie wir gemeinsam dorthin kommen.
Projekt starten