Von einem code-basierten Designsystem profitieren

Ob Corporate-Website, Online-Shop oder Social Network, eine Marke muss sich auf vielfältigen Kanälen behaupten und überall einen guten Eindruck hinterlassen. Dabei sollen Corporate-Design-Manuals und Styleguides helfen. Und immer mehr Unternehmen setzen auf Designsysteme. Was nützen und wie funktionieren diese?

Unsere modernen Technologien führten zu einem Paradigmenwechsel in unserer Art zu kommunizieren. Die lange Zeit allgemeingültige Informationseinheit «Seite» löst sich zusehends auf. An ihrer Stelle treten multimediale Benutzeroberflächen, in welchen wir mittels vielseitiger Interaktionsprozesse navigieren. Damit ändern sich auch die Anforderungen an die Inhaltsdarstellung. Neben Lesbarkeit und Ästhetik spielen vor allem Benutzerfreundlichkeit und Responsivität – das ist die Anpassungsfähigkeit der Inhalte in Bezug auf ihr darstellendes Medium – eine entscheidende Rolle. Aus Leser, Besucher oder Kunden werden «Benutzer».

Dieser turbulente Wandel zwingt derzeit Kommunikationsdesigner dazu, ihre tradierten Entwurfs- und Entwicklungsmethoden neu zu bewerten und zu überdenken, wie sie mit ihren Auftraggebern kommunizieren möchten und was letztendlich die Ergebnisse ihrer Arbeit sein sollten.

Als Konsequenz werden neben den bereits etablierten Content-Management-Systemen nun auch verstärkt Design-Management-Systeme – oder kurz «Designsysteme» eingesetzt, die Inhaltsanbietern helfen sollen, den wachsenden kommunikativen Anforderungen, die Benutzer an digitale Services oder Produkte stellen, gerecht zu werden.

Worin liegt ihr Vorteil?

Ich denke, dass ich nicht viel Worte über den positiven Einfluss, welches ein einheitliches sowie positiv empfundenes Markenerlebnis auf die Business Value eines Unternehmens ausübt, verlieren muss.

Jedem Marketingteam, jedem UX Professional ist es bewusst, dass ein stimmiges wie konsistentes Corporate Design einen enorm positiven Einfluss auf die Customer Journey hat. Neben der Produkt- und Servicequalität stellt es eines der vertrauenbildensten Faktoren in Bezug auf das Marken- bzw. das Nutzenversprechen dar. Es  bestimmt nachhaltig die Reputation eines Unternehmens.

Umso mehr überrascht es mich, dass viele Unternehmen sehr wenig für die Qualitätssicherung ihrer Design-Elemente und -Standards tun. Viele Methoden und Tools diesbezüglich sind häufig immer noch analog, bedienen sich digitale Brückentechnologien (wie beispielsweise PDFs) oder sind durch signifikante Medienbrüche gekennzeichnet.

Häufig sind die Unternehmen an diesem Umstand nicht immer selbst schuld. Denn wenn man sich die Entwicklungs-Workflows vieler Digitalagenturen betrachtet, offenbart sich hier eine sehr tradierte und nicht mehr zeitgemässe Vorgehensweise.

Die meisten Frontends grosser Websites werden immer noch «Seitenvorlagen-basiert» erstellt. Dazu werden in der Regel Key-Templates, wie die Startseite, Übersichts- und Detailseiten bzw. andere notwendige Seiten und Content-Elemente designt – zunächst über Wireframes und letztendlich über Mockups. Sofern das Budget es zulässt wird zur Qualitätssicherung neben einem Developer-Handoff gegebenenfalls auch ein Styleguide oder eine UI-Dokumentation erstellt, welche aber in den aller meisten Fälle nur bis zum nächsten Relaunch der Website gültig sind.

Diese Vorgehensweise ist weder effizient noch nachhaltig. Viel besser wäre es, zunächst ein modulares Designsystem zu entwickeln, welches Designer und Entwickler gleichermassen mit modularen Komponenten versorgt, mit denen sie dann – quasi via «Drag & Drop» eine unbegrenzte Anzahl von Seitenvorlagen erstellen können. Erst danach erstellen die UI Designer mit diesen Komponenten die für die User Journeys notwendigen Seiten-Templates.

Das reduziert nicht nur den Aufwand im Seitenerstellungsprozess und somit die Kosten der technischen Umsetzung, sondern führt auch zu einer integralen Harmonie und Konsistenz der dabei entstehenden Seiten.

Ein Designsystem unterscheidet sich von einem Styleguide dadurch, dass es ein Design schematisiert und schabloniert und damit eine systematische und modulare Vorgehensweise in der gestalterischen Konzeption von Artefakten ermöglicht. Deswegen sollte die Entwicklung eines Designsystems logischerweise eher am Anfang und nicht am Ende des konzeptionellen Prozesses stehen.

Ein Designsystem hilft Kontinuität in den Gestaltungsprozess zu bringen – auch langfristig. Nichts alles muss bei jedem Relaunch über Bord geworfen werden. Eine Evolution des Designs an den sich verändernden Rahmenbedingungen ist sinnvoll. Komplette Brüche verunsichern Anwender und Verbraucher oftmals mehr, als sie nützen.

So ist ein Designsystem das ideale Werkzeug, wenn Designer, Entwickler und Stakeholder miteinander kommunizieren oder wenn verschiedene Teams oder Agenturen über einen längeren Zeitraum an einem komplexen Projekt zusammenarbeiten.

Ein Designsystem sollte für eine nachhaltige Nutzung angelegt und deswegen skalierbar sein. Es sollte mit den sich ändernden Anforderungen wachsen und nicht mit dem nächsten Relaunch seine Gültigkeit verlieren.

Häufig kennen unsere Auftraggeber weder die richtige Vorgehensweise noch ihre Vorteile. Hier stehen eigentlich die Agenturen in der Pflicht, ihre Auftraggeber auf die verschiedenen Möglichkeiten in der Konzeption komplexer digitaler Lösungen und deren Auswirkungen auf die technische Umsetzung und die Qualitätssicherung ihres Coporate Designs hinzuweisen.

So war es auch im Falle einer meiner Beauftragungen. Ich nahm 2019 an einem Pitch für den Entwurf eines Basis-Layouts für den Relaunch von etwa 50 Websites teil. Meine Agentur gewann den Pitch. Aber nicht indem wir unserem Kunden die Konzeption des gewünschtem Basis-Layouts offerierten, sondern vielmehr indem wir die Entwicklung eines «atomaren Designsystems» vorschlugen, aus welchem dann die 50 einzelnen Websites generieren werden konnten. Unserem Auftraggeber war schnell klar, welche Mehrwerte diese Vorgehensweise ihm generieren würde, nämlich:

1. Die Entwicklung eines ganzheitlichen Designsystems garantiert ein einheitliches Markenerlebnis über alle Touchpoints hinweg.
2. Damit lassen sich zukünftig digitale Produkte nicht nur schneller, sondern auch kostengünstiger entwickeln.
3. Designsysteme eliminieren Fehlerquellen und Redundanzen. Damit steigern diese nicht nur die Qualität der Touchpoints, sondern senken Sie den Qualitätssicherungs-Aufwand und machen Ressourcen frei für die Verbesserung der Produkte.

Dennoch standen wir weiteren Herausforderungen gegenüber:

• Wie machen wir das Designsystem für alle Beteiligten zugänglich?
• Wie stellen wir sicher, dass jedes Team die gleichen Technologien, Elemente und Muster verwendet?

Dazu entwickelten ich ein Tool namens «https://atomic-kitchen.com», mit welchen man nicht nur modular aufgebaute Designsystem erstellen kann, sondern dieses auch über ein Frontend online verfügbar machen kann – und dieses sogar dual: Zum einem als responsive visuelle «Pattern Library», welche allen Stakeholdern die entwickelten Designkomponenten und die daraus gebauten Templates pixelgenau und responsive zum Review präsentiert sowie zum anderem als «Code Library», welche den Entwicklern den dazugehörigen HTML/CSS-Code per «Copy & Paste« zur Verfügung stellt.

Der Code kann direkt aus der Pattern Library des Designsystems kopiert werden.

Ein code-basiertes Designsystem versorgt über die mit ihm verbundenen Pattern- und Code-Libraries sowohl UI-Designer als auch Entwickler mit fertigen Komponenten. Aber es gibt allen Konzeptionsbeteiligten auch ein natives «Look & Feel» der Designkomponenten, welches wichtig ist im konzeptionellen Evaluierungsprozess.

Ändern sich aufgrund neuer Anforderungen ein paar Details an den kleinsten Design-Einheiten (den Atomen) wird diese Anpassung automatisch und global auf alle Komponenten der Pattern Library übernommen. Auch die Snippets in der Code Library ändern sich vollautomatisch.

Wie erstellt man ein Design System?

Stellen Sie am besten eine grosse Kiste mit hunderten von Legosteinen vor, deren Bausteine vielleicht aus 20 verschiedenen Farben und Formen bestehen und zu fast jeder denkbaren Struktur zusammengesetzt werden können. Eventuell besitzen sie sogar Abbildungen der fertigen Modelle, die man mit diesen Bausteinen bauen kann. Wer es mal probiert hat, weiss, dass ist es gar nicht so einfach ist, ohne eine Schritt-für-Schritt-Anleitung diese Modelle nachzubauen.

Aus dieser Veranschaulichung heraus lässt sich ableiten, dass es zwei Phasen gibt: die Erstellung sowie die Anwendung eines Designsystems. Fehlen wichtige Legosteine oder verfügen sie nicht über die passenden Eigenschaften, können die Anwender nicht die damit avisierten Modelle bauen.

Deswegen müssen sich die Legostein-Designer Gedanken machen über die notwendigen Eigenschaften der Bausteine. Also welche Bausteine werden grundsätzlich benötigt und wie müssen diese Bausteine aussehen?

Genauso schematisiert und modularisiert ein «Atomic Designer» Gestaltungsideen. Er arbeitet vom Allgemeinen zum Speziellen und setzt dabei kleine Bausteine zu grösseren Modulen zusammen. Deswegen nennt man dieses Bausteinprinzip deduktiv.

Das deduktive Bausteinprinzip trägt zu einem harmonischen und konsistenten Erscheinungsbild bei.

Dieses Prinzip von wiederverwendbaren Komponenten führt in der späteren technischen Umsetzung zu einer erheblichen Aufwandsreduzierung, da die zu gestaltenden digitalen Anwendungen selbst modular aufgebaut sind. Sofern das Designsystem mit einer Code-Library verbunden ist, entfällt zudem die mühsame und fehleranfällige Übersetzung von Design in Code. Diese reduzierten Fehlinterpretationen und Missverständnisse.

Qualitative Anforderungen an ein Designsystem

Die Erstellung eines Designsystem ist nicht ganz trivial. Die Anforderungen, welche an dieses gestellt werden, sind vielfältig. Damit es für die vorgesehenen Design Cases effizient eingesetzt kann, sollte es auf alle möglichen Anwendungsfälle ausgerichtet sein. Das setzt eine gewisse Menge von aufeinander abgestimmten Bausteinen voraus sowie eine intensive Auseinandersetzung der Designer mit den Use Cases und den User Journeys der Anwendungen, für welche es eingesetzt werden soll.

Die Bausteine für eine Website müssen sich beispielsweise responsive verhalten. So bauen sich die drei Spalten einer Teaserbox auf einem Mobiletelefon in drei Reihen auf, die sieben Elemente einer Header-Navigation zu einem Hamburger-Menü-Icon um.

Digitale Anwendungen benötigen ein codebasiertes Designsystem

Dabei sollte die schnell auf einem beträchtlichen Umfang anwachsende Zahl von Elementen und Zuständen übersichtlich und selbsterklärend dargestellt werden. Ein schlecht benutzbares oder unübersichtliches Designsystem, ist keine grosse Hilfe. In unserem für den Kanton Bern entwickeltem Designsystem haben wir deswegen unter anderem eine Suche mit Autosuggest-Funktionalität integriert, so dass Entwickler und Integratoren schnell die passenden Komponenten finden können.

Und hier wird klar, dass nur ein Designsystem auf HTML/CSS-Basis mit Micro-Animationen, welches zeigt, wie sich die Elemente bei Veränderung der Browserfenstergrösse, bei einem Hover oder einem Mausklick verhalten, übersichtlich, selbsterklärend und ein echtes «Look & Feel» wiedergeben kann.

Ein codebasiertes Designsystem ist daher nicht nur aus technischer wie ökonomischer Sicht eine kluge Wahl, sondern ist durch die Ermöglichung eines echten Look & Feels und der nativen Responsivität hervorragend zur Evaluierung der User Experience seiner Komponenten ausgelegt.

Individuelle Entwicklung von Designsystemen

Als erfahrener Partner im Aufbau von Designsystemen kann auch ich Ihrem Unternehmen ein individuelles Designsystem entwickeln, das Ihre Anforderungen präzise erfüllt. Sprechen Sie mich an. Ich zeige Ihnen gerne, wie Sie ein Designsystem gewinnbringend in Ihren Workflow integrieren können, sei es für einen geplanten Website-Relaunch oder zur Verwaltung Ihres Corporate Designs.

Mit AtomicKitchen (https://atomic-kitchen.com) können Sie einfach Atomic Design Systeme erstellen und verwalten.