# Markenstimme und Visuals: ein Look, der nach dir klingt

[Canonical HTML page](https://gradiently.design/de/guide/brand-voice-and-visuals)

Eine ruhige Botschaft in einem lauten Look wirkt unaufrichtig, und Menschen merken es, bevor sie sagen können, warum. Hier eine praktische Übersetzung von „wie du klingst“ zu „wie du aussiehst“.

## The short version

- Die Markenstimme ist, wie eine Marke in Worten klingt; ihre Visuals sollten denselben Charakter in Farbe, Schrift, Textur, Bewegung und Layout ausdrücken.
- Widersprechen sich Stimme und Visuals, etwa eine sanfte Botschaft in grellem Neon, spüren Menschen den Bruch, auch wenn sie ihn nicht benennen können.
- Jede Eigenschaft der Stimme lässt sich konkreten visuellen Entscheidungen zuordnen: ruhig bedeutet weichen Kontrast und langsame Bewegung, mutig bedeutet hohen Kontrast und fette Schrift.
- Formuliere jede Eigenschaft als „so, nicht so“, damit die visuellen Entscheidungen neben einer Richtung auch eine Grenze haben.
- Auch Bewegung hat eine Stimme: Tempo und Beschleunigungskurve einer Animation können ruhig, mutig, verspielt oder präzise klingen.

Deine **Markenstimme** ist, wie deine Marke in Worten klingt: ruhig oder mutig, verspielt oder präzise, warm oder kühl. Deine Visuals sollten in Farbe, Schrift, Textur, Bewegung und Layout genau dasselbe sagen. Praktisch gelingt das, indem du jede Eigenschaft der Stimme konkreten visuellen Entscheidungen zuordnest und jedes Design an dieser Zuordnung prüfst. Stimmen beide überein, wirkt ein Post aufrichtig, bevor ihn jemand liest.

Die meisten Marken legen ihre Stimme für Texter und ihren Look für Designer getrennt fest. So entsteht eine sanfte, beruhigende Bildunterschrift auf einem schreienden Neonhintergrund. Dieser Leitfaden führt beides zusammen. Hast du deinen Charakter noch nicht festgelegt, beginne mit der [Markenpersönlichkeit](https://gradiently.design/de/guide/brand-personality).

## Warum Markenstimme und Visuals übereinstimmen müssen

Menschen nehmen den Look eines Posts vor den Worten wahr. Der Look weckt eine Erwartung, und die Worte bestätigen sie oder widersprechen ihr. Ein Widerspruch fällt nicht immer bewusst auf; er lässt die Marke nur ein wenig schief wirken, wie eine Freundin, deren Tonfall nicht zu dem passt, was sie sagt.

### Stimme und Look widersprechen sich

- Eine leise, bedachte Marke in gesättigtem Neon mit hüpfender Animation
- Eine verspielte Marke in Grau, dünner Schrift und strengen Rastern
- Eine präzise, technische Marke in handgezeichneten Schriften und weichen Unschärfen
- Eine warme, lokale Marke in kaltem Blau und Firmen-Stockfotos

### Stimme und Look passen zusammen

- Dieselbe leise Marke in tiefen Neutraltönen, feiner Serif und langsamem Gleiten
- Die verspielte Marke in hellen, unerwarteten Kombinationen und runder Schrift
- Die technische Marke in klarer Sans, scharfem Kontrast und exakten Abständen
- Die warme Marke in erdigen Tönen, Papiertextur und echten Gesichtern

## Von Eigenschaften der Stimme zu visuellen Entscheidungen

Nimm diese Tabelle als Ausgangspunkt, nicht als Gesetz. Die meisten Marken sind eine Mischung aus zwei oder drei Eigenschaften; wähle die dominierende für die Farbe und lass die anderen Schrift und Bewegung prägen.

| Eigenschaft der Stimme | Farbe | Schrift | Textur und Bewegung | Layout |
| --- | --- | --- | --- | --- |
| Ruhig | Weicher Kontrast, nahe Farbtöne, gedämpft | Leichte oder normale Schnitte, offene Abstände | Feine Körnung, langsames Gleiten | Viel Raum, wenige Elemente |
| Mutig | Hoher Kontrast, gesättigt, wenige Farben | Fette Schnitte, große Größen, enge Abstände | Klare Flächen, schnelle Schnitte | Große Schrift, randfüllend |
| Verspielt | Unerwartete Kombinationen, leuchtende Pastelltöne | Runde Formen, gemischte Größen | Weiche Materialien, federnde Beschleunigung | Locker, leicht neben dem Raster |
| Präzise | Zurückhaltend, ein klarer Akzent | Klare Sans, gleichmäßiger Rhythmus | Glatt, minimale Textur, exaktes Timing | Strenges Raster, bündige Kanten |
| Warm | Erdige und sonnige Töne | Freundliche Serif oder humanistische Sans | Papier, Körnung, Tageslicht | Großzügige Ränder, Fotos von Menschen |

Meist führt eine Eigenschaft. Die anderen justieren die Details.

## Vier Stimmen, vier Looks

Hier dieselben Arten von Entscheidungen für vier verschiedene Stimmen. Sieh, wie viel schon die Farbe allein verrät, bevor ein Wort dazukommt.

- Ruhig: Nebel bis Sanftblau: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Mutig: Rotorange bis Gelb: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Verspielt: Rosa, Butter, Minze: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Präzise: Tinte bis Tiefmarine: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Die Farbe legt die Stimme zuerst fest. Mehr dazu, was Farben vermitteln, steht in [Farbpsychologie](https://gradiently.design/de/guide/color-psychology).

Ein Hochformat-Post mit den Worten „Lass dir Zeit“, klein und leicht gesetzt, auf einem ruhigen Hintergrund mit viel Raum

Ruhig: eine kurze Zeile, ein leichter Schnitt, der größte Teil des Bildes bleibt leer.

Ein Hochformat-Post mit dem einen Wort „Jetzt“, sehr groß über einem lebhaften Hintergrund

Mutig: ein riesiges Wort, nichts konkurriert mit ihm.

Ein quadratischer Post mit der Frage „Was würdest du machen?“ in einem freundlichen Layout auf hellem Hintergrund

Verspielt: eine Frage, eine Einladung, eine leichtere Hand.

Ein quadratischer Post mit dem Titel „Drei Änderungen diese Woche“ und einer sauber ausgerichteten Liste auf zurückhaltendem Hintergrund

Präzise: eine Liste, bündige Kanten, keine Dekoration, die nicht Information ist.

## So findest du deine visuelle Stimme

1. **Schreibe deine Eigenschaften als „so, nicht so“** „Selbstsicher, nicht arrogant.“ „Warm, nicht süßlich.“ Die zweite Hälfte gibt den Visuals neben einer Richtung auch eine Grenze.
2. **Wähle die führende Eigenschaft** Entscheide, welche Eigenschaft die Farbe bestimmt. Zwei führende, die in entgegengesetzte Richtungen ziehen, etwa ruhig und mutig, ergeben einen unklaren Look.
3. **Ordne jeder Eigenschaft Entscheidungen zu** Wähle mit der Tabelle oben Farbe, Schrift, Textur, Bewegung und Layout. Schreibe die Entscheidungen neben jede Eigenschaft.
4. **Lass denselben Satz durch zwei Looks laufen** Setze eine echte Zeile deines Textes im gewählten Look und in seinem Gegenteil. Wirkt das Gegenteil stimmiger, überdenke die Eigenschaften.
5. **Schreibe alles gemeinsam auf** Lege die Regeln für Stimme und Visuals auf dieselbe Seite deines [Marken-Styleguides](https://gradiently.design/de/guide/brand-style-guide), damit Schreibende und Gestaltende aus einer Quelle arbeiten.

## Auch Bewegung hat eine Stimme

Tempo und Beschleunigungskurve einer Animation klingen nach etwas. Ein langes, sanftes Ausklingen wirkt ruhig. Eine kurze, scharfe Bewegung wirkt entschlossen. Ein leichtes Überschwingen wirkt verspielt. Erscheint deine Marke in Video oder auf einer Website, gib der Bewegung dieselbe Stimme wie den Worten. [Easing](https://gradiently.design/de/guide/easing) erklärt die Kurven im Detail.

```css
/* Calm: slow, soft landing */
.calm { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Bold: fast and decisive */
.bold { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

/* Playful: a small overshoot past the target */
.playful { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Precise: short, even, no flourish */
.precise { transition: transform 200ms ease-out; }
```

Vier Bewegungsstimmen. Das Überschwingen in der verspielten Kurve entsteht, weil der zweite Kontrollpunkt über 1 liegt.

Dasselbe gilt für Schrift. Deine Überschriftschrift ist der lauteste Teil deiner visuellen Stimme, und [Schriftkombinationen](https://gradiently.design/de/guide/font-pairing) entscheiden, ob sie allein spricht oder im Gespräch. In Gradiently trägt jeder Mark neben Farben und Materialien eine Schriftstimme, sodass Look und Schriftzug schon zusammenpassen.

> **Der Vorlesetest** Lies die Worte eines Posts laut im Ton, den das Design nahelegt. Würdest du es nie so sagen, müssen Look und Stimme wieder zusammengeführt werden.

## FAQ

### Was ist eine Markenstimme?

Die Markenstimme ist der gleichbleibende Charakter, den eine Marke in ihren Worten ausdrückt, etwa ruhig, mutig, verspielt oder präzise. Der Ton passt diese Stimme an die Situation an.

### Wie drücken Visuals die Markenstimme aus?

Durch Farbe, Schrift, Textur, Bewegung und Layout. Weicher Kontrast und offene Abstände klingen ruhig; hoher Kontrast und fette Schrift klingen mutig.

### Was ist der Unterschied zwischen Markenstimme und Markenpersönlichkeit?

Die Persönlichkeit ist der Charakter der Marke; die Stimme ist, wie dieser Charakter in Worten ankommt. Die Visuals sollten dieselbe Persönlichkeit ausdrücken wie die Stimme.

### Kann eine Marke mehr als eine Eigenschaft der Stimme haben?

Ja, die meisten haben zwei oder drei. Wähle eine, die die Farbe führt, und lass die anderen Schrift, Bewegung und Layout prägen.

### Beeinflusst Animation die Markenstimme?

Ja. Langsames, sanftes Easing wirkt ruhig, schnelle Bewegungen wirken entschlossen und ein leichtes Überschwingen wirkt verspielt, also sollte Bewegung zur Stimme der Worte passen.