# Motion branding: come si muove un brand, non solo l’aspetto

[Canonical HTML page](https://gradiently.design/it/guide/motion-branding-guide)

Due brand possono condividere un carattere e un colore e non somigliarsi per niente quando si muovono. Il movimento è la parte dell’identità che la maggior parte dei brand lascia al caso.

## The short version

- Il motion branding è l’insieme di regole su come si muovono il logo, il testo, gli sfondi e l’interfaccia di un brand.
- Le decisioni di fondo sono ritmo, easing, direzione e quali elementi possono muoversi.
- Il movimento di un brand dovrebbe corrispondere al suo carattere: i brand calmi si muovono lentamente con un easing gentile, quelli energici più in fretta e con più rimbalzo.
- Le regole di movimento sono più utili se scritte come poche durate e curve di easing con un nome, condivise da designer e sviluppatori.
- Un buon motion branding include sempre una versione a movimento ridotto per le persone che chiedono ai loro dispositivi meno movimento.

Il **motion branding** è la parte di un’identità che descrive come si muove il brand: quanto in fretta succedono le cose, come accelerano e rallentano, in quale direzione viaggiano e cosa può muoversi. Un logo che scatta al suo posto dice qualcosa di diverso da uno che arriva alla deriva. Messo per iscritto in una manciata di regole, il movimento fa sentire ogni video, storia, sito e app come lo stesso brand, anche quando cambiano colori e impaginazioni.

## Perché il movimento appartiene all’identità di un brand

La maggior parte delle linee guida di un brand si ferma a logo, colore e tipografia, perché sono state scritte per la stampa. Oggi le persone incontrano spesso un brand in movimento: in un Reel, in una storia animata, in un hero di un sito, in un’interfaccia di prodotto. Se nessuno decide come si muovono queste cose, lo decidono al posto tuo ogni designer e ogni strumento, e il brand comincia a comportarsi come tante aziende diverse.

Ne trae vantaggio anche un brand per lo più statico. Una sola regola, come «le parole arrivano salendo con delicatezza, mai ruotando», evita molto lavoro fuori brand prima ancora che inizi. Se il tuo brand non si è mai mosso, [motion graphics per i brand](https://gradiently.design/it/guide/motion-for-still-brands) è un punto di partenza gentile.

## Le quattro decisioni del motion branding

1. **Ritmo.** Quanto durano le cose. Durate brevi sembrano efficienti e vivaci; durate lunghe sembrano calme, ponderate o di lusso.
2. **Easing.** Come il movimento accelera e rallenta. Un ease out gentile sembra naturale; un leggero rimbalzo sembra giocoso; il lineare sembra meccanico. Vedi [easing](https://gradiently.design/it/guide/easing) per le curve.
3. **Direzione e comportamento.** Le cose salgono, scivolano, si ingrandiscono, sfumano o si rivelano? Scegli due o tre comportamenti e usali con coerenza.
4. **Cosa si muove.** Decidi quali elementi possono muoversi: lo sfondo, le parole, il logo, le foto. La sobrietà qui è la differenza più grande tra premium e confuso.

| Carattere | Ritmo | Easing | Comportamento tipico |
| --- | --- | --- | --- |
| Calmo, premium | Lento, da 400 a 700 ms | Ease out morbido | Dissolvenze, salite lente, colore alla deriva |
| Sicuro, editoriale | Medio, da 250 a 400 ms | Ease out deciso | Tendine, scorrimenti puliti, tagli a tempo di musica |
| Giocoso, amichevole | Rapido, da 200 a 350 ms | Ease out con rimbalzo | Comparse a scatto, rimbalzi, ingrandimenti |
| Tecnico, preciso | Rapido, da 150 a 250 ms | Ease in out netto | Scorrimenti dritti, testo a macchina da scrivere |

Punti di partenza per il movimento di interfaccia e testo. Il movimento di sfondo e d’ambiente è molto più lento, misurato in secondi.

Le idee di fondo, come tempistica, gerarchia e prosecuzione del gesto, sono trattate in [principi di motion design](https://gradiently.design/it/guide/motion-design-principles). Il motion branding è l’atto di scegliere tra di esse e impegnarsi.

## Scrivere regole di movimento che designer e sviluppatori condividono

Le linee guida sul movimento falliscono quando sono scritte come aggettivi. «Fluido e sicuro» significa qualcosa di diverso per ognuno. Dai un nome a poche durate e a poche curve di easing, consegnale a designer e sviluppatori con le stesse parole, e il brand si muove nello stesso modo in un editor video e nel codice.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

Il movimento di un brand come token. Tre durate, un ritmo d’ambiente e tre curve con un nome coprono quasi tutto.

Nota l’ultima regola. Alcune persone si distraggono o stanno male a causa del movimento e chiedono al dispositivo di ridurlo. Un brand con un movimento completo definisce cosa succede allora, di solito una semplice dissolvenza o nessun movimento. [Preferenza per il movimento ridotto](https://gradiently.design/it/guide/reduced-motion) spiega come.

## Il movimento nelle risorse di un brand

| Risorsa | Cosa definire | Regola d’esempio |
| --- | --- | --- |
| Logo | La sua entrata, il suo stato di riposo, quanto resta fermo | Si disegna in 800 ms, resta fermo, non va mai in loop |
| Testo | Uno o due stili di entrata | I titoli salgono; le righe di supporto sfumano un attimo dopo |
| Sfondi | Velocità, direzione, se vanno in loop | Il colore scorre lentamente e va in loop ogni 12 secondi |
| Transizioni | Come una scena o una pagina sostituisce l’altra | Tendina nel verso di lettura, mai una rotazione |
| Interfaccia | Hover, pressione, apertura e chiusura | I pannelli si aprono con la durata di base e si chiudono più in fretta |

Una riga per risorsa basta. Se una regola ha bisogno di un paragrafo per essere spiegata, probabilmente è troppo complicata.

Il logo di solito riceve più attenzione e compare più di rado. Sfondi e testo sono sullo schermo molto più spesso, ed è lì che la coerenza paga. Per il logo in sé, [logo animato](https://gradiently.design/it/guide/animated-logo) passa in rassegna gli approcci principali.

Design verticale con un titolo editoriale sul fare le cose con calma su un gradiente che scorre dolcemente

Un brand calmo: durate lunghe, colore che scorre, parole che sfumano e restano.

Design verticale per l’uscita di un prodotto con la scritta è arrivato, colori vivaci e impaginazione audace

Un brand giocoso: ritmo più rapido, parole che compaiono con rimbalzo, movimento più vivace nello sfondo.

## Sfondi che si muovono come il tuo brand

Il movimento più visibile nella maggior parte dei contenuti di un brand è lo sfondo: il colore in movimento dietro una storia, un Reel o un hero. È anche il movimento che i brand prendono più spesso dagli archivi stock, il che significa che non appartiene a nessuno. Uno sfondo i cui colori, luce, grana e movimento sono tutti tuoi fa più per il riconoscimento di un’elaborata animazione del logo vista una volta sola.

Un campo di colore del brand: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Uno sfondo così, che si muove lentamente e sempre nello stesso modo, diventa riconoscibile quanto un logo.

È così che funzionano i Mark in Gradiently. Un Mark è una ricetta di colori, materiali, luce, grana, movimento e voce tipografica, quindi il suo movimento è parte della sua identità e non un effetto che aggiungi. Ogni design che lo indossa, da una storia a una slide, si muove nello stesso modo, e poiché ogni Mark è unico e ha un solo proprietario, i contenuti di nessun altro si muovono proprio come i tuoi. [Sistemi di gradienti del brand](https://gradiently.design/it/guide/brand-gradient-system) spiega come costruirci attorno il colore.

### Movimento fuori brand

- Ogni designer sceglie le proprie transizioni
- Ogni elemento si anima nello stesso momento
- Sfondi in movimento da archivio stock
- Linee guida scritte solo con aggettivi
- Nessun piano per il movimento ridotto

### Motion branding

- Due o tre comportamenti con un nome, usati ovunque
- Si muove una cosa alla volta, in ordine
- Uno sfondo che appartiene al brand
- Durate e curve con un nome in token condivisi
- Un ripiego definito, fisso o in dissolvenza

## FAQ

### Che cos’è il motion branding?

Il motion branding è l’insieme di regole su come si muove un brand: ritmo, easing, direzione e quali elementi possono muoversi. Fa sentire video, post social, siti e app come un unico brand.

### Cosa dovrebbero includere le linee guida di movimento di un brand?

Poche durate con un nome, poche curve di easing, due o tre comportamenti di entrata, regole per logo, testo, sfondi e transizioni, e cosa succede quando qualcuno preferisce il movimento ridotto.

### Quanto veloci dovrebbero essere le animazioni di un brand?

Il movimento di interfaccia e testo di solito sta tra circa 150 e 700 millisecondi, più rapido per i brand energici e più lento per quelli calmi. Il movimento di sfondo è molto più lento, misurato in secondi.

### Un piccolo brand ha bisogno del motion branding?

Una versione breve aiuta qualsiasi brand che pubblica video o storie. Anche solo una regola su come entrano le parole e uno sfondo in movimento mantengono coerenti i contenuti.