Banners animados: movimento que ajuda a mensagem

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

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 e design de anúncios do Instagram 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.

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.

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 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 consistente é o que separa um banner polido de um tremido.

Regras de design que fazem os banners funcionar

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