Design-Systeme - von Pattern Library bis Styleguide

Viele Unternehmen haben das Problem, dass es ihnen schwerfällt, ihr digitales Designkonzept konsequent durchzuziehen. Viele Designer, viele Entwickler, Dienstleister und Agenturen - jeder interpretiert das Corporate Design etwas anders. Die digitale Umsetzung wird oft stiefmütterlich behandelt. Design-Systeme sollen hier Abhilfe schaffen und Klarheit in das Design-Konzept und den digitalen Gestaltungsprozess bringen. Doch das Feld ist unübersichtlich und viele Begriffe machen die Runde. Wie also geht man richtig vor?

Design-Systeme - von Pattern Library bis Styleguide
Foto: 
Tranmautritam auf Pexels

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.

Wir sind MOGIC,

eine Digitalagentur mit rund 30 Mitarbeiter*innen aus Leipzig. Wir lösen digitale Herausforderungen, seit über 20 Jahren - für Ihr Unternehmen, Startup oder Institution. Wir entwickeln und betreiben Websites, Online-Portale, Online-Shops, webbasierte Softwarelösungen und mobile Apps. Wir sind MOGIC - wir gestalten digital.

MOGIC Geschäftsleitung

Geschäftsleitung: Matthias Hennig, Stefan Berger und Gunter Schwarz

Bereit für eine kostenlose Erstberatung oder einfach einen ersten Kaffee?

Nehmen Sie ganz unverbindlich Kontakt zu uns auf.

Vielen Dank für Ihre E-Mail. In der Regel erhalten Sie innerhalb von 24 Stunden Rückantwort von uns.
Die E-Mail wurde nicht versendet. Bitte versuchen Sie es erneut.

Rufen Sie uns gern an unter +49 341 656797-0 oder vereinbaren Sie einen Termin direkt in unserem Kalender.

Wir verwenden Ihre persönlichen Daten ausschließlich zur Bearbeitung Ihrer Anfrage. Weitere Informationen finden Sie in der Datenschutzerklärung.
BVMW
TYPO3 Gold Member

Deutscher Mittelstands-Bund (DMB)