Living Styleguide

Zukunftssichere Entwicklungsumgebung

Der Wunsch nach Konsistenz und Wiederverwertbarkeit nicht nur im Visuellen führt dazu, dass sich der Live Styleguide als Mittel der Wahl etabliert.

Wo kommen wir her?

Der Styleguide war schon immer ein Hilfsmittel bei der Dokumentation von Entwicklungsprozessen. In der Regel enthält er Richtlinien, die das einheitliche Erscheinungsbild eines Unternehmens in der digitalen Welt gewährleisten.
In letzter Zeit hat sich das Bild gewandelt: Der Styleguide enthält – entgegen seiner Bezeichnung – nicht nur Regeln für's visuelle Design sondern auch redaktionelle und technische Rahmenbedingungen.

Typische Inhalte eines Styleguides

Inhaltliche und redaktionelle Inhalte

  • Struktureller Aufbau und Seitentypen der Website
  • Typografische Auszeichnungen und Schreibkonventionen
  • Inhaltselemente und Anforderungen
  • Aufbau und Inhalte ausgewählter Seiten
  • evtl. Leitfaden zur redaktionellen Betreuung

Gestalterische Inhalte

  • Farbpalette
  • Typografie
  • Logos & Icons
  • Bildkonzept

Technische Inhalte

  • Grid, Breakpoints und responsives Verhalten
  • Barrierefreiheit
  • Kompatibilität in diversen Browsern
  • Domainkonzept und Webhosting

Klassisch vs. Digital

Mit statischen Styleguides ist die konsistente Entwicklung 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, denn das eingesetzte Medienformat ist dabei meist das PDF.
Der Living Styleguides (oftmals auch “Pattern Library” genannt), bieten hingegen langfristig viele Vorteile gegenüber dem klassischen Styleguide.

Vorteile eines Living Styleguides

  • 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)
  • verwendet den Produktionscode und bietet dem Entwickler die Möglichkeit ihn wiederzuverwenden oder darauf aufzubauen
  • 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

Was ist Living Styleguide?

Ein Living Styleguide hält keine statischen Inhalte vor, sondern setzt sich direkt aus den aktuellen und konkreten Projektdateien und Einzelkomponenten zusammen. Änderungen und Erweiterungen können umgehend übernommen werden und sind damit sofort für das komplette Team verfügbar. Der parallel zum Projekt entstehende Styleguide begleitet den Entwicklungsprozess, statt ihn im Nachhinein zu dokumentieren.

Ansprechpartner

Jetzt Kontakt aufnehmen
Harald Hahn

Harald Hahn Geschäftsführer

Unsere Leistungen

  • Bestandsaufnahme, Vorstudie und Konzeption des Living Styleguides, Proof of Concept
  • Entwicklung und Implementierung der Anwendungsplattform
  • Dokumentation, Schulung und Entwicklung der Inhalte
  • Anbindung an bestehende Schnittstellen des Kunden (CMS, Backend etc.)

Unsere Referenzen

  • Internationaler Styleguide für die ARAG Versicherung
  • Produktionsbegleitende Dokumentation für die Elektrizitätswerke Schönau (EWS)
  • Umfangreicher Living Styleguide für die LGT Group