# Brandstemme og visuelt udtryk: få dit udtryk til at lyde som dig

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

Et roligt budskab i et højlydt udtryk virker uoprigtigt, og folk mærker det, før de kan sige hvorfor. Her er et praktisk kort fra, hvordan du lyder, til hvordan du ser ud.

## The short version

- Brandstemme er, hvordan et brand lyder i ord. Dets visuelle udtryk bør give den samme karakter form i farve, typografi, tekstur, bevægelse og layout.
- Når stemme og udtryk er uenige, for eksempel et blidt budskab i et højlydt neonudtryk, mærker folk misforholdet, selv om de ikke kan sætte ord på det.
- Hvert stemmetræk svarer til konkrete visuelle valg: rolig peger på blød kontrast og langsom bevægelse, dristig peger på høj kontrast og tung typografi.
- Skriv hvert stemmetræk som “det her, ikke det der”, så de visuelle valg får en grænse og ikke kun en retning.
- Bevægelse har også en stemme: en animations hastighed og easing kan lyde rolig, dristig, legende eller præcis.

Din **brandstemme** er, hvordan dit brand lyder i ord: roligt eller dristigt, legende eller præcist, varmt eller køligt. Dit visuelle udtryk skal sige præcis det samme i farve, typografi, tekstur, bevægelse og layout. Den praktiske vej derhen er at tage hvert stemmetræk, knytte det til konkrete visuelle valg og derefter tjekke hvert design mod det kort. Når de to er enige, føles et opslag oprigtigt, før nogen har læst det.

De fleste brands definerer deres stemme til tekstforfattere og deres udtryk til designere, hver for sig. Sådan ender du med en blid, beroligende billedtekst på en skrigende neonbaggrund. Denne guide binder de to sammen. Har du endnu ikke fundet din karakter, så start med [brandpersonlighed](https://gradiently.design/da/guide/brand-personality).

## Hvorfor brandstemme og visuelt udtryk skal være enige

Folk tager et opslags udtryk ind, før de læser ordene. Udtrykket skaber en forventning, og ordene bekræfter den eller modsiger den. En modsigelse bliver ikke altid bevidst registreret, men gør, at brandet føles en anelse forkert, som en ven, hvis tonefald ikke passer til det, vedkommende siger.

### Stemme og udtryk er uenige

- Et stille, eftertænksomt brand i mættet neon med hoppende animation
- Et legende brand i gråt, tynd typografi og stramme rasterlinjer
- Et præcist, teknisk brand i håndtegnede skrifttyper og bløde slørede flader
- Et varmt, lokalt brand i koldt blåt og upersonlige stockfotos

### Stemme og udtryk er enige

- Det samme stille brand i dybe neutrale toner, en fin serif og langsom drift
- Det legende brand i lyse, uventede kombinationer og runde bogstaver
- Det tekniske brand i en ren sans, skarp kontrast og nøjagtig afstand
- Det varme brand i jordfarver, papirtekstur og rigtige ansigter

## Et kort fra stemmetræk til visuelle valg

Brug tabellen som et udgangspunkt, ikke som en lov. De fleste brands er en blanding af to eller tre træk. Vælg det dominerende til farven, og lad de andre forme typografi og bevægelse.

| Stemmetræk | Farve | Typografi | Tekstur og bevægelse | Layout |
| --- | --- | --- | --- | --- |
| Rolig | Blød kontrast, nære nuancer, dæmpet | Lette eller normale skriftsnit, åben afstand | Fint korn, langsom drift | Meget plads, få elementer |
| Dristig | Høj kontrast, mættet, få farver | Tunge skriftsnit, store størrelser, tæt afstand | Skarpe overflader, hurtige klip | Stor typografi, helt ud til kanten |
| Legende | Uventede kombinationer, lyse pasteller | Runde former, blandede størrelser | Bløde materialer, hoppende easing | Løst, en anelse uden for rasteret |
| Præcis | Afdæmpet, én tydelig accent | Ren sans, jævn rytme | Glat, minimal tekstur, nøjagtig timing | Stramt raster, justerede kanter |
| Varm | Jordfarvede og solvarme toner | Venlig serif eller humanistisk sans | Papir, korn, dagslys | Store marginer, fotos af mennesker |

Ét træk fører som regel. De andre justerer detaljerne.

## Fire stemmer, fire udtryk

Her er de samme slags valg truffet for fire forskellige stemmer. Læg mærke til, hvor meget farven alene allerede fortæller, før der er tilføjet nogen ord.

- Rolig: tåge til blød blå: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Dristig: rødorange til gul: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Legende: pink, smør, mynte: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Præcis: blæk til dyb marineblå: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Farven sætter stemmen først. Læs mere om, hvad farver signalerer, i [farvepsykologi](https://gradiently.design/da/guide/color-psychology).

Et opslag i højformat med ordene Tag dig god tid sat småt og let på en stille baggrund med masser af plads

Rolig: én kort linje, et let skriftsnit, det meste af billedet ladt tomt.

Et opslag i højformat med ordet Nu sat meget stort hen over en levende baggrund

Dristig: ét kæmpestort ord, og intet andet konkurrerer med det.

Et kvadratisk opslag med spørgsmålet Hvad ville du lave? i et venligt layout på en lys baggrund

Legende: et spørgsmål, en invitation, en lettere berøring.

Et kvadratisk opslag med titlen Tre ændringer denne uge og en ordentlig, justeret liste på en afdæmpet baggrund

Præcis: en liste, justerede kanter, ingen pynt, der ikke er information.

## Sådan finder du din visuelle stemme

1. **Skriv dine træk som “det her, ikke det der”** “Selvsikker, ikke arrogant.” “Varm, ikke sukkersød.” Den anden halvdel giver de visuelle valg en grænse og ikke kun en retning.
2. **Vælg det ledende træk** Beslut, hvilket træk der styrer farven. To ledende træk, der trækker hver sin vej, som rolig og dristig, giver et rodet udtryk.
3. **Knyt hvert træk til valg** Brug tabellen ovenfor til at vælge farve, typografi, tekstur, bevægelse og layout. Skriv valgene ved siden af hvert træk.
4. **Prøv den samme sætning i to udtryk** Sæt én rigtig linje fra din tekst i det udtryk, du valgte, og i dets modsætning. Føles modsætningen mere sand, så gennemgå trækkene igen.
5. **Skriv det ned sammen** Sæt stemme- og designreglerne på samme side i din [brandstilguide](https://gradiently.design/da/guide/brand-style-guide), så skribenter og designere arbejder ud fra én kilde.

## Bevægelse har også en stemme

En animations hastighed og easing lyder af noget. En lang, blød udløbskurve føles rolig. En kort, skarp bevægelse føles beslutsom. Et lille overskud i bevægelsen føles legende. Optræder dit brand i video eller på et website, så giv bevægelsen den samme stemme som ordene. [Easing](https://gradiently.design/da/guide/easing) gennemgår kurverne i detaljer.

```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; }
```

Fire bevægelsesstemmer. Overskuddet i den legende kurve kommer af, at det andet kontrolpunkt går over 1.

Det samme gælder typografi. Din overskriftsskrifttype er den højeste del af din visuelle stemme, og [skrifttypekombinationer](https://gradiently.design/da/guide/font-pairing) afgør, om den taler alene eller i en samtale. I Gradiently bærer hvert Mark en typografisk stemme ved siden af sine farver og materialer, så udtryk og bogstaver kommer færdigt afstemt.

> **Oplæsningstesten** Læs et opslags ord højt i den tone, designet antyder. Hvis du aldrig ville sige det sådan, skal udtryk og stemme bringes sammen igen.

## FAQ

### Hvad er brandstemme?

Brandstemme er den ensartede karakter, et brand udtrykker i sine ord, som rolig, dristig, legende eller præcis. Tonen tilpasser stemmen til situationen.

### Hvordan udtrykker visuelt design brandstemme?

Gennem farve, typografi, tekstur, bevægelse og layout. Blød kontrast og åben afstand lyder rolig, høj kontrast og tung typografi lyder dristig.

### Hvad er forskellen på brandstemme og brandpersonlighed?

Personligheden er brandets karakter, og stemmen er, hvordan karakteren kommer til udtryk i ord. Det visuelle skal udtrykke den samme personlighed som stemmen.

### Kan et brand have mere end ét stemmetræk?

Ja, de fleste har to eller tre. Vælg ét til at lede farven, og lad de andre forme typografi, bevægelse og layout.

### Påvirker animation brandstemmen?

Ja. Langsom, blød easing føles rolig, hurtige bevægelser føles beslutsomme, og et lille overskud føles legende, så bevægelsen bør matche ordenes stemme.