Warum jedes Unternehmen ein Design System haben sollte
Ein Design System bietet Designern und Developern eine Toolbox, mit der sämtliche Touchpoints, Interaktionen und Interfaces konsistent und nutzerfreundlich gestaltet werden. Marken und Unternehmen, die ein Design System nutzen, etablieren eine starke visuelle Identität, steigern ihre Reichweite in relevanten Zielgruppen und verkürzen die Entwicklungszeiten neuer digitaler Produkte und Services. Ein Design System ist damit ein zentraler Erfolgsfaktor für die digitale Transformation und sollte in jedem großen Unternehmen fest in der digitalen Roadmap verankert sein.
Was ist ein Design System und wie ist es aufgebaut?
Design Systeme lassen sich mit einem Baukasten für das „Look & Feel“ eines Unternehmens vergleichen. Verschiedene Regeln, Richtlinien und Design Tools helfen dabei, die visuelle Identität des Unternehmens bzw. der Marke zu definieren und zu verwalten. Dabei ist der Systemgedanke deutlich stärker ausgeprägt als bei klassischen Corporate Design Guidelines oder singulären UI-Kits. Die Grundidee eines Design Systems besteht darin, aus einfachen, vordefinierten grafischen Elementen eine Vielzahl an neuen, selbstähnlichen Assets erstellen zu können. Damit bietet es eine strukturierte Grundlage für die konsistente Gestaltung von digitalen, aber auch printbasierten Medien.
Die Vorteile eines Design Systems im Überblick
Ein Design System bietet Unternehmen und Organisationen einen enormen Mehrwert bei der Erstellung und Umsetzung der Schnittstellen und Interaktionsflächen zu Kunden, Interessenten und Stakeholdern. Zu den wichtigsten Vorteilen von Design Systemen zählen:
- Einheitliches Erscheinungsbild
Ein Design System hilft dabei, ein einheitliches und konsistentes Erscheinungsbild zu etablieren, das sich medienübergreifend auf alle Kommunikationskanäle erstreckt. Damit wird die Marke gestärkt und Vertrauen bei Kunden und Stakeholdern aufgebaut.
- Verbesserte User Experience
Der Einsatz wiederkehrender, standardisierter Interaktionsmuster und Komponenten ermöglicht eine einfache und intuitive Nutzung von Produkten und digitalen Services durch die User. Dies trägt dazu bei, die Zufriedenheit und Loyalität der Kunden zu steigern und damit den CLTV (Customer-Lifetime-Value) zu verbessern.
- Schnelle Entwicklung von Produkten und Dienstleistungen
Durch die Verwendung von wiederverwendbaren Komponenten wird die Entwicklung von Produkten und Dienstleistungen beschleunigt werden. Es wird weniger Zeit für die Gestaltung und technische Implementierung von Benutzeroberflächen benötigt. Die reduzierte Fehleranfälligkeit durch bessere Standards reduziert ebenfalls die Time-to-Market.
- Kosteneinsparungen durch hohe Qualität
Durch die Verwendung von wiederverwendbaren Komponenten und einheitlichen Standards werden Redundanzen verringert und parallel laufende Entwicklungen unterbunden. Die erhöhte Qualität der Komponenten ermöglicht eine schnellere technische Implementierung im Frontend von digitalen Touchpoints. Diese Aspekte sorgen für eine deutliche Reduktion der Entwicklungskosten für neue Produkte und Services.
- Bessere Zusammenarbeit der Teams
Ein Design System fördert die Zusammenarbeit innerhalb des Unternehmens, insbesondere an der Schnittstelle des UX/UI Teams zum Frontend Development. Durch die definierte Referenz der wesentlichen Design-Elemente und deren Einsatz auf Benutzeroberflächen haben alle Mitarbeiter ein klares Verständnis des Design-Zielbildes.
- Hohe Flexibilität und Skalierbarkeit durch Design-Token
Ein modernes Design System ermöglicht es, schnell auf Veränderungen in der Geschäftsumgebung zu reagieren und mit neuen Anforderungen zu wachsen. Dies wird nicht nur durch die wiederverwendbaren Komponenten möglich, sondern insbesondere durch die schnelle Anpassungsfähigkeit bei der Nutzung von Design-Tokens. Design-Token sind eine technologieunabhängige Methode zum Speichern von Variablen. Wir verwenden Token anstelle von hart kodierten Werten, um eine bessere Konsistenz der Benutzeroberfläche über verschiedene Plattformen hinweg zu gewährleisten.
Der größte Hebel von Design Systemen liegt in den Bereichen Skalierung und Effizienz. Insbesondere im B2B Sektor steigt die Nachfrage nach digitalen Innovationen stark an. Wer in diesem Umfeld kurze Innovationszyklen etabliert und die Time-to-Market gering hält, wird in seinem Marktsegment einen Vorsprung aufbauen. Mit einem Design System erfolgt die Entwicklung und Implementierung konsistenter Customer Journeys deutlich schneller und günstiger. Der positive Impact auf die User Experience reduziert Barrieren, pusht Umsätze und trägt so direkt zum Unternehmenserfolg bei.
Die Module eines Design Systems
Es gibt unterschiedliche Strukturansätze für ein Design System. Ein wichtiges Kriterium ist die Unternehmensgröße: Kleine Unternehmen oder Startups in der Frühphase benötigen einen geringeren funktionalen Umfang als große und international etablierte Mittelständler oder Konzerne. Bei letzteren spielt der UX-Reifegrad der Organisation eine essenzielle Rolle. Desto stärker sich ein Unternehmen an den Bedürfnissen der Kunden ausgerichtet, umso flexibler und umfangreicher sollte das Design System aufgebaut sein. Folgende sechs Module sollten langfristig in ein Design System aufgenommen werden:
- Visuelle Identität (Markenidentität, Corporate Design)
Hierzu gehören Basis-Elemente für die Anwendung in allen Medien. Definiert werden dafür Primär- und Sekundärfarben, Typografie, Bild-, Illustrations- und Iconstile sowie grundsätzliche Layout-Guidelines zum Umgang und Einsatz der Basis-Elemente.
- Designprinzipien für Benutzeroberflächen
Diese umfassen allgemeine Leitlinien, die das Design von visuellen Elementen und deren Zusammenspiel auf Benutzeroberflächen definieren. Dazu zählen die Gestaltung von einfachen Interaktions- und Navigationsmöglichkeiten wie Buttons und Menüs. Auch komplexere Elemente wie Formulare, Such- und Selektionsbereiche oder Konfiguratoren können hier beschrieben werden.
- Komponentenbibliothek, UI-Kit
In einer Komponentenbibliothek bzw. einem UI-Kit werden wiederverwendbare Design Elemente bzw. Komponenten zusammengefasst, die zur Gestaltung von Benutzeroberflächen verwendet werden. Dazu zählen neben den kleinsten Elementen wie Linien, Icons und Navigationselementen auch Buttons, Listen, Menüs und weitere Steuerelemente.
- Design Token
Design Token kannst du dir als kleine Code Snippets vorstellen, die Design-Eigenschaften wie Farben, Schriftarten, Ränder und andere visuelle Elemente repräsentieren. Sie stellen sicher, dass alle Elemente in Benutzeroberflächen, die das Token beinhalten, auch die gleichen visuellen Eigenschaften verwenden. Durch die Nutzung wird zum einen die visuelle Konsistenz sichergestellt. Zum anderen vereinfachen sie die Aktualisierung und Änderung von Design-Eigenschaften enorm, da sie in einem zentralen Ort definiert sind und sich auf alle Elemente auswirken, die sie verwenden.
- Designprozesse und Workflows
Die Definition und Dokumentation von Workflows ist gerade in großen Organisationen und verteilt arbeitenden Teams wichtig. Dazu zählen insbesondere die Arbeitsabläufe, die für die Erstellung und Pflege des Design Systems eingehalten werden müssen. Aber auch an den sensiblen Schnittstellen zwischen UI/UX Teams und den umsetzenden Frontend-Developern sind für schnelle und qualitativ hochwertige Arbeitsergebnisse die Workflows zu definieren. Saubere Feedbackprozesse sichern die fortlaufende Weiterentwicklung des gesamten Systems.
- Ressourcen
Ein Design System kann auch Ressourcen wie Vorlagen, Prototyping-Tools und Style Guides enthalten, die Designer und Entwickler bei der Einhaltung von Design Standards unterstützen. Vereinzelt kommen auch spezielle Regeln und Guidelines für das genutzte Content Management System (CMS), Machine Interfaces oder die Pflege von speziellen Design-Assets zum Einsatz.
Der Aufbau eines Design Systems – Atome, Moleküle und Organismen
In der Literatur und diversen Beiträgen werden Atome, Moleküle und Organismen als wichtige Elemente eines Design Systems angeführt. Sie stehen als Metapher, um den systemischen Aufbau auf eine einfache Weise verständlich zu machen. Aus unserer Sicht bezieht sich diese Darstellung zumeist auf den Bereich des UI-Kits, welches ein zentraler Bestandteil des Design Systems ist. Ein Design System enthält darüber hinaus noch eine Vielzahl weiterer Module.
Atome, Moleküle und Organismen werden in der Webdesign- und UX-Design-Branche genutzt, um die verschiedenen Ebenen von Design-Komponenten zu beschreiben. Sie dienen dazu, das Design von Benutzeroberflächen und Interfaces zu modularisieren, um es über einzelne Komponenten skalierbar und wiederverwendbar zu gestalten.
Atome sind dabei die kleinsten Einheiten. Sie stehen zum Beispiel für einzelne Schaltflächen, Typografie, Farben oder Icons. Sie sind in der Regel unabhängig von anderen Design-Elementen und können einzeln oder in Kombination verwendet werden. Einzelne Atome besitzen in der Regel keine Funktionen. Sie müssen immer mit weiteren Atomen zu funktionalen Einheiten kombiniert werden.
Moleküle sind größere Design-Elemente, die aus einer Kombination von Atomen zusammengesetzt werden. Sie stellen zusammengehörige Elemente dar, die einen Funktionsumfang besitzen. Ein Button, ein Formularfeld oder eine Navigationsleiste sind Beispiele für Moleküle.
Organismen sind die größten Einheiten des Designs und bestehen aus einer Kombination von mehreren Molekülen. Sie stellen komplexere Designs dar, wie zum Beispiel eine Landing Page, eine Produktseite oder einen Konfigurator.
In einem UI-Kit werden Atome und Moleküle in unterschiedlichsten Spezifikationen definiert und als Grafikdokument, Code Snippet oder Design Token für Designer oder Entwickler angeboten. Organismen finden sich z. B. häufig in Style Guides als exemplarische Umsetzung für unterschiedliche Touchpoints.
Beispiele für digitale Design Systeme
Es gibt inzwischen eine Vielzahl an gut ausgebauten und praxiserprobten Design Systemen. Diese werden insbesondere von großen Technologiefirmen wie Google, Apple und Microsoft frei verfügbar im Internet veröffentlicht. Damit soll Entwicklern und Designern von Drittanbietern ein freier Zugriff ermöglicht werden, um stets die aktuellen Elemente und Vorgaben zur Verfügung zu haben. Für Markenverantwortliche, Designer und Frontend-Entwickler sind die offenen Systeme eine ideale Benchmark für die Entwicklung, Dokumentation und Implementierung eines eigenen Designsystems.
Material Design von Google
Google gehört zu den Vorreitern frei verfügbarer Design Systeme. Das Google „Material Design“ wurde im Juni 2014 auf der Google I/O angekündigt und im Verlauf des Jahres 2015 auf den meisten Apps implementiert und seitdem kontinuierlich weiterentwickelt. Die Benutzeroberflächen von Google-Produkten wurden mit der Einführung des Systems deutlich vereinfacht und durch intuitive Steuerelemente in ihrer Nutzerfreundlichkeit verbessert. Ziel von Google ist es, eine einheitliche visuelle Sprache für die verschiedenen Plattformen und Geräte zu etablieren. Das Design System umfasst Richtlinien für Typografie, Farben, Schaltflächen, Layouts und andere visuelle Elemente. Eines der wichtigsten Merkmale von Material Design ist die Verwendung von fließenden Animationen und Übergängen.
Apple Human Interface Guidelines:
Die Apple Human Interface Guidelines sind ein Design System, das von Apple entwickelt wurde und sich an der Benutzererfahrung von Apple-Produkten orientiert. Es umfasst Richtlinien für die Benutzeroberfläche, die Interaktionen, die Typografie und andere visuelle Elemente. Die Apple Human Interface Guidelines werden hauptsächlich für die Entwicklung von iOS- und macOS-Apps verwendet.
Lightning Design System von Salesforce
Auch Salesforce hat bereits 2014 die erste Version seines Lightning Design Systems veröffentlicht. Als Anbieter rein digital erlebbarer Produkte und Services ist die User Experience ein zentraler Werttreiber für Salesforce. Das Design System hat seinen Schwerpunkt auf den digitalen Touchpoints und ist auf die Web- und App-Umsetzung ausgerichtet. Es umfasst eine Vielzahl an Guidelines für Charts, Datenvisualisierung, Layout, Navigation u. v. m. Das Lightning Design System wurde in den vergangenen Jahren um sehr viele Code-Komponenten ergänzt und hat eine der umfangreichsten Design Token Bibliotheken.
Wie wird ein Design System entwickelt?
Die Entwicklung und Implementierung eines Design Systems ist kein in sich geschlossenes Projekt, sondern ein kontinuierlicher Entwicklungsprozess mit sehr individuellen Meilensteinen. Egal ob Startup, Verband oder Konzern: Grundvoraussetzung für den Erfolg eines Design Systems ist ein breites Commitment in der Organisation für eine nutzerorientierte bzw. kundenzentrierte Unternehmensführung.
Wichtig ist es, zu Beginn alle Stakeholder an einen Tisch zu bringen und gemeinsam die Anforderungen und Ziele zu sammeln und zu priorisieren. Neben dem Corporate Branding bzw. Marketing werden weitere Fachbereiche oder Abteilungen involviert. Dazu zählen in der Regel die Teams aus dem eCommerce, Digital Marketing & Sales sowie das Frontend Team oder entsprechende externe Partner. Ein erfahrener externer Berater und Umsetzer wie Bitgrip sollte den gesamten Prozess der Design System Entwicklung begleiten.
Diese sieben Handlungsfelder sind die wichtigsten Schritte auf dem Weg einer erfolgreichen Design System Entwicklung:
- Definieren Sie das Ziel und den Nutzen des Design Systems. Dabei sollte die Fragestellung beantwortet werden, auf welche übergeordneten Unternehmensziele das Design System einzahlen soll und wie eine Messbarkeit ermöglicht wird.
- Validieren Sie die bestehenden Corporate Design Elemente und Guidelines. Repräsentieren diese noch das Unternehmen bzw. die Marke in vollem Umfang? Stellen diese noch eine Grundlage für die Nutzung in digitalen Medien dar? Definieren Sie eine verbindliche Designsprache als Basis für das Design System. Dazu gehören Farben, Typografie, Bild- und Grafikstil und diverse weitere visuelle Elemente.
- Entwickeln Sie eine Design-Bibliothek im Sinne eines UI-Kits. Dafür gestalten und definieren Sie eine Sammlung von Komponenten für Benutzeroberflächen, die als Basis für das Design System verwendet werden. Stellen Sie die einzelnen Elemente als Design Token bereit und definieren Sie alle relevanten Arbeitsprozesse zur Nutzung der Token in Projekten.
- Erstellen Sie Design-Guidelines. Dies sind Dokumente, die alle Regeln und Richtlinien enthalten, die für Elemente im Design System gelten. Je nach Umfang des Systems werden weitere Guideline notwendig, die Anleitungen und Best Practices für die Verwendung des Design Systems enthalten.
- Erarbeiten Sie das Design System teamübergreifend und integrieren Sie früh erste Elemente des Design Systems in die Arbeitsprozesse des UI/UX Teams sowie des Frontend Teams. Stellen Sie sicher, dass das Design System in alle Stufen des Konzept-, Design- und Implementierungsprozesses eingebunden wird.
- Testen und validieren Sie das Design System in einer Reihe von Pilotprojekten. Verwenden Sie das Design System, um Prototypen und MVPs zu erstellen, und testen Sie diese mit Nutzern, um sicherzustellen, dass es deren Bedürfnissen entspricht.
- Planen Sie nach erfolgreicher Test- und Pilotphase den Rollout des Systems auf bestehende Medien und Touchpoints. Dieser Prozess kann einen längeren Zeitraum beinhalten und sollte von einer umfangreichen internen Kommunikation begleitet werden.
Fazit: Die Bedeutung eines Design Systems
Ein Designsystem sorgt für Konsistenz und Effizienz bei der Gestaltung und Entwicklung digitaler Produkte und Dienstleistungen. Es legt eine Reihe von Richtlinien, Standards und wiederverwendbaren Komponenten fest, die leicht über Teams und Projekte hinweg ausgetauscht und implementiert werden können. Dies trägt dazu bei, den Design- und Entwicklungsprozess zu rationalisieren, die Kommunikation und Zusammenarbeit zwischen den Teammitgliedern zu verbessern und ein konsistentes Benutzererlebnis über alle digitalen Touchpoints hinweg zu gewährleisten. Darüber hinaus lässt sich ein digitales Produkt oder ein digitaler Dienst im Laufe der Zeit leichter skalieren und weiterentwickeln.
All diese Faktoren sind wichtig, um die digitale Transformation auf Geschwindigkeit zu bringen bzw. zu halten. Ein Design System ist ein zentraler Erfolgsfaktor für jedes Unternehmen, das hochwertige digitale Produkte und Dienstleistungen liefert, die den Bedürfnissen der Kunden entsprechen.
FAQs
Was ist ein Design System?
Ein Design System ist ähnlich einem Baukasten, in dem Regeln, Richtlinien und Design Tools eines Unternehmens festgelegt werden. Die visuelle Darstellung und Markenidentität werden durch das Design System fest definiert.
Wie funktioniert ein Design System?
Ein Design System ist eine Weiterentwicklung des klassischen Corporate Designs. Es beinhaltet vorgefertigte grafische Elemente, die schnell zu neuen Designs zusammengefügt werden können. Das gilt sowohl für digitale als auch für Printmedien und ermöglicht eine durchgehend einheitliche Gestaltung.
Was beinhaltet ein Design System?
Ein Design System enthält die Corporate Identity (die visuelle Identität), Designprinzipien für verschiedene Benutzeroberflächen, eine Komponentenbibliothek, Design Token sowie Designprozesse und vordefinierte Workflows.
Warum ein Design System?
Ein Design System ermöglicht ein einheitliches „Look & Feel“ über alle Touchpoints hinweg, verbessert die allgemeine User Experience, ermöglicht eine schnelle Entwicklung und Veröffentlichung von Produkten und Dienstleistungen und spart auf lange Sicht Kosten ein. Außerdem kann die Zusammenarbeit zwischen den einzelnen Teams verbessert und die Skalierbarkeit der einzelnen Design Elemente erhöht werden.
