KONVERSIVDESIGNSTUDIE

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.

Abstraktes Systemvisual zur Seite „Ein Beratungs-Designsystem ordnet nicht nur Farben, sondern Aussagen.“.

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