Kortversionen
- 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.
På den här sidan
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.
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 |
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: en kort rad, en tunn vikt, det mesta av ytan lämnat tomt.
Djärv: ett enda stort ord, inget annat som konkurrerar.
Lekfull: en fråga, en inbjudan, en lättare touch.
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, 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 förklarar kurvorna i detalj.
/* 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; }Detsamma gäller typsnitt. Ditt rubriktypsnitt är den högljuddaste delen av din visuella röst, och typsnittspar 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.
Vanliga frågor
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.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
