Digitaler Styleguide vs. klassischer Styleguide

Was ist ein klassischer Styleguide?

Ein Styleguide dient dazu, Produkte, Dienstleistungen und die damit verbundene visuelle Kommunikation einer Firma/eines Brands konsistent zu gestalten. Er definiert klare Regeln für die "Anwendung" des Brands. Der Styleguide hift also dabei, das Produkt- und Markenerlebnis vorzugeben und kontrollieren.

Oftmals trifft man einen solchen Styleguide in Form eines «Corporate Design Manuals», «Brand Manuals» oder eben «Styleguide» an. Typischerweise sind darin folgende Vorgaben definiert:

• Platzierung und Verwendung des Logos
• Einsatz von Schriften
• Definition von Schrifthierarchien
• Schreibregeln
• Einsatz von Bildern und Bildwelt
• Vorgaben und Vorlagen zu Printprodukten: Broschüren, Geschäftsbriefe, Couverts, Visitenkarten

Je nach Grösse eines Brands unterscheidet sich auch der Umfang eines Styleguides. Der Styleguide von Grossfirmen können mitunter mehrere 100 Seiten lang werden. Kleinere Firmen arbeiten mit einem Styleguide der ein paar Seiten lang sind. Viele Firmen kommen sogar ohne Styleguide aus. In jedem Fall empfiehlt es sich, klare Regeln für die Anwendung zu setzen um "Wildwuchs" zu vermeiden.

Dies hat sich seit Jahrzehnten kaum verändert.

Was ist ein digitaler Styleguide?

In der Zwischenzeit sind aber sämtliche Branchen mit der Digitalisierung konfrontiert worden, wodurch der digitale Auftritt einer Marke parallel zum Offline-Auftritt geplant und gestaltet werden muss. Somit ist auch für das Digitale ein Styleguide notwendig. Doch zuerst:

Was macht digitale Medien überhaupt besonders?

(aus Branded Interactions, Marco Spies)

Digitale Medien sind dynamisch

Die digitale Welt ist sehr schnelllebig, Technologien unterliegen eher kurzen Lebenszyklen. Ein Styleguide muss für diesen Wandel bereit sein. Vor 2013 war war das Thema "responsive Webdesign" noch nicht sehr wichtig. Wenige Jahre später ist die Unterstützung von mobilen Endgeräten nicht mehr wegzudenken. Gerade die eingeschränkte Bildschrimgrösse von mobilen Geräten haben weitreichende Auswirkungen auf die visuelle Inszenierung.

Digitale Medien sind multimedial

Im Gegensatz zu Printprodukten findet bei digitalen Medien eine viel stärkere Interaktion statt. Neben Text und Bild können auch multimediale Inhalte wie Video, Audio, interaktive Elemente und vieles mehr dargestellt werden.

Digitale Medien sind vernetzt

Inhalte auf digitalen Medien können von unterschiedlichen Quellen kommen und es können auch wieder unterschiedliche Ausgabegeräte damit bespielt werden. Ein Designer hat zu beachten, dass ihm allenfalls sogar die Hände gebunden sind, weil eine Gestaltung gemäss Styleguide gar nicht möglich ist.

Digitale Medien sind variabel

Heute besitzen viele Leute einen Desktop-Computer, eine Tablet und ein Smartphone. Und trotzdem ist die Erwartung vorhanden, dass ein Brand trotz unterschiedlichen Geräten einheitlich auftritt.

Digitale Medien sind partizipativ

Die Kontrolle über den Inhalt eines digitalen Produkts liegt nicht mehr komplett bei den Gestaltern und den Betreibern des Produkts. Heute nehmen Nutzer einen wichtigen, wenn nicht sogar den wichtigsten Platz ein, wenn es um die Generierung von Inhalten geht.

Was ein digitaler Styleguide beinhalten muss

Im folgenden sind einige Punkte aufgelistet, die insbesondere in einem digitalen Styleguide nicht fehlen dürfen.

Typographie

Wie im klassischen Styleguide gehört die Definition von Schriften, Schriftgrössen, Zeilenabstände etc. zur Grundausstatung des digitalen Styleguides. Neben den verschiedenen Titelgrössen und Lauftext gehören aber auch Elemente wie Links, Listen, Buttons/Knöpfe, Tabellen zum Kapitel Typographie. Typischerweise werden die Stylevorgaben für alle HTML Elemente definiert.

Farben

Während für Printprodukte die Angabe in CMYK reicht, sollten Farbwerte eines digitalen Styleguides in einem digitalen Format angegeben werden: RGB oder HSL.

Layout und Grid

Im Gegensatz zum klassischen Styleguide muss für das Digitale unbedingt definiert werden, wie die einzelnen Spalten auf Tablets oder Smartphones umbrechen, sodass auch dort das Layout stimmt. Ein gutes Beispiel dafür ist die Erklärung für das Responsive Grid des Ubuntu Styleguides.

Layouts und Grids können sehr komplex werden. Eine Abhilfe schaffen sogenannten Grid-Frameworks welche die Komplexität reduzieren. Wir bei netnode verweden zum Beispiel das Zurb Framework, UiKit und Bootstrap.

Animationen

Animationen sind nur schwer in Worte zu fassen, denn jeder versteht diese leicht anders. Hier gilt: wenn es die Technologie erlaubt, sollte man innerhalb des Styleguides die Animation gleich Programmieren, sodass der Code der Animation mittels Copy und Paste übernommen werden kann.

Formulare

Formulare sind besonders wichtig, weil sie unter Umständen die vorerst einzige Schnittstelle von Ihnen zu Ihrem Kunden sind. Ist ein Formular unübersichtlich oder leitet den Nutzer nicht vorbildlich, fühlt er sich nicht verstanden und tendiert dazu, Ihre Webseite zu verlassen.
Daher ist es sinnvoll, gewisse Vorgaben für Formulare in einem digitalen Styleguide zu machen:

• Wie erfährt der Nutzer, wenn er ein Formularfeld nicht ausgefüllt hat?
• Wie erfährt der Nutzer, wenn er in einem Formularfeld eine falsche Angabe gemacht hat?
• Wie erscheint eine Bestätigungsseite nach dem Absenden des Formulars?
• Wie weiss der Nutzer, welche Angaben in ein Formularfeld gehören?
• Wie sind mehrseitige Formulare strukturiert etc.

Technische Anforderungen

Bei klassischen Styleguides werden oftmals Vorgaben zur Papierqualität gemacht. Genau gleich können bei digitalen Styleguides Vorgaben zu technischen Gegebenheiten gemacht werden. Dies können beispielsweise sein:

• Wie schnell muss eine Webseite geladen sein?
• Bis zu welcher Browserversion soll die Webseite gestalterisch einwandfrei erscheinen? Bis zu welcher Browserversion soll eine Webseite funktional richtig erscheinen?
• Wie gross muss der Monitor oder TV-Screen mindestens sein, auf denen das digitale Produkt gezeigt wird?
• Auf welchen mobilen Betriebssystemen (iOS, Android, Windows Phone etc.) sollen Apps einer Firma grundsätzlich laufen?

Interaktive Prototypen/Page Templates

Wie bereits erwähnt, empfiehlt es sich bei einem digitalen Styleguide sehr nahe am Medium selbst zu arbeiten. Digitales Verhalten auf einem A4 Papier zu drucken macht wenig Sinn. Wir haben gute Erfahrungen gemacht, einen digitalen Styleguide als interaktiven Prototypen zur Verfügung zu stellen. Dieser enthält neben den detaillierten Spezifikationen auch gleich Anwendungsbeispiele. Es gibt auch eine Reihe von Styleguide Tools die nützlich sind wie z.B. der Styleguide von Huge, Drupal Styleguide oder das kostenpflichtige Tool https://frontify.com von https://frontify.com.

Fazit

Es gibt unzählige Bereiche eines digitalen Produkts, welche in irgendeiner Form gestaltet werden müssen. Die Freiheit dafür ist gross, das Potential zur Verwässerung Ihrer Marke ist riesig. Daher sollten sich Verantwortliche von digitalen Produkten unbedingt dafür einsetzen, in Abstimmung mit dem Markenverantwortlichen einen Styleguide für das digitale Produkt zu erstellen.

Gute Beispiele von Styleguides mit digitalen Elementen

• Salesforce: https://www.lightningdesignsystem.com
• Lonely Planet: http://rizzo.lonelyplanet.com/styleguide
• BBC: http://www.bbc.co.uk/gel
• Fontshop: https://www.fontshop.com/styleguide/globals