Was ist ein Design System, und brauche ich eins?
Design Systeme ermöglichen nicht nur eine einheitliche User Experience, sondern sparen auch Geld. Das einzige Problem: Es bestehen viele Unklarheiten darüber, was ein Design System denn genau ist. Und ein Versuch, es zu erklären, wirft erst einmal weitere Fragen auf. Nicht zuletzt: «Ist ein Design System die richtige Lösung für meine UX- und UI-Bedürfnisse?»
Ein Design System ist eine koordinierte Sammlung miteinander verbundener Grundsätze, Muster und Methoden, die dazu da sind, ein digitales Produkt zu erarbeiten und nachhaltig aufrechtzuerhalten.
Das klingt erst einmal ziemlich abstrakt, aber keine Sorge: Beginnen wir mit den konkreten Bausteinen eines Design Systems, seiner Muster. Ein Muster oder Pattern ist ein wiederverwendbares Arrangement oder Layout, das sich aus individuellen UI-Komponenten wie zum Beispiel Buttons, Fonts und Farben zusammensetzt. Eine Sammlung solcher Muster oder Komponenten wird als Pattern Library respektive Component Library bezeichnet.
Es ist einfach, ein Design System mit einer solchen Library zu verwechseln. Schliesslich beinhaltet die Library das Baumaterial für das Endprodukt. Aber ein Design System ist keine statische Sammlung von Bausteinen, und eine Pattern- oder Component Library ist nur ein Teil des Systems, und nicht das System selbst.
Welche Herausforderungen löst ein Design System?
Stell dir vor, du stehst vor einer Kiste voller Lego-Steine mit dem Ziel, ein Häuschen zu bauen. Um dich herum sind andere mit derselben Aufgabe beschäftigt und haben dazu exakt dasselbe Material zur Verfügung. Am Schluss kommt eine ganze Nachbarschaft aus originellen Gebäuden zusammen. Doch die Teile fügen sich nicht zu einem sinnvollen Ganzen zusammen. Wieso steht eine Fabrik mitten im Wohnviertel? Und wer ist verantwortlich für den venezianischen Palast direkt neben der Primarschule?
Eine einfache Anleitung könnte für Konsistenz sorgen, löst das Problem aber nicht. Schliesslich wird so immer wieder nur exakt das Gleiche reproduziert. Was, wenn ihr ein ganzes Städtchen bauen wollt, das fortlaufend um unterschiedliche Viertel und Nachbarschaften erweitert werden soll?
Gute Kommunikation und einige Regeln schaffen bereits etwas Abhilfe. Vielleicht kreiert ihr eine Art Styleguide, um ein einheitliches Erscheinungsbild zu sichern. Zum Beispiel: Jedes Gebäude darf nur Bausteine derselben Farbe enthalten. Nur grüne Häuser haben ein Schrägdach. Gelbe Steine werden nicht für Gebäude verwendet, sondern nur für Strassen.
Doch auf welchen Grundsätzen basieren diese Regeln? Welche Ziele verfolgen sie? Und wenn neue Bausteine nötig werden, wer bestimmt dann, was in den Baukasten darf und was nicht, und aufgrund welcher Richtlinien? All das wird durch ein Design System geregelt.
Was kurzfristig nach viel Aufwand klingt, spart in Zukunft viel Geld, Zeit und Nerven: Neu gesetzte Bausteinchen müssen nicht mehr jedes Mal wieder von Grund auf durchdacht und diskutiert werden. Ein gut gepflegtes Design System nimmt uns nicht nur diese Arbeit ab, sondern verhindert effektiv Inkonsistenzen im Produktdesign, Schwierigkeiten bei der Skalierbarkeit sowie Streitigkeiten im Team aufgrund ungeklärter Verantwortungen.
Es wird klar, dass ein Design System eben nicht ein fertiges, statisches Produkt ist, sondern ein dynamisches System, das sich durch die Kapazität definiert, zu wachsen und neue Module zu produzieren, zu kombinieren und in das bestehende System zu integrieren.
Dies erlaubt es, Bestehendes auszubauen und Neues hinzuzufügen, während die visuelle Identität der digitalen Produkte erhalten bleibt. Somit ist ein Design System eine langfristige Lösung, welche Plattform- und Team-übergreifend kohärente User Interfaces und damit eine einheitliche und verlässliche User Experience ermöglicht. Und so gerade bei mehreren Produkten den Zeitaufwand für Kommunikation und Absprachen stark reduziert.
Ist ein Design System ein Baukasten, oder doch eher ein Fussballspiel?
Ein Design System ist eben mehr als nur ein Lego-Baukasten. Unser Head of Product Design Philippe Meier meint, dass in diesem Vergleich das System nicht nur Baukasten und Anleitung, sondern auch gleich die Fabrik beinhaltet, welche diese nach bestimmten Vorlagen produziert. Dieses Bild betont einerseits automatisierte Produktivität und andererseits den kreativen Aspekt eines Design Systems.
Solche Vergleiche und Metaphern können enorm helfen, die Komplexität von Design Systemen einzufangen und greifbar zu machen. Und je nachdem, wen man fragt, erhält man eine andere Antwort, die eine Perspektive auf das Ganze aufzeigt.
Für unseren Frontend-Entwickler Fabrice Tobler zum Beispiel ist ein Design System vergleichbar mit dem Fundament eines Hochhauses. In anderen Worten: Bevor ein stabiles Gebäude errichtet werden kann, muss erst einmal ein Fundament her. Das Hochhaus-Bild betont die Bedeutung der Ausgangssituation und des Prozesses, in dem jeder Schritt (oder Stock) sauber auf den nächsten folgen muss.
Unser Senior Digital Product Designer Marco Huber hingegen betont eine spielerische Facette. Für ihn ist ein Design System wie ein Fussballspiel: Das Spielfeld sind die Parameter des Systems, die Spielregeln die Leitsätze. Alle Handlungen darin laufen (im Idealfall) innerhalb dieses klar definierten Rahmens. Dieser Vergleich zeigt die Perspektive von Innen und des Teams, das innerhalb eines lebenden Systems dynamisch — und auch spielerisch — agiert.
Die versatile Kreativität eines Lego-Baukastens, die verlässliche Stabilität eines Fundaments, die spielerische Dynamik eines Fussballspiels: Alle diese Aspekte finden sich, in unterschiedlicher Ausprägung, in einem guten Design System wieder.
Die Bedeutung einer «shared language» für Design Systeme
Grundlegend für den Erfolg eines Design Systems sind gute Kommunikation und die Pflege einer «shared language». Indem in einem ersten Schritt unterschiedliche Auffassungen klar kommuniziert werden, kann ein gemeinsames Verständnis und eine «shared language» mit einer klar definierten Terminologie geschaffen werden. Das ist ein zentraler Faktor in der Pflege einer nachhaltigen Kultur der Kommunikation, Zusammenarbeit und Konfliktlösung, die zu einem gesunden und effizienten Design System führt.
Einfacher gesagt: Ob eine Komponente des Design Systems nun «Lego» oder «Fussball» genannt wird, ist weniger relevant, als dass alle im Team dieselbe Vorstellung davon haben, was genau damit gemeint ist und wie ein spezifischer Begriff gewählt wurde. Genau weil ein Design System ein lebendiges, wachsendes System basierend auf wiederverwendbaren und immer wieder neu rekonfigurierbaren Elementen ist, ist klare Kommunikation so wichtig. Denn Missverständnisse wachsen mit dem Rest des Systems mit und vermehren sich, bis das System ins Wanken kommt.
Umgekehrt führt die Pflege einer guten Kommunikationskultur und einer eindeutigen Terminologie zu einem Design System, das unbeschränkt wachsen kann und dabei weder Robustheit noch Flexibilität einbüsst.
Design System: Die Lösung für deine UX/UI-Bedürfnisse?
Besteht die Chance oder Absicht, dass euer Vorhaben in Zukunft über mehrere Teams, Produkte oder Marken hinauswächst? Dann ist ein Design System die nachhaltigste Lösung. Bei begrenzten Plänen hingegen — etwa der Entwicklung einer einzelnen Webseite — können sich die Stärken eines Design Systems nicht voll entfalten. In diesem Fall ist eine bescheidenere Lösung wie zum Beispiel eine Component-Library zielführender.
So oder so ist es wichtig, sich in einem ersten Schritt gemeinsam mit Expert:innen mit der Frage auseinanderzusetzen, welche Herausforderungen oder Bedürfnisse anstehen und welche Lösungen am besten dazu passen.
Benötigst du Unterstützung oder Beratung bei der Entscheidungsfindung? Unsere Expert:innen stehen bereit für ein unverbindliches Kennenlernen. Wir freuen uns auf deine Email an hello@dreipol.ch!
Mehr über Design Systeme erfährst du hier:
https://www.nngroup.com/articles/design-systems-101/
Vielen Dank fürs Liken und Teilen!
Nichts mehr verpassen? Abonniere unseren Newsletter und folge uns auf LinkedIn.
