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

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 è 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 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.

Le idee di fondo, come tempistica, gerarchia e prosecuzione del gesto, sono trattate in principi di motion design. 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.

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

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 spiega come.

Il movimento nelle risorse di un brand

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 passa in rassegna gli approcci principali.

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.

È 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 spiega come costruirci attorno il colore.