Branding auf Ihrer 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 Ihnen, wie Sie das handwerklich umsetzen.
Schritt 1: Markenidentität schärfen – bevor Sie Farben wählen
Branding ist nicht Dekoration. Es ist die Antwort auf drei Fragen, die Ihr Unternehmen klar beantworten muss:
Für wen sind Sie da? Beschreiben Sie Ihre Zielgruppe nicht demografisch ("35–55, Einkommen über 60k"), sondern psychografisch: Welche Probleme bewegen sie? Welche Sprache sprechen sie? Welche Marken bewundern sie?
Was ist Ihr 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öchten Sie wirken? Wählen Sie fünf Adjektive, die Ihre 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. Analysieren Sie zuerst Ihre drei bis fünf wichtigsten Mitbewerber: Welche Farben dominieren in Ihrer Branche? Wählen Sie dann bewusst: Möchten Sie sich 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: Testen Sie 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 benötigen Sie 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: Legen Sie absolute Pixelgrößen für alle sechs Hierarchiestufen fest: H1, H2, H3, H4, Body, Small/Caption. Nutzen Sie 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 Ihrer 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.
Definieren Sie Ihre Markenstimme anhand von vier Gegensatzpaaren und positionieren Sie sich 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: Nutzen Sie "Du" oder "Sie"? Verwenden Sie Fachbegriffe oder erklären Sie sie? Wie lang sind Ihre Sätze im Schnitt?
Schreiben Sie 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 Ihre 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 Sie in den vorigen Schritten erarbeitet haben, 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 Ihrer 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.