Warum das in Ihrer Woche auftaucht
Drei Landingpages in einem Quartal. Jede hat einen leicht anderen Button, ein anderes Formular und einen anderen Spacing-Rhythmus. Die Marke wirkt müde und Engineering-Schätzungen steigen. Ein Design System ist, wie Sie diese Steuer stoppen.
Klartext
Tokens definieren Farbe, Type und Spacing. Komponenten bauen diese Tokens zu Buttons, Formularen, Cards und Navigation. Dokumentation sagt, wann welche Variante gilt.
Für WordPress ist das praktische System oft theme.json plus Block-Patterns, die die Figma-Bibliothek spiegeln.
States zählen: Hover, Focus, Error, Disabled. Hübsche Default-Buttons, die Accessibility-Checks failen, sind kein System.
Governance zählt: wer darf eine neue Komponente hinzufügen, und wer lehnt Einmal-Ausnahmen ab, die die Bibliothek brechen.
Klein starten. Ein schlankes System, das shipped, schlägt eine 200-Komponenten-Fantasie, die niemand pflegt.
Fakten zum Behalten
- Schichten
- Tokens → Komponenten → Patterns/Templates → Docs
- Typische Tools
- Figma-Bibliotheken, Storybook, theme.json / CSS-Variablen
- WordPress-Mapping
- Block-Patterns + theme.json-Tokens
- Qualitätslatte
- Barrierefreie States, Naming-Parität Design↔Code
- Failure Mode
- Shadow-Komponenten pro Kampagne erfunden
Nicht dasselbe wie
- Ein Brand-Styleguide-PDFNützlich für Logo und Ton. Ein Design System ist implementierbare UI mit coded oder CMS-ready Teilen.
- Ein Component-Library-DumpKomponenten ohne Nutzungsregeln und Tokens driften trotzdem. Das System enthält wann und warum.
- Volles Product-Design-Ops über NachtMarketing-Sites können mit leichtem Pattern-System starten. Tiefe kann mit Produktbedarf wachsen.
Wo es wehtut
Fehlende Design Systems tun weh, wenn fünf Landingpages nur durch Logo-Farbe verwandt wirken, oder wenn Engineers Spacing erfinden, das Marketing im CMS nicht reproduzieren kann.
Jede neue Kampagne verhandelt dann Basics neu statt das Angebot zu shippen.
Was zu prüfen ist
- Teilen Figma und Production dieselben Komponentennamen und States?
- Sind Spacing und Type als Tokens ausgedrückt, nicht als Einmalwerte?
- Kann ein Redakteur einen neuen Abschnitt aus Patterns bauen, ohne Brand-Regeln zu brechen?
- Sind Focus- und Error-States definiert, nicht nur der Happy Default?
- Wer genehmigt Ausnahmen, wenn eine Kampagne eine Einmal-Komponente will?
Häufige Fragen
Was ist ein Design System?
Ein gemeinsamer Satz UI-Komponenten, Design Tokens und Regeln, der Interfaces über Seiten und Teams konsistent hält.
Brauchen Marketing-Sites ein Design System?
Ja, wenn mehr als eine Handvoll Templates on-brand bleiben müssen. Selbst eine leichte Pattern-Bibliothek verhindert Drift über Kampagnen.
Wie unterscheidet sich ein Design System von einem Styleguide?
Styleguides beschreiben. Design Systems liefern wiederverwendbare Teile mit Regeln, die Design und Engineering nutzen.
Was sollten Sie im Design System zuerst prüfen?
Kernkomponenten (Buttons, Formulare, Navigation, Type Scale) matchen zwischen Design-Dateien und Production, inklusive Hover- und Error-States.
Kann WordPress ein Design System nutzen?
Ja. theme.json, Block-Patterns und Custom Blocks sind das übliche Mapping von Figma zu editor-freundlichen Teilen.