Thomas Schulz•22.04.2022•6 min Lesezeit

Was ist ein Design System?

Ein Design System ist eine Sammlung von wiederverwendbaren Komponenten. Die Komponenten unterliegen allgemeingültigen Standards und Regeln. Durch die Verwendung der Komponenten unter Einhaltung der Regeln werden Applikationen mit einem konsistenten Aussehen und einem einheitlichen Benutzererlebnis entwickelt.

Und wie sieht so ein Design System aus?

Ein Design System ist mehr als der moderne Begriff für Guidelines. Ein Design System definiert sich aus dem Dreiklang der folgenden Module:

Dokumentation

Die Dokumentation beschreibt in Form von Guidelines alle Komponenten und Patterns. Sie beschreibt ihre Zusammensetzung, ihr Verhalten und ihre Interaktion und leitet daraus allgemeingültige Standards ab. Die Dokumentation ist der zentrale Access Point um auf die übrigen Module des Design Systems zuzugreifen.

Design Resources

Design Resources sind Arbeitsdokumente für Designer und Business Analysten. Mit ihnen werden anhand bestehender Komponenten Konzepte, Screendesigns und Prototypen für Ihre Applikationen erstellt. Sie sind gleichzeitig Vorlage für Ihre Frontend-Entwickler um die Applikation zu bauen und neue Komponenten zu entwickeln. Alle Komponenten in den Design Resources sind wiederverwendbar und nutzen Layer-Styles. Grundlegende Designentscheidungen, wie Änderungen an Typografie oder Farbe, werden zentral getroffen und übertragen sich automatisch auf alle Instanzen in allen Screendesigns. Auf dem Markt gibt es zwischenzeitlich viele Tools, alle mit Ihren Vor- und Nachteilen, welche die Basisanforderungen erfüllen. Mit Ihren Anforderungen finden wir gemeinsam das richtige Tool für Sie!

Code Resources

Code Resources sind fertig entwickelten Komponenten als Code. Mit ihnen wird das Frontend Ihrer Applikation aufgebaut. Alle Code Resources werden als Komponenten-Library zentral auf einer Plattform bereitgestellt mit Codebeispielen und einer Dokumentation ihrer Properties. Alle Komponenten in den Code Resources sind wiederverwendbar und nutzen Variablen bzw. Tokens. Grundlegende Designentscheidungen, wie Änderungen an Typografie oder Farbe, werden zentral getroffen und übertragen sich automatisch auf alle Komponenten in allen entwickelten Applikationen.

Die Qualität des Design System zeichnet sich durch die Verwendung einer einheitlichen Sprache aus. Variablen, Tokens, Styles und sonstige Benennungen sind in allen Modulen identisch. Damit das Design System sein volles Potenzial ausschöpfen kann, sollten außerdem die folgenden Aspekte erfüllt sein:

Zentralisiert

Das Design System – und NUR das Design System – ist die Single Source of Truth.

Zugänglichkeit & Kollaboration

Ob Mitarbeiter, CEOs, Kunden oder externe Dienstleister – Jeder partizipiert am Design System und wird gleichzeitig davon profitieren.

Skalierbar

Das Design System ist ein lebendiges Ökosystem. Die Bestandteile des Design Systems können auf Veränderungen schnell und einfach reagieren und mit den richtigen Prozessen und Workflows, finden alle Änderungen und Neuerungen ihren Weg in das Design System und das ohne Wildwuchs, klar und strukturiert.

Unterschiedliche Frontend-Frameworks, also viele redundante Komponenten Libraries?

In Ihrer Frontend-Landschaft verwenden Sie verschiedene Frameworks wie Angular, Vue.js oder React? Da stellt sich schnell die Frage: Müsse Sie nun mit einem Design System für jedes Framework individuell eine eigene Komponenten Library aufbauen oder den Weg der Einheit gehen und nur noch ein einziges Framework nutzen? Die Antwort auf diese Frage ist keine unbequeme Entscheidung, sondern eine dritte vielversprechende Lösung: Web Components. Web Components sind universell einsetzbar und lassen sich in den bekannten Frameworks problemlos integrieren. Gerne beraten Sie unsere Kollegen aus der Binarystate GmbH näher über Web Components und über die Entwicklung einer Komponenten Library.

Design System – nur ein Hype?

Wiederverwendbare Komponenten sind keine Neuheit. In unseren Design Tools nutzen wir diese täglich um so effizient auf Veränderungen im Gestaltungsprozess zu reagieren. Bereits 2016 beschrieb Brad Frost in seinem Buch Atomic Design das Prinzip ein User Interface in einzelne Bestandteile zu zerlegen und verglich diese Bestandteile mit den Organisationsebenen des Lebens (Atom, Molekül, Organismus). Design Systeme gewinnen zunehmen an Popularität, dies zeigen neben zahlreichen Veröffentlichungen und Artikel zum Thema auch die wachsende Anzahl an öffentlichen Design Systemen von großen Marken wie Atlassian, Audi, Porsche u.v.m. Für uns sind Design Systeme nicht nur ein Hype. Für uns sind Design Systeme einer der größten Design Trends und Notwendigkeiten in einem Zeitalter, in welchem User Experience und gutes Design in nahezu allen Bereichen der Digitalisierung rasant an Bedeutung gewinnen.