Digital Styleguide

Gerade bei Styleguides lohnt es sich, darauf zu achten, wie sie angelegt werden. Als starrer Styleguide, der in einer gedruckten Form oder digitalen Form vorliegt, oder als ein dynamischer Styleguide, der mit der Anforderung einer agilen Marke wächst und sich einfach und schnell anpassen lässt. In einer starren Form werden Styleguides in der Regel über eine Layoutsoftware erstellt und dann in gedruckter oder digitaler Form publiziert. Die Style-Vorgaben einer Marke sind in einem Dokument zusammengefasst. Das Aktualisieren, Anpassen und Verbreiten neuer Vorgaben oder Rahmenbedingungen nimmt so eine gewisse Zeit in Anspruch, bis alle Beteiligten darüber informiert sind und im Sinne der Marke handeln können. 

Sprechen wir heute von modernen Methoden für die Dokumentation von Styleguides, führt kaum ein Weg an einer Weblösung vorbei. Wie der Begriff "Living Styleguide" schon assoziiert, handelt es sich hier um einen lebendigen Styleguide, der schnell auf die Bedürfnisse einer modernen, agilen Marke eingehen kann.

Ein Living Styleguide kann auf zwei unterschiedlichen Wegen umgesetzt werden: Entweder klassisch über das Content-Management-System von TYPO3, wo in einem geschützten Bereich der Website mit einem Frostend-Login alle relevanten Informationen zur Marke dokumentiert werden. Hier haben nur ausgewählte Personen Zugriff auf die Informationen. Logos oder andere digitalen Assets des Unternehmens stehen über diesen Weg allen ausgewählten Nutzern zur Verfügung.

Oder über einen noch dynamischeren Weg – bei dem der Living Styleguide direkt aus den CSS-Klassen der Website generiert wird. In diesem Fall wird die CSS-Struktur so programmiert, dass sie direkt mit der Living Styleguide Lösung verknüpft ist. Alle Informationen zum Styleguide wie beispielsweise für eine Website werden so voll automatisch mit der Programmierung der Website strukturiert angelegt und dokumentiert. Einen solchen Living Styleguide bauen wir auf der Basis von Atomic Design nach Brad Forst auf. Bei dieser Herangehensweise werden zuerst die kleinsten gemeinsamen Elemente = Atome -> Moleküle -> Organismus -> Templates -> Seiten aufgebaut. Das bedeutet, dass wir beim Living Styleguide mit dem Aufbau der kleinsten Elemente (zum Beispiel Buttons) beginnen, bis zum Schluss die ganze Seite (zum Beispiel Viewport) als das größte Element, auf Basis der kleinen Elemente, gestaltet wird. Dabei berücksichtigen wir selbstverständlich auch das verwendete Rastersystem oder auch Framework und bilden es ebenfalls ab.

Dieser Weg bietet in der agilen Entwicklung einer Marke mit digitalem Schwerpunkt einen einfachen und schnellen Anpassungsworkflow. Wünscht der Kunden zum Beispiel die Änderung eines Atoms, so kann dieser über den Styleguide aktualisiert werden. Nach Freigabe der Anpassung wird die Änderung über die ganze Seite hinweg automatisch aktualisiert. Im gleichen Moment ist auch der Styleguide auf dem neuesten Stand, ohne dass eine Person oder Entwickler aktiv werden musste. Ein extrem dynamischer und effizienter Prozess. Vor allem moderne, dynamische Marken können von einer solchen agilen Anpassung profitieren.

Wir beraten Sie gerne, wie Sie ihre Marke im digitalen Zeitalter agil entwickeln und dokumentieren können.