# Merkevarestemme og visuelt uttrykk: få ord og look til å stemme

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

Et rolig budskap i et høylytt uttrykk virker uoppriktig, og folk merker det før de kan si hvorfor. Her er et praktisk kart fra hvordan du høres ut til hvordan du ser ut.

## The short version

- Merkevarestemme er hvordan en merkevare høres ut i ord, og det visuelle uttrykket bør vise den samme karakteren i farge, skrift, tekstur, bevegelse og oppsett.
- Når stemme og uttrykk er uenige, for eksempel et mildt budskap i et høylytt neonuttrykk, merker folk misforholdet selv om de ikke kan sette ord på det.
- Hvert stemmetrekk kan knyttes til konkrete visuelle valg: rolig peker mot mild kontrast og sakte bevegelse, modig peker mot høy kontrast og tung skrift.
- Skriv hvert stemmetrekk som «dette, ikke dette», så de visuelle valgene får en grense i tillegg til en retning.
- Bevegelse har også en stemme: farten og myken i en animasjon kan høres rolig, modig, leken eller presis ut.

**Merkevarestemmen** din er hvordan merkevaren høres ut i ord: rolig eller modig, leken eller presis, varm eller kjølig. Det visuelle uttrykket bør si nøyaktig det samme i farge, skrift, tekstur, bevegelse og oppsett. Den praktiske veien dit er å ta hvert stemmetrekk og knytte det til bestemte visuelle valg, og så sjekke hvert design mot det kartet. Når de to er enige, føles et innlegg oppriktig før noen har lest det.

De fleste merkevarer definerer stemmen for tekstforfattere og uttrykket for designere, hver for seg. Slik ender du opp med en mild, betryggende bildetekst på en skrikende neonbakgrunn. Denne guiden binder de to sammen. Har du ikke landet på karakteren din ennå, start med [merkevarepersonlighet](https://gradiently.design/nb/guide/brand-personality).

## Hvorfor merkevarestemme og visuelt uttrykk må stemme overens

Folk tar inn utseendet på et innlegg før ordene. Utseendet setter en forventning, og ordene bekrefter den eller motsier den. En motsigelse registreres ikke alltid bevisst, men den gjør at merkevaren føles litt skjev, som en venn hvis tonefall ikke passer til det de sier.

### Stemme og uttrykk er uenige

- En stille, gjennomtenkt merkevare i mettet neon med sprett i animasjonene
- En leken merkevare i grått, tynn skrift og strenge rutenett
- En presis, teknisk merkevare i håndtegnede skrifter og myke uskarpheter
- En varm, lokal merkevare i kaldt blått og kjedelige bildebankbilder

### Stemme og uttrykk er enige

- Den samme stille merkevaren i dype nøytrale toner, en fin serif og sakte drift
- Den leken merkevaren i lyse, uventede kombinasjoner og avrundet skrift
- Den tekniske merkevaren i en ren sans, skarp kontrast og nøyaktig avstand
- Den varme merkevaren i jordfarger, papirtekstur og ekte ansikter

## Et kart fra stemmetrekk til visuelle valg

Bruk denne tabellen som et utgangspunkt, ikke en lov. De fleste merkevarer er en blanding av to eller tre trekk. Velg det dominerende for fargen og la de andre forme skrift og bevegelse.

| Stemmetrekk | Farge | Skrift | Tekstur og bevegelse | Oppsett |
| --- | --- | --- | --- | --- |
| Rolig | Mild kontrast, nære toner, dempet | Lette eller vanlige snitt, åpen avstand | Fint korn, sakte drift | Mye rom, få elementer |
| Modig | Høy kontrast, mettet, få farger | Tunge snitt, store størrelser, tett avstand | Skarpe flater, raske klipp | Stor skrift, kant til kant |
| Leken | Uventede kombinasjoner, lyse pastellfarger | Runde former, blandede størrelser | Myke materialer, sprettende easing | Løst, litt utenfor rutenettet |
| Presis | Tilbakeholden, én tydelig aksent | Ren sans, jevn rytme | Glatt, minimal tekstur, nøyaktig timing | Strengt rutenett, justerte kanter |
| Varm | Jordnære og solfylte toner | Vennlig serif eller humanistisk sans | Papir, korn, dagslys | Romslige marger, bilder av mennesker |

Ett trekk leder som regel. De andre justerer detaljene.

## Fire stemmer, fire uttrykk

Her er de samme typene valg gjort for fire ulike stemmer. Legg merke til hvor mye fargen alene allerede forteller før noen ord er lagt til.

- Rolig: tåke til mildt blått: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Modig: rødoransje til gul: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Leken: rosa, smør, mynte: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Presis: blekk til dyp marineblå: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Fargen setter stemmen først. For mer bakgrunn om hva farger antyder, se [fargepsykologi](https://gradiently.design/nb/guide/color-psychology).

Et stående innlegg med ordene Ta deg tid satt små og lette på en stille bakgrunn med mye luft

Rolig: én kort linje, et lett snitt, mesteparten av flaten latt tom.

Et stående innlegg med det ene ordet Nå satt veldig stort over en livlig bakgrunn

Modig: ett digert ord, ingenting annet som konkurrerer med det.

Et kvadratisk innlegg som spør Hva ville du laget? i et vennlig oppsett på en lys bakgrunn

Leken: et spørsmål, en invitasjon, en lettere hånd.

Et kvadratisk innlegg med tittelen Tre endringer denne uken og en ryddig justert liste på en dempet bakgrunn

Presis: en liste, justerte kanter, ingen dekor som ikke er informasjon.

## Slik finner du din visuelle stemme

1. **Skriv trekkene dine som «dette, ikke dette»** «Selvsikker, ikke arrogant.» «Varm, ikke sukkersøt.» Den andre halvdelen gir de visuelle valgene en grense i tillegg til en retning.
2. **Velg det ledende trekket** Bestem hvilket trekk som styrer fargen. To ledere som drar i hver sin retning, som rolig og modig, gir et uklart uttrykk.
3. **Knytt hvert trekk til valg** Bruk tabellen over til å velge farge, skrift, tekstur, bevegelse og oppsett. Skriv valgene ved siden av hvert trekk.
4. **Kjør samme setning gjennom to uttrykk** Sett én ekte linje fra teksten din i uttrykket du valgte og i det motsatte. Hvis det motsatte føles sannere, ta trekkene opp til vurdering.
5. **Skriv det ned sammen** Sett stemmen og de visuelle reglene på samme side i [stilguiden for merkevaren](https://gradiently.design/nb/guide/brand-style-guide), så skribenter og designere jobber fra én kilde.

## Bevegelse har også en stemme

Farten og kurven i en animasjon høres ut som noe. En lang, myk utgang føles rolig. Et kort, skarpt trekk føles bestemt. En liten overskyting føles leken. Hvis merkevaren din vises i video eller på et nettsted, gi bevegelsen den samme stemmen som ordene. [Easing](https://gradiently.design/nb/guide/easing) forklarer kurvene i detalj.

```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 bevegelsesstemmer. Overskytingen i den lekne kurven kommer av at det andre kontrollpunktet går over 1.

Det samme gjelder skrift. Overskriftsskriften din er den høyeste delen av den visuelle stemmen, og [skriftkombinasjoner](https://gradiently.design/nb/guide/font-pairing) avgjør om den snakker alene eller i en samtale. I Gradiently bærer hver Mark en skriftstemme ved siden av fargene og materialene sine, så uttrykket og bokstavene kommer ferdig avstemt.

> **Høytlesingstesten** Les ordene i et innlegg høyt i den tonen designet antyder. Hvis du aldri ville sagt det slik, må uttrykket og stemmen føres sammen igjen.

## FAQ

### Hva er merkevarestemme?

Merkevarestemme er den konsekvente karakteren en merkevare uttrykker i ordene sine, for eksempel rolig, modig, leken eller presis. Tonen tilpasser stemmen til situasjonen.

### Hvordan uttrykker visuelle elementer merkevarestemmen?

Gjennom farge, skrift, tekstur, bevegelse og oppsett. Mild kontrast og åpen avstand høres rolig ut, mens høy kontrast og tung skrift høres modig ut.

### Hva er forskjellen på merkevarestemme og merkevarepersonlighet?

Personlighet er merkevarens karakter, og stemme er hvordan karakteren kommer til uttrykk i ord. Det visuelle uttrykket bør vise den samme personligheten som stemmen.

### Kan en merkevare ha mer enn ett stemmetrekk?

Ja, de fleste har to eller tre. Velg ett som leder fargen, og la de andre forme skrift, bevegelse og oppsett.

### Påvirker animasjon merkevarestemmen?

Ja. Sakte, myk bevegelse føles rolig, raske trekk føles bestemte og en liten overskyting føles leken, så bevegelsen bør passe stemmen i ordene.