UX Design Wieso, weshalb, warum: Living Styleguides

Zum täglichen Geschäft von Kreativen gehört das Arbeiten mit Corporate Design Manuals, auch Styleguides genannt.
Der Styleguide ist ein Werkzeug, das richtig angewendet ein konsistentes Ergebnis in der Gestaltung unterstützt. Er enthält Basisinformationen zur visuellen Darstellung von Medienprodukten, die einem Corporate Design folgen. Darunter fallen Aspekte wie der Farbeinsatz, Seitenverhältnisse und Abstände, Typografie und meist auch Vorgaben zum Einsatz des Logos und seiner Varianten.

Der Begriff Living Styleguide bezieht sich dabei auf das Webdesign. Im Unterschied zu klassischen Design-Manuals, wird ein Living Styleguide aus dem Quellcode einer Webseite generiert. Dabei kann der Umfang des Living Styleguides eines Webprojekts dem Bedarf angepasst werden. Neben den genannten Basisinformationen zur Typografie, Abständen und Formatvorgaben von Bildern, kann der Umfang deutlich ausgeweitet werden, zum Beispiel auf:

• Basiselemente (Buttons, Formularfelder, Labels)
• Katalog der vorhandenen Komponenten (Interface Inventory)
• Raster und Seitenlayouts
• Übersicht verwendeter Icons
• Funktionsbeschreibungen
• Dokumentation von Prozessen

Im Idealfall wird der Living Styleguide automatisiert erstellt, parallel zur Entwicklung am Projekt. Außer der einmaligen Einrichtung entstehen kaum zusätzliche Aufwände in der Wartung und Pflege.
So angewendet und genutzt, ist der Living Styleguide dann immer auf dem aktuellen Stand des Projekts.
Wird im Projekt mit einem Frontend-Prototypen gearbeitet, kann dieser eine gute Basis für die Generierung des Living Styleguides sein. Ein Frontend-Prototyp enthält üblicherweise alle relevanten Informationen, die im Living Styleguide abgebildet werden sollen.

Frontend-Prototyp und Living Styleguide bilden eine Symbiose.

Die initiale Entstehung des Living Styleguides ist mit einiger manueller Vorarbeit verbunden. Bei der Wartung und Pflege gibt es dann wenig strukturelle Änderungen, der vorhandene Umfang wird meist nur ergänzt.
Der erste Schritt auf dem Weg zum Living Styleguide ist die Analyse der Entwürfe. Diese werden einer umfangreichen Datenerhebung unterzogen. Es werden Abstände gemessen, Farben und deren Verwendung dokumentiert, Schriftfamilien und deren Verwendung ermittelt, gestalterische Mittel wie Verläufe, Icons, Schatten und Transparenzen gesammelt. Darüber hinaus können in diesem Schritt aus den Wireframes die Seitenlayouts und die Bandbreite der Komponenten erfasst werden.

Im zweiten Schritt werden die gesammelten Informationen konsolidiert und normalisiert. Am Beispiel der Farben wird schnell klar, was damit gemeint ist: Während der Entwurfsphase werden meist mehrere Töne einer Farbe verwendet, die sich nur in Nuancen unterscheiden. Diese werden jetzt in einem Farbton zusammengefasst, da für das menschliche Auge ohnehin kein Unterschied sichtbar ist.

Im Beispiel der Farbwerte steht als Ergebnis der Konsolidierung eine verbindliche und abgestimmte Farbtabelle.
Genauso wird mit allen weiteren Gruppen verfahren: Abstände, die sich minimal voneinander unterscheiden, werden in einem Wert zusammengefasst, Schriftgrößen und deren Verwendung werden harmonisiert und Schriftschnitte auf ihre Notwendigkeit hin überprüft. Bei Webfonts bedeutet jeder zusätzliche Schnitt mehr Ladezeit. Wird ein Schnitt nur an ein oder zwei Stellen verwendet, lohnt sich schon die  Abwägung, ob nicht der nächsthöhere oder niedrigere auch dafür in Frage kommt, statt Semibold ein Bold. Bei den Abständen sprechen Designer und Entwickler nicht mehr von 20 und 22 Pixeln, sondern vom Standard-Abstand - nicht mehr von 10 Pixeln hier und 11 Pixeln da, sondern vom kleinen Abstand.

Die erstellten Basisinformationen können dann in die Umsetzung des Frontend-Prototypen einfließen und bilden damit die Basis für die automatische Generierung des Living Styleguides des Projekts. Die Symbiose nimmt hier ihren Anfang.

Living Styleguide als Kommunikationsmittel

Der Living Styleguide unterstützt das Team dabei, eine teamübergreifende Sprachregelung für das Projekt zu finden und zu etablieren.
Spricht der Entwickler von einem Popup, wissen alle Beteiligten, was dieser damit meint und können sich die genannten Komponenten bildlich vor Augen führen - Missverständnissen wird damit vorgebeugt.
Die Stärke des Living Styleguides als gemeinsamer Nenner fördert die Kommunikation insbesondere während der produktiven Phase eines Webprojekts, die gerne einmal mehrere Jahre andauern kann. Gerade für Teams, die im Agenturgeschäft nicht nur an einem Projekt arbeiten, sondern häufig an mehreren gleichzeitig, stellt der Living Styleguide als Projektdokumentation eine deutliche Verbesserung zur Sicherung der Qualität dar.

Arbeiten mit dem Living Styleguide

Der Living Styleguide ist als integraler Bestandteil der Projektarbeit zu verstehen. Jeder Beteiligte kann den Living Styleguide aus seiner spezifischen Sicht als Werkzeug nutzen.
Konzepter und Gestalter haben eine Basis für Neuentwicklungen und Änderungen, der Frontend-Entwickler hat definierte und abgestimmte Daten, Projektmanager und Kunde können schnell den Projektumfang erfassen. Änderungen an der Darstellung fließen dann in den Frontend-Prototypen ein, werden mit den im Living Styleguide dokumentierten Daten abgeglichen. Ergänzungen am Frontend-Prototypen fließen wiederum in den Living Styleguide ein und werden in das Produktivsystem integriert. Anpassungen am Produktivsystem, die durch die Vorgaben im Living Styleguide bedingt sind, werden in den Frontend-Prototypen übernommen.
Dabei ist der Living Styleguide ein wichtiges Werkzeug für die Qualitätssicherung. Ein Blick ins Interface Inventory, den Katalog der Interface-Elemente, und etwaige Fehler in der Darstellung sind schnell aufgespürt.
Bei umfangreichen Projekten lassen sich Nebenwirkungen von strukturellen Änderungen in manchen Fällen nicht vermeiden. Mit dem Living Styleguide werden sie aber schnell auffindbar. Da das Interface Inventory den gesamten Umfang der vorhandenen und verwendeten Komponenten enthält, kann es für die Qualitätssicherung verwendet werden. Dafür bietet sich Visual Regression Testing an: Dabei werden die Zustände vor und nach einer Änderung miteinander verglichen. Technisch werden Screenshots der Komponenten oder ganzer Websites erstellt, übereinander gelegt und deren Abweichung der Sarstellung, berechnet. Liegt die Differenz über einem festgelegten Wert, z.B. 3%, kann von einem ungewollten Effekt ausgegangen werden – ganz vermeiden lassen sich kleinste Unterschiede meist nicht, die der Grenzwert herausfiltert.

Fazit

Einen Living Styleguide in neuen Projekten zu etablieren bietet sich immer an. Ein guter Teil der (manuellen) Vorarbeit empfiehlt sich für die technische Umsetzung im Frontend in jedem Fall. Das Mehr an Aufwänden und das Ergebnis der Analyse in Form eines Living Styleguides zu dokumentieren, rechnet sich schnell und hilft dabei, spätere Wartungsaufwände gering zu halten.