Styleguide

Im Styleguide werden die Markenfarben sowie ergänzend die Farbpalette für das User-Interface festgelegt. Dabei geht es nicht ausschließlich um Ästhetik und Markengefühl, sondern auch ganz technisch um Darstellbarkeit (Print vs. Display), Farbsignale der Nutzerführung (rot = Fehler) und Lesbarkeit. Außerdem werden Schriftarten und Größen bestimmt, die Logoplatzierung, strukturierende Elemente wie Aufzählungen und Abstände.

Je komplexer ein User-Interface ist, desto mehr andere visuelle Hilfestellungen zur Einordnung des Contents sollten dem User gegeben werden. Das kann zum Beispiel die Hervorhebung von Abstracts sein oder – für User-Interaktionen – die prominente Platzierung der am häufigsten durchgeführten Aktion an der immer gleichen Stelle. Letzteres gehört auch in die Wireframes, der Styleguide hingegen legt das konkrete Erscheinungsbild des Buttons fest und formuliert seine Platzierung als Regel für alle künftigen Erweiterungen. Auch ein Styleguide kann also auf die Nutzerführung Einfluss nehmen – oder umgekehrt: UX-Designer geben Designern vor, wo Inhalte und Funktionen gestalterisch voneinander abgehoben werden sollen.

Die Styleguides großer Marken beinhalten oftmals auch Leitsätze zur Markenidentität, zum Beispiel der Stimme. Dann spricht man nicht mehr nur von Corporate Design (CD), sondern von Corporate Identity (CI). Einen sehr ausführlichen Artikel zu Styleguides, der einige gute Beispiele verlinkt, finden Sie hier bei 99designs.de.

Grundsätzlich ist aber auch für kleinere Projekte wie Webseiten für Selbstständige und Mittelständische Unternehmen ein Styleguide interessant: zum Einen lohnt es sich hier, das aufwändige Screendesign zu überspringen und anhand eine Grobkonzeptes direkt im Browser zu entwickeln, wofür dann der Styleguide als Richtline dient, ohne, dass jedes einzelne Element zuvor abgebildet wurde. Zum anderen kommen gerade in solchen Fällen mit der Zeit immer wieder einzelne Stückchen hinzu, die sich möglichst in ein stimmiges Gesamtbild fügen sollten: Visitenkarten, Flyer und Broschüren, Soicial-Media Bilder für die Timeline, Landingpages und  für ein einzelnes Produkt und Vorlagen für Word und Powerpoint. Hier kann immer wieder auf den Styleguide zurückgegriffen werden, sodass alle Erzeugnisse einem einheitlichen Corporate Design folgen.

Beispiel für einen Styleguide: zentrale Interface-Elemente werden abgebildet
Beispiel für einen (stark reduzierten) Styleguide