Was ist ein Living Styleguide?

Den klassischen Styleguide kennt jeder. Hier werden die Gestaltungsrichtlinien für die Unternehmens- oder Markenkommunikation festgelegt. Eingesetzt wird der klassische Styleguide für Print, aber natürlich auch für digitale Projekte.
Und genau hier setzt der Living Styleguide an. Er berücksichtigt die speziellen Anforderungen von Websites und enthält neben den Elementen des klassischen Styleguides ein entscheidendes Plus an visuellen, konzeptionellen und vor allem technischen Rahmenbedingungen für das Frontend.
Hier werden zusätzlich Styles und Muster dokumentiert, angefangen bei elementarsten Bausteinen wie Überschriften oder Buttons bis zu kompletten Seiten-Templates (Atomic Design).

Was den Living Styleguide aber besonders auszeichnet und ihn zu einem „lebenden“ Styleguide macht:
Er wird mit HTML und CSS umgesetzt. D. h. einzelne, auch interaktive Elemente und sogar ganze Seiten werden nicht nur beschrieben, sondern auch beispielhaft programmiert. Tatsächliches Aussehen und Verhalten sind damit live im Styleguide erlebbar. Für alle Komponenten stehen verwendbare Code Snippets zur Verfügung, die von den Webentwicklern 1 zu 1 aus dem Styleguide für das Webprojekt übernommen werden. Man nennt das auch Styleguide Driven Development (SDD).

 full-image-styleguide-screens

 

Warum ein Living Styleguide?

Die Praxis zeigt es immer wieder:
Im Laufe eines Webprojekts kommt es zu zahlreichen, oft nur minimalen Änderungen am Frontend. Werden diese nicht minutiös dokumentiert, geht mit der Zeit der Überblick verloren und Inkonsistenz schleicht sich ein. Nachträgliche Korrekturen sind mit erhöhtem Aufwand verbunden, Prozesse verkomplizieren sich und die Fertigstellung verzögert sich. Mit dem Living Styleguide lassen sich komplexe digitale Anwendungen noch schneller und effizienter organisieren und umsetzen. Er ist die gemeinsame zentrale Plattform für Grafiker, Entwickler und alle anderen am Workflow beteiligten Parteien. Dazu zählen auch externe Agenturen und Dienstleister, die damit Zugriff auf die aktuell gültigen Gestaltungsrichtlinien haben.

  • komplexe digitale Anwendungen effizient umsetzen
  • zentrale Plattform für Grafiker, Entwickler, Dienstleister, Agenturen

Der besondere Clou des Living Styleguides:
Die Frontend-Komponenten der Website werden automatisch mit dem Styleguide synchronisiert. Der Code auf der Website entspricht also zu 100 Prozent dem im Styleguide ausgelieferten Code. Dieser aktualisiert sich selbständig, sobald auf der Live-Seite etwas geändert wird. Das sorgt für Konsistenz bei allen Webprojekten.

  • Konsistenz über alle Webprojekte

 

Was gehört zu einem Living Styleguide?

Der Living Styleguide enthält die Gestaltungsrichtlinien für folgende Bereiche:

image-styleguide3Design & visuelle Elemente

  • Unternehmens- & Marken-Logos
  • Farbpaletten & -räume
  • Typografien
  • Bild- & Icon-Konzepte
  • Abstände & Platzierungen für den Seitenaufbau

Inhaltliches & redaktionelles Konzept

  • Struktureller Aufbau & Seitentypen
  • Inhaltselemente & Anforderungen
  • Aufbau & Inhalte ausgewählter Seiten
  • Textkonzepte & redaktioneller Leitfaden
  • Typografische Auszeichnungen & Schreibkonventionen

 

image-styleguide4

Technische Vorgaben

  • Browserkompatibilität
  • Coding Guidelines
  • Frontendarchitektur (Kommunikation zwischen Modulen/Komponenten)
  • Animations- & Interaktionskonzepte
  • Responsive Grid (Spalten & Abstände)
  • Responsives Verhalten (fluid oder adaptive, Breakpoints, Viewports, Images)
  • Barrierefreiheit
  • Domain-Konzept & Webhosting

 

 

 

 

Wie ist der Living Styleguide aufgebaut?

Folgende drei Bausteine sind essenzielle Bestandteile des Living Styleguides:

1. Repository

Das Repository ist ein Verzeichnis aller zulässigen digitalen Objekte. Hier werden alle visuellen, inhaltlichen, redaktionellen und technischen Gestaltungsmerkmale detailliert beschrieben und gespeichert. Es dient zu deren Strukturierung und Versionierung, und fungiert somit auch als Archiv.

2. Pattern Library

Die Pattern Library visualisiert sämtliche Komponenten, die für die Webanwendung genutzt werden können. Damit erhalten alle Mitglieder des Projektteams sowie Stakeholder einen Überblick und Zugriff auf alle Elemente, die aktuell im Einsatz sind.

3. Real Prototype

Da die einzelnen Komponenten nicht einfach nur visualisiert, sondern mit HTML und CSS erstellt werden, stehen sie als funktionierende Prototypen zur Verfügung. Damit lässt sich das Verhalten interaktiver und animierter Elemente direkt in einer Live-Umgebung demonstrieren.

 image-styleguide5

 

Welche Vorteile bietet der Living Styleguide?

 

Für alle Projektbeteiligten:

  • Mehr Konsistenz & gleichbleibende Qualität
    Der Living Styleguide ist die zentrale „Up-to-date“-Dokumentation für alle Gestaltungsrichtlinien und Markendefinitionen. Nach Projektabschluss bleibt er die aktuell gültige Basis für zukünftige Webprojekte. Das garantiert absolute Konsistenz und gleichbleibend hohe Qualität – selbst bei sehr großen Projektteams.

  • Abnahme in Web-Umgebung
    Da der Styleguide mit HTML und CSS angelegt wird, werden alle Komponenten bereits in einer realistischen Web-Umgebung gezeigt. Der Kunde sieht die Elemente so, wie sie auf der finalen Website aussehen werden. Selbst animierte Elemente und Interaktionsmöglichkeiten (z. B. Hover- und Transition-Effekte), aber auch das responsive Verhalten von ganzen Seiten werden beispielhaft dargestellt. Den Gap zwischen Design und Web-Entwicklung gibt es nicht mehr. Das reduziert die Feedback-Schleifen und vereinfacht den Abnahmeprozess.

  • Automatisierte Anpassungen
    Der Living Styleguide ist die zentrale Referenz für alle Templates. Eine Änderung dort wirkt sich automatisch auf die Templates aus. Wird etwa eine Farbe global geändert, passen sich die betroffenen Elemente entsprechend an.

  • Vereinfachte Kommunikation
    Ob Konzept, Design, Web-Entwicklung oder auch Kunde, sie allen haben mit dem Living Styleguide einen gemeinsamen Bezugspunkt für die fächerübergreifende Kommunikation. Das vereinfacht die Verständigung und fördert das wechselseitige Verständnis.

  • Multi-Channel-Fähigkeit
    Der Living Styleguide kann für die gesamte Marken- und Unternehmenskommunikation eingesetzt werden. Denn er eignet sich nicht nur für Websites, sondern auch für andere digitale Anwendungen und sogar für Print-Projekte.

 

Für Kunden:

  • Noch näher am Projekt
    Mit dem Living Styleguide ist der Kunde noch näher am Entwicklungsprozess. Er kann jederzeit einen Blick auf Design und Umsetzung der einzelnen Elemente werfen und direktes Feedback dazu geben.

  • Ein Styleguide für alle Web-Projekte
    Mit dem Living Styleguide können unterschiedliche Projekte – auch gleichzeitig – auf der Basis eines gemeinsamen Standards realisiert werden. Das garantiert ein einheitliches Erscheinungsbild über alle Webseiten hinweg.

 

Für Konzept & Design:

  • Perfekte Dokumentation für Übergaben
    Unser Styleguide bietet einen Überblick über alle Komponenten inklusive detaillierter Beschreibungen. Damit lassen sich Kollegen, aber auch Externe, die bislang nichts mit dem Projekt zu tun hatten, einfach und problemlos auf den aktuellen Stand bringen.

  • Schnelle Anpassungen
    Ändern sich Anforderungen oder müssen einzelne Komponenten angepasst werden, geht das mit dem Styleguide unkompliziert und schnell. Und die Änderungen stehen allen Projektbeteiligten sofort wieder zur Verfügung.

 

Für die Webentwicklung:

  • Weniger Entwicklungsaufwand
    Die Entwickler nutzen einen einheitlichen Produktionscode, der im Styleguide hinterlegt ist und den sie immer wieder einsetzen. Das reduziert den Entwicklungsaufwand erheblich.

  • Optimierte Abstimmung mit Konzept & Design
    Die Entwickler werden frühzeitig in den Konzeptionsprozess einbezogen, um Machbarkeiten mit UX und Design abzuklären. Dadurch lassen sich Missverständnisse in der Abstimmung und Fehler bzw. Mehraufwände in der Webentwicklung minimieren.

  • Reduzierter Testing-Aufwand
    Die Komponenten und Module können direkt im Living Styleguide getestet werden, also noch vor der Integration in die eigentliche Webapplikation. Dadurch reduziert sich der finale Testing- und Bug-fixing-Aufwand für die Website.


image-styleguide2Demoversion des coma Living Styleguide ansehen

Sind Sie an einem Living Styleguide für Ihr Unternehmen interessiert und wollen unseren Styleguide testen? Füllen Sie nachfolgendes Formular aus, und Sie werden direkt zum coma Styleguide weitergeleitet.