Der digitale Styleguide  —  Ein Muss für jedes Unternehmen

Warum ist ein digitaler Styleguide so wichtig?

Heutzutage haben Kunden von Unternehmen immer mehr digitale Touchpoints, wie z. B. die Website, Online-Shop, soziale Netzwerke oder Smartphone-Apps für Messen und vielem mehr. Deshalb ist es wichtig, dass Kunden eine konsistente, einheitliche User-Experience in allen digitalen Touchpoints erleben. Diese Konsistenz stärkt nicht nur die Marke, sondern bringt auf lange Sicht den Vorteil mit, dass neue Projekte schneller und effektiver gestaltet und umgesetzt werden können. Der Schlüssel, um diese Konsistenz über alle digitalen Touchpoints zu erreichen heißt: Digitaler Styleguide. Man kennt ihn auch unter anderen Namen: Design Systems, Design Patterns, Design Framework, UI Styleguide. Nicht zu verwechseln mit Corporate Design oder Corporate Identity. Hierbei geht es auch über Design hinaus, es geht auch darum wie z. B. Texte geschrieben werden. Der Styleguide ist wichtig, um das gesamte Auftreten des Unternehmens zu definieren!

Die Vorteile des digitalen Styleguides

Was sind die Vorteile davon einen Styleguide zu erstellen und ihn im Projekt anzuwenden? Durch das Arbeiten an diversen digitalen Produkten, haben wir miterlebt, wie praktisch und vorteilhaft es ist, wenn ein Unternehmen einen Styleguide vorweisen kann.

• Konsistenz - Durch Regeln, Muster und Elemente, die an einem Platz zentral aktuell gehalten werden, kann man die digitalen Lösungen viel einfacher konsistent halten. Durch die Konsistenz gibt es die Möglichkeit, die User-Experience zu steigern, was wiederum zu mehr Konsumenten, mehr Kunden und somit mehr Umsatz führt.

• Aktualisierungen - Bei komplexen Produkten ist die Anforderung für Updates hoch. Indem man einen Styleguide erstellt, verbessert man logischerweise die Updatefähigkeit, da man die Benutzeroberfläche des digitalen Produkts in kleinere und besser wartbare Bausteinen aufteilt.

• Recycling - Sobald die Benutzeroberfläche in kleine Blöcke aufgeteilt ist, kann man das Produkt im Baukastenprinzip zusammen bauen. Man kann sich das prinzipiell wie Lego vorstellen. Der Styleguide funktioniert ähnlich. Ist der Styleguide richtig gut gemacht, wirkt sich eine Veränderung z. B. an einem Button überall im Styleguide aus.

• Referenz - Der Styleguide sollte zur zentralen Anlaufstelle des Design und Development Teams werden. Der Ort, an dem die Designer und Entwickler Unstimmigkeiten klären und besser miteinander kommunizieren können.

Die wichtigsten Komponenten in einem Styleguide

Zielgruppe und Personas

Alle stilistischen Mittel basieren auf den Informationen, die man in der Zielgruppe definiert. Um richtig mit seinen Nutzern kommunizieren zu können muss man erst mal wissen, wer diese sind. Um sich seine Zielgruppe besser vorstellen zu können, kann man 2-3 Personas erstellen, diese helfen dabei sich in die Kunden hineinzuversetzen.

Es ist wichtig, die entwickelte Zielgruppe und Personas auch im Styleguide aufzuführen, da alles darauf basiert.

Logo

Das Logo ist der zentrale Angelpunkt für die Darstellung eines Unternehmens. Das Logo ist oft das erste, was jemand von einer Marke wahrnimmt. Somit ist es sehr wichtig, auch für das Logo bestimmt Richtlinien zu definieren und diese auch im Styleguide festzuhalten:

• Schutzzone des Logos
• Welche Positionen kann das Logo haben
• Wie groß darf es maximal oder minimal abgebildet werden
• In welchen Farben darf das Logo zu sehen sein (z.B. Inverse)
• Position des Claims zum Logo (falls vorhanden ist)
• Negativ- und Positivbeispiele

Typografie

Durch die Schrift wird der Inhalt an Besucher, Nutzer und Kunden übermittelt, somit ist die Typografie eines der wichtigsten Stilelemente. Hier ist es natürlich wichtig, dass etwas schön ist, aber noch wichtiger ist es die Funktionalität immer mit einzubeziehen. Einen Weg Schönheit mit Funktionalität zu verbinden ist der richtige Weg zur richtigen Typografie. Im Styleguide sollte festgehalten sein:

• Definition der Schriftart (Primärschrift, Sekundärschrift, Highlightschrift)
• Die Schriftgrößen die möglich sein können (für alle festgelegten Schriftarten)
• Linienhöhe
• Schriftauszeichnungen zum hervorheben von Passagen
• Richtlinien für die Textgestaltung (Wie lang darf ein Text sein? Welche Ausrichtung sollte der Text haben? Auf welchen Hintergründen darf ein Text stehen?)

Beispiel von Typografie Guidelines: hier sind die Definitionen und die Erklärungen, warum die Entscheidung auf diese spezielle Schriftart getroffen wurde sehr gut dargestellt. Es ist offensichtlich, dass man sich hier wirklich darüber Gedanken gemacht hat, wie man durch den Einsatz von Typo, Design gleichzeitig schön und funktional gestalten kann. Die Autoren gehen sogar soweit und definieren bestimmte Anwendungsbeispiele und Kombinationsmöglichkeiten.

Farben

Eine Art, um Emotionen zu transportieren, ist die passenden Farben zu verwenden. Damit jeder Mitarbeiter diese und deren Verwendung an einem Ort hat, ist es wichtig, der Farbauswahl auch einen Platz im Styleguide zu verschaffen. Eine Möglichkeit ist, die Farben nach Funktion zu gruppieren:

• Primärfarbe: die Haupterkennungsfarbe oft die Farbe des Logos um eine Wiedererkennung herzustellen
• Sekundärfarbe: Oft wird eine zweite Farbgruppe gewählt, um noch mehr Variation zu schaffen. Hier unterscheidet man, ob die zweite Farbe Kontrast schafft oder doch harmonisiert, indem sie in derselben Farbgruppe ist
• Hightlightfarbe: Die Highlightfarben sind wichtig, um zu definieren wie man etwas genau hervorheben kann
• Weitere Farbelemente wie Overlays und Verläufe

Beispiel von MarvelApp.com Farbpalette: Zeigt eine strukturierte Übersicht der Farben, basierend auf den Brand Farben von Marvel. Der Autor definiert zudem dunklere und hellere Nuancen, das lässt Raum für Interpretationen und sorgt gleichzeitig für gleichbleibende Farben. Es werden außerdem neutrale graue Farbflächen und Warnmeldungen definiert, die oftmals wichtige Bestandteile von grafischen Benutzeroberflächen sind.

Abstände und Positionierungen

Unter den Bereich Abstände und Positionierungen fällt unter anderem:

• Grid System (Größe, Gutters, Nesting, …)
• Regeln und Muster der Abstände
• Helfer für Abstände (wiederverwendbare Komponenten für vertikale und horizontale Abstände zwischen UI Elementen)

Beispiel von MailChimp.com: Hier haben die Autoren das Grid-System in den Styleguides integriert. Sie definieren auch Zwischenabstände (sogenannte “Gutter”), gemischte Grids oder aber auch verschachtelte Grids und darüber hinaus funktioniert das Grid auch für ein Responsive-Design.

Iconografie

Icons sind wie eine eigene Schriftart. Die Verwendung von einer einheitlichen Iconsprache führt dazu, dass man ein Wiedererkennungswert schafft:

• Alle Icons in der Übersicht (bewahrt die Konsistenz)
• Icon Versionen für helle und dunkle Hintergründe
• Einheitliche Größen
• vordefinierte Slices für den SVG-Export

Beispiel der BBC Guidelines: Sie legen großen Wert auf Ihre Icons und zeigen diese in Ihrem Styleguide. Die Icons sind in einer Übersicht aufgelistet und sind nach Anwendungsbereich gruppiert. Der Stil der Symbole ist sehr konsistent und in dem Abschnitt “Rules for using icons”, wird die Verwendung der Symbole beschrieben.

Fotos & Grafiken

Wichtig bei Fotos und Grafiken ist zu definieren, wie die Wirkung dieser sein soll. Oft sind Fotos das erste, was einem Nutzer an einem Produkt auffällt, sie können die verschiedensten Emotionen vermitteln und hervorrufen. Grafiken hingegen haben eher eine Informationsaufgabe, auch hier ist es wichtig zu definieren, wie die Informationen richtig an den Kunden weitergegeben werden. Deswegen sollte man Richtlinien im Styleguide festlegen:

• Bildsprache
• Bildbearbeitung (z. B. vordefinierte Filter)
• Videos
• Animationen
• Richtlinien für Grafiken (Anordnung, Farben, Strukturen)

Texte

Die Ansprache der möglichen Kunden des Unternehmens oder der Marke ist sehr wichtig und spielt mit der Zielgruppe zusammen. Je nachdem wen man erreichen möchte sollten die Texte auch passend geschrieben werden. Kriterien dafür sind:

• Schreibstil
• Sprache
• Ansprache
• Interaktionsmuster: z.B. Wie werden Kunden angesprochen?

UI Elemente

Zunächst sei gesagt, dass jedes Produkt eigene individuelle Elemente benötigt. Der Schlüssel ist, dass alle Elemente auf der Grundlage der vorherig definierten Typografie, Farben, Abstände und Iconografie erstellt werden. Hier ein paar Beispiele zur Inspiration was unter diese Kategorie fallen würde:

• Navigation (Hauptnavigation, sekundäre Navigation, Breadcrumbs, Pagination, …)
• Buttons (primär/sekundäre, weitere Buttons, …)
• Warnmeldungen (Warnungen, Error, Information, Validierungen, …)
• Formulare (Felder, Radio Buttons, Checkboxen, Auswahlfelder, …)
• Zusätzliche Elemente (Produktdarstellung, Warenkorb, Listenansicht, Layer, …)

Beispiel von MailChimp.com: In Ihrem Styleguide gibt es Live-Beispiele mit entsprechenden Code-Snippets und Source-Code, der von Entwickler einfach genutzt werden kann. Sie gehen auch noch einen Schritt weiter und erklären jedes Element mit einer Notiz.

Templates

Innerhalb der Templates dienen die definierten UI-Elemente als Vorlage. Als Inhalt werden Platzhalter für Bilder oder Texte eingesetzt. Dynamische Komponenten können mit Beispieldatensätzen implementiert werden.

• Views
• Sections
• Seiten

Beispiel von USA.gov: Zeigt, wie die Templates auf der Grundlage von Style-Guide-Komponenten und Unterkomponenten gut definiert und beschrieben werden können. Eine zusätzliche Hilfe können die ergänzenden Abschnitte “When to use”, “When to avoid” und “Guidance” sein.

Sonstiges

Sonstige Teile des Styleguides können je nach Projekt sehr individuell sein. In einem Styleguide kann alles stehen, was den Style und das Unternehmen beschreibt und was nötig ist, um die Produkte zu gestalten. Weitere Beispiele, die in einem Styleguide aufgeführt sein könnten:

• Namenskonventionen
• Strukturregelungen
• Code Guidelines
• Corporate Identity Guidelines

Beispiele zur Inspiration:

• Styleguide von HealthCare.gov enthält Markenwerte oder spezielle Richtlinien für Fotos.

• Bei MarvelApp.com wird großer Wert auf Animationen gelegt, sodass in ihrem Style-Guide ein Abschnitt hierfür definiert ist.

• Beim letzten Beispiel von USA.gov kann man sehen, dass auch allgemeine Designprinzipien einen Platz im Styleguide bekommen können.

Weitere Artikel zum Thema Styleguides

Da das ganze Thema Styleguides sehr umfangreich ist, ist hier eine Liste von Artikeln, die sehr hilfreich sind:

• 8 Beispiele für einen Styleguide veröffentlicht auf t3n.de
• Designing Style Guidelines For Brands And Websites veröffentlicht auf Smashingmagazine.com
• Warum Sie einen Styleguide brauchen und wie Sie ihn bekommen? veröffentlicht auf HubSpot
• Style Guide Best Practices veröffentlicht auf Bradfrost.com
• Design Systems veröffentlich auf Blog.marvelapp.com
• und vieles mehr auf Website Style Guides Resources…

Viel Arbeit aber es lohnt sich

Wie man durch diese Liste merkt, gibt es sehr viele Bestandteile für einen Styleguide. Das wirkt auf den ersten Blick zwar sehr viel, jedoch ist das ein langer Prozess. Wenn man einen detaillierten und gut strukturierten Styleguide für sein Unternehmen erstellen möchte, muss man bereit dafür sein, dass sich Elemente oft anpassen oder ändern können. Um eine Kontinuität zu wahren, ist es sehr wichtig, den Styleguide immer zu aktualisieren. Wenn das funktioniert, steht der erfolgreichen Arbeit des Teams nichts mehr im Wege.

Sie möchtesn sich zum Thema Styleguide beraten lassen? Kein Problem! Kontaktieren Sie uns gerne per E-Mail oder rufen Sie uns direkt an.