Ist das Rot in eurer App immer gleich? Und auch auf den Flyern? Auf der Website, sozialen Medien und im Newsletter? Ja? Sehr gut. Damit habt ihr einen funktionierenden Style Guide und könnt dafür sorgen, dass eure Marke immer gleich wahrgenommen wird.

Ein Style Guide sorgt dafür, dass ihr in allen Instanzen gleich wirkt. Er definiert Farben, Schriften und wie das Logo auszusehen hat. Das ist hilfreich, stößt aber auch bald an seine Grenzen. Euer digitales Produkt – egal ob App oder Website – besteht nicht nur aus Text und Logo. Hier gibt es Buttons, interaktive Elemente, Textboxen, Icons, Illustrationen, Overlays, Fotos und und und …

Was passiert, wenn man die Maus über den Button hovert? Wie verändern sich Links, wenn man sie anklickt? Kommt dieses eine Icon nur in einer Farbe vor und was, wenn man damit interagiert? Ein Styleguide – ein fixiertes Dokument – kann zwar upgedated werden, aber viel zu oft geschieht genau das nicht, oder es sind falsche Versionen im Umlauf. Hinzu kommen Spontanentscheidungen, die nicht richtig dokumentiert werden.

Design Systeme zur Rettung!

Eine Methode, um solchen Problemen vorzubeugen, ist ein Design System. Das ist ein Ansatz, der weiter geht als ein Style Guide. Es ist auch mehr als eine Klassifizierung von Komponenten. Ein Design System ist ein ganzer Prozess. Unternehmen erstellen ihn nicht nur einmal, sondern halten ihn auch konstant aufrecht, wenn sich etwas verändert.

Damit wird ein Design System zur “Single Source of Truth” für alle Beteiligten, egal ob nun im Design, im Development oder im Marketing. Letzten Endes können und müssen sich alle daran halten. Logisch. Wenn sich niemand daran hält, macht es auch nur wenig Sinn, überhaupt so ein System zu erstellen.

Ein Design System ist also kein Styleguide, es ist aber auch mehr als einen Component Library. Es sammelt zwar wiederverwendbare Bauklötze, definiert aber auch klar, wie diese einzusetzen sind. Nicht nur für das Design-Team, sondern auch für Development und Marketing.

Das ist der elementare Unterschied zur Component Library. Ein Design System ist nicht nur eine Kiste mit UI-Lego , in der alle Klötze irgendwie zusammenpassen. Es beschäftigt sich nicht nur mit dem Was, sondern auch mit dem Wie und dem Warum. Es braucht nicht nur Bauteile, sondern auch die Erklärung, wie man sie einzusetzen hat. Oder – um bei der Lego-Beschreibung zu bleiben: Versucht mal einen Todesstern zu bauen, wenn euch jemand die Anleitung wegnimmt.

Vorteile zuhauf

Ein Design System besteht also aus Bauteilen, Regeln, Anleitungen und Verwendungszwecken. Es ist Style Guide, Component Library und Regelwerk in einem. Es ist aber nicht statisch, sondern verändert sich konstant, passt sich an und wächst. Jede gestalterische Entscheidung kommt aus dem Design System.

Der größte Vorteil des Design Systems zeigt sich sofort: Konsistenz. Wenn es nur eine Quelle für Entscheidungen gibt, können keine Unterschiede mehr aufkommen. Marketing, Branding, UX, Web und alles weitere passen immer zusammen. Gleichzeitig verringert es die Möglichkeit, dass das Produkt irgendwann aussieht wie ein Flickenteppich. Verabschiedet euch von der Design Debt.

Mehr Qualität bedeutet aber nicht mehr Zeitaufwand . Die gute Dokumentation braucht zwar am Anfang einen längeren Prozess, den habt ihr aber auch bei jeder anderen Design-Arbeit. Der Unterschied ist, dass ihr die Arbeit mit dem Design-System nur einmal machen müsst. Danach könnt ihr jederzeit darauf zurückgreifen. Euer UX-Team kann sich so mehr auf Experiences konzentrieren. Eure Developer müssen sich weniger mit CSS herumärgern.

Bessere Kommunikation

Beide Seiten bekommen noch einen Bonus: Bessere Kommunikation . Design Systeme sind Anleitungen.Inklusive vieler Definitionen und Begriffe. Sprich: Alles hat nur einen Namen. Die Gespräche drehen sich dann auch nicht mehr um “die kleinen grünen Buttons”, sondern um den “secondary Button”. Das schafft Klarheit und verhindert Mix-Ups.

Design Systeme sparen Zeit, Geld und Probleme. Sie beugen Unklarheiten und Inkonsistenzen vor. Der einzige Nachteil, auf den ihr euch einstellen müsst: Sie kosten am Anfang ein wenig mehr Zeit. Vor allem, wenn es schon einmal ein Design gab. Aber der Redesign-Prozess, der keine Zeit frisst, muss auch erst erfunden werden. Dem kommt ihr auch mit dem klassischen Style Guide nicht aus.

Wollt ihr euer Design vereinheitlichen? Oder braucht ihr Unterstützung bei der strategischen Gestaltung eures digitalen Produkts?

Get in touch