Design de banner: banners para web, redes e impressão legíveis

Um bom design de banner trabalha a favor do formato, não contra ele. Um banner é largo e baixo, então dê a ele um bloco compacto de palavras, um título curto e talvez uma linha de apoio, num lugar onde nada vá cobri-lo, e deixe o fundo levar a cor pelo resto da largura. Confira antes o tamanho e a área segura de cada plataforma: um banner de perfil do LinkedIn tem 1584 × 396 pixels e perde o canto inferior esquerdo para a sua foto, enquanto um banner do YouTube tem 2560 × 1440 e mostra só uma faixa central no celular.

Tamanhos de banner para web e redes sociais

Como diagramar o texto num banner largo

As pessoas leem um banner como leem uma linha de texto: da esquerda para a direita, rápido. Espalhar as palavras pela largura toda faz o olho viajar demais. Agrupe-as num bloco, mais ou menos um terço da largura, e use um título grande o bastante para ser lido quando o banner inteiro encolhe para a largura da tela do celular.

Nessa altura, a hierarquia precisa ser simples. Dois níveis costumam ser o limite: um título e uma linha pequena acima ou abaixo dele. Se você precisa de um terceiro, ele provavelmente deveria estar no próprio perfil. Hierarquia visual explica como tamanho e espaçamento fazem esse trabalho sem decoração extra.

Áreas seguras e cortes

Cada plataforma corta ou cobre o banner de um jeito no computador e no celular. A abordagem segura é a mesma em todas: deixe o fundo ir de ponta a ponta e mantenha palavras e logos no meio do quadro, longe do canto onde fica o avatar.

1. 1

   Encontre o canto coberto

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

2. 2

   Preveja os cortes no celular

   Facebook e Etsy cortam as laterais no celular. Mantenha as palavras dentro dos dois terços centrais da largura.

3. 3

   Use a faixa central do YouTube

   Do quadro de 2560 × 1440, só a área central de cerca de 1546 × 423 pixels aparece em todos os dispositivos. Coloque o nome e qualquer texto ali.

4. 4

   Confira no tamanho real

   Faça o upload e veja no celular e no notebook. A prévia de uma ferramenta de design não mostra a interface da plataforma, e as plataformas mudam seus layouts, então confira as páginas de ajuda delas antes de um grande lançamento.

Banners impressos: roll ups e sinalização de eventos

Um banner roll up, normalmente de 850 × 2000 mm, é o problema oposto: alto e visto a metros de distância por quem passa. Ele precisa de um logo e um título no terço superior, na altura dos olhos, de muito pouco no terço inferior, que some atrás de mesas e pernas, e de letras grandes o bastante para serem lidas do outro lado da sala. Pergunte à gráfica qual resolução ela quer; banners grandes costumam ser impressos a partir de arquivos bem abaixo de 300 dpi, porque ninguém os vê de perto.

Para estandes e palcos, veja design de backdrop para eventos e, para formatos grandes em papel, tamanhos de cartaz.

Um único visual em todos os banners

A maioria das pessoas precisa de cinco ou seis banners de uma vez: LinkedIn, X, YouTube, um cabeçalho de e-mail, um banner de site. Eles parecem uma única marca quando o fundo, a tipografia e a cor ficam constantes e só o layout muda. Um gradiente é ideal para isso porque não tem um assunto para cortar, desde que seja renderizado para cada formato em vez de esticado.

No Gradiently, um Mark é renderizado do zero em cada tamanho de banner, move sua região mais calma para trás das suas palavras e deixa a tinta automática escolher texto claro ou escuro em cada linha. Com o Pro, um design é redimensionado para todos os tamanhos de uma vez, e os banners do LinkedIn, do X e do YouTube chegam juntos. A ideia de um fundo reconhecível está em um visual de assinatura.