Styleguide und Designsystem: So bleibt Ihr Design konsistent

Ein Styleguide sorgt dafür, dass eine Website auch nach Monaten und vielen neuen Seiten noch aus einem Guss wirkt. Er legt verbindlich fest, welche Farben, Schriften, Abstände und Bausteine verwendet werden. Ein Designsystem erweitert das um fertige, wiederverwendbare Komponenten, die im Entwurf und im Code identisch sind. Welche Variante Sie brauchen, hängt vor allem vom Umfang des Projekts und der Zahl der Beteiligten ab.

Konsistenz ist eines der Grundprinzipien guter Gestaltung, die im Ratgeber Grundlagen guter Gestaltung beschrieben sind. Dieser Artikel zeigt, wie Sie sie praktisch absichern.

Die Begriffe auseinanderhalten

Im Alltag werden die Begriffe oft gemischt. Eine grobe Abgrenzung hilft bei der Planung:

Ein Designsystem ist also kein anderer Ansatz, sondern die ausgebaute Form eines Styleguides. Viele Projekte beginnen mit einem einfachen Dokument und wachsen erst später in eine Bibliothek hinein.

Was in einen Web-Styleguide gehört

Ein brauchbarer Styleguide für eine Website beantwortet die Fragen, die bei jeder neuen Seite auftauchen. Diese Bereiche sollten enthalten sein:

1. Logo: Varianten, Mindestgröße, Schutzraum, Platzierung, verbotene Abwandlungen.
2. Farben: Hauptfarbe, Akzent, Neutraltöne und Statusfarben mit Farbcodes, Rolle und erlaubten Text-Hintergrund-Paaren.
3. Typografie: Schriften, Schriftschnitte, eine Größenskala für Überschriften und Text, Zeilenhöhen, Zeilenlänge.
4. Abstände und Raster: eine feste Abstandsskala, Spaltenraster, maximale Inhaltsbreite, Umbruchpunkte.
5. Formen: Eckenradien, Linienstärken, Schatten.
6. Bildstil: Motive, Licht, Bildausschnitte, Seitenverhältnisse.
7. Icons: Stil, Strichstärke, Größen.
8. Komponenten: Buttons, Links, Formularfelder, Karten, Hinweisboxen, Navigation, jeweils mit allen Zuständen.
9. Sprache: Anrede, Tonalität, Schreibweisen wiederkehrender Begriffe.

Gerade die Zustände werden gern vergessen. Ein Button braucht nicht nur ein normales Aussehen, sondern auch Varianten für Hover, Fokus, gedrückt und deaktiviert. Der Fokuszustand ist dabei für Menschen, die mit der Tastatur navigieren, unverzichtbar.

Design-Tokens: Werte mit Namen

Statt in jeder Datei “#5b21b6” oder “24 Pixel” einzutragen, bekommen die Werte Namen. Diese benannten Werte heißen Design-Tokens. Sie werden in Stufen aufgebaut:

Der Vorteil zeigt sich bei Änderungen: Soll der Akzent heller werden oder ein Dunkelmodus dazukommen, ändern Sie die Bedeutungsebene, und alle Buttons, Links und Hervorhebungen folgen automatisch. In CSS werden Tokens meist als Custom Properties umgesetzt, etwa --farbe-akzent. Viele Design-Programme bieten eigene Variablen an, die sich auf dieselbe Weise benennen lassen. Für den Austausch zwischen Werkzeugen wird an einem gemeinsamen Dateiformat für Tokens gearbeitet, das zunehmend unterstützt wird.

Benennen Sie Tokens nach ihrer Aufgabe, nicht nach ihrem Aussehen. “farbe-warnung” bleibt richtig, auch wenn die Warnfarbe von Orange zu Gelb wechselt. “orange” wäre dann irreführend.

Abstandsskala und Größenskala

Zwei Skalen bringen besonders viel Ruhe ins Layout:

• Abstände: Legen Sie eine kleine Reihe fester Werte fest, zum Beispiel 4, 8, 12, 16, 24, 32, 48 und 64 Pixel. Alle Innen- und Außenabstände verwenden nur diese Werte. Ein Raster auf Basis von 4 oder 8 Pixeln ist weit verbreitet, weil es sich gut teilen lässt.
• Schriftgrößen: Eine Größenskala mit festen Stufen, etwa für Fließtext, kleine Texte und vier Überschriftenebenen, verhindert, dass jede Seite eigene Zwischengrößen bekommt.

Wer feste Stufen verwendet, muss weniger entscheiden. Das beschleunigt die Arbeit und lässt Seiten verschiedener Autorinnen und Autoren zusammenpassen.

Schritt für Schritt zum schlanken Styleguide

Für eine einzelne Website genügt ein Vorgehen in sechs Schritten:

1. Bestand sammeln: Machen Sie Bildschirmfotos aller vorhandenen Buttons, Überschriften, Farben und Formularfelder. Häufig zeigen sich dabei mehr Varianten, als jemand bewusst angelegt hat.
2. Vereinheitlichen: Fassen Sie ähnliche Varianten zusammen. Aus fünf Grautönen werden zwei, aus vier Button-Stilen zwei.
3. Tokens benennen: Halten Sie Farben, Schriftgrößen, Abstände und Radien mit Namen und Werten fest.
4. Komponenten beschreiben: Für jede Komponente: Aussehen, Zustände, wann sie eingesetzt wird und wann nicht.
5. Ablegen: Ein Ort, eine gültige Version. Das kann ein Dokument, eine Seite in der Design-Datei oder eine interne Webseite sein.
6. Pflegen: Legen Sie fest, wer Änderungen freigibt. Ohne Zuständigkeit veraltet jeder Styleguide.

Wer das Corporate Design gerade erst entwickelt, findet im Artikel Corporate Design für Selbstständige die Grundlagen, die vor dem Styleguide feststehen sollten.

Werkzeuge für Styleguide und Designsystem

Welches Werkzeug passt, hängt vom Umfang ab:

Design-Programme wie Figma oder Penpot bieten Komponenten mit Varianten und gemeinsam genutzte Bibliotheken. Wie Komponenten in Figma funktionieren, zeigt der Artikel Figma für Einsteiger. Auf der Code-Seite gibt es Werkzeuge, die Komponenten isoliert darstellen und dokumentieren. Eine Übersicht der gängigen Programme steht unter Design-Werkzeuge.

Beispiel: Tokens für eine kleine Website

Wie schlank ein Anfang aussehen kann, zeigt diese Auswahl. Mehr braucht eine einfache Website oft nicht:

Wer diese Werte konsequent verwendet, hat bereits den wichtigsten Teil eines Styleguides umgesetzt. Komponenten und Regeln kommen nach und nach hinzu.

Wann aus dem Styleguide ein Designsystem wird

Der Übergang ist fließend. Ein Designsystem lohnt sich, wenn mehrere dieser Punkte zutreffen: Mehrere Teams oder Dienstleister arbeiten gleichzeitig an der Oberfläche, es gibt mehrere Produkte oder Websites mit gemeinsamer Marke, Komponenten werden in verschiedenen Projekten wiederverwendet, oder Änderungen am Erscheinungsbild sollen zentral und ohne Einzelanpassungen ausgerollt werden. In diesem Fall braucht es zusätzlich eine Versionierung, eine Dokumentation mit Einsatzregeln und einen festen Prozess für neue Komponenten.

Typische Fehler

• Zu früh zu groß: Ein Designsystem mit hundert Komponenten für eine Website mit zehn Seiten bindet mehr Zeit, als es spart.
• Nur im Design-Programm: Wenn der Code andere Werte verwendet, ist der Styleguide wertlos. Tokens sollten in Design und Code dieselben Namen tragen.
• Keine Regeln für den Einsatz: Zu zeigen, wie ein Button aussieht, reicht nicht. Es muss auch klar sein, wann ein Haupt- und wann ein Neben-Button verwendet wird.
• Zustände fehlen: Fokus, Fehler und deaktiviert sind die Zustände, die im Alltag am häufigsten improvisiert werden.
• Kein Verantwortlicher: Ohne feste Zuständigkeit entstehen nach kurzer Zeit wieder Sonderlösungen.

Checkliste: Minimum für einen Web-Styleguide

• Logo-Varianten mit Mindestgröße und Schutzraum
• Farbpalette mit Rollen, Codes und geprüften Kontrastpaaren
• Schriften mit Größenskala und Zeilenhöhen
• Abstandsskala mit festen Werten
• Eckenradien, Linien, Schatten
• Buttons, Links, Formularfelder und Karten mit allen Zuständen
• Bild- und Icon-Stil
• Ablageort und verantwortliche Person

Ein Styleguide muss nicht vollständig sein, um zu wirken. Schon die ersten drei Punkte verhindern die meisten Brüche, die eine Website mit der Zeit uneinheitlich machen.