# Styleguide

Styleguides enthalten konkrete Vorgaben zur Gestaltung einer Anwendung.

Bewertung

Kosten
Zeitaufwand
Notwendige Expertise
Beispiel für einen Ausschnitt aus einem Styleguide

# Zusammenfassung

Styleguides sind konkrete Gestaltungsregeln die detailliert, zumeist auf Pixelebene, das Aussehen einer Anwendung beschreiben. Sie können dabei alle Ebenen der Anwendung beschreiben: vom Layout bis zur Ästhetik. Normalerweise sind Styleguides unternehmens- oder produktspezifisch und heute meist Bestandteil eines Design Systems (kuratierte Liste von Design Systemen).

# Ergebnis

Der Einsatz eines Styleguides führt zu einem einheitlichen Look&Feel der Anwendung(en).

# Vorgehen

Beim Vorgehen wird zwischen Anwendung und Erstellung eines Styleguides unterschieden: Beim Einsatz muss zunächst der relevante Styleguide ausgewählt werden und dann die Gestaltungsvorgaben zu den einzelnen UI-Elementen beachtet sowie angewandt werden. Zu den UI-Elementen können beispielsweise Farben, Schriften, Icons, Aufbau der Seite, Platzierung des Menüs, Abstände, Buttons etc. zählen.

Soll ein Styleguide erstellt werden, so ist der Aufwand abhängig vom vorhandenen Material. Existieren noch keine visuellen Entwürfe, so müssen diese erstellt werden. Konkret muss das gesamte Look&Feel einer Anwendung oder eines Produkts in einem Grafikprogramm gestaltet werden. Mögliche Inhalte sind beispielsweise:

  • Der Anwendungsrahmen: Header, Footer, Navigation, Meldungskonzept
  • Layout der Gesamtanwendung und für verschiedene Seiten-/Dialogtypen
  • Navigationskonzept: Hauptnavigation, Menüs und Untermenüs, ggf. Navigationshilfen wie Sitemap oder Breadcrumbs
  • Definition von Mustern (Patterns) von UI-Elementen oder Verhaltensmuster der Anwendung
  • Richtlinien für den Einsatz von einzelnen Komponenten wie Buttons oder Textfeldern

Existieren diese Entwürfe, so kann mithilfe einer Anwendung, z.B. Zeplin der Styleguide automatisch erstellt werden.

# Hilfsmittel und Templates

Beispiele für Styleguides:

# Vorteile

Mithilfe von Styleguides werden konsistente Benutzeroberflächen entwickelt und Designentscheidungen folgen festen Vorgaben. Dies ist auch sichergestellt, wenn andere Personen die Anwendung weiter entwickeln. Mit einem Styleguide verringert sich der Gestaltungsaufwand einer Anwendung.

# Nachteile

Styleguides müssen regelmäßig aktualisiert und gepflegt werden. Außerdem kann der individuelle Gestaltungsfreiraum durch sehr detaillierte Styleguides eingeschränkt werden.

# Referenzen