|

Wie funktionieren Design Systeme?.

Heutzutage setzen Unternehmen vermehrt auf Design Systeme anstelle von Corporate Design Manuals und Styleguides. Die im Design System enthaltenen Komponenten stellen eine gemeinsame Designsprache über alle Produkte und Dienstleistungen hinweg sicher. So können Design-Teams komplexe Aufgaben besser und schneller lösen und Unternehmen können ihre digitalen Medien wie Websites, Apps oder Plattformen in einer visuellen Sprache gestalten. In diesem Beitrag beleuchten wir, was genau Design Systeme sind und wie sie funktionieren.

Was ist ein Design System?

Vor allem im analogen Bereich waren statische Design Manuals die Basis für einen einheitlichen Markenauftritt. Diese stoßen jedoch im digitalen Zeitalter oft an ihre Grenzen. Hier setzen Design Systeme an.

Ein Design System ist eine Sammlung von wiederverwendbaren Design-Elementen, Interface-Komponenten und Gestaltungsprinzipien. Diese sind mit klaren Regeln, Prinzipien und Einschränkungen für die Designentwicklung eines Unternehmens verknüpft. Neben allgemeingültigen Prinzipien gehören dazu auch Code- und UI-Komponenten. Im Ergebnis entstehen feste Vorgaben für das Design und die Möglichkeit zur Wiederverwendung diverser Design-Elemente. Mit diesen Vorgaben können digitale Produkten, Websites und Apps konsistent und effizient gestaltet werden.

Der Unterschied zu einem Styleguide liegt darin, dass ein Design System nicht nur aus einer Anzahl wiederverwendbarer Interface-Bausteine besteht, sondern beschreibt, wie die Designsprache der Marke angewendet wird. Dadurch entsteht eine einzigartige User Experience. Ein Design System ist vergleichbar mit einem Baukasten mit Spielsteinen: Alle Design-Bausteine stehen gut sortiert zur Verfügung. Das erleichtert den Arbeitsprozess erheblich.

Warum sind Design Systeme sinnvoll?

Eine Marke verfügt in der Regel über zahlreiche Touchpoints: Website, Onlineshop oder App. Die Darstellungsmöglichkeiten sind entsprechend vielfältig. Im Idealfall erreichen Unternehmen jeden Kunden an dem für ihn relevanten Touchpoint mit den passenden Inhalten und einem einheitlichen Markenauftritt. Die Herausforderung liegt darin, dass jedes Touchpoint-Interface in seiner Gestaltung und Umsetzung viele mögliche Fehlerquellen birgt, in deren Ergebnis ein inkonsistentes Design entstehen kann. Um dieses Problem zu umgehen, helfen im digitalen Zeitalter Design Systeme. Diese stellen eine einheitliche Markendarstellung sicher und ermöglichen eine effizientere, kreative Zusammenarbeit zwischen Abteilungen und eine zielgruppenspezifische Contentausspielung. Dadurch, dass ein Design System Branding, Farben, Tonalität, Typographie, Animationen und Datenvisualisierung unter einen Hut bringt, lassen sich Widersprüche im Design vermeiden.

Durch die klar umrissenen Vorgaben können sich Designer besser auf das Produkt konzentrieren. Sie profitieren entsprechend von einer Skalierbarkeit durch Modularität. Designer und Entwickler können deutlich effizienter arbeiten und sorgen gleichzeitig für konsistente Darstellungen und Codes. Ist die Design-Library erst einmal angelegt, können die Bausteine immer wieder verwendet werden, entsprechend lassen sich Zeit und Geld einsparen: Das nächste Produkt kann schneller fertiggestellt werden, Entwickler vermeiden Redundanzen und bauen bessere Produkte, die auf robustem, getestetem Code basieren. Wichtig ist: Ein Design System entwickelt sich mit dem Produkt, den verwendeten Werkzeugen und Technologien weiter.

Für die Nutzer entsteht dadurch ein stimmiges Markenerlebnis über unterschiedliche Touchpoints hinweg: Die Marke tritt einheitlich auf und die User Experience wird verbessert. Inhalte können zielgruppengerecht aufgebaut werden, zum Beispiel durch dynamisch erstellte Inhaltsbereiche auf einer Website. Das gilt auch für die kontextbezogene Ausspielung von Content: Je genauer mögliche, von der Umgebung abhängige Bedürfnisse im Design System hinterlegt sind, desto variabler kann das System auf unterschiedliche Kontexte reagieren. Ganz im Sinne der Customer Centricity.

Woraus besteht ein Design System?

Folgende Komponenten sind Bestandteil eines Design Systems:
– Atome (Building Blocks): Definition der Bestandteile; Icons, Farben, Schrift, Buttons, Bilder, …
– Module (Pattern-Library): Auf Basis der Atome entstehen Module, Komponenten und Templates.
– Principles (Rules): Festlegung der Regeln für Design und Animationen, für technische Umsetzungen etc.
– Styleguide: Beschreibung zur Verwendung und Weiterentwicklung des Design Systems.

Ein Design System lässt sich in zwei Bereiche einteilen. Zum einen gibt es den abstrakten Teil, der sämtliche Prinzipien umfasst, die die strategisch-gestalterische Ausrichtung der Marke vorgeben. Zum anderen gibt es den konkreten Teil. Dieser umfasst alle Interface-Komponenten, um ein Produkt zu realisieren: Markenelemente wie Logos und Claims sowie grafische Komponenten. Um das volle Potenzial eines Design Systems ausschöpfen zu können, ist es wichtig, dass die konkreten Elemente um die abstrakten erweitert werden.

Bei der Implementierung eines Design Systems müssen entsprechend unterschiedliche Punkte beachtet werden. Es müssen Standards definiert werden, also Regeln, Prinzipien und Einschränkungen hinsichtlich Farben, Tonalität, Typografie, Animationen oder der Wiederverwendbarkeit von einzelnen Elemente. Diese festen Vorgaben werden in einem Corporate Design Manual oder Styleguide zur Verfügung gestellt und ist die Grundlage des Design Systems, damit keine Widersprüche im Markenauftritt entstehen.

Dieser Styleguide muss im nächsten Schritt zum Leben erweckt werden. In vielen Unternehmen gibt es bereits Designstandards, welche nun um die sogenannten Living Styleguides erweitert werden. Diese sind in die gesamte digitale Wertschöpfungskette integriert und funktionieren mit teils automatisierten Produktions- und Auslieferungs-Workflows.

Die Living Styleguides gilt es nun in atomare Strukturen zu überführen, denn die Basis eines Design Systems bilden Atome, Moleküle und Organismen. Diese müssen digital erfasst und in der Design- bzw. Brand-Library gesammelt werden. Zu beachten ist: Die Komponenten und Richtlinien müssen auf alle Anwendungsfälle einsetzbar sein. So wird eine gemeinsame Designsprache über alle Produkte und Dienstleistungen hinweg sichergestellt.

Gibt es Anpassungen an Design-Einheiten oder kommen neue hinzu, werden diese automatisch und global übernommen.

Fazit

Durch ein System Design werden sämtliche Produkte, Dienstleistungen und Medien eines Unternehmens in einem konsistenten Design dargestellt. Dadurch wird die Marke erlebbar und hebt sich von konkurrierenden Marken ab. Nutzer erfahren über sämtliche Touchpoints hinweg ein einheitliches Nutzererlebnis. Durch die Implementierung eines Design Systems lassen sich zudem digitale Produkte schneller und kostengünstiger entwickelt. Genügend Gründe, um sich über die Einführung eines Design Systems Gedanken zu machen!

Quellen

https://t3n.de/news/to-designsysteme-erfolgreich-1252809/
https://www.hosteurope.de/blog/was-sind-design-systeme-und-wie-arbeitet-man-damit/
https://www.radikant.com/wissen/design-systeme/
https://www.horizont.net/marketing/kommentare/user-experience-sieben-praktische-tipps-fuer-erfolgreiche-design-systeme-180372