Banners animados: movimento que ajuda a mensagem

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

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 e design de anúncio no Instagram 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.

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.

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 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 consistente é o que separa um banner bem acabado de um que treme.

Regras de design que fazem os banners funcionarem

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