# Brand vivi: perché i visual in movimento sono la nuova identità

[Canonical HTML page](https://gradiently.design/it/guide/living-brand-identity)

La maggior parte delle identità è nata per la carta e poi incollata sugli smartphone. Un brand vivo nasce per gli schermi: si muove appena, si adatta a ogni forma e fa spazio a ciò che porta con sé.

## The short version

- Un’identità di brand viva è un’identità i cui visual si muovono, si adattano a ogni formato e rispondono ai contenuti che ospitano, invece di restare un’immagine fissa.
- Il movimento aiuta sugli schermi perché un cambiamento gentile attira lo sguardo nel feed, senza bisogno di girare un video.
- La leggibilità reattiva significa che lo sfondo regola dove stanno le parole, così il testo resta leggibile in ogni fotogramma.
- Un’identità viva ha comunque regole fisse: la stessa famiglia di colori, lo stesso materiale, gli stessi caratteri e lo stesso tipo di movimento ogni volta.
- I buoni brand vivi rispettano chi preferisce meno animazioni e offrono una versione statica.

Un **brand vivo** è un’identità pensata per gli schermi e non per la carta: i suoi visual si muovono con delicatezza, si ricompongono per ogni formato e rispondono a ciò che ospitano, così le parole si leggono sempre. La maggior parte delle identità di brand è stata disegnata come immagine fissa e poi ritagliata su smartphone, banner e storie. Un brand vivo mantiene gli stessi colori, lo stesso materiale e gli stessi caratteri, ma si comporta più come una superficie che come un’immagine. È il passo naturale per i brand che vivono soprattutto nei feed.

## Cosa rende viva un’identità di brand

Tre comportamenti distinguono un’identità viva da una statica. Non servono tutti e tre dal primo giorno, ma ciascuno fa sentire il brand più a casa nei posti in cui le persone lo vedono davvero.

| Comportamento | Cosa significa | Perché aiuta |
| --- | --- | --- |
| Movimento | Lo sfondo scorre, respira o sposta la luce lentamente | Attira lo sguardo mentre si scorre, senza urlare |
| Adattamento | Si ricompone per ogni dimensione invece di essere ritagliato | La parte migliore dell’aspetto finisce al posto giusto in ogni formato |
| Risposta | Cambia dove stanno le parole perché restino leggibili | Ogni titolo si legge senza riquadri, ombre o sfocature |

Movimento, adattamento e risposta. Insieme trasformano un’identità da immagine a superficie.

Un brand vivo è parente di un’[identità dinamica](https://gradiently.design/it/guide/dynamic-brand-identity), ma l’accento è diverso. Un’identità dinamica varia la propria forma da un pezzo all’altro, di proposito. Un’identità viva può avere lo stesso aspetto in ogni pezzo; cambia il modo in cui si comporta al suo interno: si muove, si adatta e fa spazio mentre procede.

## Movimento: piccolo, lento e sempre dello stesso tipo

Il movimento è la parte più visibile di un brand vivo e la più facile da esagerare. L’obiettivo è uno sfondo che sembri vivo, non uno che competa con il messaggio. Tieni ferme le parole, lascia muovere lentamente la superficie e usa un solo tipo di movimento ovunque, così diventa parte dell’aspetto. [Il movimento per i brand statici](https://gradiently.design/it/guide/motion-for-still-brands) e gli [sfondi sfumati animati](https://gradiently.design/it/guide/animated-gradient-background) approfondiscono il mestiere.

### Da evitare

- Cicli di colore veloci
- Parole che rimbalzano o girano
- Uno stile di animazione diverso per ogni post
- Loop con un salto visibile alla fine

### Da fare

- Un lento scorrere di luce sulla superficie
- Parole ferme, o un solo ingresso pacato
- Una sola firma di movimento per tutto il brand
- Un loop continuo che si ricongiunge senza stacchi

## Adattamento: un solo aspetto, ogni forma

In una settimana un brand può aver bisogno di una storia, un post per il feed, un’immagine per i link e un banner LinkedIn. Un’immagine fissa ritagliata per ciascuno perde la sua parte migliore in almeno uno dei formati. Un’identità viva viene generata per ogni forma, così la luce e le aree calme finiscono ogni volta nel punto giusto. [Un solo aspetto, ogni dimensione](https://gradiently.design/it/guide/one-look-every-size) mostra come funziona nella pratica.

- Storia 1080×1920: 1080 × 1920
- Post Instagram 1080×1350: 1080 × 1350
- Anteprima link 1200×630: 1200 × 630
- Banner LinkedIn 1584×396: 1584 × 396

Dal molto alto al molto largo. Un’identità viva si ricompone per ciascun formato invece di essere ridotta a partire da un’unica immagine.

## Risposta: sfondi che fanno spazio alle parole

Su una sfumatura o una superficie in movimento il contrasto cambia lungo il fotogramma e nel tempo. Un titolo che si legge bene in un secondo può affondare in una chiazza luminosa il secondo dopo. I rimedi di sempre, un riquadro dietro il testo, un’ombra o una sfocatura, combattono tutti contro lo sfondo. Un’identità reattiva risolve il problema alla radice: la zona più calma della superficie sta dietro le parole e i colori vicino alle lettere si scuriscono o si schiariscono.

Un post di una scuola di danza in cui l’area luminosa della sfumatura attraversa il titolo

Uno sfondo fisso: l’area più luminosa può finire proprio dietro il titolo.

Lo stesso post della scuola di danza con un’area calma e più scura della sfumatura dietro il titolo

Uno sfondo reattivo: l’area calma si sposta dietro le parole e il testo resta nitido.

Per i principi che stanno dietro a tutto questo, vedi [il testo su una sfumatura](https://gradiently.design/it/guide/text-on-gradient) e [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility).

## Rispetta la riduzione del movimento

Alcune persone attivano la riduzione del movimento nelle impostazioni del dispositivo perché le animazioni danno loro fastidio o le distraggono. Un brand vivo sul web dovrebbe rispettare questa preferenza e mostrare una versione statica dello stesso aspetto. Bastano poche righe di CSS, documentate su [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}
```

Un lento scorrere su una superficie blu notte, blu e verde acqua, con un fotogramma fermo per chi preferisce meno movimento. Altro in [riduzione del movimento](https://gradiently.design/it/guide/reduced-motion).

## Come avviare un brand vivo senza rifare tutto

1. **Mantieni il tuo nucleo fisso** Colori, caratteri e logo restano esattamente come sono. Vivo è un comportamento aggiunto sopra, non un rebranding.
2. **Fai dello sfondo la parte in movimento** Occupa più spazio e porta meno informazione, quindi il movimento lì non costa nulla in chiarezza.
3. **Scegli una sola firma di movimento** Uno scorrimento, un lento respiro di luce o un leggero scintillio. Scrivilo nella tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide).
4. **Genera per ogni formato** Crea ogni dimensione dalla stessa ricetta invece di ritagliare un unico file master.
5. **Controlla ogni riga di testo** In ogni fotogramma e in ogni formato, le parole devono leggersi senza un riquadro dietro.

Gradiently è pensato proprio per questo. Un Mark è uno sfondo vivo, una ricetta di colori, materiali, luce, grana, movimento e una voce tipografica che viene generata in tempo reale dietro ogni design. Si compone da solo per ogni dimensione, la sua regione più calma si muove dietro le tue parole e **Inchiostro automatico** sceglie il testo chiaro o scuro riga per riga, dalla palette del Mark stesso. Le parole possono entrare con animazioni semplici come rise o wipe e con Pro puoi esportare il design in movimento, come GIF, oppure come MP4 o WebM dove il tuo browser supporta la registrazione.

## FAQ

### Cos’è un’identità di brand viva?

Un’identità i cui visual si muovono con delicatezza, si adattano a ogni formato e rispondono alle parole che ospitano, mantenendo gli stessi colori, lo stesso materiale e gli stessi caratteri.

### Il motion branding è solo per le grandi aziende?

No. Basta uno sfondo che si muove lentamente dietro parole ferme, senza set video né team di animazione.

### Uno sfondo in movimento rende il testo più difficile da leggere?

Può succedere, se le zone luminose o movimentate passano dietro le parole. Tieni il movimento lento e la parte più calma della superficie dietro il testo.

### Come deve gestire un brand vivo le impostazioni di riduzione del movimento?

Mostra un fotogramma fermo dello stesso aspetto quando il dispositivo chiede meno movimento. Sul web usa la media query prefers-reduced-motion.