Design Systeme & Konsistenz im UI

Einfach nur ein neuer Trendbegriff oder tatsächlich effektives Mittel zum Zweck? Seit neuestem macht die Idee der Design Systeme unter den UX und UI Designer*Innen die Runde. Ein System, welches sämtliche gestalterischen Komponenten einer Marke in einem zugänglichen Pool festhalten soll. Anschließend an die Erstellung einer Pattern Library, bedeutet das etwa, die komplette Arbeit über den Haufen zu werfen und wieder bei 0 anfangen zu müssen, um den Zeitgeist gerecht zu werden? Natürlich nicht. Denn Design Systeme repräsentieren vielmehr die Modifikation dieses Konzepts.

Ein gut durchdachtes Design System vermeidet Komplexität

Es steht außer Frage, dass Design Systeme Parallelen zu verwandten Konzepten wie der Pattern Library oder dem klassischen Styleguide aufweisen. Die Arbeit richtet sich so zunächst auf die einheitliche Gestaltung verschiedener Anwendungen aus. Statt der einfachen Sammlung von Design- und Interface-Komponenten bieten Design Systeme hingegen genaue Konfigurationsanweisungen. Die Umsetzung in der Praxis ermöglicht es dabei nicht nur unternehmensintern Entwicklungsprozesse zu vereinfachen, sondern auch die User Experience für den Nutzer nachhaltig zu unterstützen.

Welche Elemente gehören in den Pool?

Ein Design System fasst sämtliche Bausteine des Corporate Designs in einem Pool zusammen. Insofern können die festgelegten Richtlinien in puncto Design auch auf Arbeitsbereiche wie das Marketing angewendet werden und den einheitlichen Markencharakter unterstützen.

Neben den basalen Elementen sowie den entsprechenden Guidelines zur Umsetzung, spielt natürlich auch das Überführen dieser Bausteine in ein digitales Format eine ausschlaggebende Rolle. Einen hilfreichen Einstieg könnte an dieser Stelle der Ansatz des Atomic Designs bieten. Die Unterteilung der Interface-Komponenten in Atom, Molekül und Co. ermöglicht es dabei, die Elemente à la LEGO-Baukasten in die Anwendung einzubinden.

Wie lässt sich ein Design System umsetzen?

Ähnlich wie bei der Umsetzung eines Styleguides sollte sich zunächst vor Augen geführt werden, welche Markenbotschaft über das Design System kommuniziert werden soll. Ist folglich bereits eine Anwendung im Umlauf, lässt sich diese Basis optimal nutzen, um aktuelle Elemente auf ihre Tauglichkeit zu prüfen. Übrig bleibt im Anschluss die selektierte Design-Sprache der Marke. Diese umfasst Faktoren wie die Anordnung und Größe der einzelnen Bausteine, die favorisierten Fonts, das Farbspektrum und die Bildauswahl umfasst.

Diese bildet im nächsten Schritt wiederum die Basis für die Erstellung einer Pattern Library – womit sich auch die Frage der Begriffsabgrenzung beantworten lässt. Während Design Patterns mehr der Kollektion einzelner Bausteine einer Marke verschrieben sind, liegt der Mehrwert eines Design Systems darin, darüber hinaus genaue Instruktionsanweisungen zum Einsatz und zur Umsetzung dieser Bausteine offenzulegen. Der Zugang zu solchen Designpools steht dabei oftmals nicht nur intern dem Team zur Verfügung. Auch interessierte User haben Zugriff.

Von den Großen lernen – das Beispiel Audi

Ein schönes Beispiel in Sachen gelungene Umsetzung eines Design Systems bietet der Automobilhersteller Audi. Auf der Grundlage einer simplen Einführung in die Basics des User Interface stützt sich das Design System vor allem auf die Paradigmen der User Experience wie beispielsweise Konsistenz und Persönlichkeit. Darüber hinaus werden genaue Bauanleitungen für das Responsive Design und dem Einsatz auf verschiedenen Endgeräten angeboten, die einzelnen UI-Komponenten und Icons vorgestellt und sogar die Bewegungsabläufe für Animationen festgelegt.

Audi bietet, wie es für ein Großunternehmen nicht anders zu erwarten ist, selbstverständlich ein Musterbeispiel für die Umsetzung eines konsistenten Design Systems. Das Anlegen einer solchen gestalterischen Bibliothek erfordert allerdings Zeit und Geduld. Ein komplettes Design System muss nicht, ähnlich einem Design Sprint, in einem Zeitfenster von einer Woche erstellt werden. Ziel des Konzepts ist es vielmehr, ein Pool langfristig einsetzbarer, konsistenter und vor allem repräsentativer Designs darzubieten. Es empfiehlt sich also, die Entwicklung schrittweise und dennoch präzise voranzutreiben. Sobald diese Etappe allerdings geschafft ist, kann eine Marke langfristig vom Mehrwert eines Design Systems profitieren.