Brauchen Sie ein Designsystem für Ihre Website?
Ein Designsystem ist ein Satz wiederverwendbarer Komponenten und die Regeln für ihren Einsatz. Auf einer großen Website, an der mehrere Personen Änderungen vornehmen, erspart es sehr viel doppelte Entscheidungsarbeit. Auf einer fünfseitigen Broschürenseite ist es ein Kostenpunkt ohne Gegenwert.
Dieser Leitfaden behandelt, wo die Grenze verläuft, was ein minimal nützliches System tatsächlich enthält, und was man stattdessen tut, wenn ein vollständiges System nicht gerechtfertigt ist.
Wann es sich rechnet und wann nicht#
Der Wert entsteht aus Wiederholung: dieselbe Entscheidung einmal statt vierzigmal, und konsistent. Fehlt die Wiederholung, fehlt auch der Wert.
| Situation | Urteil |
|---|---|
| Fünfseitige Broschürenseite, eine Designerin, seltene Änderungen | Nein — eine Styleguide-Seite genügt |
| Eine Website, mehrere Templates, gelegentliche Inhaltsänderungen | Leicht: Tokens und ein Komponentenblatt |
| Website plus App mit gemeinsamer Marke | Ja — die gemeinsame Fläche ist, wo Drift entsteht |
| Mehrere Websites in einer Organisation | Ja — das ist der stärkste Fall |
| Häufige A/B-Tests und Kampagnenseiten | Ja — die Geschwindigkeit beim Zusammenbau ist der Gewinn |
| Neubau innerhalb eines Jahres geplant | Noch nicht — bauen Sie das System mit dem Neubau |
Das minimal nützliche System#
Der Großteil des Nutzens kommt aus einem kleinen Kern. Sie bauen das in Tagen statt Monaten, und es genügt für die meisten Websites, die überhaupt eines brauchen.
- Tokens: Farbe, Typo-Skala, Abstandsskala, Radien, Schatten, Breakpoints — benannt, keine fest verdrahteten Zahlen.
- Typografie: Überschriftenebenen und Fließtextstile mit ihrem responsiven Verhalten.
- Buttons und Links: jeder Zustand — Standard, Hover, Fokus, Aktiv, Deaktiviert, Ladend.
- Formularelemente: input, select, textarea, Checkbox, Radio, plus Fehler- und Hinweisstile.
- Karten und Listen: die zwei oder drei wiederkehrenden Inhaltscontainer, die Ihre Website tatsächlich nutzt.
- Navigation: Kopfbereich, Fußbereich, Brotkrumen, Blätterung.
- Rückmeldung: Leerzustand, Fehlerzustand, Ladezustand, Erfolgsmeldung.
Zustände sind der Teil, der übersprungen wird, und der Teil, auf den es am meisten ankommt. Eine Komponente, die nur im Standardzustand definiert ist, gibt jeden Sonderfall an denjenigen zurück, der sie umsetzt.
Die Pflegekosten, die niemand einplant#
Ein Designsystem ist ein Produkt mit Nutzern und braucht einen Eigentümer. Ohne einen driftet es: Die Website bekommt Komponenten, die das System nicht hat, das System behält Komponenten, die niemand nutzt, und nach einem Jahr arbeiten die Leute daran vorbei statt damit.
- Jemand verantwortet es und entscheidet, was hineinkommt. Ein von einem Gremium verantwortetes System hört auf, sich zu verändern.
- Ein dokumentierter Weg, eine neue Komponente vorzuschlagen, damit Leute es erweitern statt umgehen.
- Versionierung, damit eine Änderung nicht still jede Seite auf einmal verändert.
- Ein regelmäßiges Audit dessen, was in der Live-Website steckt, aber nicht im System — diese Lücke ist das Gesundheitsmaß.
- Löschen. Ungenutzte Komponenten sind Kosten, kein Wert.
Leichtere Alternativen#
Fehlt der Grund für ein vollständiges System, gibt es günstigere Schritte, die viel vom Konsistenznutzen einfangen.
| Option | Aufwand | Gut für |
|---|---|---|
| CSS-Custom-Properties für Farbe, Typo und Abstände | Stunden | Jede Website überhaupt — das ist die Untergrenze |
| Eine einzelne Live-Styleguide-Seite in der Website selbst | Ein Tag | Kleine Websites mit gelegentlichen Mitwirkenden |
| Komponentenbibliothek im CMS oder in der Template-Schicht | Tage | Redaktionsteams, die Seiten zusammenstellen |
| Etabliertes CSS-Framework, leicht angepasst | Tage | Interne Werkzeuge und Admin-Oberflächen |
| Vollständig dokumentiertes Designsystem | Wochen bis Monate | Mehrere Produkte oder mehrere Teams |
Eine Live-Styleguide-Seite in der echten Website schlägt ein Dokument: Sie nutzt dasselbe CSS, kann also nicht von der Realität abweichen, ohne sichtbar kaputtzugehen.
Häufige Fragen
Kann ich ein fertiges Designsystem verwenden?
Ja, und für interne Werkzeuge ist es meist die richtige Wahl — das Branding zählt wenig und Sie bekommen sofort barrierefreie, getestete Komponenten. Für eine öffentliche Marketing-Website ist der Handel, dass Ihre Website aussieht wie jede andere mit demselben System, weshalb die meisten Organisationen stark umgestalten — und damit ein Teil der Pflegeersparnis verschwindet.
Wer sollte das Designsystem verantworten?
Eine benannte Person, mit Input von Design und Entwicklung. Geteilte Verantwortung zwischen Design und Technik klingt kollaborativ und bedeutet in der Praxis, dass niemand entscheidet, sodass das System aufhört sich zu entwickeln und die Leute daran vorbei arbeiten. Der Eigentümer muss nicht alles bauen; er muss Ja und Nein sagen.
Was ist der Unterschied zwischen Styleguide und Designsystem?
Ein Styleguide dokumentiert Erscheinung: Farben, Schriften, Logo-Verwendung. Ein Designsystem enthält das plus funktionierende Komponenten, ihre Zustände, die Regeln für ihre Kombination und meist den Code. Ein Styleguide sagt Ihnen, wie Dinge aussehen; ein Designsystem gibt Ihnen die Teile und sagt, wann welches zu benutzen ist.
Wie verhindere ich, dass es veraltet?
Machen Sie es zum Weg des geringsten Widerstands und auditieren Sie die Lücke. Ist das System langsamer als eigenes CSS zu schreiben, schreiben die Leute eigenes CSS. Listen Sie regelmäßig die Komponenten in der Live-Website auf, die nicht im System sind: Eine wachsende Liste bedeutet, dass das System denen nicht dient, die Seiten bauen, und das ist ein Designproblem des Systems selbst.
designsystemwebsite styleguidedesign tokenskomponentenbibliothekui konsistenzwebdesign system
