Digitales Designsystem: Wenn deine Marke aufhört, ein PDF zu sein
Das Markenhandbuch ist ein PDF, das beschreibt, wie die Dinge aussehen sollten; das Designsystem ist der Mechanismus, der sie automatisch so aussehen lässt. Farben, Schriften und Komponenten, die im Code leben: Jede neue Seite wird korrekt geboren, ohne dass sich jemand an die Regeln erinnern muss.
9. Januar 20254 Min. LesezeitIn diesem Artikel
Jedes Unternehmen mit Markenhandbuch kennt das Paradox: Das PDF definiert das exakte Blau, die Schrift und ihre Größen — und trotzdem gerät jede neue Seite der Website etwas anders, jeder Button hat sein eigenes Padding, und das Blau existiert in vier Varianten, je nachdem, wer es woher kopiert hat. Das Handbuch beschreibt; im Moment des Bauens schlägt niemand nach.
Das digitale Designsystem löst genau das: Es verwandelt die Regeln deiner Marke in wiederverwendbare Code-Bausteine — Farben als Variablen, Komponenten als fertige Blöcke —, sodass das Richtige zugleich das Automatische ist. Dieser Guide erklärt, was es ist, was es enthält und wann ein kleines Unternehmen wirklich eines braucht.
Markenhandbuch vs. Designsystem
| Markenhandbuch | Designsystem | |
|---|---|---|
| Was es ist | Ein Dokument, das die Regeln beschreibt | Code und Komponenten, die sie ausführen |
| Wo es lebt | Ein PDF, das kaum jemand öffnet | In der Website und den Designwerkzeugen |
| Wie es genutzt wird | Nachschlagen und von Hand kopieren | Automatisch: Der Button ist schon korrekt |
| Wenn sich die Marke ändert | PDF neu auflegen und alles von Hand korrigieren | Variable ändern — alles aktualisiert sich |
Sie sind keine Rivalen: Das Handbuch definiert die Identität; das System setzt sie um. Das Problem ist, beim Ersten stehenzubleiben — das ist, als hätte man die Straßenverkehrsordnung ohne installierte Ampeln.
Die Teile des Systems
- Design-Tokens: die atomaren Werte als benannte Variablen — Farben (Primär, Hintergründe, Texte, Zustände), Typografie-Skala, Abstände, Schatten, Eckenradien. Eine Token-Änderung pflanzt sich überallhin fort.
- Komponenten: die montierten Teile — Buttons mit ihren Zuständen, Karten, Formulare, Navigation — einmal gebaut, per Definition korrekt, immer wiederverwendet.
- Muster: wie sich Komponenten zu typischen Bereichen fügen — ein Hero, eine Leistungsliste, ein Testimonial-Block.
- Das angeschlossene visuelle Inventar: Ikonografie, Fotostil, Illustration — mit ihren Nutzungsregeln, ans System angebunden.
Die Ökonomie des Systems: Warum es sich für KMU lohnt
Das Argument ist nicht ästhetisch, sondern ökonomisch — in drei Rechnungen. Tempo: Eine neue Seite aus bestehenden Komponenten braucht Stunden statt Tage — die Aktions-Landingpage geht diese Woche live, nicht nächsten Monat. Konsistenz ohne Aufsicht: Niemand muss sich das richtige Blau merken, weil das System das falsche gar nicht anbietet. Und Wartung: Der Rebrand oder die Farbanpassung, die früher hundert Dateien bedeutete, wird zum Ändern von Variablen. Auf einer sauber gebauten Website ist vieles davon Standard — einer der unsichtbaren Unterschiede zwischen professioneller Website und aufgehübschter Vorlage.
Die minimale brauchbare Version (ohne Designteam)
- Tokens dokumentiert und im Code: Farben mit Namen und Funktion, eine Textgrößen-Skala, zwei, drei Standardabstände. Ein Nachmittag Arbeit mit dauerhafter Wirkung.
- Die 5–8 meistwiederholten Komponenten: Button, Karte, Formular, Bereichsüberschrift. Damit baut sich 90 % jeder Seite.
- Eine interne Schauseite (das "Kit"), auf der alles zusammen sichtbar ist — lebende Referenz und Testfläche: Geht etwas kaputt, zeigt es sich dort zuerst.
- Die Nutzungsregel: Neues wird mit dem System gebaut; fehlt ein Teil, wird es dem System hinzugefügt — nie außerhalb improvisiert.
Wer es pflegt
Die Zeichen, dass du es jetzt brauchst
Häufige Fragen
Sind Designsysteme nicht etwas für Großkonzerne?
Die berühmten Systeme gehören Riesen, aber die Logik skaliert perfekt nach unten: Ein KMU mit 8 Komponenten und 20 Tokens hat ein für seine Größe vollständiges System. Tatsächlich amortisiert es der Kleine schneller — ohne Designteam, das die Kohärenz überwacht, IST das System die Überwachung. Die Minimalversion dieses Guides kostet Tage, keine Monate.
Meine Website existiert schon — lohnt sich das Nachrüsten?
Kommt auf den Horizont an: Wächst die Website (neue Seiten, Shop, häufige Kampagnen), zahlt sich das Systematisieren in Monaten aus. Ist sie klein und stabil, kann es bis zum nächsten Redesign warten — aber notiere die Entscheidung: Ohne System neu zu gestalten heißt, dasselbe Problem zweimal zu kaufen. Die vollständige Abwägung dieser Weggabelung steht im Guide zu Überarbeiten oder Neubauen.
Wie hängt das mit Werkzeugen wie Figma zusammen?
Moderne Designwerkzeuge sind die halbe Miete: Dort leben Tokens und Komponenten in ihrer Designversion, idealerweise synchron mit der Codeversion. Für ein KMU ohne internen Designer ist die Code-Hälfte die wesentliche — sie garantiert, dass die echte Website kohärent bleibt. Die Figma-Bibliothek lohnt, sobald jemand regelmäßig gestaltet.
Schränkt ein Designsystem die Kreativität ein?
Es schränkt die Improvisation ein — das ist etwas anderes. Die kreativen Grundentscheidungen — Persönlichkeit, Palette, Stil — fallen beim Erstellen des Systems; danach übt sich Kreativität im Komponieren mit den Teilen, nicht im Neuerfinden des Buttons auf jeder Seite. Und wenn wirklich Neues nötig ist, wird es gestaltet und dem System HINZUGEFÜGT: Das System wächst, die Kohärenz bleibt.