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:

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.

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.

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.

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.

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.