Kurze Antwort
Ein Designsystem besteht aus Tokens für Farbe, Typografie und Abstände, aus Komponenten, die daraus gebaut sind, und aus einer Prüfung im Build, die Code mit losen Werten ablehnt. Nach unserer Erfahrung aus eigenen Projekten rechnet es sich ab der zehnten Seite oder beim zweiten Markenwechsel über eine ganze Website.
Ein Designsystem wird meist als Sammlung von Komponenten beschrieben. Der entscheidendere Teil ist die Regel darüber, wo Werte wohnen dürfen, denn sie bestimmt, ob das System in einem halben Jahr noch stimmt.
Woraus das System tatsächlich besteht
Vier Schichten, und die letzte unterscheidet ein System von einem Ordner voller Dateien.
- Tokens: jede Farbe, jeder Abstand, jeder Radius und jede Schriftgröße an einer Stelle
- Primitive: Schaltflächen, Karten, Überschriften und Felder aus Tokens gebaut
- Blöcke: fertige Abschnitte, aus denen Seiten zusammengesetzt werden
- Eine Prüfung im Build, die rohe Werte im Seitencode stoppt
Die Prüfung hält das System wahr
Ein System, das nur als Dokument existiert, driftet auseinander, weil ein Farbwert schneller getippt ist, als der passende Token gefunden. Diese Website fährt genau diese Prüfung: ein Build-Schritt liest den Code und lässt den Build beim ersten rohen Hex- oder Pixelwert außerhalb des Designsystems durchfallen. Danach stellt sich die Frage nicht mehr.
Kontrast wird vor dem Einsatz berechnet
Jedes Farbpaar im System wird gegen WCAG AA geprüft, das mindestens 4,5:1 für Fließtext verlangt, in hellem und dunklem Modus. Auf Token-Ebene berechnet kann eine spätere Seite nie unlesbar werden, weil die Kombination, die das verursachen würde, gar nicht existiert.
Die Größe, ab der es sich lohnt
Unter fünf Seiten kostet ein System mehr, als es einbringt. Bei zehn Seiten steht es etwa ausgeglichen. Bei 30 Seiten, zwei Themes und neun Sprachen ist es der Unterschied zwischen einem Tag Arbeit und einer Woche, wenn sich etwas überall ändern soll — die Rechnung, die wir für diese Website selbst aufgemacht haben.
Kleine Bildschirme gehören zum System
Jede Komponente wird zuerst für 320 Pixel entworfen und wächst nach oben. Die Tests fahren jeden Seitentyp in sieben Breiten ab 320 Pixeln, und eine Seite, die waagerecht scrollt, lässt den Build durchfallen. Das ist günstiger, als ein kaputtes Telefon-Layout nach dem Launch zu reparieren.
Häufige Fragen
- Braucht eine kleine Website ein Designsystem?
- Unter fünf Seiten genügen ein paar Konventionen. Ab zehn Seiten spielt das System die Zeit wieder ein, besonders wenn die Website wachsen oder mehrsprachig erscheinen soll.
- Worin unterscheidet es sich von einem Markenhandbuch?
- Das Handbuch beschreibt, wie es aussehen soll. Das System ist der Code, der es so aussehen lässt. Ein PDF kann keinen Build ablehnen, und genau diese Funktion hält das Erscheinungsbild über Jahre zusammen.
- Wie wird der dunkle Modus behandelt?
- Jeder Token trägt einen Wert für hell und einen für dunkel. Der Kontrast wird für beide berechnet, sodass ein Theme nie schlechter ausfallen kann als das andere.
- Wem gehört das Designsystem nach dem Launch?
- Ihnen, und es liegt in Ihrem Repository. Es ist so gebaut, dass eine andere Entwicklerin übernehmen kann: Werte an einer Stelle, Komponenten dokumentiert und die Prüfung als Teil des Builds.
- Wie oft muss ein Designsystem erneuert werden?
- Selten im Ganzen. Tokens wechseln mit der Marke, Komponenten kommen laufend dazu. Ein System, das alle zwei Jahre neu geschrieben werden muss, war für eine einzelne Kampagne gebaut.
- Lässt sich ein System auf einer bestehenden Website einführen?
- Ja, Seitentyp für Seitentyp. Beginnen Sie mit Tokens und den meistgenutzten Komponenten, schalten Sie die Prüfung für die bereits umgestellten Verzeichnisse ein und erweitern Sie von dort.
Erzählen Sie uns, was Sie bauen wollen
Dreißig Minuten, kostenlos, und eine klare Antwort, ob wir das richtige Studio dafür sind.