Warum jedes Unternehmen ein Design System haben sollte
Ein Design System bietet den Entwicklern und Designern eine Toolbox, mit der sämtliche Touchpoints, Interaktionen und Interfaces konsistent und nutzerfreundlich gestaltet werden. Marken und Unternehmen, die ein solches System nutzen, etablieren eine starke visuelle Identität, steigern ihre Reichweite in relevanten Zielgruppen und verkürzen die Entwicklungszeiten neuer digitaler Produkte und Services. Es 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 solchen 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
Es 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 zählen:
1. Einheitliches Erscheinungsbild
Es 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.
2. 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.
3. Schnelle Erstellung von Produkten und Dienstleistungen
Die Nutzung von wiederverwendbaren Komponenten beschleunigt die Entwicklung von Produkten und Dienstleistungen. 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.
4. Kosteneinsparungen durch hohe Qualität
Durch die Verwendung von wiederverwendbaren Komponenten und einheitlichen Standards werden Redundanzen verringert und parallel laufende Erstellung 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.
5. Bessere Zusammenarbeit der Teams
Design Systeme fördern 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.
6. Hohe Flexibilität und Skalierbarkeit durch Design-Token
Moderne Design Systeme ermöglichen 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 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. 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 Design Systeme. 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 Konzerne. Hier spielt der UX-Reifegrad (nicht zu verwechseln mit einem Reifegradmodell Digitalisierung) der Organisation eine essenzielle Rolle. Desto stärker sich ein Unternehmen an den Bedürfnissen der Kunden ausrichtet, umso flexibler und umfangreicher sollte das Design System aufgebaut sein. Folgende sechs Module sollten langfristig in ein Design System aufgenommen werden:
1. 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.
2. Designprinzipien für Benutzeroberflächen
Diese umfassen allgemeine Leitlinien, die das Aussehen 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.
3. Komponentenbibliothek, UI-Kit
In einer Komponentenbibliothek bzw. einem UI-Kit werden wiederverwendbare 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.
4. Design Token
Design Token sind wie kleine Code Snippets, 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.
5. Designprozesse und Workflows
Die Definition und Dokumentation von Workflows ist gerade in großen Organisationen und verteilt arbeitenden Individuen 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.
6. 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
Design System besteht aus Atomen, Molekülen und Organismen, die als Metapher für den systemischen Aufbau dienen. Diese Komponenten werden in der Web- und UX-Design-Branche genutzt, um das Design von Benutzeroberflächen zu modularisieren und skalierbar und wiederverwendbar zu machen.
Atome sind die kleinsten Einheiten und repräsentieren Schaltflächen, Typografie, Farben oder Icons. Sie sind unabhängig von anderen Design-Elementen und werden einzeln oder in Kombination genutzt. Einzelne Atome haben normalerweise keine Funktionen und müssen mit anderen Atomen kombiniert werden, um funktionale Einheiten zu bilden.
Moleküle sind größere Design-Elemente, die aus Atomen zusammengesetzt werden. Sie repräsentieren zusammengehörige Elemente mit Funktionen. Beispiele für Moleküle sind ein Button, ein Formularfeld oder eine Navigationsleiste.
Organismen sind komplexe Designs, bestehend aus verschiedenen Molekülen. Sie umfassen z.B. eine Landing Page, eine Produktseite oder einen Konfigurator.
UI-Kit enthält definierte Atome und Moleküle in verschiedenen Spezifikationen, die als Grafikdokument, Code Snippet oder Design Token für Designer und Entwickler bereitgestellt werden. Organismen dienen als beispielhafte Umsetzung für verschiedene Touchpoints und sind häufig in Style Guides zu finden.
Beispiele für digitale Design Systeme
Es gibt 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 Erstellung, 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 2014 auf der Google I/O angekündigt und 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. Eines der wichtigsten Merkmale hiervon ist die Benutzung 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. 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 Produkte und Services ist die User Experience ein zentraler Werttreiber für Salesforce. Es 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 Erstellung 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 ist ein breites Commitment in der Organisation für eine nutzerorientierte bzw. kundenzentrierte Unternehmensführung.
Wichtig ist es, zu Beginn alle Stakeholder zusammenzubringen 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:
- eCommerce
- Digital Marketing & Sales
- 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 Erstellung:
- Definieren Sie das Ziel und den Nutzen. 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 Nutzung des 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 es, 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 verbessert die Konsistenz und Effizienz von digitalen Produkten und Dienstleistungen. Es beinhaltet Richtlinien, Standards und wiederverwendbare Komponenten, die einfach ausgetauscht und implementiert werden können. Dadurch wird der Design- und Entwicklungsprozess optimiert, die Zusammenarbeit im Team verbessert und ein einheitliches Benutzererlebnis geschaffen. Ein weiterer Vorteil ist die Skalierbarkeit und Weiterentwicklung des Produkts über die Zeit.
All diese Faktoren sind wichtig, um die digitale Transformation auf Geschwindigkeit zu bringen bzw. zu halten. Design Systeme sind ein zentraler Erfolgsfaktor für jedes Unternehmen, das hochwertige digitale Produkte und Dienstleistungen liefert, die den Bedürfnissen der Kunden entsprechen.
FAQs
Was sind Design Systeme?
Ein Design System ist ähnlich einem Baukasten, in dem Regeln, Richtlinien und Tools eines Unternehmens festgelegt werden. Die visuelle Darstellung und Markenidentität werden durch das Design System fest definiert.
Wie funktioniert ein Design System?
Design Systeme sind 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?
Es 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?
Es 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 Individuen verbessert und die Skalierbarkeit der einzelnen Elemente erhöht werden.
