Styleguide Driven Development (SDD)

Digitale Styleguides sind heute aus der modernen Webentwicklung nicht mehr wegzudenken. Als digitale Handbücher für Programmierung und Design erleichtern sie die Abstimmung zwischen User Experience (UX), Design und Programmierung – und gewährleisten ein konsistentes Erscheinungsbild auf allen Websites eines Unternehmens. Darüber hinaus sparen sie Agenturen und Auftraggebern ordentlich Kosten, da das Frontend zentral verwaltet wird und für alle beteiligten Parteien zur Verfügung steht.

Die wichtigsten Vorteile

Ein digitaler Styleguide hat vor allem zwei Kern-Benefits: Zum einen wird er zentral verwaltet. Beteiligte Agenturen können sich einfach daraus bedienen. Auf diese Weise muss nicht jedes Mal völlig neuer HTML-Code entwickelt werden – jede Seite baut auf einem vorgegebenen Grundgerüst auf. Eine gehörige Aufwands- und Kostenersparnis, die letztlich auch beim Auftraggeber ankommt.

Der zweite Vorteil: Es sieht alles schön gleich aus – und gleich schön. Die Website wirkt in sich aufgeräumt, professionell gestaltet und ansprechend fürs Auge. Denn im Styleguide ist alles definiert: Tonalität, Logos, Farben, Abstände, Buttons und vieles mehr.

Darüber hinaus ist es sehr einfach, einen Styleguide zu pflegen und zu aktualisieren. Auch flexible Anforderungen sind kein Problem: Wird ein weiteres Modul benötigt, wird es einfach im Laufe des agilen Prozesses hinzugefügt.

Der Styleguide lebt!

Technisch gesehen gibt es zwei Arten von Styleguides. Die eine ist der statische Styleguide, der als PDF-Datei oder als Website angelegt werden kann. Er ist eine Art Kopie des Live-Codes und muss ständig manuell aktualisiert werden. Die andere ist der Living Styleguide. Mehr als ein Handbuch, ist dieser ist eine realistische Darstellung eines Prototypen im Browser. Er basiert auf demselben Code für das Frontend wie die Live-Seite (HTML, JavaScript und CSS) und wird automatisch aktualisiert. Gerade das macht den Living Styleguide interessant. Seine automatische Funktionsweise hält ihn aktuell und authentisch und reduziert dabei den Pflege-Aufwand. Der Weg vom Styleguide bis zum fertigen Endprodukt wird kürzer und effizienter.

Mehr zu Living Styleguides

Was genau ist ein Styleguide?

Ein Styleguide gibt alle Branding-Informationen einer Website vor und listet alle enthaltenen User-Interface-Komponenten auf. Er definiert also alle Bausteine der Benutzeroberflächen. Von einem Corporate-Design-Manual, wie man es aus dem Print-Bereich kennt, unterscheidet er sich dadurch, dass er neben grafischen Elementen wie Logo, Icons, Farben etc. auch Programmiercode definiert.

Die Wunderwelt der Atome

Wie werden nun die einzelnen Frontend-Komponenten im Styleguide strukturiert und beschrieben? Dafür haben sich modulare Ansätze bewährt. Der bekannteste nennt sich "Atomic Design", weil er eine Website wie ein Ganzes begreift, das aus kleinen und kleinsten Bausteinen zusammengesetzt ist – wie ein physikalischer Körper oder ein lebendiger Organismus.

Die Bausteine des Atomic Design:

Der Weg zum perfekten Styleguide – ein Bericht aus der Praxis

Wie sieht nun der Styleguide aus, der sich geschmeidig in den Prozess einbindet, sich auch von externen Profis intuitiv bedienen lässt und perfekte Ergebnisse garantiert? Mit dieser Frage sah sich auch die coma AG konfrontiert. Die Münchner Webagentur entwickelt Websites mit diversen Anforderungen für Kunden aus verschiedensten Branchen. Schnell war man dort zu der Erkenntnis gelangt: Die Schlüssel zu einem geordneten Frontend, das sich in jedem Stadium des Entwicklungsprozesses von allen Beteiligten handhaben lässt, sind Atomic Design und SDD. Nur bei der konkreten Umsetzung gab es mehrere mögliche Wege, die erst einmal auszutesten waren.

So nahm coma einige Systeme von Drittanbietern unter die Lupe – und hätte sich beinah für eines entschieden. "Frontify wäre fast das optimale Tool für uns gewesen", erinnert sich Annika Külzer, Web-Entwicklerin bei coma. "Aber es hatte einen Nachteil: Es hätte nicht zu unserem bestehenden Entwicklungsprozess gepasst. Lang etablierte Projekte hätten wir komplett umbauen müssen. Vor dem Hintergrund dieses Arbeitsaufwands erschien uns der Kostenaufwand für den Erwerb der Software zu hoch. So mussten wir leider von der eigentlich sehr guten Lösung Frontify Abstand nehmen."

Also hieß es bei coma: Ärmel hochkrempeln und kurzerhand eine eigene Lösung basteln. Das Ergebnis: "Ein Living Styleguide als CMS, der das Frontend automatisch in Form einer Pattern Library importiert und voll in unseren Prozess eingebunden ist", so Annika Külzer weiter.

Damit sind die wichtigsten Vorteile der coma-Eigenkreation schon genannt. Der Styleguide lebt. Jede Änderung im Frontend wird automatisch für alle Beteiligten sichtbar – in Echtzeit. Die Änderungs-Hoheit belässt coma dabei in der eigenen Hand. Dies gewährleiste überlegtes, strukturiertes Arbeiten, man behalte stets den Überblick und reduziere außerdem den Arbeitsaufwand für die anderen beteiligten Parteien.

Der zweite essenzielle Aspekt ist die Umsetzung als Content-Management-System. Reine Styleguides ohne CMS geben zwar den Programmiercode auch mit Dokumentation aus. Die Kommentare sind aber oft selbst für Profis erklärungsbedürftig. So setzte coma ein CMS darauf, das es ermöglicht, Kommentare redaktionell aufzubereiten, sodass sie für alle Mitwirkenden aussagekräftig werden.

Dargestellt wird der Styleguide als Website – oder besser: als kommentierter, vorläufiger Prototyp in ständiger Entwicklung. Ein authentisches Abbild einer Website im Ist-Stadium also, das auch von Nicht-Programmierern eingesehen und verstanden werden kann. Die einzelnen Komponenten der Website – vom Button bis hin zu ganzen Seiten-Templates – lassen sich dabei unabhängig voneinander betrachten. Eben so, wie es die Atomic-Design-Schule lehrt. Dies erlaubt es der Agentur, dem Kunden Beispiele für Module aufzuzeigen. "Man will ja nicht immer nur Standard", so Annika Külzer. "Gerade bei Teasern gibt es oft verschiedene Formate und Varianten, die aber klar definiert sein müssen. Da können wir Kunden und den umsetzenden Grafikern direkt zeigen, was geht."

Ein System, das sich bei coma in der Gegenwart bereits bewährt hat. Und wie sieht die Zukunft aus? "Vielversprechend", lächelt Annika Külzer. "Das liegt auch an den Tools, mit denen unsere Lösung arbeitet: Laravel und Statamic. Die werden sicher noch länger auf dem Markt bestehen und lassen uns viele Freiheiten. Zum Beispiel – ich visioniere mal vor mich hin – zum Beispiel könnte es künftig möglich sein, mehrere Frontends desselben Unternehmens einzubinden oder noch mehr Branding-Optionen anzubieten."

Fazit: aktuell, flexibel, benutzerfreundlich

Wer also braucht einen Styleguide und wie sollte dieser beschaffen sein? Jeder, dem bei der Erstellung von Websites so langsam der Überblick fehlt (Welche Änderung ist jetzt gültig? Warum sieht der Button auf Seite X anders aus als auf Seite Y? Wie finde ich mich in der Seitenstruktur zurecht?), wird die Erleichterung durch einen Styleguide als Wohltat empfinden. Damit dieser gut funktioniert, sollte er allerdings jederzeit auf dem neuesten Stand, flexibel und benutzerfreundlich sein. "Unser System ist zu 90 % automatisiert und daher stets aktuell und vollständig", so coma-Vorstand Martin Kirmaier. "Das flexible CMS lässt große Freiheiten bei der Gestaltung der Inhalte. Und Frontend wie Backend sind intuitiv zu bedienen und leicht zu warten." Darüber hinaus lasse sich der hauseigene Styleguide schnell und optimal in bestehende Entwicklungsprozesse integrieren.

Na denn: fröhliches Stylen und Guiden.

Demoversion 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.