# Banners animados: movimento que ajuda a mensagem

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

Um banner recebe uma olhada de canto de olho. O movimento pode conquistar essa olhada, e depois precisa passar a vez para uma mensagem simples o bastante para ser lida em um segundo.

## The short version

- Banners animados eficazes costumam seguir um storyboard curto de três quadros: um gancho, o valor e depois a marca com a chamada para ação.
- O quadro final de um banner animado deve funcionar sozinho, porque muitas redes de anúncios limitam por quanto tempo ou quantas vezes a animação pode rodar.
- Os tamanhos comuns de anúncio display incluem 300×250, 728×90, 300×600, 160×600 e 320×50 pixels.
- Banners animados normalmente são entregues como pacotes HTML5 ou GIFs, e as redes fixam limites rígidos de peso de arquivo para os dois.
- O movimento num banner deve atrair o olhar uma vez e depois deixar as palavras paradas tempo suficiente para serem lidas.

Bons **banners animados** usam o movimento para capturar o olhar uma vez e depois saem do caminho da mensagem. A estrutura confiável tem três quadros: um gancho, o valor e um quadro final com a marca e uma chamada para ação clara que fica na tela. Mantenha a sequência inteira curta, faça esse último quadro funcionar sozinho como anúncio estático e mantenha o arquivo leve, porque as redes de anúncios limitam tanto a duração da animação quanto o peso do arquivo.

## O storyboard de três quadros

Os banners são vistos de passagem, ao lado de algo que o leitor realmente veio buscar. Ninguém espera um banner terminar. Planeje a sequência para que cada quadro faça sentido sozinho e a ordem conte uma pequena história.

1. **Quadro 1: o gancho** Uma frase curta ou uma imagem marcante. O único trabalho dele é fazer alguém olhar. “Sua mesa, mais calma.” Dois a três segundos.
2. **Quadro 2: o valor** O que você oferece, nos termos do leitor. “Calhas de cabos que servem em qualquer mesa.” Dois a três segundos.
3. **Quadro 3: o quadro final** Logo, a oferta resumida e uma chamada para ação em forma de botão. “Conheça a linha.” Este quadro fica até o anúncio parar.

Quadro quadrado de anúncio com o gancho Sua mesa, mais calma sobre um gradiente que se move devagar

Quadro um: um gancho em quatro palavras sobre cor em movimento. Nada mais disputa com ele.

Quadro final quadrado mostrando o nome da marca, uma linha curta de valor e a chamada Conheça a linha

O quadro final: marca, valor e chamada para ação juntos. Se for só isso que alguém vir, o anúncio ainda funciona.

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

## Tempo e loops em banners animados

Muitas redes de anúncios e veículos limitam por quanto tempo a animação pode rodar e quantas vezes pode repetir, e os limites variam. O Google Ads, por exemplo, restringe anúncios animados enviados a 30 segundos de animação. Confira a especificação atual de cada rede em que você compra mídia, e crie de modo que o anúncio termine no seu quadro mais forte, seja qual for o limite.

| Parte | Tempo | Regra |
| --- | --- | --- |
| Quadro de gancho | 2 a 3 segundos | Palavras curtas, letra grande |
| Quadro de valor | 2 a 3 segundos | Um benefício, não uma lista |
| Quadro final | Fica | Marca, oferta e chamada para ação, legíveis como imagem estática |
| Transições | 300 a 500 ms | Rápidas e consistentes; um estilo para todos os quadros |
| Sequência inteira | Cerca de 6 a 10 segundos por exibição | Curta o bastante para repetir algumas vezes dentro dos limites |

Uma regra prática para o tempo de leitura: se você não consegue ler um quadro em voz alta duas vezes antes de ele mudar, dê mais tempo ou corte palavras.

> **Evite piscadas e movimento frenético** Piscadas rápidas incomodam e podem fazer mal a pessoas com epilepsia fotossensível, e as redes de anúncios costumam recusá-las. Mova cor e tipografia com suavidade, e nunca mais rápido do que o olho consegue acompanhar.

## Tamanhos padrão de banner

As redes de display usam um conjunto de tamanhos padrão. Uma campanha normalmente cobre vários deles, então crie um sistema em vez de um anúncio: um layout 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éu largo: 160 × 600
- Leaderboard: 728 × 90
- Banner para celular: 320 × 50

Tamanhos comuns de display em escala. Os espaços muito largos e muito baixos pedem menos palavras e um quadro final mais simples.

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

Crie primeiro o 300×250, depois adapte. Veículos e redes muitas vezes pedem também versões em densidade dupla.

## GIF ou HTML5 para banners animados

A maioria das redes de display aceita anúncios animados em GIF ou HTML5, um pequeno pacote de HTML, CSS, JavaScript e imagens. O HTML5 dá movimento mais suave, texto nítido em qualquer densidade e cores completas, e combina com anúncios mais ricos. O GIF é mais simples de produzir e aceito quase em todo lugar, mas o limite de 256 cores faz os gradientes ficarem com faixas. Os limites de peso para os dois são apertados, medidos em kilobytes e não em megabytes, então confira a especificação de cada rede.

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

## Regras de design que fazem os banners funcionarem

### Evite

- Quatro ou cinco quadros de texto
- Letra pequena sobre movimento rápido e carregado
- O logo só no primeiro quadro
- Um estilo de animação diferente para cada elemento
- Um quadro final sem chamada para ação clara

### Faça

- Três quadros, um punhado de palavras em cada
- Letra grande sobre cor lenta e calma
- A marca no quadro final, que fica
- Um único estilo de transição do começo ao fim
- Uma chamada para ação em forma de botão no último quadro

Um fundo característico é o jeito mais barato de ser reconhecido ao longo de uma campanha. Quando o mesmo campo de cor se move atrás de cada quadro e de cada tamanho, as pessoas começam a associar o movimento a você antes de ler uma palavra. Teste variações do gancho em vez do anúncio inteiro; [teste de criativos](https://gradiently.design/pt-br/guide/ad-creative-testing) explica como fazer isso de forma justa.

O Gradiently combina com o lado social de uma campanha. Crie o gancho e o quadro final num Mark que pertence a você, redimensione para 1080×1080, 1080×1350 e 1080×1920 num único passo no Pro e exporte cada um em MP4. O Mark é renderizado para cada formato, então a sua área calma continua atrás das palavras em todos os tamanhos.

## FAQ

### Qual deve ser a duração de um banner animado?

Uma exibição de cerca de 6 a 10 segundos serve para a maioria dos banners. Muitas redes limitam o tempo total de animação, o Google Ads a 30 segundos para anúncios animados enviados, então confira a especificação de cada rede.

### Quantos quadros um banner animado deve ter?

Três é uma estrutura confiável: um gancho, o valor e um quadro final com a marca e a chamada para ação. Mais quadros normalmente significam 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 pixels estão entre os tamanhos de display mais usados. Comece pelo 300×250 e adapte os outros a partir dele.

### Banners animados devem ser GIF ou HTML5?

O HTML5 dá movimento mais suave e texto mais nítido e combina com anúncios mais ricos; o GIF é mais simples e aceito quase em todo lugar, mas cria faixas nos gradientes. Os dois precisam respeitar o limite de peso da rede.

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

A marca, a oferta resumida e uma chamada para ação clara, organizadas para que o quadro funcione como um anúncio estático completo se a animação parar ali.