Mit Design Systemen Konsistenz schaffen – und Kosten einsparen

Ein konsistenter Markenauftritt, mehr Effizienz in Design und Entwicklung sowie hohe Skalierbarkeit sind die bestechenden Vorteile eines Design-Systems. Hier erfährst du, wie du diese Arbeitsweise in deinem Unternehmen etablieren kannst.

Kathrin Köhler Experience Design Director (UI)
15.07.2024 10 min Lesezeit

Inhalt

  1. Was ist ein Design-System?
  2. Exkurs: Atomic Design
  3. Bestandteile eines Design-Systems
  4. Vorteile auf einen Blick
  5. Design-System vs. Pattern-Library
  6. Design-Systeme entwickeln
  7. Best Practice Beispiele

Designer und Entwickler kennen das Problem: Mit jedem neu entwickelten Produkt, Plattform oder Projekt eines Unternehmens wachsen auch die Herausforderungen. Stetig wechselnde Anforderungen in Technik, Usability und Strategie lassen Designs schnell veralten und unübersichtlich werden. Ohne strukturierte Prozesse entstehen “Frankenstein-Produkte”, die an ein Flickwerk erinnern.

Hier kommen Design-Systeme ins Spiel. Sie bieten eine systematische Lösung, indem sie alle Elemente logisch verknüpfen und global aktualisieren lassen. Dadurch können Teams in Echtzeit auf einheitliche Basis-Elemente zugreifen und effizienter zusammenarbeiten. Design-Systeme revolutionieren die Branche und machen den klassischen Relaunch überflüssig.

Linearer vs. iterativer Entwicklungsprozess; Quelle: “What is a Design System” von Vachhar/Maritan

Was ist ein Design-System?

Ein Design-System ist eine Sammlung von Guidelines, Best Practices, Komponenten und Elementen. Es ermöglicht konsistente und effiziente Designs für eine Organisation über alle Teams, Plattformen und Produkte hinweg zu erstellen und zu pflegen.

Es dient als zentrale Referenz für Designentscheidungen und hilft, die visuelle Ästhetik, das Verhalten von Benutzeroberflächen und die digitale Markenidentität zu definieren und zu vereinheitlichen. Dadurch unterstützt ein Design-System das Unternehmensziel, für Nutzer:innen eine nahtlose Experience über alle Touchpoints hinweg zu schaffen.

Überblick über die Architektur eines Design-Systems

Exkurs: Atomic Design als methodische Grundlage

Brad Frost stellte bereits im Jahr 2013 das Konzept „Atomic Design” erstmals vor. Dabei handelt es sich um einen modularen Ansatz zur Webentwicklung, der sich an das Periodensystem der Elemente anlehnt. Dieser Ansatz dient heute als methodische Grundlage für Design-Systeme.

Frost teilt Webdesign in fünf Ebenen ein:

  • Atome: UI Core Components, die nicht weiter zerlegt werden können. Dazu gehören unter anderem HTML-Tags, Formularelemente und Buttons.
  • Moleküle: Bestehen aus mehreren Atomen, die zu einfachen UI-Komponenten kombiniert werden, zum Beispiel können Formularbeschriftung, Sucheingabe und Schaltfläche zusammengefügt werden, um ein „Suchformular-Molekül" zu erstellen.
  • Organismen: Setzen sich zusammen aus Molekülen und Atomen. So ergeben sich komplexe Komponenten und Module, wie beispielsweise eine Header-Leiste mit Logo, Navigation und Suchfeld.
  • Templates: Seitenlayouts, die die Platzierung von Organismen definieren und die zugrunde liegende Inhaltsstruktur sowie die Funktion aller Elemente im Kontext des Layouts demonstrieren.
  • Pages: Seitenvorlagen, die eine Benutzeroberfläche mit echten repräsentativen Inhalten in unterschiedlichen Variationen zeigen.
Zusammenspiel von Atomen, Molekülen, Organismen, Templates und Pages; Quelle: Brad Frost

Bestandteile eines UI/UX-Design-Systems

Ein Design-System umfasst alle Aspekte der Design- und Brand-Experience-Entwicklung in einem Unternehmen für Plattformen, Produkte oder Services. Folgende Bestandteile greifen dabei ineinander:

  • Design Guidelines: Regeln und Prinzipien, um die Gestaltung von Benutzeroberflächen zu definieren. Design Guidelines legen fest, wie Fundamentals (zum Beispiel Farben, Typographie, Grid und Motion) verwendet werden und definieren die visuelle Ästhetik von Layout-Prinzipien sowie UI-Pattern.
  • Component Libraries: Eine Sammlung von wiederverwendbaren Token, Styles und UI-Core-Components (zum Beispiel Buttons, Input Fields und Tabs), die konsistent gestaltet und nach aktuellen Best Practices aufgebaut ist.
  • Templates & Pages: Stilvorlagen für verschiedene Arten von Seitentypen oder Produkt Flows Sie zeigen den Teams aus Design und Entwicklung die Einsatzmöglichkeiten der entwickelten Elemente in Kombination zueinander. Dadurch ist sichergestellt, dass die Gestaltung über verschiedene Teile eines Projekts hinweg konsistent bleibt.
  • Brand Resources: Integration von Marken-Assets wie Logos, Icon-System und Illustrationen sowie Richtlinien wie diese im Kontext einzusetzen sind.
  • Dokumentation: Eine umfassende Anleitung zur Verwendung des Design-Systems. Die Dokumentation enthält Tutorials, Design- und Code-Beispiele und Erklärungen zur richtigen Implementierung von Designelementen.
  • Governance: Ein Prozess zur Erfassung von Feedback, das von Designer:innen, Entwickler:innen und anderen Stakeholdern gegeben wird, um das Design-System kontinuierlich zu verbessern. Dies kann Feedback-Schleifen, Umfragen, Reviews oder andere Kommunikationskanäle umfassen.
Auflistung der Bestandteile eines Design-Systems; Quelle InVision

Design-Systeme: Der unsichtbare Held hinter erfolgreichen Produkten

Ein Design-System bringt zahlreiche Vorteile, die den gesamten Entwicklungsprozess optimieren und die Qualität der Ergebnisse steigern.


1. Konsistenz über verschiedene Produkte hinweg

Ein Design-System sorgt für ein einheitliches Erscheinungsbild und Benutzererlebnis über alle Produkte und Plattformen eines Unternehmens hinweg. Dies stärkt die Markenidentität und schafft Vertrauen bei den Nutzern.


2. Erleichterte Zusammenarbeit zwischen Design und Entwicklung

Bei der Erstellung des Design-Systems einigen sich Designer und Entwickler auf eine gemeinsame Sprache, klare Richtlinien und Struktur. Dies beschleunigt im Alltag den Entwicklungsprozess ungemein, verbessert die Kommunikation und minimiert Missverständnisse. Beispielsweise können Designer ihre Visionen präzise kommunizieren, während Entwickler konkrete, wiederverwendbare Komponenten zur Hand haben.


3. Effizienzsteigerung im Entwicklungsprozess

Durch die Wiederverwendung von Design-Modulen und standardisierten Code-Komponenten wird die Entwicklungszeit erheblich reduziert. Teams können sich auf innovative und plattformübergreifende Lösungen konzentrieren, anstatt wiederkehrende Aufgaben zu bewältigen. Die schnelle Integration neuer Anforderungen, wie z.B. eine Umstellung auf barrierefreies Webdesign, wird so deutlich vereinfacht.


4. Fehlerreduzierung und Qualitätssteigerung

Design-Systeme minimieren die Wahrscheinlichkeit von Fehlern, da bewährte und getestete Komponenten verwendet werden. Dies führt zu höherer Qualität und Stabilität der Produkte, da viel weniger Zeit für die Fehlerbehebung aufgewendet werden muss.

Kosteneffizienz und Pflegeaufwand – wann lohnt sich ein Design-System?

Das alles bekommt man nicht geschenkt: ein Design-System erfordert eine hohe Anfangsinvestition und einen zusätzlichen laufenden Pflegeaufwand. Es lohnt sich, wenn durch die eingesparte Design- und Entwicklungsarbeit die anfänglichen und laufenden Kosten übertroffen werden. Das ist regelmäßig dann der Fall, wenn Projekte groß, komplex und langfristig sind und viele wiederkehrende Designelemente erfordern. In solchen Szenarien amortisieren sich die Investitionen schnell durch die verbesserte Effizienz und Qualität der Ergebnisse, sodass ein Design-System eine sinnvolle und wirtschaftliche Entscheidung darstellt.

Effizienz von Design-Systemen in Korrelation zur zeitlichen Nutzung; Quelle: ​​Ben Callahan

Brauche ich ein Design-System?

Lohnt sich der initiale Aufwand für ein Design-System in deiner Organisation? Sprich direkt mit uns oder finde es mit unserem Decision-Flow einfach heraus!

Der Unterschied zwischen Design-System und Pattern-Library

Ein Design-System und eine Pattern-Library sind Instrumente in der Softwareentwicklung, um eine konsistente und effiziente Gestaltung von Benutzeroberflächen zu fördern. Obwohl sie ähnliche Ziele haben, gibt es grundlegende Unterschiede zwischen ihnen:

Design System Pattern Library

Umfang und Zweck

Ein Design-System ist eine umfassende Sammlung von Richtlinien, Best Practices, Komponenten und Ressourcen, die nicht nur das visuelle Design, sondern auch das Verhalten von Benutzeroberflächen und die Markenidentität definiert. Es dient als zentrale Referenz für das gesamte Design einer Organisation oder eines Projekts.


Eine Pattern-Library (Komponentenbibliothek) ist spezifischer und konzentriert sich in der Regel auf die Sammlung von wiederverwendbaren Design Patterns (Mustern) und Komponenten. Sie kann Teil eines Design-Systems sein oder als eigenständiges Instrument existieren, das nur auf die Wiederverwendbarkeit von Designelementen abzielt.

Inhalt

Ein Design-System umfasst neben ein bis mehreren Pattern-Libraries oft auch Designrichtlinien, Stilvorlagen, Markenressourcen und eine umfassende Dokumentation.


Eine Pattern-Library konzentriert sich hauptsächlich auf die Sammlung und Dokumentation einzelner UI-Komponenten, Muster und deren Variationen.

Anwendungsbereich

Ein Design-System bietet eine umfassende Richtlinie für das Design von Benutzeroberflächen in verschiedenen Anwendungen oder Produkten einer Organisation.


Eine Pattern-Library kann je nach Umfang und Zweck weniger flexibel sein und möglicherweise weniger Anpassungsmöglichkeiten bieten. Vor allem auf Team-, Plattform- und Produktebene beinhalten Pattern-Libraries anwendungsspezifische Lösungen, die sich nicht allgemeingültig übertragen lassen.

Design System

Umfang und Zweck

Ein Design-System ist eine umfassende Sammlung von Richtlinien, Best Practices, Komponenten und Ressourcen, die nicht nur das visuelle Design, sondern auch das Verhalten von Benutzeroberflächen und die Markenidentität definiert. Es dient als zentrale Referenz für das gesamte Design einer Organisation oder eines Projekts.

Inhalt

Ein Design-System umfasst neben ein bis mehreren Pattern-Libraries oft auch Designrichtlinien, Stilvorlagen, Markenressourcen und eine umfassende Dokumentation.

Anwendungsbereich

Ein Design-System bietet eine umfassende Richtlinie für das Design von Benutzeroberflächen in verschiedenen Anwendungen oder Produkten einer Organisation.

Pattern Library


Eine Pattern-Library (Komponentenbibliothek) ist spezifischer und konzentriert sich in der Regel auf die Sammlung von wiederverwendbaren Design Patterns (Mustern) und Komponenten. Sie kann Teil eines Design-Systems sein oder als eigenständiges Instrument existieren, das nur auf die Wiederverwendbarkeit von Designelementen abzielt.


Eine Pattern-Library konzentriert sich hauptsächlich auf die Sammlung und Dokumentation einzelner UI-Komponenten, Muster und deren Variationen.


Eine Pattern-Library kann je nach Umfang und Zweck weniger flexibel sein und möglicherweise weniger Anpassungsmöglichkeiten bieten. Vor allem auf Team-, Plattform- und Produktebene beinhalten Pattern-Libraries anwendungsspezifische Lösungen, die sich nicht allgemeingültig übertragen lassen.

Zusammengefasst: Ein Design-System bietet eine umfassende und strategische Herangehensweise an das Design-Management, während eine reine Pattern-Library sich auf die praktische Sammlung und Dokumentation von wiederverwendbaren Design-Mustern konzentriert.

Dennoch sind Pattern-Libraries ein essentieller Bestandteil von Design-Systemen und werden deshalb in den ersten Schritten von Systemen als Basis aufgebaut und während des Prozesses stetig weiterentwickelt.

Design-System entwickeln in 6 Schritten

Ein Design-System zu entwickeln, variiert in Umfang und Struktur abhängig von der Unternehmensgröße, dem Fokus und dem Ziel. Design-Systeme lassen sich klein starten und sukzessive erweitern. Wichtig ist dabei, von Beginn an alle Stakeholder im Prozess zu integrieren, um deren Bedürfnisse zu berücksichtigen.

Diese 6 Schritte sind bei der Entwicklung eines Design-Systems wichtig:

Icon Analyse

1. Bedarfsanalyse und Zielsetzung

Zunächst werden die bestehenden Designs, das Nutzerfeedback und die Markenrichtlinien des Unternehmens analysiert, um die spezifischen Bedürfnisse und Aufgaben der einzelnen Teams zu verstehen und die Vision sowie die langfristigen Ziele des Design-Systems zu definieren.

Icon Grundlagen

2. Design & Entwicklung

Anhand der grundlegenden Elemente wird der Look & Feel des Design-Systems bestimmt. Dazu gehören unter anderem Farben, Typografie, Iconography, Formen, Motion, Grid und Beispiel-Layouts. Es werden klare Design-Prinzipien festgelegt, die als Leitfaden für das gesamte System dienen. Diese spiegeln die Werte und Ziele der Marke wider, stecken einen übergeordneten Rahmen und bieten gleichzeitig den Teams den Freiraum, innerhalb ihrer eigenen Anwendungen emotionale Designs zu schaffen. Ebenso werden Pattern-Libraries aufgebaut und wiederverwendbare Designkomponenten entwickelt, die auf den identifizierten Grundelementen basieren.

Icon Dokumentation

3. Dokumentation

Eine umfassende Dokumentation für das Design-System wird erstellt, die Anleitungen zur Verwendung der verschiedenen Komponenten, Design-Prinzipien, Richtlinien zur Markenidentität, CSS-Stile und andere relevante Informationen enthält.

Icon Feedback

4. Feedback, Testing und Iteration

Das Design-System wird sowohl intern als auch mit echten Nutzer:innen getestet. Feedback von unterschiedlichen Stakeholdern gesammelt und darauf basierend iteriert, um das System kontinuierlich zu verbessern.

Icon Implementierung

5. Implementierung und Schulung

Das Design-System wird in alle relevanten Produkte und Plattformen implementiert, wobei sichergestellt wird, dass alle Teammitglieder Zugang dazu haben und es konsistent nutzen. Den Teammitgliedern werden Schulungen und Unterstützung angeboten, um sicherzustellen, dass sie das Design-System effektiv nutzen können. Dies umfasst sowohl Designer:innen als auch Entwickler:innen und andere Stakeholder, die mit dem System arbeiten.

Icon Wartung

6. Wartung und Skalierung

Ein Design-System ist kein statisches Artefakt, sondern muss kontinuierlich gepflegt und aktualisiert werden, um mit den sich ständig ändernden Anforderungen und Trends Schritt zu halten. Es muss sichergestellt werden, dass das Design-System skalierbar ist und mit den wachsenden und sich ändernden Bedürfnissen des Unternehmens Schritt halten kann. Dies beinhaltet die Erweiterung des Systems um neue Komponenten und Richtlinien sowie die Anpassung an neue Plattformen und Produkte.

Ein gut durchdachtes Design-System kann die Effizienz steigern, die Konsistenz verbessern und die Entwicklung neuer Produkte beschleunigen. Es ist ein wichtiger Bestandteil einer erfolgreichen Designstrategie.

5 gute Beispiele für Design-Systeme

Die folgenden Beispiele für durchdachte Design-Systeme zeigen, wie Effizienz und Innovationen gleichermaßen berücksichtigt werden.

  • 1. Material Design von Google

    Das Material-Design-System von Google hat bereits sein drittes großes Update hinter sich und war eines der ersten öffentlich zugänglichen Design-Systeme. Hierbei liegt der Fokus klar auf der Produktentwicklung und man kann sich darauf verlassen, dass neueste UX-Erkenntnisse und technische Innovationen zeitnah in das System integriert werden.

  • 2. Carbon von IBM

    Carbon ist ein Open-Source-Design-System von IBM, das auf Anwendungen von Enterprise-Systemen zugeschnitten ist. Der Schwerpunkt liegt auf Modularität und Datenvisualisierungen in der breiten Palette digitaler Produkte von IBM auf Unternehmensebene.

  • 3. Atlassian

    Atlassian entwickelt verschiedene Plattformen zur Zusammenarbeit, wie Jira und Trello, und legt dabei großen Wert auf Agilität, Flexibilität und Effizienz. Das Design-System von Atlassian bietet wichtige Prinzipien für die effektive Teamarbeit, wobei der Schwerpunkt auf Einfachheit, Effizienz und benutzerzentriertem Design liegt.

  • 4. Lightning von Salesforce

    Salesforce bietet Cloud-Lösungen, CRM, Kundenservice und Automatisierung an und hat mit Lightning ein Design-System entwickelt, das besonders für die Entwicklung von Business-Apps nützlich ist.

  • 5. Reshaped

    Das Design-System Reshaped wurde für die Skalierung und Produktentwicklung in React und Figma entwickelt. Hierbei wurde auf ein ausgewogenes Verhältnis von Flexibilität und Reglementierung geachtet. Es verfügt über eine umfangreiche und übersichtliche Dokumentation der Core Components.

Wichtige Fragen und Antworten

Möchten Sie mehr wissen? Dann nehmen Sie gern Kontakt auf.

Kathrin Köhler Experience Design Director (UI)

Vielen Dank für Ihre Nachricht

Wir haben Ihre Anfrage erhalten und melden uns umgehend bei Ihnen.

Zurück zur Übersicht Back to Top