Design-System: Was es ist und wie Unternehmen davon profitieren können

Über die letzten Jahrzehnte, und nicht erst seit der globalen Corona Pandemie, ist zu beobachten, dass Produkte und Services zunehmend in den digitalen Raum verlagert und neue innovative digitale Geschäftsmodelle entwickelt werden.

Die Pandemie hat die digitale Transformation vieler Bereiche befeuert und stellt somit Unternehmen vor immer größere Herausforderungen. Gleichzeitig werden auch die Anforderungen und Erwartungen an digitale Lösungen immer umfangreicher.

Komplexere Lösungen erfordern neue Wege 

Wenngleich früher digitale Inhalte oder Anwendungen vorrangig für das Web erstellt wurden, gibt es heute eine Vielzahl an verschiedenen Geräten und Plattformen mit digitalen Touchpoints – von Smartphones, über Smartwatches bis hin zum Voice Assistant.

Die Fragmentierung führt dazu, dass die Anforderungen an das Design und die Programmierung umfangreicher werden. Somit wird es notwendig, durchdachte Systeme in Form einer standardisierten Designsprache zu entwickeln, die von unterschiedlichen Teams und Bereichen verwendet werden können.

Die Idee, visuelle Komponenten und deren Anwendung zu dokumentieren ist nicht neu. Schon in den 70iger Jahren haben Richard Danne and Bruce Blackburn ihre futuristische Vision für die National Aeronautics and Space Administration, kurz NASA, in einem umfangreichen Markenhandbuch dokumentiert.

Darin wurde nicht nur die Ausführung des NASA Logos – bekannt unter dem Spitznamen “the worm” – detailliert beschrieben, sondern auch dessen Applikation auf Spaceshuttle und den Arbeitsuniformen der Belegschaft.

Im Zeitalter des Internets gewann das Konzept der Pattern Libraries, also die Sammlung von wiederverwendbaren Interface-Komponenten, immer mehr an Popularität. Da Websites und digitale Produkte  immer komplexer wurden, entwickelte Brad Frost die Atomic Design Methode – und lieferte damit ein umfassenderes Verständnis für Design Systeme.

Meist wird der Begriff Pattern Library und Design System gleichgesetzt, prinzipiell gibt es jedoch einen entscheidenden Unterschied. Ein Design System ist eine Sammlung von Design-Elementen und Interface-Komponenten, die klaren Guidelines (Standards) und Gestaltungsprinzipien folgen. Das Design System ist somit ein Regelbuch, das die Zusammenhänge der verschiedenen Elemente untereinander definiert, das aber auch jederzeit erweitert werden kann.

Ein Design System soll nicht einfach nur eine Sammlung von beschriebenen Interface-Komponenten sein. Ein gutes Design System zeigt auf, wie unterschiedliche Design Patterns in realen Produkten angewendet werden und wie diese für unterschiedliche Anwendungsfälle erweitert wurden. Um ein effektives Design System zu erstellen, bedarf es drei Bestandteilen:

Foundations

Beinhalten grundlegende Stilelemente des Design Systems, wie beispielsweise Farben, Typografie, Raster und Icons, die aus meist zuvor definierten Corporate Design Guidelines übernommen werden können.

Components

Sind wiederwendbare Interface Komponenten, wie beispielsweise Buttons, Tabs, Input Felder, Kontrollkästchen und Paginierung, die anhand der grundlegenden Stilelemente erstellt werden.

Guidelines

Sind Regeln und Empfehlungen, wie zum Beispiel Accessibility Richtlinien, Design Patterns und Prinzipien, die den Einsatz, Erstellung und Erweiterung von Design Elementen dokumentieren und anleiten.

Das Erstellen und Implementieren eines Design Systems, das unternehmensweit genutzt werden kann, ist eine der besten Investitionen, von der Unternehmen unterschiedlicher Größe und Branchen profitieren können. Denn durch ein Design System haben die Teams mehr Zeit, um sich auf Kundenbedürfnisse zu fokussieren und dadurch bessere Produkte zu entwickeln.

Durchgängiges Markenerlebnis

Holistisches Design kann Nutzungs- und Kaufentscheidungen von Kunden über Produkte und Plattformen hinweg beeinflussen. Die Wiedererkennbarkeit hilft dabei eine emotionale Bindung des Kunden zur Marke aufzubauen und kann vor allem durch einen einheitlichen Markenauftritt erzielt werden. In den meisten Unternehmen gibt es jedoch eine Vielzahl an Guidelines und Frameworks die von unterschiedlichen Teams genutzt werden. Daher ist es oft schwierig ein konsistentes Markenerlebnis zu erreichen.

Design Systeme schaffen Transparenz über Teams hinweg und dienen dadurch als “single point of truth”. Dies hilft den unterschiedlichen Teams beim Erstellen von digitalen Produkten wie Apps, E-Commerce-Portalen und Websites. Und: Sie garantieren durch die zentralistische Sammlung von Design-Elementen und Guidelines ein durchgängiges Markenerlebnis.

Höhere Effizienz und bessere User Experience

Ein Design System ermöglicht es unterschiedlichen Teams innerhalb des Unternehmens, bessere Produkte schneller zu entwickeln. Wie? Indem Komponenten wiederverwendbar gemacht werden. Diese Standardisierung erhöht die Effizienz beim Entwickeln und Designen durch das Eliminieren von wiederholenden oder doppelten Arbeiten. Zudem schaffen standardisierte Komponenten leicht verständliche Anwendungen. 

Höhere Effizienzen haben daher nicht nur zur Folge, dass eine Menge Geld in der Umsetzung und Verbesserung neuer Produkte gespart wird, sondern auch mehr Zeit für die Entwicklung einer besseren User Experience verwendet werden kann.

Neue Produkte und Ideen schneller testen

Mit einem bestehenden Design System können mehrere Teams gleichzeitig ihre Ideen und Produkterweiterungen in kurzer Zeit in einem Prototypen abbilden, um mit diesen zu experimentieren. Diese Vorgehensweise ermöglicht es schneller Erkenntnisse und Daten aus Nutzertests zu sammeln, um dadurch die Benutzererfahrung stetig zu verbessern, oder neue Produktideen zu validieren.

Der einfachste und schnellste Weg ein Design System zu erstellen, gelingt, wenn auf Komponenten eines bereits bestehenden und ausgereiften Produktes – wie etwa die Unternehmenswebsite oder Unternehmens App – zurückgegriffen werden kann. Diese Design-Komponenten haben bereits eine Freigabe erhalten und können ohne langwierige Diskussionen und Abstimmungen in die Sammlung aufgenommen werden. 

Natürlich ist es auch möglich mit dem Design System zu starten, wenn ein neues Produkt erstellt, oder überarbeitet wird. Unser Tipp: Nur Interface-Elemente in das Design System übernehmen, die den Freigabeprozess bereits durchlaufen haben.

Diese initiale Sammlung an Komponenten sollte mit einem Minimum an Dokumentation erweitert werden, denn sonst ist es kein Design System. Mindestens enthalten sein sollte eine Definition der Komponenten, Do’s und Don’ts, sowie Regeln für die Barrierefreiheit.

Ein Design System entsteht nicht von heute auf morgen. Dennoch empfehle ich jedem Unternehmen sich mit dem Thema auseinander zu setzen, da es nicht nur mehr Transparenz und Effizienz in den Design- und Umsetzungsprozess bringt, sondern auch die Qualität des Marken- und Nutzererlebnis maßgeblich verbessert.