Living Styleguide - Das ideale Webdesign Manual

Ein Living Styleguide ist das Fundament einer Website. Living Styleguides enthalten nicht nur Regeln für das visuelle Design, sondern auch redaktionelle und technische Rahmenbedingungen. Sie dokumentieren Styles und Muster, sorgen für Synchronizität bei Designern und Entwicklern und helfen bei der Organisation komplexer Schnittstellen.

Im kreativen Umfeld gehört ein Styleguide (deutsch Gestaltungsrichtlinie) oder auch ein CD (Corporate Design) Manual zur Basis der Gestaltung. Ein Styleguide dient dazu, das Erscheinungsbild einer Marke über alle Medien hinweg zu gewährleisten.

Der Living Styleguide startet mit dem Beginn des Projektes und involviert alle Parteien (Productowner, Konzepter, Designer, Entwickler, Tester) bereits von Beginn an. Der Wunsch nach Konsistenz und Wiederverwertbarkeit -nicht nur im Visuellen - führte dazu, dass sich der Guide zunehmend als Mittel der Wahl etabliert hat.

Inhalte eines klassischen Styleguide

Der klassische Styleguide enthält in der Regel alle Richtlinien für die visuelle Gestaltung einer Marke für ein einheitliches Erscheinungsbild, z. B. Werbe- und Informationsmaterial, Geschäftsbriefe, Produktverpackung, Apps, Internetauftritte etc.

Dazu gehören unter anderem die wesentlichen Gestaltungsmerkmale wie:

• Brand-Logos

• Farbpaletten und -räume

• Typografien

• Bildkonzepte

• Icon-Konzepte

• Textkonzepte

• Definierte Abstände und Platzierungen (Markenlogo Schutzraum, Festlegung Seitenaufbau, Druck etc.)

Mit einem klassischen bzw. statischen Webdesign Manual ist das konsistente Development und das fachübergreifende Kommunizieren von Richtlinien eine große Herausforderung für alle Mitglieder eines Teams. Die Pflege einer gemeinsamen Code-Basis ist meistens nicht vorgesehen. Klassische Styleguides dokumentieren lediglich das visuelle Ergebnis, blenden aber die technische Entwicklung aus. Ihre Aktualisierbarkeit ist eingeschränkt. Das eingesetzte Medienformat ist dabei meist statisch, z.B. ein PDF gegebenenfalls in Verbindung mit Photoshop-Dateien.

Der klassische Guide kann, sofern er vorhanden ist, als Grundlage für den Aufbau eines Living Styleguides dienen.

Inhalte eines Living Styleguide

Der Living Styleguide enthält z.B. nicht nur statische Inhalte, sondern setzt sich direkt aus den aktuellen und konkreten UI Komponenten und Code Snippets zusammen. Es werden auf HTML, CSS und JS basierende Prototypen unter realen Bedingungen im Browser „live" dargestellt.

Das ursprüngliche Konzept wird dabei laufend validiert. Änderungen und Erweiterungen können umgehend übernommen werden und sind damit sofort für das komplette Team verfügbar. Der parallel zum Projekt entstehende Living Styleguide begleitet den Entwicklungsprozess der Page, statt ihn im Nachhinein zu dokumentieren.

Neben den Elementen, die das klassische Webdesign Manual beinhaltet, werden im Living Styleguide zusätzlich noch weitere Elemente abgebildet, die vor allem für ein einheitliches Erscheinungsbild in digitalen Medien notwendig sind. Dazu gehören:

Inhaltliche und redaktionelle Inhalte:

• Struktureller Aufbau und Seitentypen

• Inhaltselemente und Anforderungen

• Aufbau und Inhalte ausgewählter Seiten

• Typografische Auszeichnungen und Schreibkonventionen

• Redaktioneller Leitfaden

• etc.

Technische Inhalte:

• Browserkompatibilität

• Responsive Grid (Columns und Gutter)

• Responsives Verhalten (fluid oder adaptive, Breakpoints, Viewports, Images)

• Animations- und Interaktionskonzepte

• Coding Guidelines

• Frontendarchitektur (Kommunikation zwischen Modulen/Komponenten => Event-driven oder Data-driven)

• Barrierefreiheit

• Domainkonzept und Webhosting

Durch die Verwendung dieses Tools sind alle Parteien bereits von Beginn an involviert. Missverständnissen zwischen Designer und Entwickler wird so vorgebeugt und gegenseitiges Verständnis aufgebaut, während bei allen Beteiligten ein Lerneffekt des gegenüberstehenden Arbeitsfeldes einsetzt. Konkret bedeutet das, dass unsere Designer inzwischen einen Großteil ihrer Arbeit selber in Sass bzw. CSS und HTML abbilden können. Der Styleguide wird also mehr und mehr zu einem Resultat der interdisziplinären Teamarbeit und nicht nur abschließende Dokumentation bzw. Aufarbeitung des übergebenen Designs.

Ein weiterer Vorteil liegt in der ständigen Erweiterbarkeit des Guides und dessen Flexibilität in Bezug auf Änderungen (Maintainability). Darüber hinaus wird auf diesem Weg eine projektübergreifende Wiederverwendung sämtlicher Komponenten sowie eine parallele Erweiterung durch mehrere Entwicklerteams ermöglicht. Anstatt für verschiedene Projekte mit dem gleichen Corporate Design die jeweilig verwendeten Komponenten neu zu erfinden, können diese aus dem Styleguide entnommen und ggf. erweitert werden.

Der Living Styleguide besteht aus folgenden Bereichen:

Repository:

Alle digitalen Objekte werden in einem Verzeichnis gespeichert und beschrieben. Dieses Verzeichnis ist eine Sammlung und Archiv aller Gestaltungsmerkmale sowie inhaltlicher, redaktioneller und technischer Inhalte. Das Repository dient der Strukturierung und Versionierung.

Pattern Library:

Die Pattern Library zeigt alle Komponenten, welche in der Webapplikation verwendet werden können. Damit erhalten alle Teammitglieder und Stakeholder einen aktuellen Einblick über Komponenten, die im Einsatz sind und zur Verfügung stehen.

Prototype:

Alle Komponenten und deren Verhalten werden im Detail gelistet und zeigen einen funktionierenden Prototyp.

Atomic Design Komponenten nach Brad Frost (systemischer Aufbau eines Living Styleguides)

Phasen einer Living Styleguide Umsetzung

Die Integration des Living Styleguide von Anfang an bedeutet vor allem, die Arbeitsweise im Team zu planen und festzulegen. Sind diese Absprachen getroffen, haben alle Teammitglieder einen klaren Leitfaden an der Hand, der die Arbeit im Projekt verifizierbar und konsistent macht. Ein Teammitglied übernimmt die Kontrollaufgabe und überprüft kontinuierlich die Einhaltung der festgelegten Regeln von allen Projektbeteiligten. Eine kontinuierliche Absprache zwischen Konzept, Design und Entwicklung ist dabei unabdingbar.

Ein typischer Workflow zusammen mit unseren Kunden sieht folgendermaßen aus:

1. Projektstart:

• Bestandsaufnahme

• Vorstudie und Konzeption des Living Styleguides

• Proof of Concept

• Definition der Browserkompatibilität, Systemarchitektur und fundamentaler Gestaltungsmerkmale

2. Konzeptions- und Design Phase:

• Festlegung der Seitentypen, des Grundrasters (Grid), Navigationsstruktur, usw.

• Gestaltung der Module, Elemente, Widgets, usw.

3. Prototyp/ Frontend

• Entwicklung und Implementierung der festgelegten Komponenten bis hin zum funktionierenden Prototypen

• Dokumentation, Schulung und Entwicklung der ersten Inhalte auf Basis des neuen Workflows

• Anbindung an bestehende Schnittstellen des Kunden (CMS, Backend etc.)
  

Vorteile

Für alle Projektbeteiligten:

Qualitätssicherung und „Up-to-date-Dokumentation

• Gewährleistung der Konsistenz zukünftiger Entwicklungen

• Vereinfachung der fachübergreifenden Kommunikation durch eine zentrale Referenz

• Erstellt mit HTML und CSS

• Automatisierte Anpassungen (z.B. können sich Elemente anpassen, wenn sich globale Farben ändern)

• Enthält „bewegte Beispiele und Interaktionsmöglichkeiten (z.B. Hover States oder Transition-Effekte)

• Bei responsiver Umsetzung sind Live Styleguides auf allen Devices optimal nutzbar

• Gleichbleibende Qualität in großen Teams

• Gemeinsames Verständnis zwischen unterschiedlichen Rollen (Konzept/Design, Entwicklung, Kunde, etc.)

• Im optimalen Fall sind Living Styleguides automatische Tools und die Referenz aller Templates. Eine Änderung im Living Styleguide kann dann automatisch in alle Templates einfließen.

• Multi-Channel Fähigkeit: der Living Styleguide ist nicht nur für Websites, sondern auch für andere Medienformate (Apps, Print, usw.) geeignet

Kunde:

• Kontinuierlicher Einblick in Design und Umsetzung

• Schnelles Feedback möglich

• Abnahme der Komponenten in realistischer Umgebung

• Sämtliche Markendefinitionen werden an einem einzigen Ort dargestellt

• Realisierung parallellaufender Projekte nach einem Standard

• Dokumentationsbasis auch nach Projektabschluss
  

Konzept/Design:

• Schnittstellen und Übergaben sind problemlos

• Überblick aller bestehenden Komponenten

• Schnelles Angleichen neuer Komponenten

• Schnelles Reagieren auf neue Anforderungen möglich
  

Entwicklung:

• Konsistenz in der Entwicklung

• verwendet den Produktionscode und bietet dem Entwickler die Möglichkeit ihn wiederzuverwenden oder darauf aufzubauen

• Frühzeitige Abstimmung mit Konzept und Web Design über Machbarkeiten

• Reduzierung der Fehlerquellen zwischen Konzept/Design und Entwicklung der Page

• Verprobung von Modulen/Komponenten vor der Integration in die eigentliche Applikation
  

Fazit

Der Einsatz des Living Styleguides ist nicht das Tüpfelchen auf dem „i", sondern das Fundament einer komplexen Website. Er bietet langfristig viele Vorteile und einen hohen Mehrwert gegenüber dem klassischen Styleguide: durch Anlage und effizienten Workflow wird er zum perfekten Bestandteil eines agilen und modernen Arbeitsprozesses zwischen Konzeption, Web Design und Umsetzung.

Januar 2018, diconium News