Design-System
Ein Design-System ist eine Sammlung wiederverwendbarer Gestaltungsbausteine — Farben, Schriften, Abstände (Design-Tokens) und fertige Komponenten wie Schaltflächen oder Formulare — samt Regeln für ihren Einsatz.
Statt jede Seite einzeln zu gestalten, setzt man sie aus geprüften Bausteinen zusammen. Ändert sich ein Token, etwa die Markenfarbe, passt sich das gesamte Produkt an.
Das spart Zeit in Design und Entwicklung, verhindert Wildwuchs und sorgt für ein einheitliches Erlebnis — besonders, wenn Website, Kundenportal und App zusammenspielen.
Ein Design-System ist die digitale Fortsetzung des Corporate Designs. Circle entwickelt Websites und Software grundsätzlich komponentenbasiert mit Design-Tokens.
Worauf du achten solltest
- Mit Design-Tokens beginnen: Farben, Schriften, Abstände, Rundungen und Schatten zentral festlegen.
- Wiederkehrende Bausteine identifizieren — Schaltflächen, Formularfelder, Karten, Hinweise — und einmal sauber bauen.
- Jeden Baustein mit seinen Zuständen dokumentieren: normal, Fokus, deaktiviert, Fehler.
- Barrierefreiheit in die Bausteine einbauen, dann gilt sie automatisch überall.
- Neue Seiten konsequent aus vorhandenen Bausteinen zusammensetzen.
Typische Fehler
- Farben und Abstände werden direkt in einzelne Seiten geschrieben statt zentral gepflegt.
- Das Design-System existiert als Dokument, wird in der Entwicklung aber nicht genutzt.
- Für jede Sonderanforderung entsteht ein neuer, fast gleicher Baustein.
Häufige Fragen
Ja, in schlanker Form: schon wenige zentral definierte Farben, Schriften und Bausteine sorgen dafür, dass Website, Angebote und spätere Erweiterungen einheitlich bleiben.
Benannte Grundwerte wie „Primärfarbe“ oder „Abstand groß“, die an einer Stelle gepflegt und überall verwendet werden. Ändert sich ein Token, passt sich das gesamte Produkt an.
Mehr dazu im Fachartikel: Design-System: Warum konsistentes Design Geld spart