Im Unternehmensalltag werden die Begriffe Styleguide, Pattern Library und Design System oft synonym verwendet. Im Gespräch mit den Teamkollegen weiß doch jeder, was gemeint ist. Doch Karten auf den Tisch – wer kennt den Unterschied wirklich?
Wenn mich jemand vor der Recherche gefragt hätte, wäre meine Antwort vermutlich diese gewesen: „Alles mal gehört, erklären kann ich‘s nicht”. Die gesammelten Erkenntnisse möchte ich gerne mit euch teilen. Also, was ist was?
Styleguide
Ein Styleguide dient als Vorlage von Gestaltungsrichtlinien zur einheitlichen visuellen Repräsentation des Unternehmens als Marke und der Produkte.
Über die Quellen hinweg werden unternehmensspezifische Farben (mit Hex-Code und Bedeutung), Typografie (also Schriftart, Schriftschnitt und Größe) sowie Logos – variierend je nach Nutzungskontext in Farben und Größen – als kleinster gemeinsamer Nenner genannt, die in einem Styleguide festgelegt werden.
Ausgearbeitete Styleguides beinhalten darüber hinaus Informationen über:
- Die Unternehmensphilosophie und Marktplatzierung: Welche Ziele verfolgt das Unternehmen?
- Die Persona: Wer ist die Zielgruppe des Unternehmens? Was sind die Bedürfnisse der Zielgruppe, die das Unternehmen adressiert und erfüllt?
- Die Tonalität in der Kundenkommunikation: Auf welcher Ebene begegnet das Unternehmen seinen Kunden? Wie spricht das Unternehmen mit seinen Kunden? Welche Ausdrucksweise wird genutzt? Duzen oder Siezen? Förmlich oder freundschaftlich?
Des Weiteren findet man auch grafische Anwendungsbeispiele und Dos and Don’ts für Produkte und weitere Artefakte wie E-Mails, Präsentationen und Werbematerialien.
Inspiration für seinen eigenen Styleguide kann man sich unter anderem bei Audi, der Deutsche Bahn oder der dpa holen.
Pattern Library
Eine Pattern Library ist eine Sammlung von zusammengehörigen UI-Komponenten, die in wiederkehrender Zusammensetzung in einem digitalen Produkt verwendet werden. Die Klassiker sind Navigationsleisten, Menüs und digitale Formulare. Weitere Beispiele beschreibt UI-Pattern.
In einer Pattern Library werden die visuelle Erscheinung, das Verhalten und teils auch Code-Snippets der Komponentengruppen dargestellt. Einfach erklärt, beinhaltet sie einzelne Komponenten, die zu größeren sich wiederholenden Mustern zusammengesetzt werden, um eine konsistente Struktur einer App oder Webseite zu erschaffen.
Die Vorarbeit, die für eine Pattern Library stattfindet, umfasst den Aufbau einer Component Library basierend auf dem Konzept des Atomic Design. Durch den sequentiellen Aufbau der Pattern Library auf der Component Library werden die Begriffe auch gleichbedeutend verwendet. Eine beeindruckende Pattern Library präsentiert Starbucks.
Design System
Ein Design System ist eine Dokumentenbibliothek, die alle Gestaltungselemente, wiederverwendbare Komponenten und Designrichtlinien inklusive zugehöriger Code, in einem Repository bündelt. Das Material Design von Google ist eines der bekanntesten Beispiele.
Ein gut ausgebautes und implementiertes Design System kann Ressourcen sparen sowie die Konsistenz und Redundanzen in Design und Code verbessern. Es ermöglicht Designern und Entwicklern, sich auf komplexere Herausforderungen zu fokussieren, mittels eines gemeinsamen Verständnisses zu kommunizieren und Produkte effizient zu erarbeiten. Um das zu erreichen, können Tools wie storybook.js eingebunden werden.
Sum up und tl;dr
Ein Styleguide fokussiert sich auf die grafischen Grundelemente der Komponenten und das Erscheinungsbild von Produkten.
Darauf aufbauend definiert eine Pattern Library Verhalten und Zusammensetzung der Komponenten und legt somit den Fokus auf das visuelle und interaktive Gesamtkonzept eines Produkts.
Das Design System führt den Styleguide und die Pattern Library zu einer Einheit zusammen.
Zum besseren Verständnis hat mir die Analogie zum Atomic Design die Zusammenhänge verdeutlicht. Dabei bildet der Styleguide mit den Grundelementen die Atoms. Darauf aufbauend folgt die Component Library als Molecule und die Pattern Library wiederum als Organism. Alle Abschnitte zusammen kumulieren zum Design System.
Schreibe einen Kommentar