aslain.dev
0%
01 Hizmetler 02 Hakkımda 03 Projeler 04 Stack 05 Blog 06 İletişim
← Tüm makaleler Design

Brand-Styleguide erstellen: eine Schritt-für-Schritt-Anleitung

Eine Markenstilrichtlinie (Brand Style Guide oder Brand Guideline) ist das Nachschlagewerk, das alle visuellen Regeln einer Marke in einem Dokument bündelt: wie das Logo verwendet wird, welche Farben gültig sind, wie die Typografie angewendet wird und was man keinesfalls tun darf. Ein guter Styleguide holt die Markenidentität aus dem Kopf einer einzelnen Designerin heraus und macht daraus ein zugängliches, reproduzierbares System. In diesem Artikel zeige ich, wie du eine solche Richtlinie von Grund auf aufbaust: mit welchen Abschnitten und in welcher Detailtiefe.

Wozu dient ein Styleguide?

Eine Marke wird nicht von einer Person, sondern mit der Zeit von vielen umgesetzt. Ein Social-Media-Bild, eine Rechnung, eine Website, ein Schild oder eine Anzeige entstehen in unterschiedlichen Händen. Ohne schriftliche Regeln wählt jeder die Logofarbe etwas anders, den Abstand etwas anders und die Schrift nach eigenem Geschmack — und so zerfällt die Marke allmählich. Ein Styleguide verhindert das:

  • Konsistenz: An jedem Berührungspunkt sieht die Marke gleich aus, was Wiedererkennung und Vertrauen schafft.
  • Tempo: Bei einem neuen Design oder Inhalt sind die Entscheidungen bereits getroffen; du musst nicht bei null diskutieren.
  • Übertragbarkeit: Ein neues Teammitglied, eine Agentur oder eine Druckerei schaut ins Dokument und bleibt der Marke treu.

Du kannst die Richtlinie als PDF, als geteilte Seite (Figma, Notion) oder als einfache Webseite veröffentlichen. Nicht das Format ist entscheidend, sondern dass der Inhalt klar und mit Beispielen belegt ist.

Regeln zur Logoverwendung

Das Herz der Richtlinie ist meist der Logoabschnitt, denn hier passieren die meisten Fehler. Zeige zuerst alle gültigen Versionen des Logos: die horizontale und vertikale Lockup, nur das Symbol, Varianten für helle und dunkle Hintergründe und bei Bedarf eine einfarbige (Schwarz/Weiß) Fassung. Gib bei jeder mit einem Satz an, wo sie verwendet wird.

Zwei Regeln finden sich in nahezu jeder Richtlinie und sollten visuell gezeigt werden:

  • Clear Space (Schutzraum): der Mindestabstand, der rund um das Logo frei bleiben muss. Meist relativ zu einem Element des Logos definiert (zum Beispiel die Höhe des Symbols oder die x-Höhe eines Buchstabens), damit die Regel beim Vergrößern und Verkleinern gültig bleibt.
  • Mindestgröße: das kleinste Maß, bei dem das Logo lesbar bleibt (zum Beispiel 24px Höhe am Bildschirm, 15mm Breite im Druck). Darunter zerfällt das Logo.

Füge außerdem eine Liste verbotener Verwendungen (Misuse) hinzu und erkläre sie mit Bildern: das Logo verzerren, die Proportionen verändern, die Farbe unerlaubt ändern, Schatten oder Effekte hinzufügen, es ohne Kontrast auf ein unruhiges Foto setzen oder es drehen. "Nicht tun"-Beispiele überzeugen oft mehr als lange Erklärungen.

Farbpalette und Farbcodes

Der Farbabschnitt definiert die Markenfarben mit exakten Werten für Bildschirm und Druck. Willst du dasselbe Blau im Web und in einer Broschüre identisch zeigen, musst du jede Farbe in verschiedenen Farbräumen festhalten:

  • HEX und RGB — digital (Web, App, Bildschirm).
  • CMYK — Druck (Broschüre, Visitenkarte, Schild).
  • Bei Bedarf Pantone (PMS) — Referenz für Sonderdruck und einfarbige Anwendungen.

Ordne die Palette nach Rolle: ein bis zwei Hauptfarben, eine Akzentfarbe und einige neutrale Töne (für Text und Hintergrund). Auf der Webseite ist es praktisch, diese Farben als Variablen zu definieren, damit Dokument und Code dieselbe Quelle teilen:

:root {
  --brand-primary: #1f6feb;   /* Hauptton    */
  --brand-accent:  #ffb020;   /* Akzent      */
  --brand-ink:     #11151c;   /* Text        */
  --brand-paper:   #f7f8fa;   /* Hintergrund */
}

Mache auch Barrierefreiheit zum Teil der Regel: Der Kontrast zwischen Text und Hintergrund ist entscheidend für die Lesbarkeit. WCAG empfiehlt für normalen Text mindestens 4,5:1 Kontrast. Gib in der Richtlinie klar an, welche Farbkombinationen für Text verwendet werden dürfen und welche nur dekorativ sind.

Typografieregeln

Der Typografieabschnitt definiert die Schriften der Marke und wie du sie verwendest. Liste zuerst die Schriften auf: eine für Überschriften und eine für den Fließtext (meist genügen zwei). Brauchst du für Web und Druck unterschiedliche Schriften, nenne auch die Entsprechungen. Gib anschließend eine typografische Skala an, damit jede Seite dieselbe Hierarchie zeigt:

  • Schriftfamilien: Namen, Schnitte (Light/Regular/Bold) und Lizenzinformationen.
  • Hierarchie: Größen- und Gewichtswerte für Überschrift, Unterüberschrift, Fließtext und Kleintext.
  • Zeilenhöhe und Abstände: Details, die die Lesbarkeit bestimmen, aber oft übersprungen werden.

Fürs Web ist es eine gute Gewohnheit, auch die Typografie an Code zu koppeln:

:root {
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --step-h1: 2rem;     /* 32px */
  --step-h2: 1.5rem;   /* 24px */
  --step-body: 1rem;   /* 16px */
  --leading-body: 1.6;
}

Achte bei Schriften auf die Lizenz: Quellen wie Google Fonts sind für Web und die meisten kommerziellen Anwendungen kostenlos, aber wenn du eine Schrift gekauft hast, notiere den Nutzungsumfang in der Richtlinie, damit das Team nicht versehentlich die Lizenz überschreitet.

Hilfselemente und Tonalität

Logo, Farbe und Typografie bilden den Kern, doch einige zusätzliche Abschnitte machen die Richtlinie vollständig. Je nach Marke kannst du ergänzen:

  • Ikonografie: der Icon-Stil (Linie oder Fläche, Eckenradius, Linienstärke), damit Icons aus verschiedenen Quellen wie ein Ganzes wirken.
  • Foto-/Illustrationsstil: Beispiele dafür, in welchem Ton und welcher Atmosphäre Bildmaterial verwendet wird.
  • Weißraum und Raster: die Grundeinheit für das Layout (zum Beispiel ein System auf Basis von 8px).
  • Tonalität: wie die Marke spricht — mit "so sagen wir es / so nicht"-Beispielen.

Diese Abschnitte machen aus der Marke nicht nur etwas, das "gut aussieht", sondern etwas, das sich auch "gut anfühlt". Der Schlüssel zur Konsistenz ist, alles aus derselben Persönlichkeit zu speisen (den drei bis fünf Kernbegriffen der Marke).

Die Richtlinie lebendig halten

Ein Styleguide ist kein Dokument, das an dem Tag fertig ist, an dem du es schreibst. Wächst die Marke, entstehen neue Situationen: eine neue Social-Media-Plattform, ein neues Produkt, eine neue Sprache. Versieh die Richtlinie mit einer Versionsnummer und einem Datum, halte Änderungen fest und bewahre die Datei an einem Ort auf, an dem das Team leicht darauf zugreift. Das Prinzip der einzigen Quelle (Single Source of Truth) gilt auch hier: Alle schauen auf dasselbe, aktuelle Dokument.

Das Ziel einer Richtlinie ist nicht, Regeln wie ein strenger Polizist durchzusetzen, sondern die Unsicherheit beim Aufbau einer konsistenten, starken und wiedererkennbaren Marke zu beseitigen. Klare Regeln erleichtern Kreativität paradoxerweise, denn die Grundentscheidungen sind getroffen und deine Energie kann in die eigentliche Arbeit fließen.

Häufige Fragen

Sind Markenstilrichtlinie und Markenidentität dasselbe?

Nein. Die Markenidentität ist die Gesamtheit von Elementen wie Logo, Farbe, Typografie und Tonalität; der Styleguide ist die Regeldatei, die dokumentiert, wie du diese Elemente verwendest. Die Identität beantwortet "was", die Richtlinie beantwortet "wie".

Braucht eine kleine Marke eine umfangreiche Richtlinie?

Nein, der Umfang skaliert mit der Marke. Für eine kleine Marke macht schon ein wenige Seiten umfassendes Dokument mit Logovarianten, Clear Space, Farbcodes und einer typografischen Skala einen großen Unterschied. Nicht die Seitenzahl zählt, sondern die Klarheit der Regeln.

In welchem Format erstelle ich die Richtlinie?

Das hängt von der Marke und dem Team ab. Ein PDF ist leicht zu teilen; eine lebende Seite wie Figma oder Notion erleichtert das Aktualisieren; eine Webseite ist eine direkte Referenz für das Webteam. In den meisten Fällen funktioniert eine Kombination aus PDF plus geteilter, lebender Datei gut.

Brauchst du für deine Marke einen Styleguide von Grund auf? Ich gieße Logoverwendung, Farbcodes und Typografieregeln in ein konsistentes, nutzbares Dokument, damit dein Team den Markenstandard mühelos einhält. Nimm Kontakt mit mir auf, um dein Projekt zu besprechen.

Bu kategorideki tüm yazılar →

Devamı için