Die Geschichte, wie ich zu dieser Überzeugung gelangte, ist ein paar Jahre alt und (leider) typisch für die Branche, in der ich arbeite: Ein Entwickler-Team wurde mit der Aufgabe betraut, den Relaunch für ein umfangreiches Informations- und Community-Portal durchzuführen. Der Prozess sollte sich enorm schwierig gestalten. Zwar lagen einige Layouts — natürlich bereits final abgenommen — für das neue Look & Feel vor, es gab allerdings keine vollständige Übersicht über die Grundbausteine, aus denen sich die Seite zu diesem Zeitpunkt zusammensetzte.
Um die Aufgabe rein quantitativ erledigen zu können, wurden die einzelnen Bereiche der Seite aufgeteilt und unterschiedlichen Entwicklern zugewiesen. Bereits kurz nach Beginn der Umsetzung übergab die Kreation ein neues finales Layout-Dokument. Es würde nicht die letzte finale Version bleiben. Mit jeder neuen Iteration wurde es schwieriger sicherzustellen, dass alle Projektbeteiligten über die letzten Anpassungen und Verbesserungen informiert bleiben.
Zwei Wochen später waren die neuen Templates zu 80 Prozent fertiggestellt und die Stylesheets mehrere tausend Zeilen lang. Auf den ersten Blick sah alles recht ordentlich aus, doch der Teufel steckte im Detail.
19 shades of blue and grey
Durch die fehlende Transparenz und Synchronisierung der Änderungen in den Vorlagen und die unvollständige Analyse aller notwendigen Grundbausteine der Seite entwickelten sich einzelne Bereiche der Website unabhängig voneinander. Das Beispiel zeigt eine Auflistung diverser Grau- und Blautöne — vermutlich aus Layoutvorlagen extrahiert — die sich alle sehr ähnlich sind. Nach dem Launch der Seite verschlechterte sich dieser Zustand fortwährend. Mit jeder neuen Erweiterung wurde es schwieriger, festzustellen, welche Bestandteile wiederverwendet werden konnten. Das Ergebnis: eine Website mit inkonsistentem Erscheinungsbild und hohem Pflegeaufwand.
Ähnliche Erfahrungen habe ich in Projekten gemacht, in denen vorab ein aufwändig gestalteter “klassischer” Styleguide entwickelt wurde. Diese Dokumente werden oft in bester Absicht mit akribischem Detail umgesetzt. Ihnen fehlt allerdings die Anbindung an den realen Nutzungskontext: den Browser. Mit jedem weiteren Entwicklungsschritt wird es unwahrscheinlicher, dass diese Styleguides mit gepflegt werden. Spätestens ein halbes Jahr nach Launch fristen sie ihr Dasein als Zombie Styleguides in der dunklen Ecke eines Fileservers.
Ein besserer Ansatz: Living Styleguides
Ein Projektverlauf wie oben beschrieben hätte heutzutage noch drastischere Folgen. Die Anzahl der unterschiedlichen Devices und Bildschirmauflösungen, die wir bei der Entwicklung digitaler Produkte heute berücksichtigen müssen, lassen konsistente und anpassungsfähige Design-Systeme immer notwendiger werden.
Ein Design — eine Vielzahl an Devices (Quelle: https://www.flickr.com/photos/brad_frost/7387827018/in/album-72157630163121422/)
Glücklicherweise gibt es Wege, einem solchen Worst-Case-Szenario vorzubeugen:
- Keine Wasserfall-Strukturen: Kreative, Informationsarchitekten, Entwickler und Content-Strategen arbeiten vom ersten Tag an zusammen am Design-System.
- Rapid Prototyping: Design-Prototypen gelangen so schnell wie möglich in den Browser, um sie im Hinblick auf Responsivität, Performance, Bedienbarkeit und Interaktivität zu testen.
- Single Source Of Truth: Im Designprozess gibt es eine zentrale Quelle, die den aktuellsten Stand der Entwicklung für alle Projektbeteiligten zugänglich macht. Das schafft Transparenz.
Living Styleguides sind für eine solche Herangehensweise das perfekte Werkzeug. Sie sitzen genau an der Schnittstelle von Kreativen, Entwicklern und Informationsarchitekten und geben allen Beteiligten eine gemeinsame Plattform. Als zentrale Referenz stellen Sie verbindliche Informationen über die Struktur und das Styling aller verwendeten Elemente zu Verfügung. Sie bauen in der Regel auf klassischen Webtechnologien auf (HTML5, CSS, JavaScript), lassen sich ausgezeichnet in Content Management Systeme überführen und sind in vielen Fällen kompatibel mit git — dem Industriestandard in Sachen Versionsverwaltung. Dadurch eignen sie sich auch hervorragend für die Koordination dezentraler Teams.
Das Arbeiten mit Living Styleguides erleichtert das Wiederverwenden von modularen Bausteinen, beschleunigt Prozesse bei notwendigen Anpassungen und sorgt dafür, dass die Dokumentation des digitalen Produkts immer aktuell bleibt.
Die Qual der Wahl
Die Website styleguides.io bietet einen guten Überblick über eine Vielzahl an Tools, die sich für die beschriebene Arbeitsweise eignen. Die bekanntesten Vertreter sind zur Zeit Frontify, Fractal, SourceJS und PatternLab. Die vorgestellten Werkzeuge setzen zum Teil unterschiedliche Technologien ein und unterscheiden sich in der Bedienung und den dahinter liegenden Prozessen. Unser Unternehmen arbeitet seit einiger Zeit mit PatternLab, einem System, welches auf den Atomic Design Prinzipien von Brad Frost aufbaut.
Atomic Design setzt auf ein modulares Design-System, welches sich aus fünf evolutionären Stufen zusammensetzt:
Atome: die kleinstmöglichen Bedienelemente einer Seite, wie z.B. ein Fortschrittsbalken
Ein Fortschrittsbalken-Atom (Quelle: http://demo.patternlab.io/?p=atoms-progress)
Moleküle: einfache Kombinationen aus mehreren Atomen, wie z.B. eine Kachel mit Fortschrittsbalken und Text
Ein Kachel-Element als Molekül (Quelle: http://demo.patternlab.io/?p=molecules-block-tile)
Organismen: komplexere Ansammlungen von Atomen und Molekülen wie z.B. ein Grid aus mehreren Kacheln
Ein Grid mehrerer Kacheln als Organismus (Quelle: http://demo.patternlab.io/?p=organisms-tile-grid)
Templates: Eine aus mehreren Organismen zusammengesetzt Seitenvorlage
Ein Template (Quelle: http://demo.patternlab.io/?p=templates-dashboard)
Page: Die auf einem Template basierende Vollausprägung einer Seite mit echten Texten und Medienelementen
Eine Page in Vollausprägung (Quelle: http://demo.patternlab.io/?p=pages-dashboard)
Durch einen solchen Aufbau entwickelt sich kollaborativ unter Mithilfe aller Gewerke in kürzester Zeit ein sehr schlüssiges und ausbaufähiges System von Seitenelementen.
esten responsiver Designs direkt in Patternlab (Quelle: http://demo.patternlab.io/?p=pages-dashboard)
Alle Projektbeteiligten können unter realistischen Bedingungen gemeinsam Entscheidungen über Dimensionen, Abstände, Farben und die eingesetzte Typographie treffen. Zusätzlich vermittelt ein solches System das intendierte Look & Feel durch den Einsatz von Animationen, Benutzerinteraktionen und responsives Verhalten bei unterschiedlichen Breakpoints (siehe Grafik) deutlich besser als ein statisches Dokument. Das bringt Transparenz in den Qualitätssicherungsprozess und gibt Stakeholdern zusätzliche Sicherheit.
Hauchen Sie Ihren Styleguides Leben ein Unternehmen, die ein nachhaltig wachsendes digitales Ökosystem aufbauen wollen, benötigen Werkzeuge die es ihren interdisziplinären Teams ermöglichen den sich ständig verändernden Anforderungen an digitale Services gerecht zu werden. Living Styleguides sind das perfekte Werkzeug um diese Ziele zu befördern.
Einige Best Practices
Bei Interesse oder Fragen zum Thema nehmen Sie gerne Kontakt mit uns auf: telefonisch unter +49 (0)611 . 238 50 10 oder per E-Mail an kontakt(at)diefirma.de.
