# Voce del brand e immagine: fai sì che il tuo stile parli come te

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

Un messaggio calmo in uno stile urlato sembra poco sincero, e le persone se ne accorgono prima di saper dire perché. Ecco una mappa pratica da come parli a come appari.

## The short version

- La voce del brand è come un brand suona a parole; la sua immagine deve esprimere lo stesso carattere con colore, tipografia, texture, movimento e impaginazione.
- Quando voce e immagine sono in disaccordo, ad esempio un messaggio gentile in uno stile al neon urlato, le persone percepiscono la stonatura anche senza saperla nominare.
- Ogni tratto della voce corrisponde a scelte visive concrete: calmo suggerisce contrasto morbido e movimento lento, deciso suggerisce alto contrasto e caratteri pesanti.
- Scrivi ogni tratto della voce come «questo, non quello», così le scelte visive hanno un confine oltre che una direzione.
- Anche il movimento ha una voce: velocità e curva di accelerazione di un’animazione possono suonare calme, decise, giocose o precise.

La tua **voce del brand** è come il tuo brand suona a parole: calmo o deciso, giocoso o preciso, caldo o freddo. La tua immagine deve dire esattamente la stessa cosa con colore, tipografia, texture, movimento e impaginazione. Il modo pratico per arrivarci è prendere ogni tratto della voce e collegarlo a scelte visive specifiche, poi controllare ogni design con quella mappa. Quando i due coincidono, un post sembra sincero prima che qualcuno lo legga.

La maggior parte dei brand definisce la voce per chi scrive i testi e lo stile per chi progetta, separatamente. È così che si finisce con una didascalia gentile e rassicurante su uno sfondo al neon che urla. Questa guida unisce i due mondi. Se non hai ancora definito il tuo carattere, parti dalla [personalità del brand](https://gradiently.design/it/guide/brand-personality).

## Perché voce e immagine del brand devono coincidere

Le persone colgono l’aspetto di un post prima delle parole. L’aspetto crea un’aspettativa, e le parole la confermano o la contraddicono. Una contraddizione non sempre viene registrata consapevolmente; fa solo sembrare il brand un po’ fuori posto, come un amico il cui tono non corrisponde a ciò che dice.

### Voce e stile in disaccordo

- Un brand quieto e riflessivo in neon saturo con animazioni saltellanti
- Un brand giocoso in grigio, caratteri sottili e griglie rigide
- Un brand preciso e tecnico con font disegnati a mano e sfocature morbide
- Un brand caldo e locale in blu freddo e foto stock aziendali

### Voce e stile coincidono

- Lo stesso brand quieto in neutri profondi, un serif fine e una lenta deriva
- Il brand giocoso in abbinamenti vivaci e inattesi e caratteri arrotondati
- Il brand tecnico con un sans pulito, contrasto netto e spaziatura esatta
- Il brand caldo in toni terrosi, texture di carta e volti reali

## Una mappa dai tratti della voce alle scelte visive

Usa questa tabella come punto di partenza, non come legge. La maggior parte dei brand è un misto di due o tre tratti; scegli quello dominante per il colore e lascia che gli altri modellino caratteri e movimento.

| Tratto della voce | Colore | Carattere | Texture e movimento | Impaginazione |
| --- | --- | --- | --- | --- |
| Calmo | Contrasto morbido, tonalità vicine, attenuato | Pesi leggeri o regolari, spaziatura ariosa | Grana fine, lenta deriva | Molto spazio, pochi elementi |
| Deciso | Alto contrasto, saturo, pochi colori | Pesi forti, dimensioni grandi, spaziatura serrata | Superfici nitide, stacchi rapidi | Caratteri grandi, da bordo a bordo |
| Giocoso | Abbinamenti inattesi, pastelli vivaci | Forme arrotondate, dimensioni miste | Materiali morbidi, curve elastiche | Libera, un po’ fuori griglia |
| Preciso | Sobrio, un solo accento chiaro | Sans pulito, ritmo regolare | Liscio, texture minima, tempi esatti | Griglia rigida, bordi allineati |
| Caldo | Toni terrosi e soleggiati | Serif cordiale o sans umanista | Carta, grana, luce del giorno | Margini generosi, foto di persone |

Di solito un tratto guida. Gli altri regolano i dettagli.

## Quattro voci, quattro stili

Ecco gli stessi tipi di scelte fatte per quattro voci diverse. Nota quanto ti dice già il solo colore, prima che si aggiunga qualsiasi parola.

- Calmo: dalla foschia al blu tenue: `linear-gradient(180deg, #eef2f4 0%, #b9cbd6 100%)`
- Deciso: dal rosso arancio al giallo: `linear-gradient(135deg, #ff3d00 0%, #ffd600 100%)`
- Giocoso: rosa, burro, menta: `linear-gradient(120deg, #ff9ecd 0%, #ffd36e 50%, #7ee0c3 100%)`
- Preciso: dall’inchiostro al blu profondo: `linear-gradient(180deg, #0b1220 0%, #1f3a5f 100%)`

Il colore stabilisce prima di tutto la voce. Per approfondire cosa suggeriscono i colori, vedi la [psicologia del colore](https://gradiently.design/it/guide/color-psychology).

Un post verticale con le parole Prenditi il tuo tempo in piccolo e leggero su uno sfondo quieto con molto spazio

Calmo: una riga breve, un peso leggero, gran parte dell’inquadratura lasciata vuota.

Un post verticale con la sola parola Ora in dimensioni enormi su uno sfondo vivido

Deciso: una sola parola enorme, nient’altro che le faccia concorrenza.

Un post quadrato che chiede Cosa creeresti? in un’impaginazione cordiale su uno sfondo luminoso

Giocoso: una domanda, un invito, un tocco più leggero.

Un post quadrato intitolato Tre novità questa settimana con un elenco ordinato e allineato su uno sfondo sobrio

Preciso: un elenco, bordi allineati, nessuna decorazione che non sia informazione.

## Come trovare la tua voce visiva

1. **Scrivi i tuoi tratti come «questo, non quello»** «Sicuro, non arrogante.» «Caldo, non sdolcinato.» La seconda metà dà alle immagini un confine oltre che una direzione.
2. **Scegli il tratto guida** Decidi quale tratto guida il colore. Due guide che tirano in direzioni opposte, come calmo e deciso, producono uno stile confuso.
3. **Collega ogni tratto a delle scelte** Usa la tabella qui sopra per scegliere colore, carattere, texture, movimento e impaginazione. Scrivi le scelte accanto a ogni tratto.
4. **Fai passare la stessa frase in due stili** Imposta una frase vera dei tuoi testi nello stile che hai scelto e nel suo opposto. Se l’opposto sembra più vero, rivedi i tratti.
5. **Scrivilo tutto insieme** Metti le regole di voce e di immagine nella stessa pagina della tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide), così chi scrive e chi progetta lavorano da un’unica fonte.

## Anche il movimento ha una voce

Velocità e curva di accelerazione di un’animazione suonano come qualcosa. Una lunga e dolce decelerazione sembra calma. Un movimento breve e netto sembra deciso. Un leggero sovraccarico sembra giocoso. Se il tuo brand compare nei video o su un sito web, dai al movimento la stessa voce delle parole. [Le curve di easing](https://gradiently.design/it/guide/easing) spiega le curve nel dettaglio.

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

Quattro voci del movimento. Il sovraccarico nella curva giocosa nasce dal secondo punto di controllo che supera 1.

Lo stesso vale per i caratteri. Il font dei titoli è la parte più sonora della tua voce visiva, e l’[abbinamento dei font](https://gradiently.design/it/guide/font-pairing) decide se parla da solo o in una conversazione. In Gradiently ogni Mark porta con sé una voce tipografica accanto a colori e materiali, così l’aspetto e le lettere arrivano già abbinati.

> **Il test della lettura ad alta voce** Leggi ad alta voce le parole di un post con il tono che il design suggerisce. Se non le diresti mai così, aspetto e voce vanno riavvicinati.

## FAQ

### Cos’è la voce del brand?

La voce del brand è il carattere costante che un brand esprime a parole, come calmo, deciso, giocoso o preciso. Il tono adatta quella voce alla situazione.

### Come esprimono la voce del brand le immagini?

Con colore, caratteri, texture, movimento e impaginazione. Contrasto morbido e spaziatura ariosa suonano calmi; alto contrasto e caratteri pesanti suonano decisi.

### Che differenza c’è tra voce e personalità del brand?

La personalità è il carattere del brand; la voce è come quel carattere arriva a parole. L’immagine deve esprimere la stessa personalità che esprime la voce.

### Un brand può avere più di un tratto di voce?

Sì, la maggior parte ne ha due o tre. Scegline uno che guidi il colore e lascia che gli altri modellino caratteri, movimento e impaginazione.

### L’animazione influisce sulla voce del brand?

Sì. Una decelerazione lenta e dolce sembra calma, i movimenti rapidi sembrano decisi e un leggero sovraccarico sembra giocoso, quindi il movimento deve corrispondere alla voce delle parole.