Styleguide

• Logo: Varianten, Mindestgröße, Schutzraum und Beispiele für falschen Einsatz.
• Farben mit genauen Werten für Bildschirm (HEX, RGB) und Druck (CMYK, oft auch Pantone).
• Schriften für Überschriften und Fließtext, mit Größen und Abständen.
• Bildsprache: welche Art von Fotos passt, welche nicht.
• Gestaltungsraster und Beispiele für typische Anwendungen wie Visitenkarte oder Anzeige.

Manche Styleguides regeln auch die Sprache, also ob die Marke duzt oder siezt und welche Wörter sie meidet. Das heißt dann oft Tonalität oder Tone of Voice.

Ein Beispiel: Im Styleguide steht, dass das Logo auf dunklen Flächen nur in der weißen Variante erscheint. Wer später eine Anzeige oder einen Messestand gestaltet, muss darüber nicht mehr nachdenken und auch niemanden fragen.

Das Corporate Design ist das Erscheinungsbild selbst, also das, was entsteht, wenn Logo, Farben und Schriften zusammenkommen (Corporate Design). Der Styleguide ist das Dokument, das dieses Erscheinungsbild beschreibt und für andere nutzbar macht. Ein umfangreicher Styleguide heißt auch Corporate-Design-Manual oder Markenhandbuch. Wie ein Corporate Design Schritt für Schritt entsteht, erklärt unser Ratgeber: Corporate Design erstellen.

Für Websites reicht ein Print-Styleguide selten aus. Hier kommen Bausteine dazu, die es auf Papier nicht gibt: Buttons mit ihren Zuständen beim Überfahren mit der Maus, Formularfelder, Fehlermeldungen, Abstände zwischen Abschnitten und die Darstellung auf dem Smartphone. Wächst so eine Sammlung zu einer Bibliothek fertiger Komponenten mit Code, spricht man von einem Designsystem.

Ein guter Web-Styleguide spart bei jeder neuen Seite Zeit. Wer eine Unterseite ergänzt, baut sie aus vorhandenen Teilen zusammen, und die Website bleibt auch nach Jahren einheitlich.

Ein 80-seitiges PDF, das niemand öffnet, nützt weniger als zehn Seiten mit klaren Beispielen, die das Team tatsächlich aufschlägt. Wichtig sind exakte Farbwerte, Logodateien zum Herunterladen und ein Hinweis, wer bei Fragen entscheidet. Ändert sich etwas an der Marke, muss der Styleguide mitziehen, sonst arbeiten Druckerei und Webdesigner bald mit unterschiedlichen Ständen.

Wenn wir ein Logo oder ein Corporate Design entwickeln, gehört ein Styleguide dazu (Logodesign). Bei Websites übertragen wir die Farben und Schriften als globale Einstellungen in WordPress, damit Änderungen an einer Stelle auf der ganzen Seite greifen.

Verwandte Begriffe: Wireframe · UI-Design · Favicon