Design-System als Basis für eine skalierende, digitale Kreativität
Es ist wichtig, dass der Nutzer eine konsistente und einheitliche User Experience erfährt – egal ob Webseite, Online Shop oder Smartphone-App. Ein einheitliches Erscheinungsbild stärkt nicht nur die Marke; Auf lange Sicht bringt sie auch den Vorteil mit sich neue Projekte schneller und effektiver gestalten und umsetzen zu können. Der Schlüssel hierzu lautet Design-System.
Lukas Fischer
Founder & Product Visionary
Der Wunsch, Design und Komponenten zu faktorisieren ist nicht neu. Der Trend hat sich in den letzten Jahren stark beschleunigt und viele Unternehmen setzen mittlerweile auf digitale Lösungen anstelle eines klassischen Corporate Design Manual.
«Design is not just what it looks like and feels like. Design is how it works.»
Steve Jobs
Die Vorteile
Übersichtlich, aktuell und zeitsparend: Die Dokumentation und Spezifikationen sind digital verfügbar und zentral abgelegt. Alle Beteiligte können sich sicher sein, die aktuelle Version des Styleguides vor sich zu haben. Das up to date halten gestaltet sich viel effizienter.
Gemeinsames Verständnis: Ein Design-System bildet eine gemeinsame Basis für Designer, Entwickler und auch den Kunden. Dokumentiert ist nicht nur das Aussehen sondern auch die Funktion und das Verhalten. Design und Entwicklung sind eng miteinander verknüpft und aufeinander abgestimmt.
Konsistenz: In einer Komponenten-Bibliothek (Pattern Library) sind alle wiederkehrende Bausteine und Module festgelegt. Änderungen an einer Komponente wirken sich sofort aus, die Konsistenz wird erhöht und das Qualitätsniveau aufrechterhalten.
Der Aufbau
Ein Design-System verfügt oft über die folgenden Hauptkapiteln:
Designprinzipien
In diesem Kapitel sind die wichtigsten Designprinzipien aufgeführt. User Experience Leitlinien oder Accessibility Richtlinien schaffen eine gemeinsame Grundlage für alle Beteiligten.
Markenidentität und Sprache
Die Identität sollte im Einklang mit der Strategie und den Zielen der Marke definiert werden. Dieses Kapitel gibt Aufschluss über Vision, Strategie oder Markenwerte. Auch inhaltliche Themen zu Sprache, Schreibstil und Tonalität werden hier dokumentiert.
Styleguide
Der Styleguide ist vergleichbar mit dem Schaufenster eines Shops und gibt einen Überblick über das Angebot. Hier finden sich Definitionen zu Typografie, Farbverwendung, Icons oder Logo-Einsatz sowie Informationen zum Grid-System und Seitenlayouts. Grundsätzlich also jene Grundelemente und Spezifikationen, die sich auch in einem klassischen Styleguide finden lassen.
Alle diese Elemente bilden sozusagen das Alphabet der Marke. Die «Buchstaben» sind ein guter Ausgangspunkt aber reichen noch nicht um eine Sprache sprechen zu können. Wir müssen sie weiterverwenden, zu Wörtern zusammensetzen und miteinander verknüpfen um sinnvolle Sätze zu erhalten. Und auch gewisse grammatikalische Regeln befolgen. Im Design-System sind zum einen solche Regeln und Richtlinien festgehalten, jedoch auch in «Beispiel-Sätzen» illustriert – sprich die Elemente zu Komponenten und Mustern zusammengefasst.
Komponenten und Muster (Pattern Library)
Die wiederverwendbaren generischen Komponenten werden in einer Bibliothek beschrieben und bilden das Herzstück des Systems. Es handelt sich um lebende Komponenten, alle Zustände und Interaktionen sind ersichtlich. Für Designer ergibt sich die Möglichkeit eine «Kopie» der Komponente im Design-Tool zu verwenden oder für Entwickler direkt den Code zu übernehmen.
Die Komponenten sind vergleichbar mit LEGO-Bausteinen und bei den Mustern handelt es sich um die Bauanleitung. Diese ermöglicht es die Komponenten in einer logischen und konsistenten Weise zu verwenden und zeigt auf wie sie sich in den Gesamtkontext einfügen.
Best Practices
Neben der Dokumentation können Best Practices helfen, die Anwendung des Design-Systems noch besser nachvollziehen zu können und das gemeinsame Verständnis zu schärfen.
«Form folgt Funktion – das ist oft missverstanden worden. Form und Funktion sollten Eins sein, verbunden in einer spirituellen Einheit.»
Frank Lloyd Wright
Die Beispiele
Ein sehr schönes und umfassendes Beispiel ist Polaris – das Design-System von Shopify.
Weitere Beispiele:
- Atlassian Design Language
- Audi UI
- Merck Liquid Design System
- Salesforce Lightning Design System
- SBB Digital
Die Tools
Zur Erstellung und Verwaltung eines Design-Systems gibt es eine Vielzahl an sehr guten Tools wie beispielsweise Lingo, Zero Height, Frontify oder Zeplin. Der Einsatz eines solchen Tools verleitet schnell dazu die Integration eines Design-Systems zu unterschätzen. Oftmals wird dem Tool die komplette Aufmerksamkeit geschenkt. In diesem Kontext können Tools mit Musikinstrumenten verglichen werden; Wenn man sie nicht spielen kann, oder noch nicht einmal weiss, welches Instrument man überhaupt spielen möchte, wird man letztendlich kaum die Möglichkeit erhalten einer Band beizutreten.
Fazit
Ein Design-System ist ein lebendiges Dokument und wird niemals vollständig bzw, abgeschlossen sein. Die Informationen, Muster und Komponenten sollten basierend auf Beobachtungen, neuen Erkenntnissen und gewonnenen Erfahrungen bearbeitet, erweitert, hinzugefügt oder entfernt werden. Es sollte für jedermann leicht verständlich sein und schafft ein gemeinsames Verständnis – egal ob Entwickler, Designer oder Benutzer auf Kundenseite. Durch die Wiederverwendung der Komponenten muss nicht bei der Erstellung von jeder neuen Landing Page das Rad neu erfunden werden. Es bleibt Zeit um sich auf das Wesentliche konzentrieren zu können: das Nutzererlebnis.Der Ausblick
Im zweiten Teil «Konsistenz schafft Vertrauen» werden wir die wichtigsten Bausteine zur Erstellung eines konsistenten Design-Systems etwas genauer unter die Lupe nehmen und zeigen auf wie sich die im Styleguide definierten Elemente zu Komponenten und Mustern zusammenbauen lassen.