Designsystem
Ein Beratungs-Designsystem ordnet nicht nur Farben, sondern Aussagen.
Konsistenz entsteht, wenn gleiche inhaltliche Rollen gleich aussehen: Ein Beleg ist kein Versprechen, ein Hinweis keine Handlungsaufforderung und ein Muster kein Kundenresultat. Die visuelle Ebene unterstützt diese Unterscheidung.
Redaktionelles Muster
Keine reale Leistung, kein Kundendashboard und keine Ergebnisdarstellung.
Worauf dieses Muster achtet
- 01Komponenten nach Inhaltsrolle benennen
- 02Claim, Beleg und Einschränkung unterscheiden
- 03Tokens für Kontrast, Raum und Motion dokumentieren
01
Von Content-Typen zu Komponenten
Ein System beginnt mit wiederkehrenden Aussagen: Definition, Entscheidungshilfe, Prozessschritt, Beispiel, Grenze und Quelle. Erst danach werden Karten, Tabellen oder Akkordeons gewählt. Dadurch bleibt ein Element über verschiedene Seiten hinweg semantisch stabil.
KONVERSIV verwendet beispielsweise Signalpunkte für Orientierung und warme Flächen für Transparenzhinweise. Die Zuordnung ist bewusst sparsam. Wenn jedes Modul gleichzeitig ‚wichtig‘ aussehen soll, verliert das System seine Hierarchie.
02
Vertrauen durch klare Zustände
Disabled, Demo und interaktiv müssen visuell und semantisch unterscheidbar sein. Eine stilisierte Eingabefläche darf nicht wie ein funktionierendes Formular wirken. Externe Links, aktive Navigation und fokussierte Bedienelemente brauchen erkennbare Zustände für Maus, Tastatur und Touch.
Auch redaktionelle Herkunft gehört ins System. Konzeptkennzeichnung und Creator-Kontext sind wiederkehrende, aber nicht sitewide verlinkte Inhalte. So bleibt die Beziehung sichtbar, ohne einen Footer-Linkblock oder Linkring zu erzeugen.
03
Governance für kleine Teams
Ein kompaktes System braucht keine riesige Komponentenbibliothek. Wichtiger sind Benennungsregeln, Beispiele und Tests. Neue Varianten werden nur ergänzt, wenn eine neue Inhaltsrolle entsteht und nicht bloß ein anderer visueller Wunsch.
- Inhaltsrolle und zugelassene Aussagen festhalten
- Kontrast und Fokus automatisiert sowie visuell prüfen
- Motion-Verhalten je Komponente dokumentieren
- Veraltete Varianten kontrolliert entfernen
Weiterlesen