Ratgeber

How to: Designsysteme erfolgreich implementieren

(Grafik: Shutterstock)

Corporate-Design-Manuals und Styleguides waren gestern. Heutzutage setzen Unternehmen stattdessen auf Designsysteme. Doch wie funktioniert es und wie setzt man eines auf?


Eine Marke, mehrere Touchpoints, unterschiedliche User-Interfaces: Ob Unternehmens-Website, Onlineshop oder Vertriebstool, die Darstellungsmöglichkeiten für eine Marke sind vielfältig und die meisten Unternehmen nutzen einen Großteil dieser Touchpoints, um mit ihren Kunden zu kommunizieren. Im Idealfall erreichen sie jeden Kunden an der für ihn relevanten Schnittstelle mit passendem Content sowie einem einheitlich gestalteten Markenauftritt. Allerdings: Jedes Touchpoint-Interface birgt in seiner Gestaltung und Programmierung eine Vielzahl möglicher Fehlerquellen – und daraus resultierend ein inkonsistentes Design. Wofür früher ein Styleguide genügte, bedarf es im digitalen Zeitalter eines Designsystems. Denn Designsysteme sorgen für eine einheitliche Marken-Darstellung, eine effizientere, kreative Zusammenarbeit zwischen einzelnen Abteilungen sowie für eine zielgruppenspezifische Contentausspielung.

Für eine erfolgreiche Implementierung eines Designsystems gilt es folgendes zu beachten:

Standards definieren

Im Erscheinungsbild jeder Marke gibt es Regeln, Prinzipien und Einschränkungen etwa im Hinblick auf Farben, Tonalität, Typografie, Animationen, Datenvisualisierung oder der Wiederverwendbarkeit einzelner Elemente. Diese festen Vorgaben gilt es, im Vorfeld zu definieren oder via Corporate-Design-Manual oder Styleguide zur Verfügung zu stellen, denn sie dienen als Grundlagen eines jeden Designsystems. Nur so lassen sich Widersprüche im Markenauftritt vermeiden.

Den Styleguide zum Leben erwecken

In den meisten Unternehmen sind Designstandards längst definiert – für digitale Anwendungen in der Regel in Digital Styleguides. Um ein Designsystem aufzusetzen, müssen Unternehmen daher nicht von vorn anfangen. Stattdessen gilt es, Digital Styleguides zu sogenannten Living Styleguides zu erweitern. Sie zeichnet aus, dass sie in die gesamte digitale Wertschöpfungskette integriert sind und mit teils automatisiertem Produktions- und Auslieferungs-Workflow funktionieren.

In atomare Strukturen überführen

Die Basis eines Designsystems bilden Atome, Moleküle und Organsimen als die kleinsten Design-Einheiten eines Markenbildes. Sie müssen digital erfasst und in einer Design- beziehungsweise Brand-Library gesammelt werden. Die im System enthaltenen Komponenten und Richtlinien sind auf alle Anwendungsfälle einsetz- und wiederverwendbar und stellen so eine gemeinsame Designsprache sicher – über alle Produkte und Dienstleistungen hinweg und immer unter Berücksichtigung des eingesetzten Technologie-Stacks sowie des Service-, Business- und Nutzungskontexts der Ziel-Applikation. Design- und Entwickler-Teams können so die komplexen Aufgaben besser und schneller lösen. Diese Sammlung und ihre Verwendungsformen dienen als alleinige Informationsquelle, als „Single Point of Truth“ der Qualitätssicherung und zur Weiterentwicklung der Marke sowie sämtlicher digitaler Benutzerschnittstellen eines Unternehmens.

Sind Details an kleinsten Design-Einheiten zu ändern oder kommen neue hinzu, wird die Anpassung automatisch und global übernommen. Fertige Code- und Designregelwerke können nicht nur als Nachschlagesammlung, sondern als Endprodukt zur Verfügung gestellt werden.

Designsystem mithilfe einer Toolchain etablieren

Wie wird aus einem aus vielen Elementen gestalteter Screen ein fertiges Interface? Ein ganzheitliches Design-Management-System entsteht erst dann, wenn die vorgelagerte Design-Toolchain mit anderen Tools und Applikationen wie dem CMS oder einem Shop-Frontend verbunden ist, sodass Designänderungen automatisch und konsistent in alle Channels übernommen werden.

Gängige Software und Programme der Designsystem-Toolchain sind etwa Invision und Frontify als Brand-Management- und Prototypingtools, Sketch und Abstract zur Erstellung und Versionskontrolle von Designsystemen, Pattern Lab und Storybook als Styleguide- und Produktionswerkzeuge sowie GitLab als Versionierungs- und Deploymentsoftware. Weiterhin kommt Zeplin als Kollaborations-Werkzeug und als Bindeglied zwischen der Kreation und der Technik zum Einsatz. Mit dem JavaScript-Framework Vue.js entwickeln Programmierer das User-Interface anspruchsvoller Webanwendungen.

Datenrelevanz skalieren und Kontexte bestimmen

Websites sind bereits seit längerem in der Lage, zu erkennen, über welche Touchpoints der Konsument zur Seite gelangt ist und zu welcher Zielgruppe er gehört. Designsysteme schließen nun die Lücke zum Konsumenten, indem sie der Website ermöglichen, jede Inhaltsseite zielgruppengerecht, durch dynamisch erstellte Inhaltsbereiche, aufzubauen. In der Praxis muss dazu die Relevanz der zugrundeliegenden Daten im Vorfeld definiert und diese Informationen den konkreten Inhalten zugeordnet werden.

Das gilt ebenfalls für eine kontextbezogene Ausspielung von Content. Je genauer mögliche, von der Umgebung abhängige Bedürfnisse festgehalten und im Designsystem hinterlegt sind, desto variabler kann das System auf differenzierte Kontexte reagieren.

Designsysteme lassen Designer und Entwicklern deutlich effizienter arbeiten und sorgen gleichzeitig für konsistente Darstellungen und Codes. Die Vorteile liegen vor allem im längerfristigen Benefit. Ist die Design-Library erst einmal angelegt, können die Bausteine immer wieder verwendet und automatisiert an neue Gegebenheiten angepasst werden. Das spart nicht nur Kosten, sondern sorgt auch für eine bessere Customer-Centricity.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung