Design-System

Ein Design-System ist die zentrale, dokumentierte Grundlage, aus der eine Website oder App gebaut wird. Es bündelt wiederverwendbare Komponenten (Buttons, Karten, Formulare, Navigation), Design-Tokens (Farben, Schriftgrössen, Abstände, Radien als benannte Werte) und klare Regeln, wie diese Bausteine kombiniert werden. Anders als ein einmaliger Screen-Entwurf ist ein Design-System ein lebendes Regelwerk: eine einzige Quelle der Wahrheit, an der sich Design und Entwicklung gemeinsam orientieren.

Wichtig ist die Abgrenzung: Ein Styleguide beschreibt nur das Aussehen (Farben, Logo, Typografie). Eine Pattern-Library sammelt fertige Komponenten. Ein Design-System verbindet beides mit Prinzipien und Code, sodass Gestaltung und Umsetzung untrennbar zusammenhängen.

Warum es wichtig ist

Ohne System wird jede neue Seite neu erfunden: Buttons sehen leicht unterschiedlich aus, Abstände variieren, die Marke wirkt zusammengewürfelt. Ein Design-System sorgt für visuelle Konsistenz über alle Seiten hinweg und stärkt so das Vertrauen in deine Marke. Gleichzeitig wird die Umsetzung schneller, weil bestehende Komponenten wiederverwendet statt neu gebaut werden. Änderst du einen Token zentral, etwa die Akzentfarbe, schlägt das automatisch überall durch. Das senkt Fehlerquote und Wartungsaufwand spürbar.

Wie es in der Praxis funktioniert

Ein durchdachtes Design-System besteht typischerweise aus mehreren Ebenen:

• Design-Tokens: benannte Basiswerte wie --color-accent oder eine feste Abstands-Skala, die Design und Code teilen.
• Komponenten: in sich abgeschlossene, wiederverwendbare Bausteine (z. B. ein Button mit allen Zuständen: normal, hover, deaktiviert).
• Muster (Patterns): wie Komponenten zu grösseren Einheiten kombiniert werden, etwa ein Formular-Layout.
• Richtlinien: wann welches Element genutzt wird, dazu Vorgaben für Barrierefreiheit wie Kontraste und Fokus-Zustände.
• Dokumentation: eine zentrale Referenz, oft mit Tools wie Figma für Design und Storybook für Code.

In modernen Frontends bilden CSS-Variablen, Utility-Frameworks und Komponenten-Bibliotheken ein Design-System direkt im Code ab, sodass Entwurf und Umsetzung dieselbe Logik teilen.

Praxis-Bezug für Schweizer KMU

Auch für ein KMU lohnt sich ein schlankes Design-System, selbst wenn die Website klein startet. Es zahlt sich aus, sobald neue Seiten, Landingpages oder ein Blog dazukommen: Alles bleibt einheitlich, schnell erweiterbar und günstiger in der Pflege. Bei Webtree arbeiten wir grundsätzlich mit einem eigenen Design-System aus Tokens und Komponenten. So bleibt deine Marke über jede Unterseite hinweg konsistent, und neue Inhalte sind in Tagen statt Wochen online.