# Banner animati: il movimento al servizio del messaggio

[Canonical HTML page](https://gradiently.design/it/guide/animated-banner-ads)

Un banner riceve uno sguardo con la coda dell’occhio. Il movimento può guadagnarsi quello sguardo, poi deve passare la mano a un messaggio abbastanza semplice da leggere in un secondo.

## The short version

- I banner animati efficaci seguono di solito un breve storyboard di tre frame: un gancio, il valore, poi il brand e l’invito all’azione.
- L’ultimo frame di un banner animato deve funzionare da solo, perché molte reti pubblicitarie limitano la durata o il numero di ripetizioni dell’animazione.
- Tra le dimensioni display più comuni ci sono 300×250, 728×90, 300×600, 160×600 e 320×50 pixel.
- I banner animati si consegnano di solito come pacchetti HTML5 o GIF, e le reti fissano limiti di peso molto stretti per entrambi.
- Il movimento in un banner deve attirare lo sguardo una volta, poi lasciare le parole ferme abbastanza a lungo da essere lette.

I buoni **banner animati** usano il movimento per catturare lo sguardo una volta sola, poi si fanno da parte davanti al messaggio. La struttura affidabile è in tre frame: un gancio, il valore e un frame finale con il brand e un invito all’azione chiaro che resta a schermo. Tieni breve tutta la sequenza, fai in modo che l’ultimo frame funzioni come annuncio statico a sé stante e mantieni il file leggero, perché le reti pubblicitarie limitano sia la durata dell’animazione sia il peso del file.

## Lo storyboard in tre frame

I banner si vedono di passaggio, accanto a ciò per cui chi legge è venuto davvero. Nessuno aspetta che un banner finisca. Pianifica la sequenza in modo che ogni frame abbia senso da solo e che l’ordine racconti una piccola storia.

1. **Frame 1: il gancio** Una riga breve o un’immagine forte. Il suo unico compito è far guardare. «La tua scrivania, più calma.» Da due a tre secondi.
2. **Frame 2: il valore** Cosa offri, nei termini di chi legge. «Canaline passacavi per ogni scrivania.» Da due a tre secondi.
3. **Frame 3: il frame finale** Logo, offerta in breve e un invito all’azione a forma di pulsante. «Scopri la gamma.» Questo frame resta fermo fino alla fine dell’annuncio.

Frame quadrato di un annuncio con il gancio «La tua scrivania, più calma» su un gradiente che si muove lentamente

Primo frame: un gancio di quattro parole su un colore in movimento. Nient’altro gli fa concorrenza.

Frame finale quadrato con il nome di un brand, una breve riga di valore e l’invito all’azione «Scopri la gamma»

Il frame finale: brand, valore e invito all’azione insieme. Se è l’unica cosa che qualcuno vede, l’annuncio funziona comunque.

Lo stesso storyboard vale per gli annunci social, che di solito sono brevi video e non banner. [Il design degli annunci Facebook](https://gradiently.design/it/guide/facebook-ad-design) e [il design degli annunci Instagram](https://gradiently.design/it/guide/instagram-ad-design) trattano questi formati.

## Tempi e loop nei banner animati

Molte reti pubblicitarie ed editori limitano la durata dell’animazione e il numero di cicli, e i limiti variano. Google Ads, per esempio, restringe gli annunci animati caricati a 30 secondi di animazione. Controlla la specifica aggiornata di ogni rete su cui acquisti spazio e progetta l’annuncio perché finisca sul frame più forte, qualunque sia il limite.

| Parte | Durata | Regola |
| --- | --- | --- |
| Frame del gancio | Da 2 a 3 secondi | Parole brevi, testo grande |
| Frame del valore | Da 2 a 3 secondi | Un solo vantaggio, non un elenco |
| Frame finale | Resta fermo | Brand, offerta e invito all’azione, leggibili anche da fermi |
| Transizioni | Da 300 a 500 ms | Rapide e coerenti; un solo stile per tutti i frame |
| Intera sequenza | Circa 6 a 10 secondi per ciclo | Abbastanza breve da ripetersi più volte entro i limiti |

Una regola pratica per i tempi di lettura: se non riesci a leggere un frame ad alta voce due volte prima che cambi, dagli più tempo o taglia le parole.

> **Evita lampeggi e movimenti frenetici** I lampi rapidi sono fastidiosi e possono essere dannosi per chi soffre di epilessia fotosensibile, e le reti pubblicitarie li rifiutano di frequente. Muovi colore e testo in modo fluido, mai più veloce di quanto l’occhio riesca a seguire.

## Dimensioni standard dei banner

Le reti display usano un insieme di dimensioni standard. Una campagna ne copre di solito diverse, quindi progetta un sistema e non un singolo annuncio: un layout che si riorganizza per spazi larghi, alti e piccoli mantenendo le stesse parole, lo stesso colore e lo stesso movimento.

- Rettangolo medio: 300 × 250
- Mezza pagina: 300 × 600
- Skyscraper largo: 160 × 600
- Leaderboard: 728 × 90
- Banner mobile: 320 × 50

Le dimensioni display più comuni in scala. Gli spazi molto larghi e molto bassi richiedono meno parole e un frame finale più semplice.

| Dimensione (px) | Nome | Cosa ci sta |
| --- | --- | --- |
| 300×250 | Rettangolo medio | Tutta la storia in tre frame; un buon formato principale |
| 300×600 | Mezza pagina | Spazio per un’immagine sopra le parole |
| 160×600 | Skyscraper largo | Parole impilate, due o tre per riga |
| 728×90 | Leaderboard | Una riga per frame, logo e pulsante affiancati |
| 320×50 | Banner mobile | Solo gancio e pulsante; il logo può essere il gancio |

Progetta prima il 300×250, poi adattalo. Editori e reti chiedono spesso anche versioni a doppia densità.

## GIF o HTML5 per i banner animati

La maggior parte delle reti display accetta gli annunci animati come GIF o come HTML5, un piccolo pacchetto di HTML, CSS, JavaScript e immagini. L’HTML5 offre un movimento più fluido, testo nitido a qualsiasi densità e colori pieni, e si adatta ad annunci più ricchi. La GIF è più semplice da produrre e accettata quasi ovunque, ma il limite di 256 colori crea bande nei gradienti. I limiti di peso per entrambi sono stretti, misurati in kilobyte e non in megabyte, quindi controlla la specifica di ogni rete.

Se scegli la GIF, le tecniche per [le GIF animate](https://gradiently.design/it/guide/gif-maker-tips) tengono basso il peso: meno frame, una tavolozza costruita sull’animazione e la minor parte possibile del frame in movimento. Per il movimento in sé, un [easing](https://gradiently.design/it/guide/easing) coerente è ciò che separa un banner curato da uno a scatti.

## Regole di design che fanno funzionare i banner

### Evita

- Quattro o cinque frame di testo
- Testo piccolo su un movimento veloce e confuso
- Il logo solo nel primo frame
- Uno stile di animazione diverso per ogni elemento
- Un frame finale senza un invito all’azione chiaro

### Fai

- Tre frame, poche parole ciascuno
- Testo grande su un colore lento e calmo
- Il brand sul frame finale che resta fermo
- Un solo stile di transizione dall’inizio alla fine
- Un invito all’azione a forma di pulsante sull’ultimo frame

Uno sfondo distintivo è il modo più economico per farsi riconoscere in tutta una campagna. Quando lo stesso campo di colore si muove dietro ogni frame e ogni formato, le persone iniziano ad associare quel movimento a te prima ancora di leggere una parola. Metti alla prova varianti del gancio e non dell’intero annuncio; [il test dei creativi pubblicitari](https://gradiently.design/it/guide/ad-creative-testing) spiega come farlo in modo corretto.

Gradiently è adatto alla parte social di una campagna. Progetta il gancio e il frame finale su un Mark che è tuo, ridimensiona in 1080×1080, 1080×1350 e 1080×1920 in un solo passaggio con Pro ed esporta ognuno in MP4. Il Mark viene renderizzato per ogni formato, così la sua area calma resta dietro le parole a ogni dimensione.

## FAQ

### Quanto dovrebbe durare un banner animato?

Un ciclo di circa 6-10 secondi va bene per la maggior parte dei banner. Molte reti limitano il tempo totale di animazione, Google Ads a 30 secondi per gli annunci animati caricati, quindi controlla la specifica di ogni rete.

### Quanti frame deve avere un banner animato?

Tre sono una struttura affidabile: un gancio, il valore e un frame finale con il brand e l’invito all’azione. Più frame di solito significano più parole di quante ne leggerà qualcuno.

### Quali sono le dimensioni di banner più comuni?

300×250, 300×600, 160×600, 728×90 e 320×50 pixel sono tra le dimensioni display più usate. Parti dal 300×250 e adatta gli altri a partire da quello.

### I banner animati vanno fatti in GIF o in HTML5?

L’HTML5 dà un movimento più fluido e un testo più nitido e si adatta ad annunci più ricchi; la GIF è più semplice e accettata quasi ovunque, ma crea bande nei gradienti. Entrambi devono rispettare il limite di peso della rete.

### Cosa deve mostrare l’ultimo frame di un banner?

Il brand, l’offerta in breve e un invito all’azione chiaro, impaginati in modo che il frame funzioni come annuncio statico completo se l’animazione si ferma lì.