Designsystem

Im Bereich des User-Interface-Designs ist ein Designsystem ein umfassendes Framework aus Standards, wiederverwendbaren Komponenten und Dokumentation, das die konsistente Entwicklung digitaler Produkte innerhalb einer Organisation steuert. Es dient Designern und Entwicklern als zentrale Informationsquelle und gewährleistet so Konsistenz und Effizienz über alle Projekte hinweg. Ein Designsystem kann Folgendes umfassen: Muster- und Komponentenbibliotheken; Styleguides für Schriftart, Farbe, Abstände, Komponentenabmessungen und Platzierung; Designsprachen , codierte Komponenten, Markenrichtlinien und Dokumentation. Designsysteme unterstützen die Gestaltung und Entwicklung digitaler Produkte wie mobiler Anwendungen ^{[ 1 ]} oder Websites.

Ein Designsystem dient als Referenz, um ein gemeinsames Verständnis zwischen Design-, Entwicklungs- und Produktteams zu schaffen. Dieses Verständnis gewährleistet eine reibungslose Kommunikation und Zusammenarbeit zwischen den verschiedenen Teams, die an der Entwicklung und Herstellung eines Produkts beteiligt sind, und führt letztendlich zu einer konsistenten Benutzererfahrung. ^{[ 2 ]}

Zu den bekanntesten Designsystemen gehören das Lightning Design System (von Salesforce), ^{[ 3 ]} Material Design (von Google), ^{[ 4 ]} Carbon Design System (von IBM), ^{[ 5 ]} und das Fluent Design System (von Microsoft). ^{[ 6 ]}

Zu den Vorteilen eines Designsystems gehören:

• Optimierter Design- und Produktionsablauf.
• Schafft eine einheitliche Sprache zwischen und innerhalb der funktionsübergreifenden Teams.
• Schnellere Builds durch wiederverwendbare Komponenten und gemeinsame Logik.
• Bessere Produkte durch ein stimmigeres Nutzererlebnis und eine einheitliche Designsprache.
• Verbesserte Wartung und Skalierbarkeit durch Reduzierung von Konstruktions- und technischen Schulden.
• Stärkere Fokussierung der Produktteams durch die Bewältigung häufiger Probleme, damit sich die Teams auf die Erfüllung der Nutzerbedürfnisse konzentrieren können. ^{[ 7 ]}

Designsysteme werden unter verschiedenen Bezeichnungen schon lange praktiziert. Sie spielen seit ihrer Entstehung eine bedeutende Rolle im Designbereich und wurden seither vielfach weiterentwickelt und verbessert. Die Verwendung von Systemen oder Mustern, wie sie in den 1960er Jahren genannt wurden, wurde erstmals von Christopher Alexander auf der NATO Software Engineering Conference (einer Diskussion über die Softwareentwicklung) erwähnt und erregte damit die Aufmerksamkeit der Industrie. In den 1970er Jahren veröffentlichte er zusammen mit Murray Silverstein und Sara Ishikawa das Buch „A Pattern Language“, in dem die miteinander verbundenen Muster in der Architektur auf einfache und verständliche Weise erläutert wurden. Dies war die Geburtsstunde dessen, was wir heute als „Designsysteme“ kennen.

Das Interesse am digitalen Bereich erlebte in der zweiten Hälfte der 1980er Jahre einen erneuten Aufschwung, da dieses Werkzeug in der Softwareentwicklung eingesetzt werden sollte ^{[ 8 ]} , was zur Entstehung des Konzepts der Software-Entwurfsmuster führte . Da sich Muster am besten in einer kollaborativen Bearbeitungsumgebung pflegen lassen, führte dies zur Entwicklung des ersten Wikis , aus dem später Wikipedia selbst hervorging . Es wurden regelmäßig Konferenzen abgehalten, und bereits damals wurden Muster zur Gestaltung von Benutzeroberflächen verwendet ^{[ 9 ]} . Der Aufschwung hielt bis weit in die 1990er Jahre an, wobei Jennifer Tidwells Forschung das Jahrzehnt abschloss ^{[ 10 ]} . Das wissenschaftliche Interesse hielt bis in die 2000er Jahre hinein an ^{[ 11 ] .}

Das Interesse an Mustersprachen für UI-Design erfuhr 2006 mit der Veröffentlichung der Yahoo! Design Pattern Library ^{[ 12 ]} und der gleichzeitigen Einführung der Yahoo! User Interface Library ( kurz: YUI Library ) einen erneuten Aufschwung. Ziel dieser gleichzeitigen Einführung war es, ein systematischeres Design zu ermöglichen als die reinen Komponenten, die die UI-Bibliothek bot.

Googles Material Design aus dem Jahr 2014 war das erste Designkonzept des Unternehmens, das als „Designsprache“ bezeichnet wurde (die Vorgängerversion hieß „Holo Theme“). Bald folgten andere diesem Beispiel.

Die technischen Herausforderungen groß angelegter Webprojekte führten in den 2010er Jahren zur Entwicklung systematischer Ansätze, insbesondere BEM ^{[ 13 ]} und Atomic Design. Das Buch über Atomic Design ^{[ 14 ]} trug seit 2016 maßgeblich zur Popularisierung des Begriffs „Designsystem“ bei. Es beschreibt einen komponentenorientierten Ansatz für die Gestaltung von Layouts digitaler Produkte, der zukunftssicher und leicht aktualisierbar ist.

Eine Mustersprache erlaubt es, dass ihre Muster in vielfältigen Formen und Ausprägungen existieren – beispielsweise ist ein Anmeldeformular mit Eingabefeldern für Benutzername und Passwort sowie Schaltflächen zum Anmelden, Registrieren und Wiederherstellen eines vergessenen Passworts ein Muster, unabhängig davon, ob die Schaltflächen grün oder lila sind. Muster werden genau deshalb als solche bezeichnet, weil ihre genaue Beschaffenheit variieren kann, Ähnlichkeiten jedoch dafür sorgen, dass die Beziehung zwischen ihnen (die sogenannte Konfiguration) gleich bleibt. Eine Designsprache hingegen verfügt stets über visuelle Richtlinien, die spezifische Farben und Typografie festlegen . Die meisten Designsysteme ermöglichen es, Elemente einer Designsprache (über ihre Muster) bedarfsgerecht zu konfigurieren.

Ein UI-Kit ist einfach eine Sammlung von UI-Komponenten, für deren Verwendung keine expliziten Regeln vorgegeben sind.

Ein Design-Token ist eine benannte Variable, die ein bestimmtes Designattribut speichert, beispielsweise eine Farbe, eine Typografieeinstellung, einen Abstandswert oder eine andere Designentscheidung. Design-Token dienen als zentrale Datenquelle für diese Attribute innerhalb einer Marke oder eines Systems und bieten zahlreiche Vorteile wie Abstraktion, Flexibilität, Skalierbarkeit und Konsistenz für große Designsysteme. Da Design-Token im Wesentlichen in Code ausgedrückte Designentscheidungen darstellen, verbessern sie zudem die Zusammenarbeit zwischen Designern und Entwicklern. Das Konzept der Design-Token findet sich in einer Vielzahl bekannter Designsysteme wieder, darunter Googles Material Design ^{[ 15 ]} , Amazons Style Dictionary ^{[ 16 ]} , Adobes Spectrum ^{[ 17 ]} und das Atlassian Design System ^{[ 18 ].}

Die W3C Design Tokens Community Group arbeitet an der Bereitstellung offener Standards für Design-Token. ^{[ 19 ]}

Ein Designsystem umfasst verschiedene Komponenten, Muster, Stile und Richtlinien, die die Designarbeit effizienter gestalten und optimieren. Zu den wichtigsten Faktoren bei der Erstellung eines Designsystems gehören der Umfang und die Reproduzierbarkeit der Projekte sowie die verfügbaren Ressourcen und die verfügbare Zeit. Werden Designsysteme nicht sachgemäß implementiert und gepflegt, können sie unübersichtlich werden und den Designprozess ineffizienter gestalten. Bei korrekter Implementierung hingegen vereinfachen sie die Arbeit, erhöhen die Kohärenz der Endprodukte und ermöglichen es Designern, komplexe UX-Herausforderungen zu meistern. ^{[ 20 ]}

• Was ist ein Designsystem? von Robert Gourley
• Design Systems Handbook von Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter und Roy Stanfield. (Design Better von InVision)
• Beitrag (auf Französisch): Warum ein Designsystem einrichten?
• Entwurfsmuster
• Beispielhafte Entwurfssysteme