Erfolgsfaktor: Design-Systeme

Viele Ansätze und Prozesse der digitalen Welt sind aus der Not heraus geboren. Wir sind immer auf der Suche nach einem Weg, etwas reibungsloser und effizienter zu machen, um etwas von höherem Wert zu schaffen. In der Welt des digitalen Designs gewinnt dieses Konzept jeden Tag mehr an Bedeutung. Ein Design-System ist ein systematischer Ansatz für die Produktentwicklung. Entwickelnde und Designer können ein Design-System gleichermaßen nutzen, um schnell hochfunktionale und kohärente Software zu entwickeln.

Was ist ein Design-System?

Ein Design-System ist ein Werkzeug und ein Rahmenwerk mit klaren Regeln, Prinzipien und wiederverwendbaren Komponenten – etwa Formulare, Tabellen oder Buttons – die zusammen bestimmen, wie ein Team ein Produkt entwirft. Es ist eine lebendige Bibliothek von Styles, Code und Arbeitsbeispielen, die als “Single Source of Truth” dient. Der Zweck eines Design-Systems besteht darin, die Produktentwicklung zu systematisieren und Prozesse festzulegen, um die Designpraxis zu skalieren, die Notwendigkeit der Übergabe zu reduzieren und die Zusammenarbeit im Team zu fördern.

Die Bausteine eines Design-Systems

Im Gegensatz zu einem Styleguide oder einer Pattern Library setzt sich ein Design-System nicht nur aus einer Anzahl von wiederverwendbaren User-Interface-(UI)-Bausteinen zusammen, sondern beschreibt, wie die Designsprache der Marke angewendet wird und dadurch eine unvergleichliche User Experience (UX) entsteht.

Grundlegend lässt sich ein Design-System in zwei Bereiche einteilen. Zum einen verfügt ein Design-System über einen abstrakten Teil. Diese Facette des Design-Systems umfasst die Prinzipien und Guidelines, welche die strategisch-gestalterische Ausrichtung der Marke vorgeben.

Vervollständigt wird ein Design-System durch einen konkreten Bestandteil, der alle UI-Komponenten beinhaltet. Hierzu zählen Markenelemente (wie Logos oder Claims) und grafische Komponenten, welche auf Basis des Atomic-Design-Prinzips entwickelt werden.

Die Bedeutung eines Design-Systems

Ein Design-System bietet eine bessere User Experience

Design-Systeme entlasten das Erlernen potenziell komplizierter Software. Konsistente Komponenten sowie deren Verhalten schaffen eine positive User Experience mit erkennbaren Mustern. Ein Beispiel für konsistentes Komponentenverhalten ist ein „Weiter-Button“ am unteren Rand einer Seite, der den User in der Regel auf die nächste Seite weiterleitet. Es wird erwartet, dass diese Aktion in allen Anwendungen gleich ist. Durch diese Konsistenz ist das UI einfacher zu verstehen und zu verwenden, was wiederum die kognitive Belastung reduziert und die UX für den Anwendenden verbessert.

Ein Design-System beschleunigt den Design- und Entwicklungsprozess

Verschiedene Teams eines Unternehmens können aus vorkonfigurierten Komponenten mit integrierten Back-End-Funktionen auswählen. Dies bedeutet, dass alle Suchkomponenten ähnlich funktionieren und alle „Senden-Buttons“ gleich funktionieren. Die zugrunde liegende Logik und der assoziierte Code sind definiert und wiederverwendbar, so dass keine manuelle Codierung erforderlich ist. Ein Design-System befreit auch davon, Layout-Probleme auf Oberflächenebene wiederholt zu lösen. Dadurch wird ein höherer Designreifegrad erreicht.

Ein Design-System ist die Brücke zwischen Design und Entwicklung

Durch die Verwendung eines Design-Systems wird die Technologie für nichttechnische Stakeholder zugänglicher. Ein Design System stellt sicher, dass Entwickelnde, Designer und Stakeholder dieselbe visuelle Sprache sprechen. Dies ermöglicht einen besseren Dialog zwischen Unternehmens- und Technologiegruppen.

Der Aufbau eines Design-Systems

Die Entwicklung eines stabilen und effizienten Design-Systems erfordert eine funktionsübergreifende Zusammenarbeit. In einem großen Unternehmen besteht das Team aus UI-Designern, Entwickelnden, UX-Designern/Researchern, Accessibility-Fachleuten und Content-Strategen, die alle von einem Design-Projektmanager geleitet werden. Das Team sollte in Workshops zur Anforderungserhebung Input zu den Projektzielen, dem Technologie-Stack, der Roadmap, der High-Level-Timeline und der Priorisierung der verschiedenen Aufgaben bekommen. Sobald das Minimum Viable Product fertig ist, identifiziert das Team ein Pilotprojekt, um die Effektivität des Design-Systems zu testen und Änderungen auf Basis des Feedbacks vorzunehmen.

Da sich ein Design-System ständig weiterentwickelt, ist es mit vielen Herausforderungen verbunden. Risiken werden minimiert, indem eine klare und präzise Dokumentation verfügbar ist. Alle Elemente müssen an einem Ort abgelegt sein und dieser muss allen Projektmitgliedern leicht zugänglich sein. Des Weiteren müssen plattformunabhängige Komponenten gebaut, die Leistung der Komponenten ständig überprüft und über mehrere Geräte hinweg getestet werden.

Die Architektur der UI-Pattern-Library kann ebenfalls eine Herausforderung darstellen. Als Lösung kann das Befolgen des Atomic-Design-Prinzips helfen. Die grundlegenden Designelemente des Atomic-Designs, das zuerst von Brad Frost geprägt wurde, bestehen hauptsächlich aus 3 Elementen: Atome, Moleküle und Organismen. Wenn sie zusammengefügt werden, gewährleisten die Designelemente Konsistenz und ermöglichen eine unbegrenzte Skalierbarkeit des Design-Systems.

Atome sind die Grundbausteine der Materie, mit eindeutigen Eigenschaften, die nicht weiter aufgeschlüsselt werden können, ohne ihre Bedeutung zu verlieren. Um einen Mehrwert zu schaffen und nützlich zu sein, müssen sie wie Legobausteine zusammenpassen. Im Sinne des Design-Systems sind Schriftarten, Farben und Typografie allesamt unabhängige Komponenten (oder Atome), die erst dann nützlich werden, wenn sie zusammengefügt werden.

Moleküle sind Gruppen von Elementen (oder Atomen), die zusammen als eine Einheit funktionieren. In einem Design-System können Moleküle eine beliebige Anzahl von Elementen sein, von Fragetexten und Bestätigungsschaltflächen bis hin zu einer Suchfunktion mit einem Formularelement und einer Schaltfläche.

Organismen sind Gruppen von Molekülen und Atomen, die miteinander verbunden sind und eine komplexere Struktur bilden. Angewandt auf ein Design-System könnte dies ein einzelner Abschnitt einer Oberfläche sein, der eine Datumsauswahl, die Formularelemente, Text, Zahlen, Stile, Berechnungen und Navigationsschaltflächen enthält.

Eine Gruppe von Organismen, die zusammenarbeiten, bildet ein Template, in dem etwas Konkretes, wie ein Layout, für den Endbenutzer sichtbar wird. Und schließlich sind Seiten einzigartige Instanzen, die die Template-Platzhalter durch echte Inhalte ersetzen.

Wie alle Organismen durchläuft auch ein Design-System einen iterativen Prozess und ist wie ein lebendes Dokument. Das Testen und Sammeln von Feedback, sowohl vom Team als auch von Endnutzern, hilft dabei, die langfristige Gesundheit und Relevanz eines Design-Systems zu fördern. Durch die Bereitstellung einer soliden Grundlage tragen Design-Systeme dazu bei, die Effizienz und Geschwindigkeit zu verbessern, mit der Unternehmen heute und in Zukunft ansprechende Produkte für Kunden entwickeln können.

Braucht eure Software ein Design-System? Ja!

Das Erstellen und Einführen von groß angelegten, komplexen Anwendungen ohne ein Design-System ist Vergeudung von Ressourcen. Jedes Mal, wenn eine Interaktionserfahrung geschaffen wird, wird diese vom Grunde auf neu gebaut. Warum sollte Zeit damit verbracht werden, dieselben Komponenten und Funktionen zu bauen, die ein Team bereits vor drei Jahren entwickelt hat? Mit einem Design-System bleibt genügend Zeit, um sich auf das Wesentliche konzentrieren zu können: die User Experience.

Modular. Responsiv. Kollaborativ. Die logische Konsequenz der digitalen Welt. Ein Design-System hilft, dieser Komplexität besser zu begegnen.

Ihr möchtet gern mehr über spanneden Themen aus der adesso-Welt erfahren? Dann werft doch auch einen Blick in unsere bisher erschienenen Blog-Beiträge.