# Visuellt språk: grammatiken bakom ett varumärkes look

[Canonical HTML page](https://gradiently.design/sv/guide/visual-brand-language)

En logotyp är ett ord. Ett visuellt språk är grammatiken som låter ett varumärke säga nya saker och ändå låta som sig självt. Här är dess delar, och ett sätt att skriva egna regler på en sida.

## The short version

- Ett visuellt språk är ett varumärkes ordförråd av färger, typografi, former, bildspråk, ytor och rörelse, plus reglerna för hur de kombineras.
- Reglerna betyder mer än elementen, eftersom två varumärken kan dela en färg eller ett typsnitt och ändå se helt olika ut.
- Ett användbart visuellt språk ryms på en sida och svarar på praktiska frågor, som var rubriken ska ligga och hur stor del av bilden accenten får täcka.
- Ett visuellt språk fungerar när någon känner igen ditt inlägg med logotypen övertäckt.
- De flesta varumärken behöver färre element än de tror, använda med mer disciplin.

Ett **visuellt språk** är de element ett varumärke använder (färg, typografi, form, bildspråk, yta och rörelse) tillsammans med reglerna för hur elementen kombineras. Tänk på elementen som ordförråd och reglerna som grammatik. Ordförrådet säger i sig mycket lite: massor av varumärken använder marinblått och en geometrisk sans. Det är grammatiken, hur stor texten går, var färgen ligger och vad som aldrig är tillåtet, som gör en design omisskännligt ett varumärkes egen.

Den skillnaden är varför ett visuellt språk räcker längre än en logotyp eller en palett. Det är det som låter en designer, en frilansare eller en AI göra något nytt en tisdagseftermiddag som ändå ser ut att komma från samma ställe som allt annat. Det ingår i din bredare [visuella identitet](https://gradiently.design/sv/guide/visual-identity), och det är den del som folk faktiskt känner.

## Det visuella språkets element

Varje varumärkes ordförråd hämtar från samma sex familjer. Du behöver inte något anmärkningsvärt i alla sex. Du behöver ett tydligt beslut i var och en, och i en eller två av dem något som verkligen är utmärkande.

| Element | Beslutet | En nedskriven regel kan lyda |
| --- | --- | --- |
| Färg | En botten, en huvudfärg, en accent och deras proportioner | Bläcksvart botten överallt; korallaccenten täcker under en tiondel av varje bild |
| Typografi | Ett rubriktypsnitt, ett brödtypsnitt, storlekar och versaler | Rubriker med vanlig meningsstil, aldrig fler än sju ord |
| Form | Hörn, linjer, behållare, ikonstil | Mjuka hörn på foton, raka hörn på textpaneler |
| Bildspråk | Vad foton visar och hur de behandlas | Människor i arbete, aldrig poserande; foton tonade i varumärkets duoton |
| Yta | Platt, kornig, blank, pappersaktig, belyst | Varje bakgrund har fint korn och ljus från övre högra hörnet |
| Rörelse | Fart, mjukhet, vad som rör sig och vad som står still | Bakgrunder glider långsamt; ord rör sig aldrig när de väl landat |

Sex elementfamiljer och den sorts regel som förvandlar var och en från ett val till ett språk.

Lägg märke till att varje regel i högerkolumnen är tillräckligt specifik för att gå att argumentera mot. ”Modernt och rent” är ingen regel. ”Rubriker aldrig fler än sju ord” är det, eftersom du kan kontrollera en design mot den. [Visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy) och [varumärkestypsnitt](https://gradiently.design/sv/guide/brand-fonts) går djupare in på typografibesluten.

## Grammatik: reglerna som gör det ditt

Grammatiken är där ett visuellt språk blir möjligt att äga. Två varumärken kan båda välja violett, men det ena fyller hela bilden med det och använder vit text, medan det andra behåller en varm pappersbotten och låter violett synas bara som en tunn linje. Samma ord, olika meningar.

- Bläcksvart botten: #14111f
- Djup violett: #3b2a6b
- Huvudviolett: #8b6cf0
- Blek lila: #efe9ff
- Korallaccent: #ff7a59

Samma fem färger kan göra två mycket olika varumärken. Paletten är ordförråd; proportion och placering är grammatik.

Reglerna som är värda att skriva ner delas in i fyra slag:

- **Proportion:** hur stor del av en bild varje färg, bild eller textblock får ta. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är en bra utgångspunkt.
- **Placering:** var saker hör hemma. Logotyp nere till vänster, rubrik i övre tredjedelen, accent bara vid en kant.
- **Rytm:** hur designer upprepas över ett flöde eller en presentation. Till exempel att vart tredje inlägg bara är text.
- **Återhållsamhet:** vad som aldrig görs. Inga konturer på text, högst två textstorlekar per bild, inga arkivbilder av handslag.

> **Testet med övertäckt logotyp** Lägg handen över logotypen på dina sex senaste inlägg. Om en främling ändå kan se att alla är dina fungerar ditt visuella språk. Om inte, leta efter den familj där du inte har någon regel alls.

## Exempel på visuellt språk i praktiken

Här är ett litet varumärke, en keramikateljé i kvarteret, som talar ett enda visuellt språk i två mycket olika budskap. Reglerna: en mörk botten med en enda upplyst färg, korta rubriker i vanlig meningsstil, små detaljer på en rad under och inget annat i bilden.

Ett stående Instagraminlägg för en keramikateljé som meddelar att drejkurserna är tillbaka, med en kort rubrik på en mörk upplyst bakgrund

Ett tillkännagivande: en mening, en detaljrad, ytan som gör varumärkesjobbet.

Ett stående citatinlägg för samma keramikateljé, med samma bakgrund, text och proportioner som tillkännagivandet

Ett citatinlägg: ett annat jobb, samma grammatik, så att det läses som samma ateljé.

Inget av inläggen behöver en logotyp för att kännas igen när publiken har sett några. Det är utdelningen av en konsekvent grammatik, och det är det som [särskiljande varumärkestillgångar](https://gradiently.design/sv/guide/distinctive-brand-assets) bygger vidare på.

## Så skriver du ditt visuella språk på en sida

1. **Samla det du redan gör** Lägg ut dina tjugo senaste designer. Ringa in det som upprepas av vana och det som ändras varje gång. Vanorna är redan ditt språk; kaoset är där regler saknas.
2. **Välj en signatur** Välj det enda element du ska bli känd för. För många små varumärken är den starkaste kandidaten bakgrunden, eftersom den fyller största delen av varje bild.
3. **Skriv en regel per familj** Färg, typografi, form, bildspråk, yta, rörelse. En mening var, specifik nog för att en design ska kunna klara eller falla på den.
4. **Lägg till tre saker du aldrig gör** Regler om återhållsamhet är det snabbaste sättet att stoppa avdrift. Skriv dem som enkla förbud.
5. **Testa på tre olika uppgifter** Gör ett reainlägg, ett rekryteringsinlägg och ett citat med bara reglerna. Om ett av dem ser ut som ett annat företag, skärp den regel som lät det vandra.

### Vagt

- Använd varumärkets färger
- Håll det rent och modernt
- Typsnitten ska kännas vänliga
- Bilder ska passa varumärket

### Användbart

- Bläcksvart botten; korall under en tiondel av bilden
- En rubrik, en detaljrad, inget annat
- Rundad sans till rubriker, vanlig meningsstil
- Foton tonade i varumärkets duoton, bara människor

Behåll den färdiga sidan där alla som gör saker kan se den. En fullständig [varumärkesmanual](https://gradiently.design/sv/guide/brand-style-guide) kan komma senare; sidan är det folk faktiskt läser.

## Håll ett visuellt språk enhetligt när du växer

Språk driver iväg när fler börjar tala dem. Lösningen är att lägga reglerna i verktygen i stället för i ett dokument som ingen öppnar. Mallar hjälper, men de fryser layouter mer än de bär en röst.

Här passar Gradiently naturligt in. En Mark bär en stor del av ett visuellt språk själv: färgfamiljen, materialen, ljuset, kornet, rörelsen och en typografisk röst, renderade live bakom varje design och i varje storlek. Dess funktioner för läsbarhet håller orden läsbara var de än landar, så placeringsreglerna håller även när någon ny gör inlägget. Med dina typsnitt, logotyper och din röst i varumärkeskitet arbetar Designer inom de reglerna när den lägger ut nya designer.

## FAQ

### Vad är ett visuellt språk i design?

Det är de visuella element ett varumärke eller en produkt använder, som färg, typografi, form, bildspråk, yta och rörelse, plus reglerna för att kombinera dem så att varje design låter som en röst.

### Vad är skillnaden mellan visuellt språk och visuell identitet?

Visuell identitet är hela systemet av tillgångar, inklusive logotypen. Visuellt språk är grammatiken i det: hur tillgångarna beter sig och kombineras i en ny design.

### Vilka är elementen i ett visuellt språk?

Oftast färg, typografi, form, bildspråk, yta eller textur och rörelse. Var och en behöver minst en tydlig regel som går att kontrollera.

### Hur vet jag om mitt visuella språk fungerar?

Täck över logotypen på en rad nya designer. Om folk ändå kan se att alla kommer från dig gör språket sitt jobb.