# Banners animados: movimento que ajuda a mensagem

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

Um banner recebe um olhar de canto de olho. O movimento pode conquistar esse olhar, mas depois tem de passar a palavra a uma mensagem simples o bastante para se ler num segundo.

## The short version

- Os banners animados eficazes costumam seguir um storyboard curto de três fotogramas: um gancho, o valor e depois a marca e o apelo à ação.
- O último fotograma de um banner animado deve funcionar sozinho, porque muitas redes publicitárias limitam durante quanto tempo ou quantas vezes a animação pode passar.
- Os tamanhos de anúncios de display mais comuns incluem 300×250, 728×90, 300×600, 160×600 e 320×50 píxeis.
- Os banners animados costumam ser entregues como pacotes HTML5 ou GIFs, e as redes fixam limites de peso apertados para ambos.
- O movimento num banner deve atrair o olhar uma vez e depois deixar as palavras paradas o tempo suficiente para serem lidas.

Bons **banners animados** usam o movimento para atrair o olhar uma vez e depois saem da frente da mensagem. A estrutura fiável é de três fotogramas: um gancho, o valor e um fotograma final com a marca e um apelo à ação claro que fica no ecrã. Mantém a sequência toda curta, faz com que esse último fotograma funcione sozinho como anúncio estático e mantém o ficheiro leve, porque as redes publicitárias limitam tanto a duração da animação como o peso do ficheiro.

## O storyboard de três fotogramas

Os banners veem-se de passagem, ao lado daquilo por que o leitor realmente veio. Ninguém espera que um banner acabe. Planeia a sequência para cada fotograma fazer sentido sozinho e a ordem contar uma pequena história.

1. **Fotograma 1: o gancho** Uma linha curta ou uma imagem marcante. A única função é fazer alguém olhar. “A tua secretária, mais calma.” Dois a três segundos.
2. **Fotograma 2: o valor** O que ofereces, nos termos do leitor. “Calhas de cabos para qualquer secretária.” Dois a três segundos.
3. **Fotograma 3: o fotograma final** Logótipo, a oferta em resumo e um apelo à ação em forma de botão. “Vê a gama.” Este fotograma mantém-se até o anúncio parar.

Fotograma quadrado de anúncio com o gancho a tua secretária, mais calma sobre um gradiente em movimento lento

Fotograma um: um gancho em poucas palavras sobre cor em movimento. Nada mais compete com ele.

Fotograma final quadrado com o nome de uma marca, uma linha curta de valor e o apelo à ação vê a gama

O fotograma final: marca, valor e apelo à ação juntos. Se for só isto que alguém vê, o anúncio funciona na mesma.

O mesmo storyboard serve para anúncios em redes sociais, que costumam ser vídeos curtos e não banners. [Design de anúncios do Facebook](https://gradiently.design/pt-pt/guide/facebook-ad-design) e [design de anúncios do Instagram](https://gradiently.design/pt-pt/guide/instagram-ad-design) tratam desses formatos.

## Tempos e loops em banners animados

Muitas redes publicitárias e editores limitam durante quanto tempo a animação pode passar e quantas vezes pode repetir-se, e os limites variam. O Google Ads, por exemplo, restringe os anúncios animados carregados a 30 segundos de animação. Confirma a especificação atual de cada rede onde compras e desenha para o anúncio acabar no fotograma mais forte, seja qual for o limite.

| Parte | Tempo | Regra |
| --- | --- | --- |
| Fotograma do gancho | 2 a 3 segundos | Palavras curtas, letra grande |
| Fotograma do valor | 2 a 3 segundos | Um benefício, não uma lista |
| Fotograma final | Mantém-se | Marca, oferta e apelo à ação, legíveis como imagem estática |
| Transições | 300 a 500 ms | Rápidas e consistentes; um só estilo para todos os fotogramas |
| Sequência completa | Cerca de 6 a 10 segundos por reprodução | Curta o bastante para repetir algumas vezes dentro dos limites |

Uma regra prática para o tempo de leitura: se não consegues ler um fotograma em voz alta duas vezes antes de mudar, dá-lhe mais tempo ou corta palavras.

> **Evita luzes intermitentes e movimento frenético** Os flashes rápidos são desconfortáveis, podem ser prejudiciais para pessoas com epilepsia fotossensível e as redes publicitárias costumam rejeitá-los. Move a cor e o texto com suavidade e nunca mais depressa do que o olho consegue seguir.

## Tamanhos padrão de banners

As redes de display usam um conjunto de tamanhos padrão. Uma campanha costuma cobrir vários deles, por isso desenha um sistema e não um só anúncio: uma composição que se reorganiza para espaços largos, altos e pequenos mantendo as mesmas palavras, cor e movimento.

- Retângulo médio: 300 × 250
- Meia página: 300 × 600
- Arranha-céus largo: 160 × 600
- Faixa larga: 728 × 90
- Banner móvel: 320 × 50

Tamanhos de display comuns à escala. Os espaços muito largos e muito baixos precisam de menos palavras e de um fotograma final mais simples.

| Tamanho (px) | Nome | O que cabe |
| --- | --- | --- |
| 300×250 | Retângulo médio | A história completa de três fotogramas; um bom tamanho de base |
| 300×600 | Meia página | Espaço para uma imagem acima das palavras |
| 160×600 | Arranha-céus largo | Palavras empilhadas, duas ou três por linha |
| 728×90 | Faixa larga | Uma linha por fotograma, logótipo e botão lado a lado |
| 320×50 | Banner móvel | Só gancho e botão; o logótipo pode ser o gancho |

Desenha primeiro o 300×250 e depois adapta. Os editores e as redes pedem muitas vezes também versões de dupla densidade.

## GIF ou HTML5 para banners animados

A maioria das redes de display aceita anúncios animados em GIF ou em HTML5, um pequeno pacote de HTML, CSS, JavaScript e imagens. O HTML5 dá movimento mais suave, texto nítido em qualquer densidade e cor completa, e serve anúncios mais ricos. O GIF é mais simples de produzir e aceite quase em todo o lado, mas o limite de 256 cores faz os gradientes formar bandas. Os limites de peso de ficheiro para ambos são apertados, medidos em quilobytes e não em megabytes, por isso confirma a especificação de cada rede.

Se optares por GIF, as técnicas de [GIFs animados](https://gradiently.design/pt-pt/guide/gif-maker-tips) mantêm o peso baixo: menos fotogramas, uma paleta construída a partir da animação e o mínimo possível do quadro em movimento. Para o movimento em si, uma [suavização](https://gradiently.design/pt-pt/guide/easing) consistente é o que separa um banner polido de um tremido.

## Regras de design que fazem os banners funcionar

### Evita

- Quatro ou cinco fotogramas de texto
- Letra pequena sobre movimento rápido e carregado
- O logótipo só no primeiro fotograma
- Um estilo de animação diferente para cada elemento
- Um fotograma final sem apelo à ação claro

### Faz

- Três fotogramas, com um punhado de palavras cada
- Letra grande sobre cor lenta e calma
- Marca no fotograma final que se mantém
- Um só estilo de transição do princípio ao fim
- Um apelo à ação em forma de botão no último fotograma

Um fundo distintivo é a forma mais barata de ser reconhecido numa campanha. Quando o mesmo campo de cor se move atrás de todos os fotogramas e tamanhos, as pessoas começam a associar o movimento a ti antes de lerem uma palavra. Testa variações do gancho em vez do anúncio inteiro; [teste de criativos de anúncios](https://gradiently.design/pt-pt/guide/ad-creative-testing) explica como o fazer com rigor.

O Gradiently serve o lado social de uma campanha. Desenha o gancho e o fotograma final num Mark que te pertence, redimensiona para 1080×1080, 1080×1350 e 1080×1920 num só passo no Pro e exporta cada um em MP4. O Mark é desenhado para cada formato, por isso a zona calma continua atrás das palavras em todos os tamanhos.

## FAQ

### Que duração deve ter um banner animado?

Uma reprodução de cerca de 6 a 10 segundos serve a maioria dos banners. Muitas redes limitam o tempo total de animação, o Google Ads a 30 segundos para anúncios animados carregados, por isso confirma a especificação de cada rede.

### Quantos fotogramas deve ter um banner animado?

Três é uma estrutura fiável: um gancho, o valor e um fotograma final com a marca e o apelo à ação. Mais fotogramas costuma significar mais palavras do que alguém vai ler.

### Quais são os tamanhos de banner mais comuns?

300×250, 300×600, 160×600, 728×90 e 320×50 píxeis estão entre os tamanhos de display mais usados. Começa pelo 300×250 e adapta os outros a partir dele.

### Os banners animados devem ser GIF ou HTML5?

O HTML5 dá movimento mais suave e texto mais nítido e serve anúncios mais ricos; o GIF é mais simples e aceite quase em todo o lado, mas faz os gradientes formar bandas. Ambos têm de cumprir o limite de peso da rede.

### O que deve mostrar o último fotograma de um banner?

A marca, a oferta em resumo e um apelo à ação claro, compostos para o fotograma funcionar como anúncio estático completo se a animação parar aí.