Brand Guidelines für deine Website

Branding auf deiner Website – warum Konsistenz verkauft

Marken, die auf allen Touchpoints konsistent wirken, werden als vertrauenswürdiger und professioneller wahrgenommen. Auf einer Website bedeutet das: Jede Seite, jeder Button, jeder Satz atmet dieselbe Identität. Dieser Guide zeigt dir, wie du das handwerklich umsetzt.

---

Schritt 1: Markenidentität schärfen – bevor du Farben wählst

Branding ist nicht Dekoration. Es ist die Antwort auf drei Fragen, die dein Unternehmen klar beantworten muss:

**Für wen bist du da?** Beschreibe deine Zielgruppe nicht demografisch ("35–55, Einkommen über 60k"), sondern psychografisch: Welche Probleme bewegen sie? Welche Sprache sprechen sie? Welche Marken bewundern sie?

**Was ist dein einzigartiges Versprechen?** In einem Satz, ohne Buzzwords. Nicht "ganzheitliche digitale Lösungen", sondern: "Wir bauen Websites, die mittelständischen Dienstleistern mehr qualifizierte Anfragen bringen."

**Wie möchtest du wirken?** Wähle fünf Adjektive, die deine Marke beschreiben sollen – und drei, die sie explizit nicht sein soll. Diese Liste ist das Filter für alle Designentscheidungen.

---

Schritt 2: Farbpalette – systematisch, nicht intuitiv

Eine Unternehmensfarbe ist keine willkürliche Lieblingsfarbe. Sie kommuniziert Werte, erzeugt Emotionen und grenzt von der Konkurrenz ab. Analysiere zuerst deine drei bis fünf wichtigsten Mitbewerber: Welche Farben dominieren in deiner Branche? Wähle dann bewusst: Willst du dich einfügen (Vertrauen signalisieren) oder abheben (Einzigartigkeit betonen)?

**Palette aufbauen:** - **Primärfarbe:** Die Markenfarbe, dominant in Navigation, CTAs und Highlights - **Sekundärfarbe:** Komplementär oder analog zur Primärfarbe, für Akzente und Hover-Zustände - **Neutraltöne:** Mindestens vier Graustufen (fast schwarz, dunkelgrau, hellgrau, fast weiß) für Text und Hintergründe - **Feedback-Farben:** Grün für Erfolg, Rot für Fehler, Gelb für Warnungen – diese sind nicht verhandelbar, da Nutzererwartungen sie geprägt haben

**Kontrast prüfen:** Teste jede Text-Hintergrund-Kombination mit dem WebAIM Contrast Checker. Fließtext auf Hintergrund braucht min. 4,5:1. Barrierefreiheit ist hier keine Option, sondern Pflicht.

---

Schritt 3: Typografie – Hierarchie erzeugt Orientierung

Auf einer Website brauchst du maximal zwei Schriften: eine für Überschriften, eine für Fließtext. Mehr erzeugt visuelles Rauschen.

**Headline-Font:** Kann Persönlichkeit zeigen – ob eine Slab-Serif für Solidität, eine moderne Geometric Sans für Innovation oder eine humanistische Antiqua für Vertrauen. Die Schrift soll die Adjektive aus Schritt 1 verkörpern.

**Body-Font:** Lesbarkeit vor Persönlichkeit. Serifenlose Schriften (Roboto, Inter, Mulish) funktionieren auf Screens zuverlässig. Schriftgröße mindestens 16px für Fließtext, Zeilenabstand (line-height) mindestens 1,5.

**Font Scale definieren:** Lege absolute Pixelgrößen für alle sechs Hierarchiestufen fest: H1, H2, H3, H4, Body, Small/Caption. Nutze eine modulare Skala (z. B. auf 1.25 oder 1.333 basierend) für ein harmonisches Verhältnis. Diese Scale gilt verbindlich für die gesamte Website.

---

Schritt 4: Tonalität – die Stimme deiner Marke

Kein Designelement hat mehr Einfluss auf die Wahrnehmung einer Marke als die Sprache. Und doch ist Tonalität der am häufigsten vernachlässigte Teil des Brandings.

Definiere deine Markenstimme anhand von vier Gegensatzpaaren und positioniere dich auf einer Skala von 1–10:

• Formal ↔ Informell
• Ernst ↔ Leichtfüßig
• Sachlich ↔ Emotional
• Technisch ↔ Vereinfachend

Ein B2B-Beratungsunternehmen könnte bei 7/3/5/4 landen – professionell, aber nicht steif; sachlich, aber mit Empathie. Diese Werte übersetzen sich in konkrete Regeln: Nutzt du "Du" oder "Sie"? Verwendest du Fachbegriffe oder erklärst du sie? Wie lang sind deine Sätze im Schnitt?

Schreibe anschließend drei Beispieltexte für konkrete Situationen: eine Headline für die Startseite, eine Fehlermeldung (404-Seite) und eine E-Mail-Bestätigung nach Formularabsendung. Diese Beispiele sind der Lackmustest für deine Tonalität – und der Leitfaden für jeden, der zukünftig Texte für die Seite schreibt.

---

Schritt 5: Styleguide dokumentieren und einsetzen

Alles, was du in den vorigen Schritten erarbeitet hast, gehört in ein lebendiges Dokument. Kein PDF, das nach dem Launch in der Schublade verschwindet, sondern ein Storybook, ein Figma-File oder zumindest eine passwortgeschützte Seite auf deiner eigenen Domain.

Der Styleguide enthält: Farbpalette mit HEX/RGB/HSL-Werten und Verwendungsregeln, Typografie-Hierarchie mit Schriftgrößen und -gewichten, Beispiele für alle Komponentenzustände (Button primary/secondary/disabled/hover, Inputs, Alerts, Cards), Bild-Guidelines (Stilrichtung, Farbstimmung, verbotene Bildtypen) und Tone-of-Voice-Regeln mit Positiv- und Negativbeispielen.

Dieser Styleguide wird verpflichtende Referenz für jede neue Seite, jeden externen Dienstleister und jeden zukünftigen Design-Update.