Designsysteme – Vorteile und Nutzen einer einheitlichen Designsprache

Unabhängig davon, ob man nun eher von Entwicklung oder Disruption spricht, durch die Digitalisierung ändern sich auch die Relevanz und die Möglichkeiten, die Design bietet. Trotz dem Aufkommen neuer Touchpoints und neuer Devices soll die Kommunikation visuell einheitlich und Nutzererlebnisse konsistent bleiben.

Dies stellt sowohl für Designer als auch für Teams, die gemeinsam an digitalen Produkten arbeiten, eine enorme Herausforderung dar. Dabei bieten Designsysteme hierbei nicht nur einen hilfreichen Ansatz für Designteams, sondern liefern auch positive Effekte für Nutzer und Unternehmen.

Ursprung und Bedeutung

Der Mensch beobachtet, organisiert und strukturiert die Welt um sich herum seit jeher. Muster zu erkennen und ihnen Bedeutung beizumessen ist Teil unseres Denkens und erlaubt die vielseitige Kommunikation durch Mimik, Sprache und Schrift. Wenn man so will, macht das ‚menschliche Design’ den Mensch selbst zu einem geborenen Designer.

Die erste große Organisation hinsichtlich Kunst und Gestaltung, die den heutigen Designgedanken maßgeblich prägt, fand allerdings erst zu Beginn des 20 Jahrhunderts statt. Künstler wurden in dieser Zeit zunehmend zu Gestaltern und Designer und beschäftigten sich mit Standardisierung und sachlicher Formensprache. So wie bspw. Peter Behrens, der ab 1907 das erste Corporate Design für AEG erschuf. Die Strömung des Bauhauses, die sich zunächst stark auf Architektur und Produktdesign fokussierte, wandte den Ausspruch des amerikanischen Architekten Louis Henry Sullivan „form follows function“ dann erstmals konsequent an: Alle verwendeten Elemente sollten eine Funktion besitzen. Im Umkehrschluss sollte man von der Form eines Objektes auf seine Funktion schließen können.

Ausgehend von diesem Gedanken befassten sich mehr und mehr Designdisziplinen und Designtheoretiker mit Proportionen, Rastern, Farbtheorien und deren Bedeutung. Dadurch bildeten sie somit die Grundlage für weitere Bereiche des Designs, wie bspw. dem Kommunikationsdesign. So sind Corporate Design Styleguides, die heute bereits für viele Organisationen, Marken und Produkte existieren, eine logische Konsequenz dieser Entwicklung – liefern sie doch bereits Charakteristika und Muster, die eine homogene Unternehmenskommunikation ermöglichen.

Weiterentwicklung und Anforderungen eines modernen Designsystems

In der heutigen Zeit – geprägt vom technischen Fortschritt und dem digitalen Wandel, in einer Zeit, in der es darum geht, schnell zu agieren und noch schneller Innovationen voranzutreiben, müssen solche Styleguides jedoch weiter gedacht und vorangetrieben werden. Dies zeigt sich gerade bei der Entwicklung und Erstellung digitaler Produkte und Services.

Die Basis bilden hierbei einzelne visuelle Elemente, die – die nach dem von Brad Frost publizierten Atomic Design Prinzip – bspw. Atome, Moleküle und Organismen genannt werden. Atome sind in einem solchen System die kleinsten Elemente, wie etwa eine Schrift oder eine Farbe. Aber erst die Zusammenführung von Atomen zu Molekülen und schließlich zu Organismen bilden Funktionalitäten und Muster. Diese Komplexreduzierung sowie der schrittweise Aufbau eliminiert Differenzen und Redundanzen im System.

Ein umfassendes Designsystem besitzt aber nicht nur ästhetischen Elemente wie Raster, Layouts und Templates, sondern auch Code-Schnipsel und -Konventionen, Dokumentationen und Bewegungs- sowie Interaktionsvorgaben. Kurzum: Ein Designsystem beinhaltet alle Elemente und Standards, die es ermöglichen, ein über alle Kommunikationskanäle hinweg kohärentes digitales Produkt und/oder digitalen Service zu gestalten/erstellen. Die wichtigsten Anforderungen an ein Designsystem sind hierbei die Modularität und Wiederverwendbarkeit der Elemente sowie die Skalierbarkeit des Systems.

Nutzen & Vorteile

In einem Designsystem in seiner (derzeit) besten Form ist jedem UI-Element HTML-Code hinterlegt, auch CSS und javascript-Codeschnipsel sind möglich. Läuft dieses Designsystem synchron zum digitalen Produkt bzw. zu seiner Produktionsumgebung, lässt sich der Produktionsaufwand enorm minimieren.

Designer müssen sich dadurch nicht stets wiederholenden Aufgaben auf stetig neue Weise widmen (z.B. dem Gestalten eines Buttons), sondern können ihre Kreativität dazu nutzen, sich den wirklich neuen Herausforderungen zu stellen, die das digitale Produkt enthält.

Auch Entwickler, Interaction Designer und Product Ownern – also alle, die im Team gemeinsam an einem digitalen Produkt arbeiten – profitieren von einem Designsystem und werden dadurch entlastet, da auch sie von der Wiederverwendbarkeit profitieren sowie den Fokus auf die relevanten Anforderungen legen können.

Für Unternehmen bedeutet ein Designsystem im Umkehrschluss, dass ihre Teams mit einem Designsystem wesentlich effizienter arbeiten, da Zeit und Kosten eingespart werden können.

Doch auch auf die Nutzer wirkt sich das Vorhandensein eines Designsystems positiv aus, denn durchdachte Benutzeroberflächen mit visueller Konsistenz und einem einheitlichen Look and Feel erhöhen die Usability/Benutzerfreundlichkeit des Produktes und laden zur Kommunikation oder Conversion ein. Ein positives Nutzererlebnis in einem erwartungskonformen System – ganz gleich mit welchem Endgerät – sollte das Ziel eines jeden digitalen Services und Produktes sein.

Fazit

Wer jetzt allerdings denkt, ein Designsystem reduziert die Kreativität eines jeden Designers und mindert Innovationen, der irrt. Innovationen und Kreativität bekommen durch die Arbeit mit Designsystemen einen neuen Fokus.

Mit jedem neuen Feature, jedem neuen Projekt oder jedem Upgrade haben Designer die Möglichkeit das System zu challengen und ggf. entsprechend zu erweitern oder Komponenten zu ersetzen. Dies macht das System lebendig (Living Design System). Des Weiteren können sich Designer, wie zuvor bereits erwähnt, auf die Gestaltung der User Experienece fokussieren und haben hier die Möglichkeit herausragende Erlebnisse für die Nutzer zu erschaffen.

Am Ende geht es bei einem Designsystem schließlich darum, eine einheitliche Sprache zu erschaffen, deren Elemente (Symbole & Zeichen) und Ordnung/Muster (Grammatik) nicht nur vom Unternehmen, den Designern, Entwicklern und Usern gleichermaßen verstanden und genutzt werden, sondern für eine einheitliche Kommunikation und konsistente User Experience sorgen.