Ein Design-System ist kein einzelnes, einmal fertig gestelltes Dokument, sondern ein ganzes Paket von Arbeitsergebnissen und Elementen, das sich ständig mit dem Produkt, den eingesetzten Tools und Technologien weiterentwickelt. Es besteht aus greifbaren und nicht greifbaren Elementen: konkreten Werkzeugen für Designer und Entwickler wie Patterns, Komponenten-Bibliotheken und Richtlinien auf der einen, aber auch abstrakten Elementen wie Markenwerten, gemeinsamen Arbeitsweisen, Denkweisen und Überzeugungen auf der anderen Seite.
Was ist ein Design-System?
Um etwas Ordnung in das Begriffschaos zu bringen, können wir das Innere von Design-Systemen in drei Ebenen aufteilen:
Ebene 1: Die Building Blocks
Hierzu gehören grundlegende Vorgaben der Corporate Identity wie Farben, Typographie, Grid-Definition, Bildsprache und die Icon-Familie.
Ebene 2: Die Pattern Library
Darauf aufbauend werden Module, Komponenten, Elemente und Vorlagen entwickelt und zur Verfügung gestellt.
Ebene 3: Das Regelwerk
Wie diese zu verwenden sind, regeln Implementierungsvorgaben und Editorial Guidelines.
Ein Style Guide wiederum ist eine weitere Unterklasse im Design-System. Es ist eine eher statische Dokumentation, die das Designsystem selbst beschreibt. Er trifft Aussagen darüber, wie Produkte aussehen und sich "anfühlen" sollen, beschreibt mögliche Anwendungsfälle für UI-Patterns, korrekte typografische Maßstäbe, u. v. m.
Moderne Design-Tools wie Sketch oder Figma unterstützen die Arbeit mit und in einem Design-System. Dort kann man über Symbole oder Komponenten grundlegende Objekt-Stile, Text-Stile, Farben und Basis-UI-Elemente wie Buttons anlegen und als Bibliothek zur Verwendung zur Verfügung stellen. So können alle Designer auf diesem Grundgerüst aufbauen.
Best Practices
Oft ist es hilfreich, sich beim Aufbau des eigenen Design-Systems von der Dokumentation anderer Systeme inspirieren zu lassen. Hier finden Sie eine von uns kuratierte Liste ganz unterschiedlicher Ansätzen mit ausreichend Stoff zur Inspiration:
Allen voran haben sich die großen Hersteller und Betreiber digitaler Ökosysteme allesamt exzellente Gedanken über moderne Design-Systeme für unsere digitale und mobile Welt gemacht. Diese sollen Entwicklern für die jeweilige Plattform dabei helfen, sich an Richtlinien zu orientieren, Komponenten zu verstehen und korrekt zu nutzen sowie mit den passenden Tools zu arbeiten. Die Strahlkraft dieser Systeme ist oft noch weitaus größer als die Marktmacht der Hersteller sowieso schon reicht. Die Grundkonzepte finden Einfluss in viele andere Design-Systeme.
Ein Design-System aufsetzen
Ein Design-System bringt Ordnung ins Chaos. Oft wird der Ruf danach laut, wenn Entwickler digitale Lösungen nicht zufriedenstellend umsetzen oder Editoren mit den bereitgestellten Plattformen nicht wunschgemäß umgehen. Wildwuchs entsteht - und oft stellt sich heraus, dass die so klar gemeinte Vision der gestalterischen Sprache gar nicht oder nur unzureichend dokumentiert wurde - ergo gar nicht genug Vorgaben für die Umsetzung existieren.
Wie genau man das Design-System aufbaut, hängt von vielen Faktoren ab:
- Was ist bereits vorhanden? Was funktioniert gut, was nicht so gut?
- Wie viele Personen werden das Design-System perspektivisch nutzen?
- Was ist deren Profil und wie "reif" sind sie in Hinblick auf das Vorhaben?
- Wie viele Produkte müssen aufeinander abgestimmt werden?
- Auf welchen Plattformen mit wie vielen verschiedenen Technologien wird gearbeitet?
Auch muss man sich entscheiden, welche Philosophie das eigene Design-System verfolgen soll:
Strikt oder locker
Eine umfassende und detaillierte Dokumentation, die vollständig den Prozess zwischen Design und Entwicklung synchronisiert, erfordert einen strengen Prozess und ist vor allem in Szenarien mit vielen verteilt arbeitenden Akteuren unterschiedlicher Profile dringend ratsam. Eine lockere Vorgabe wiederum regelt lediglich den groben Rahmen und lässt kreativen Spielraum sowie Platz für Experimente - und ermöglicht vielleicht gerade dadurch die besten Ideen.
Zentral oder dezentral
Wird ein kleines Team benannt, dass für das Design-System verantwortlich ist, so sind Definition und Pflege einfacher, als wenn mehrere Personen aus unterschiedlichen Teams verantwortlich sind. Allerdings kann dann interdisziplinär mit verschiedenen Sichtweisen argumentiert und entschieden werden.
Modular oder integriert
Ein modulares System besteht aus austauschbaren, wiederverwendbaren Elementen und ist daher gut für die Skalierung in großen Projekten geeignet (z. B. Atomic Design). Ein integriertes Design-System ist weniger technisch und konzentriert sich stärker auf den Kontext. Es eignet sich besser für Produkte mit wenigen Bestandteilen und starker oder oft wechselnder Art Direction.
Design-Systeme lassen sich mit Tools wie Frontify gut abbilden. So bieten Sie einen einfachen und klaren Zugang auch für verteilte Teams.
