Motion graphics: cos’è, quando usarla e come si prepara un progetto

La motion graphics è grafica in movimento: testi, forme, loghi, icone e dati animati per spiegare, presentare o dare ritmo a un contenuto. Non è un film con personaggi e trama, ma un pezzo breve che comunica un’informazione o un’idea. Si usa quando un concetto va chiarito in pochi secondi, e si prepara con un brief, un piano visivo approvato, le revisioni e una consegna pensata per ogni canale.

Che cos’è la motion graphics?

Adobe la descrive come grafica con movimento, che unisce testo ed elementi di design in forma animata, e la distingue dall’animazione narrativa: di solito sono pezzi brevi che intrattengono o informano. Per un brand significa dare movimento a ciò che ha già: logo, colori, caratteri, icone, dati. Per questo è un lavoro di identità visiva prima ancora che di tecnica.

Quando conviene usarla

• Spiegare qualcosa di astratto: un processo, un servizio, un flusso di dati. Il movimento mostra l’ordine in cui accadono le cose.
• Presentare dati e numeri: grafici e infografiche che si costruiscono sotto gli occhi di chi guarda, al posto di una slide statica.
• Dare un’identità al video: logo animato, titoli, sottopancia e chiusure coerenti con il brand.
• Lavorare sui social: formati brevi, spesso visti senza audio, in cui testo e movimento reggono il messaggio.
• Affiancare le riprese: grafiche animate dentro un video girato, per titoli, didascalie e dati.

Se il messaggio è emotivo e legato a persone o luoghi reali, di solito funzionano meglio le riprese; le due cose si combinano bene.

Come si prepara un progetto

Adobe stessa ricorda di pianificare prima di cominciare, perché la motion graphics è una disciplina complessa. Le fasi che in genere consigliamo di seguire sono queste.

1. Brief. Obiettivo, pubblico, messaggio da far passare, dove verrà visto, con o senza audio, materiali di marca disponibili.
2. Storyboard e styleframe. Lo storyboard fissa la sequenza delle scene; gli styleframe sono fotogrammi finiti che mostrano stile, colori, caratteri e composizione. Conviene approvarli prima di animare: cambiare direzione a lavoro avviato, di solito, costa di più.
3. Animatic. Secondo Adobe è uno storyboard animato, una bozza della sequenza, a volte con colonna sonora. Serve a verificare ritmo e successione prima di produrre.
4. Produzione. Si animano gli elementi approvati, si lavora su transizioni, tempi e suono.
5. Revisioni. Conviene concordare un numero di giri e raccogliere i commenti in un unico elenco: così le correzioni restano ordinate.
6. Consegna. I file nei formati di ogni canale, con le versioni previste dal piano e, se serve, i sottotitoli.

Formati e consegna

Conviene decidere le proporzioni nel brief, non a fine lavoro, perché cambiano la composizione. Il lettore di YouTube si adatta a ogni video e su computer usa il 16:9 come formato predefinito; i video verticali 9:16 vengono mostrati con un riquadro attorno, e YouTube sconsiglia di aggiungere barre o bordi propri. Instagram indica per i reel proporzioni comprese tra 1,91:1 e 9:16. Le specifiche cambiano nel tempo: prima di consegnare si controllano sempre le pagine ufficiali di ogni piattaforma.

Conviene progettare le grafiche con margini di sicurezza, così che testi e logo restino leggibili anche quando lo stesso lavoro esce in più proporzioni.

Accessibilità: sottotitoli, lampeggi e movimento

• Sottotitoli. Le WCAG 2.2 (criterio 1.2.2, livello A) richiedono sottotitoli per l’audio dei contenuti preregistrati con sincronizzazione audio e video; devono includere anche suoni non parlati rilevanti.
• Descrizione dei contenuti visivi. Il criterio 1.2.5 (livello AA) prevede l’audiodescrizione per i video preregistrati; se tutto ciò che conta è già detto nell’audio, non serve altro.
• Lampeggi. Il criterio 2.3.1 vieta contenuti che lampeggiano più di tre volte al secondo, oltre le soglie indicate, per proteggere chi soffre di epilessia fotosensibile.
• Sul sito. Un video o un’animazione che parte da sola e dura più di cinque secondi accanto ad altri contenuti deve poter essere messa in pausa o fermata (criterio 2.2.2). Per le animazioni in CSS esiste inoltre la preferenza di sistema prefers-reduced-motion, pensata per chi soffre di disturbi vestibolari.

Il consiglio pratico: progettare fin dallo storyboard sottotitoli leggibili e movimenti misurati, senza zoom e rotazioni continue.

La motion graphics fa parte del nostro servizio di Production, insieme a foto e video, e parte dall’identità definita con il graphic design: se hai un messaggio da rendere chiaro in movimento, raccontacelo.