codeblick logocodeblick logo small

Digitale Strategien

Der digitale Styleguide  —  Ein "Must-Have" für jedes Unternehmen

Heutzutage haben Kunden von Unternehmen immer mehr digitale Touchpoints, wie z.B. die Website, Online-Shop, soziale Netzwerke oder Smartphone-Apps für Messen uvm. Deshalb ist es wichtig, dass Ihr Kunden eine konsistente, einheitliche User-Experience in all Ihren digitalen Touchpoints erleben. Diese Konsistenz stärkt nicht nur Ihre 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 Ihre digitalen Touchpoints zu erreichen heisst: Digitaler Styleguide.

Sie haben dafür vermutlich bereits andere Formulierungen gehört. Häufig verwendet wird auch: Design Systems, Design Patterns, Design Framework, UI Styleguide. Der Grundsatz ist aber der selbe: Sie brauchen ein System in Ihren Designs!

1. Die Vorteile

Was sind die Vorteile einen Styleguide zu erstellen und ihn im Projekt anzuwenden?

Als Mitwirkender in diversen digitalen Produkten, habe ich persönlich die Vorteile miterlebt, die ein Styleguide vorweisen kann. 

  • Konsistenz — Durch Regeln, Muster und Elemente, die an einem Platz zentral aktuell gehalten werden, können Sie Ihre digitalen Lösungen viel einfacher konsistent halten. Wie Sie bereits erfahren haben, gibt es uns die Möglichkeit die User-Experience zu steigern, was wiederum zu mehr Konsumenten, mehr Kunden und somit mehr Umsatz führt.
  • Aktualisierungen — Haben Sie ein komplexes Produkt, ist die Anforderung für Updates hoch. Indem Sie einen Styleguide erstellen, verbessern Sie logischerweise die Updatefähigkeit, da Sie die Benutzeroberfläche Ihres digitalen Produkts in kleinere und besser wartbare Bausteinen aufteilen.
  • Recycling — Sobald Sie Ihre Benutzeroberfläche in kleine Blöcke aufgeteilt haben, können Sie Ihr Produkt im Baukastenprinzip zusammen bauen. Man kann sich 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 Ihres Design und Development Teams werden. Der Ort, an dem Ihre Designer und Entwickler Unstimmigkeiten klären und besser miteinander kommunizieren können.

2. Die Komponenten

Was sind die Komponenten eines guten digitalen Styleguides?

Bei codeblick definieren wir zu Beginn unserer Projekte einen initialen Styleguide. Natürlich gibt es nicht ein Allgemein-Rezept, da jedes Projekt unterschiedlich und seine Eigenheiten hat. Es hilft uns aber die Konsistenz zu wahren, sowohl intern als auch mit externen Projektteilnehmern. Ein wichtiger Bestandteil ist, den Styleguide schrittweise und stetig zu verbessern und zu aktualisieren. Alle Projektteilnehmer werden es Ihnen danken!

Nachfolgend finden Sie unsere persönliche Checkliste welche Bestandteile unsere Styleguides enthalten. Zudem finden Sie weiter unten gute Beispiele und Screenshots von “lebenden” Styleguides anderer Unternehmen und Organisationen, wie BBC.co.ukmailchip.comMarvelApp.comUSA.gov und HealthCare.gov.

2.1. Typography

  • Primäre Schriftart
  • evtl. eine sekundäre Schriftart (!eine dritte Schriftart ist in der Regel nicht notwendig!)
  • ausgewählte Schriftfamilien (Light, Regular, Italic, Bold, Semibold, …)
  • Text Beispiele (Headlines, Paragraphen, Inhalt)

Bei dem unteren Screen sieht man ein sehr gutes Beispiel von Typografie Guidelines. Mir persönlich gefällt die Definition und die Erklärung, warum die Entscheidung auf diese spezielle Schriftart getroffen wurde. 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.

null

https://standards.usa.gov/components/typography/

2.2. Farbpalette

  • Primärfarben
  • Sekundärfarben
  • Komplementärfarben
  • Highlight Farben (Warnungen, Fehler, Informationen, Validierungen, …)
  • Zusätzliche Farbelemente (z.B. Verläufe oder halbtransparente Overlays)

Das untere Beispiel: Der Screenshot von der MarvelApp.com Farbpallette zeigt uns eine strukturierte Übersicht der Farben, basieren auf den Brand Farben von Marvel. Der Autor definiert zudem dunklere und hellere The authors define there also darker and lighter Nuancen. Das lässt Raum für Interpretationen und sorgt gleichzeitig für gleichbleibende Farben. Es werden ausserdem neutrale graue Farbflächen und Warnmeldungen definiert, die oftmals wichtige Bestandteile von grafischen Benutzeroberflächen sein sind.

null

https://marvelapp.com/styleguide/design/color-scheme

2.3. Abstände und Positionierungen

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

Das Beispiel unten: Ein Grid-System ist meiner Meinung nach ein wichtiger Bestandteil eines guten digitalen Styleguides und es ist das wichtigste Werkzeug um alle UI-Elemente im Raster auszurichten und die Position korrekt zu bestimmen. Auf MailChimp.com haben die Autoren das Grid-System in Ihre 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.

null

http://ux.mailchimp.com/patterns

2.4. Iconografie

  • 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

Das Beispiel unten: Eines der Grundprinzipien der BBC Guidelines besteht aus Ihrer Iconografie (die anderen sind Grid und Typografie). Bedeutet Sie legen großen Wert auf Ihre Icons und zeigen diese in Ihrem Styleguide in alle aufgelistet in einer Übersicht, gruppiert nach Anwedungsbeispielen. Der Stil der Symbole ist sehr konsistent und mir gefällt auch der Abschnitt “Rules for using icons”, in dem die Verwendung der Symbole beschrieben wird.

null

http://www.bbc.co.uk/gel/guidelines/iconography

2.5. UI Elemente

Zunächst sei gesagt, dass jedes Produkt eigenen individuellen Elemente benötigt. Nachfolgend finden sie eine Liste von Elementen, die z.B. für eine Anwendung benötigt werden können. Sie dienen hier eher als Inspiration für die eigene Anwendung, Website oder Shopsystem. Der Schlüssel ist, dass alle Elemente auf der Grundlage der vorherig definierten Typografie, Farben, Abstände und Iconografie erstellt werden:

  • 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, …)

Das Beispiel unten: Auf dem Screenshot von MailChimpcom sind alle UI-Elemente aufgelistet, die für Ihr Projekt benötigt wird. In Ihrem Styleguide, gibt es Live-Beispiele mit entsprechenden Code-Snippets und Source-Code, der von Entwickler einfach genutzt werden kann. Sie gehen sogar noch einen Schritt weiter und erklären jedes Element mit einer Notiz.

null

http://ux.mailchimp.com/patterns/feedback

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

Das Beispiel unten: Hier ist ein weiteres Beispiel aus dem Styleguide von USA.gov, welches 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.

null

https://standards.usa.gov/components/typography/

2.7. Sonstiges 

  • Namenskonventionen (für Dateien, Ordner, Grafiken, Exporte)
  • Strukturregeln (auch für Dateien, Ordner, Assets, Exports etc.)
  • Code Guidelines
  • Interaktionsmuster
  • Animationen
  • Texte
  • Sprache/Schreibstil
  • Bildsprache und Videos
  • Corporate Identity Guidelines

Beispiele unten: Sonstige Teile des Styleguides können je nach Projekt sehr individuell sein. Nachfolgend finden Sie Beispiele, die Ihnen als Inspiration dienen können. Zum Beispiel enthält der Styleguide von HealthCare.gov Markenwerte oder spezielle Richtlinien für Fotos. Bei MarvelApp.com legen sie großen Wert auf Animationen, so dass in ihren Style-Guide ein Abschnitt hierfür definiert ist. Beim letzten Beispiel USA.gov können Sie sehen, dass auch allgemeine Designprinzipien einen Platz im Styleguide bekommen können.

null

https://styleguide.healthcare.gov/design/identity

null

https://styleguide.healthcare.gov/design/photography

null

https://marvelapp.com/styleguide/design/animation

null

https://standards.usa.gov/design-principles/

3. Wie geht es weiter?

Wenn Sie mehr über Styleguides erfahren möchten, schauen Sie sich nachfolgende Links an.

Da das ganze Thema Styleguides sehr umfangreich ist, habe ich eine Liste von Artikeln zusammengestellt, die uns zu Beginn sehr geholfen haben. Somit können Sie mehr über die Best-Practices erfahren:

Fazit

In der Regel ist jedes Projekt unterschiedlich aber ich bin der festen Überzeugung alle Projekte können von den Vorteilen eines Styleguides profitieren, wenn es mit großer Sorgfalt und einem durchdachten Design-System erstellt wird.

Weitere spannende Themen finden Sie außerdem auch auf unseren Instagram und Facebook Kanälen.

Über weitere Tricks und Expertentipps informiert werden!

Dann jetzt unseren einzigartigen Newsletter abonnieren & nichts mehr verpassen!