Design de banners: web, sociais e impressos que se leem

Um bom design de banners trabalha com a forma e não contra ela. Um banner é largo e baixo, por isso dá-lhe um bloco compacto de palavras, um título curto e talvez uma linha de apoio, colocados onde nada os tape, e deixa o fundo levar a cor pelo resto da largura. Confirma primeiro o tamanho e a zona segura de cada plataforma: um banner de perfil do LinkedIn tem 1584 × 396 píxeis e perde o canto inferior esquerdo para a tua foto, enquanto um banner do YouTube tem 2560 × 1440 e mostra só uma faixa central nos telemóveis.

Tamanhos de banners para web e redes sociais

Como compor palavras num banner largo

As pessoas leem um banner como leem uma linha de texto: da esquerda para a direita, depressa. Espalhar palavras por toda a largura obriga o olho a viajar demasiado. Agrupa-as num bloco, mais ou menos um terço da largura, e compõe o título grande o suficiente para se ler quando o banner inteiro encolhe para a largura do ecrã de um telemóvel.

A hierarquia tem de ser simples a esta altura. Dois níveis costumam ser o limite: um título e uma linha pequena por cima ou por baixo. Se precisares de um terceiro, provavelmente pertence ao próprio perfil. A hierarquia visual explica como o tamanho e o espaçamento fazem este trabalho sem decoração extra.

Zonas seguras e cortes

Cada plataforma corta ou tapa o banner de forma diferente no computador e no telemóvel. A abordagem segura é a mesma em todo o lado: deixa o fundo correr de ponta a ponta e mantém palavras e logótipos no meio do quadro, longe do canto onde fica o avatar.

1. 1

   Encontra o canto tapado

   No LinkedIn, no X e no Bluesky a foto de perfil fica sobre o canto inferior esquerdo. Deixa essa zona só com fundo.

2. 2

   Conta com os cortes do telemóvel

   O Facebook e o Etsy aparam os lados nos telemóveis. Mantém as palavras dentro dos dois terços centrais da largura.

3. 3

   Usa a faixa central do YouTube

   Do quadro de 2560 × 1440, só a zona central de cerca de 1546 × 423 píxeis aparece em todos os dispositivos. Põe aí o nome e as palavras.

4. 4

   Confirma no tamanho real

   Carrega e vê num telemóvel e num portátil. Uma pré-visualização numa ferramenta de design não mostra a interface da plataforma, e as plataformas mudam os layouts, por isso consulta as páginas de ajuda delas antes de um grande lançamento.

Banners impressos: roll ups e sinalética de eventos

Um roll up, normalmente de 850 × 2000 mm, é o problema oposto: alto e visto de metros de distância enquanto as pessoas passam. Precisa de um logótipo e um título no terço superior à altura dos olhos, muito pouco no terço inferior, que fica escondido atrás de mesas e pernas, e letra grande o suficiente para se ler do outro lado da sala. Pergunta à gráfica que resolução querem; os banners grandes costumam ser impressos a partir de ficheiros bem abaixo de 300 dpi porque ninguém os vê de perto.

Para stands e palcos, vê o design de painéis de fundo para eventos e, para formatos grandes de papel, os tamanhos de cartazes.

Um só visual em todos os banners

A maioria das pessoas precisa de cinco ou seis banners ao mesmo tempo: LinkedIn, X, YouTube, um cabeçalho de email, uma imagem de topo de site. Parecem uma só marca quando o fundo, o tipo de letra e a cor se mantêm constantes e só muda o layout. Um gradiente é ideal para isto porque não tem assunto para cortar, desde que seja gerado para cada forma e não esticado.

No Gradiently, um Mark é gerado de novo em cada tamanho de banner, move a sua zona mais calma para trás das palavras e deixa a tinta automática escolher texto claro ou escuro por linha. Com o Pro, um só design redimensiona-se para todos os tamanhos num passo, e os banners do LinkedIn, X e YouTube chegam juntos. A ideia de um fundo reconhecível está tratada em um visual de assinatura.