# Varumärkets röst och bildspråk: låt din look låta som du

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

Ett lugnt budskap i en högljudd look verkar oärligt, och folk märker det innan de kan säga varför. Här är en praktisk karta från hur du låter till hur du ser ut.

## The short version

- Varumärkets röst är hur varumärket låter i ord; dess bildspråk ska uttrycka samma karaktär i färg, typsnitt, textur, rörelse och layout.
- När röst och bildspråk säger emot varandra, till exempel ett milt budskap i en högljudd neonlook, känner folk att något skaver även om de inte kan säga vad.
- Varje röstdrag motsvaras av konkreta visuella val: lugn ger mjuk kontrast och långsam rörelse, djärv ger hög kontrast och kraftig text.
- Skriv varje röstdrag som ”så här, inte så här” så att de visuella valen får en gräns och inte bara en riktning.
- Rörelse har också en röst: hastigheten och mjukheten i en animation kan låta lugn, djärv, lekfull eller exakt.

Ditt **varumärkes röst** är hur varumärket låter i ord: lugnt eller djärvt, lekfullt eller exakt, varmt eller svalt. Ditt bildspråk ska säga precis samma sak i färg, typsnitt, textur, rörelse och layout. Det praktiska sättet att komma dit är att koppla varje röstdrag till konkreta visuella val och sedan kontrollera varje design mot den kartan. När de två stämmer överens känns ett inlägg uppriktigt innan någon har läst det.

De flesta varumärken definierar rösten för textskribenter och looken för formgivare, var för sig. Så hamnar man med en mild, lugnande bildtext på en skrikig neonbakgrund. Den här guiden för ihop de två. Har du inte bestämt din karaktär än, börja med [varumärkespersonlighet](https://gradiently.design/sv/guide/brand-personality).

## Varför varumärkets röst och bildspråk måste stämma överens

Folk tar in ett inläggs look före orden. Looken skapar en förväntan, och orden bekräftar den eller säger emot den. En motsägelse märks inte alltid medvetet; den får bara varumärket att kännas lite fel, som en vän vars tonfall inte matchar det hen säger.

### Röst och look säger emot varandra

- Ett stilla, eftertänksamt varumärke i mättad neon med studsande animation
- Ett lekfullt varumärke i grått, tunn text och strikta rutnät
- Ett exakt, tekniskt varumärke i handritade typsnitt och mjuk oskärpa
- Ett varmt, lokalt varumärke i kallt blått och opersonliga stockfoton

### Röst och look stämmer

- Samma stilla varumärke i djupa neutrala toner, en fin antikva och långsam rörelse
- Det lekfulla varumärket i klara, oväntade kombinationer och rundad text
- Det tekniska varumärket i en ren sans serif, skarp kontrast och exakta avstånd
- Det varma varumärket i jordnära toner, papperstextur och riktiga ansikten

## En karta från röstdrag till visuella val

Använd tabellen som utgångspunkt, inte som lag. De flesta varumärken är en blandning av två eller tre drag; välj det dominerande för färgen och låt de andra forma typsnitt och rörelse.

| Röstdrag | Färg | Typsnitt | Textur och rörelse | Layout |
| --- | --- | --- | --- | --- |
| Lugn | Mjuk kontrast, närliggande nyanser, dämpad | Tunna eller normala vikter, luftigt avstånd | Fint korn, långsam drift | Gott om luft, få element |
| Djärv | Hög kontrast, mättad, få färger | Kraftiga vikter, stora storlekar, tätt avstånd | Skarpa ytor, snabba klipp | Stor text, kant till kant |
| Lekfull | Oväntade kombinationer, klara pasteller | Rundade former, blandade storlekar | Mjuka material, studsande rörelse | Lös, lite vid sidan av rutnätet |
| Exakt | Återhållsam, en tydlig accent | Ren sans serif, jämn rytm | Len, minimal textur, exakt timing | Strikt rutnät, jämna kanter |
| Varm | Jordnära och solbelysta toner | Vänlig antikva eller humanistisk sans serif | Papper, korn, dagsljus | Generösa marginaler, foton av människor |

Ett drag leder oftast. De andra justerar detaljerna.

## Fyra röster, fyra looks

Här är samma sorts val gjorda för fyra olika röster. Lägg märke till hur mycket enbart färgen redan säger, innan några ord har lagts till.

- Lugn: dis till mjukblå: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Djärv: rödorange till gult: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Lekfull: rosa, smör, mint: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Exakt: bläck till djup marin: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Färgen bestämmer rösten först. Mer om vad färger antyder finns i [färgpsykologi](https://gradiently.design/sv/guide/color-psychology).

Ett stående inlägg med orden Ta den tid du behöver satta små och tunna på en stilla bakgrund med gott om luft

Lugn: en kort rad, en tunn vikt, det mesta av ytan lämnat tomt.

Ett stående inlägg med ordet Nu satt mycket stort över en livfull bakgrund

Djärv: ett enda stort ord, inget annat som konkurrerar.

Ett kvadratiskt inlägg som frågar Vad skulle du göra? i en vänlig layout på en ljus bakgrund

Lekfull: en fråga, en inbjudan, en lättare touch.

Ett kvadratiskt inlägg med rubriken Tre ändringar den här veckan och en prydlig, justerad lista på en återhållsam bakgrund

Exakt: en lista, jämna kanter, ingen dekoration som inte är information.

## Så hittar du din visuella röst

1. **Skriv dina drag som ”så här, inte så här”** ”Självsäker, inte arrogant.” ”Varm, inte sockersöt.” Den andra halvan ger bildspråket en gräns och inte bara en riktning.
2. **Välj det ledande draget** Bestäm vilket drag som styr färgen. Två ledande drag som drar åt motsatta håll, som lugn och djärv, ger en rörig look.
3. **Koppla varje drag till val** Använd tabellen ovan för att välja färg, typsnitt, textur, rörelse och layout. Skriv valen bredvid varje drag.
4. **Kör samma mening genom två looks** Sätt en verklig rad ur din text i den look du valt och i dess motsats. Om motsatsen känns sannare, gå tillbaka till dragen.
5. **Skriv ner det tillsammans** Lägg röst- och bildreglerna på samma sida i din [grafiska manual](https://gradiently.design/sv/guide/brand-style-guide), så att skribenter och formgivare arbetar utifrån en källa.

## Rörelse har också en röst

Hastigheten och mjukheten i en animation låter som något. En lång, mild avmattning känns lugn. En kort, skarp rörelse känns beslutsam. Ett litet överslag känns lekfullt. Om ditt varumärke syns i video eller på en webbplats, ge rörelsen samma röst som orden. [Easing](https://gradiently.design/sv/guide/easing) förklarar kurvorna 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; }
```

Fyra rörelseröster. Överslaget i den lekfulla kurvan kommer av att den andra kontrollpunkten går över 1.

Detsamma gäller typsnitt. Ditt rubriktypsnitt är den högljuddaste delen av din visuella röst, och [typsnittspar](https://gradiently.design/sv/guide/font-pairing) avgör om det talar ensamt eller i ett samtal. I Gradiently bär varje Mark en typografisk röst tillsammans med sina färger och material, så att looken och bokstäverna redan är matchade när de kommer.

> **Högläsningstestet** Läs upp ett inläggs ord högt i den ton som designen antyder. Om du aldrig skulle säga det så behöver look och röst föras ihop igen.

## FAQ

### Vad är varumärkets röst?

Varumärkets röst är den konsekventa karaktär som ett varumärke uttrycker i sina ord, till exempel lugn, djärv, lekfull eller exakt. Tonen anpassar rösten efter situationen.

### Hur uttrycker bildspråket varumärkets röst?

Genom färg, typsnitt, textur, rörelse och layout. Mjuk kontrast och luftigt avstånd låter lugnt; hög kontrast och kraftig text låter djärvt.

### Vad är skillnaden mellan varumärkets röst och varumärkespersonlighet?

Personligheten är varumärkets karaktär; rösten är hur karaktären kommer fram i ord. Bildspråket ska uttrycka samma personlighet som rösten.

### Kan ett varumärke ha fler än ett röstdrag?

Ja, de flesta har två eller tre. Välj ett som leder färgen och låt de andra forma typsnitt, rörelse och layout.

### Påverkar animation varumärkets röst?

Ja. Långsam, mild avmattning känns lugn, snabba rörelser känns beslutsamma och ett litet överslag känns lekfullt, så rörelsen bör matcha orden.