Warum jedes Unternehmen ein Design System haben sollte
Vorteile und Mehrwerte von Design Systemen
Was ist ein Design System?
Ein Design System ist eine Sammlung von Regeln, Prinzipien, Richtlinien und Ressourcen, die es einem Unternehmen ermöglichen, konsistente Designs zu erstellen und zu pflegen. Es ist ein leistungsstarkes Werkzeug, quasi ein internes Tool, wie MS Teams, Slack o.ä., die helfen die Produktivität zu steigern und die das Unternehmen dabei unterstützt, eine einheitliche visuelle Sprache zu etablieren, die den Markenauftritt stärkt und die User Experience verbessert.
Ein Design System ist ein zentraler Erfolgsfaktor für die digitale Transformation und sollte von allen Unternehmen in Betracht gezogen werden, die ihren Kunden mehr als nur eine handvoll digitaler Touchpoints zur Verfügung stellt.
Ein gut gestaltetes Design System bietet zahlreiche Vorteile für Unternehmen. Es erleichtert die Zusammenarbeit zwischen den verschiedenen Abteilungen und Teams, indem es einen gemeinsamen Rahmen für das Designprozess schafft. Durch die Verwendung von einheitlichen Designelementen, wie Farben, Typografie, Formen und Symbolen, können Unternehmen auch die Markenidentität und den Wiedererkennungswert verbessern.
Ein weiterer Vorteil ist die Effizienzsteigerung bei der Erstellung von Designs. Durch die Verwendung von vorgefertigten Design-Elementen und Code-Komponenten können Digital-Teams schneller und effizienter arbeiten und sich auf die Erstellung von neuen Designs konzentrieren, anstatt Zeit jeden mal neu mit der Erstellung von Elementen (wie z.B. einem Button) zu verschwenden. So tragen solche Systeme dazu bei, die Kosten für die Erstellung und Wartung von digitalen Produkten zu senken.
Die Vorteile eines Design Systems auf einen Blick
Ein Design System bietet Unternehmen und Organisationen einen enormen Mehrwert bei der Gestaltung und Umsetzung von Schnittstellen und Interaktionsflächen mit Kunden, Interessenten und Stakeholdern. Zu den wichtigsten Mehrwerten von Design Systemen gehören:
Konsistenz: Ein Design System bietet eine konsistente Design-Sprache und Markenidentität, die das Markenerlebnis kohärent und vertrauenswürdig macht. Durch die Verwendung von gemeinsamen Elementen und Ressourcen in allen Produkten und Dienstleistungen können Nutzer leichter erkennen, dass sie von derselben Marke stammen.
Effizienz: Durch die Verwendung von bereits erstellten Design-Assets und -Komponenten kann die Zeit und die Kosten für die Erstellung von Designs und die Entwicklung von Produkten erheblich reduziert werden. Das Team kann sich auf die Gestaltung und Entwicklung neuer Funktionen und Lösungen konzentrieren, anstatt jedes Mal von Grund auf neu zu beginnen.
Skalierbarkeit: Ein Design System ermöglicht es Unternehmen, schneller und einfacher zu skalieren, da es eine gemeinsame Sprache und Struktur für alle Teams und Produkte bietet. Neue Funktionen und Produkte können schneller entwickelt und auf den Markt gebracht werden, ohne dass dabei die Einheitlichkeit und Markenidentität beeinträchtigt wird.
Zusammenarbeit: Ein Design System fördert die Zusammenarbeit und den Austausch von Wissen zwischen verschiedenen Teams, Abteilungen und Stakeholdern. Es schafft eine gemeinsame Grundlage, auf der alle Beteiligten aufbauen können, was wiederum zu besserer Kommunikation, effektiverer Zusammenarbeit und höherer Produktqualität führt.
Verbesserte Benutzererfahrung: Durch die Verwendung eines Design Systems können Benutzer eine konsistente und nahtlose Benutzererfahrung auf verschiedenen Plattformen und Geräten genießen. Eine gut durchdachte Gestaltung und einheitliche Design-Elemente führen zu einer besseren Nutzererfahrung und erhöhen die Nutzerzufriedenheit.
- Hohe Flexibilität & Skalierbarkeit durch Design-Token: Ein Design System ermöglicht es, schnell auf Veränderungen 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-Token. Diese sind sozusagen die kleinsten Bauteile, die Atome eines Design Systems.
Design-Token
Die Atome eines Design Systems
Design-Token sind die kleinsten Bausteine eines Designsystems. Aufgrund der Werte, die sie speichern, werden sie in der Regel über mehrere Tools und Plattformen hinweg verwendet, um Konsistenz und eine passende Markenidentität zu gewährleisten. Da es sich bei Token um eine Abstraktion handelt, können sich die definierten Werte ändern, ohne dass der Designer oder Entwickler dadurch gestört wird.
The single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages.
- W3C Design Token Community Group
Grundlagen eines Design Systems
Design Systeme sind die Sammlung von Werkzeugen, Prozessen, Regeln, Richtlinien und Design-Entscheidungen eines Unternehmens.
Zusammen ebnen sie einem Produkt- oder Digital-Team den Weg für die Ausführung und Bereitstellung seiner User Experience. Der Zweck eines Design Systems besteht darin, die Produktentwicklung systematisch zu rationalisieren und wiederholbare, reproduzierbare und skalierbare Prozesse zu etablieren, mit denen ein Team neue digitale Erlebnisse mit hoher Geschwindigkeit entwerfen, entwickeln und testen kann. Als Produktwerkzeug ermöglicht das Design System eines Unternehmens allen Produkten und Services, ein einheitliches Erscheinungsbild für alle Benutzer zu schaffen, die Effizienz, Qualität und Geschwindigkeit der Produktteams zu erhöhen und die Werte einer Marke über alle Berührungspunkte hinweg zum Ausdruck zu bringen.
Design Systeme werden auch als Rahmen verwendet, um die Zusammenarbeit zwischen allen Mitgliedern der Produktentwicklungsorganisation zu optimieren. Obwohl der Name treffend ist, sind Designsysteme nicht nur für die Designorganisation von Nutzen. Vom Produktmanagement bis zum Marketing, von der Qualitätssicherung bis zur Konstruktion/Entwicklung und allen dazwischen, fördern Konstruktionssysteme die hochwertige Zusammenarbeit in der gesamten Produktentwicklungsorganisation.
Ein modernes Design System besteht in der Regel aus verschiedenen Kernelementen: Designsprache, Komponentenbibliothek, Dokumentation, Design-Kits und einem Governance-Modell.
Design Language
Die Designsprache ist ein fundamentales Grundgerüst eines Design Systems
Der Hauptzweck der Designsprache besteht darin, visuelle Konsistenz in allen Produkten oder Erlebnissen einer Organisation zu schaffen. Dazu gehören unter anderem die Website des Unternehmens, interne Anwendungen und externe Produkte. Die Designsprache setzt sich aus Elementen wie Typografie, Farbsystem, Formen, Bewegung und Ikonografie zusammen. Die Designsprache wird in der Regel durch ein Schema von Design-Token ausgedrückt, die alle Designentscheidungen des Unternehmens in einer zentralen, einzigen Quelle der Wahrheit bündeln und kodifizieren. Auf diese Weise kann das Unternehmen schnell neue Produkte, Services, Journeys und Erlebnisse entwerfen und gleichzeitig den Anwendern und Nutzern ein konsistentes, vertrautes und intuitives Erlebnis bieten.
Komponentenbibliothek
Das Zentrum eines Design Systems: die Code Component Library.
Die Komponentenbibliothek ist eine Sammlung von Bausteinen für zur Erstellung digitaler Produkte und Bedienoberflächen. Sie umfasst Elemente wie Buttons, Inputs, Dropdown-Menüs, Galerien und vieles mehr. Diese Komponenten sind vorgefertigt und können bei der Erstellung neuer Produkte sofort verwendet werden. Aufgrund ihrer Reproduzierbarkeit und hohen Skalierbarkeit sparen diese vorgefertigten Komponenten Designern, Entwicklern/Ingenieuren und Qualitätssicherungsexperten eine Menge Zeit. Themen wie Performance, Usability, und insbesondere Accessability werden hier zentral eingebaut, gewartet und optimiert, sodass es jedem Team and ANwender des Design Systems zugute kommt.
So können sie sich von der mühsamen Replikation kleiner Details auf die wichtigeren Ziele eines Produkts konzentrieren. In einem Design System entwickelt sich die Komponentenbibliothek ständig weiter. Sie wird ständig aktualisiert, um die Arbeitsweise der Produktteams widerzuspiegeln und die Anforderungen neuer Produkte und Erfahrungen darzustellen.
Ein Design System ist eine Bibliothek mit grafischen Vorlagen, Komponenten und anderen Aspekten, die von einer Person, einem Team oder einer Gemeinschaft als Code- und Designtool(s) dokumentiert und veröffentlicht werden, damit die Übernahme von Produkten effizienter und kohärenter erfolgen kann.
— Nathan Curtis, Defining Design Systems
Design System Dokumentation
Die umfassende Anleitung, die alle Elemente des Design Systems erklärt
Die Dokumentation des Design Systems ist der allgemeine schriftliche Rahmen und die Anleitung für die Verwendung des Design Systems, um effizient und effektiv skalierbare Design-Erlebnisse zu schaffen. Die Dokumentation wird regelmäßig aktualisiert, um die Änderungen zu erfassen, die sich aus der Gestaltung neuer Erlebnisse ergeben. Die Dokumentation ist der erste Schritt zur Schaffung eines gemeinsamen Verständnisses darüber, wie eine Organisation Produkte mit visuellen Bedienoberflächen erstellt, und dient auch als gemeinsame Vereinbarung über den Zweck und die Funktionalität des Design Systems. Es gibt viele Möglichekeiten ein Design System zu dokumentieren. So sind die Anforderungen einer Organisation an Dokumentation meist genauso individuell wie die an ihr Design System.
Die Design System Dokumentation umfasst in der Regel eine Seite für jede Komponente, auf der deren Funktion, Versionen, geeignete und ungeeignete Anwendungsfälle, Informationen zur Barrierefreiheit (accessibility) und Links zur Anzeige verwandter Komponenten in der Komponentenbibliothek beschrieben werden. Sie deckt auch Makrothemen ab, wie z. B.: das Leitbild des Design Systems, seinen Zweck, wie es implementiert wird und wie man das Codegerüst versteht, aus dem das Design System aufgebaut ist. Schließlich enthält die Dokumentation des Systems Versionshinweise für neue Aktualisierungen und einen Rahmen für die effektive Kommunikation der Aktualisierungen an alle Teams, die das Entwurfssystem verwenden.
Damit dient die Dokumentation als Referenz für Designer, Entwickler und andere Teammitglieder, um sicherzustellen, dass das Design System konsistent und effektiv angewendet wird.
Design-Kits
Zur Beschleunigung des Designprozesses
Design-Kits sind eine Möglichkeit, die Designsprache durch produkt- oder erfahrungsspezifische Sammlungen, so genannte UI-Bibliotheken, in die Praxis umzusetzen. Diese UI-Bibliotheken werden in dem von einem Unternehmen gewählten Design-Tool wie Figma, Sketch, AdobeXD oder InVision verwaltet. Das Design-Kit und die UI-Bibliotheken bestehen aus allen Stilen, Symbolen, visuellen Komponenten und UX-Pattern für ein Produkt oder ein Erlebnis und werden dem Code-Repository der Komponentenbibliothek zugeordnet. Design-Kits helfen dabei, die Konsistenz zwischen der Design-Dokumentation, der Komponentenbibliothek und dem Code in der Developer Sandbox und dem Code-Repository sicherzustellen.
Heute gibt es schon einige Tools, die als Schnittstelle zwischen Design und Entwicklung Prozesse teil-automatisieren. So können Design-Token heute schon sehr einfach in Figme gesteuert und an das Code-Reposatory übergeben werden. Zu solchen Tool gehören Token Studio, SpecifyApp aber auch in kickstartDS kümmern wir uns darum die Handhoverprozesse zu optimieren.
Governance-Modell
Der Kontrollrahmen für Design Systeme
Viele Unternehmen betrachten ihr Governance-Modell als die Bedienungsanleitung für die Ausführung des Design Systems. Ähnlich wie die formale Dokumentation entwickelt sich auch das Governance-Modell ständig weiter und passt sich den Änderungen der Prozesse im Unternehmen an, die das Design System selbst betreffen. Das Governance-Modell definiert die Regeln für Dinge wie: Benutzerzugriff und -verwaltung, Versionsrichtlinien, Aktualisierungsprozesse und -verfahren, die Einarbeitung neuer Mitarbeiter und den gesamten Workflow des Design Systems.
