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

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

Os banners são compridos, finos e muitas vezes meio tapados por uma foto de perfil ou cortados nos telemóveis. Desenha para essa forma e poucas palavras podem carregar uma marca inteira. Todos os tamanhos de que vais precisar estão abaixo.

## The short version

- Os banners são formatos largos, de cerca de 2:1 nos banners de blogue e email até 6:1 numa capa de empresa do LinkedIn.
- Num banner largo o olho lê da esquerda para a direita, por isso as palavras devem ficar num bloco compacto e não espalhadas por toda a largura.
- A maioria dos banners sociais é em parte tapada por uma foto de perfil ou cortada nos telemóveis, por isso o conteúdo importante deve ficar perto do centro.
- O banner de um canal do YouTube tem 2560 × 1440 píxeis, mas só a faixa central de cerca de 1546 × 423 píxeis aparece em todos os dispositivos.
- Os banners impressos, como os roll ups, leem-se a vários metros, por isso precisam de muito menos palavras e de letra muito maior do que os banners web.

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

| Banner | Tamanho (px) | Forma | O que o tapa |
| --- | --- | --- | --- |
| Banner de perfil do LinkedIn | 1584 × 396 | 4:1 | Foto de perfil, em baixo à esquerda |
| Capa de empresa do LinkedIn | 2256 × 382 | Cerca de 6:1 | Logótipo, em baixo à esquerda |
| Cabeçalho do X | 1500 × 500 | 3:1 | Foto de perfil, em baixo à esquerda |
| Capa do Facebook | 1640 × 624 | Cerca de 2,6:1 | Foto de perfil, cortada nos telemóveis |
| Arte do canal do YouTube | 2560 × 1440 | 16:9 | Só o centro aparece em todos os dispositivos |
| Banner do Bluesky | 3000 × 1000 | 3:1 | Avatar, em baixo à esquerda |
| Imagem de topo do site | 1920 × 1080 | 16:9 | Navegação ao longo do topo |
| Banner de blogue e cabeçalho de email | 1200 × 600 | 2:1 | Nada, mas muitas vezes visto pequeno |
| Banner de loja Etsy | 3360 × 840 | 4:1 | Cortado nos telemóveis |

Tamanhos da lista de tamanhos do Gradiently, que segue o tamanho de carregamento recomendado de cada plataforma. Os guias de cada plataforma vão mais fundo: [tamanho do banner do LinkedIn](https://gradiently.design/pt-pt/guide/linkedin-banner-size) e [tamanho do banner do YouTube](https://gradiently.design/pt-pt/guide/youtube-banner-size).

- Banner de blogue 2:1: 1200 × 600
- Cabeçalho do X 3:1: 1500 × 500
- Banner do LinkedIn 4:1: 1584 × 396
- Empresa no LinkedIn 6:1: 2256 × 382

Quatro banners à escala. À medida que a forma fica mais fina, o espaço para palavras encolhe muito mais depressa do que a largura cresce.

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

Um banner largo do LinkedIn com um título curto do lado direito e um gradiente a preencher o resto

Um banner de perfil do LinkedIn com as palavras longe da foto de perfil, em baixo à esquerda.

Um banner de cabeçalho do X que anuncia novos episódios de podcast todas as quintas sobre um fundo em gradiente

Um cabeçalho do X: uma linha, um facto e nada importante no canto do avatar.

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](https://gradiently.design/pt-pt/guide/visual-hierarchy) 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. **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. **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. **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. **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.

### Evita

- Um parágrafo a explicar o que fazes
- Palavras espalhadas por toda a largura
- Texto pequeno no canto escondido pelo avatar
- Uma fotografia carregada por trás do título
- Dados essenciais no fundo de um roll up

### Faz

- Quatro a oito palavras que dizem quem és
- Um bloco compacto de texto
- Só fundo onde fica a interface
- Uma zona de cor calma por trás das palavras
- Logótipo e título à altura dos olhos

Para stands e palcos, vê o [design de painéis de fundo para eventos](https://gradiently.design/pt-pt/guide/event-backdrop-design) e, para formatos grandes de papel, os [tamanhos de cartazes](https://gradiently.design/pt-pt/guide/poster-size-guide).

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

Um gradiente de banner largo, escuro à esquerda: `linear-gradient(100deg, #0e1a2b 0%, #183b56 40%, #2a7f8f 75%, #9fd8cb 100%)`

Uma mistura horizontal que se mantém escura à esquerda, onde fica um avatar ou logótipo, e clareia para a direita. Copia-a como ponto de partida para um banner de perfil.

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](https://gradiently.design/pt-pt/guide/brand-signature-look).

## FAQ

### Que tamanho deve ter um banner?

Depende de onde vai: 1584 × 396 para um perfil do LinkedIn, 1500 × 500 para o X, 2560 × 1440 para o YouTube e 1200 × 600 para um banner de blogue ou email.

### Onde deve ir o texto num banner de redes sociais?

Num bloco compacto perto do centro ou da direita, longe do canto inferior esquerdo onde normalmente fica a foto de perfil.

### Qual é a zona segura de um banner do YouTube?

Cerca de 1546 × 423 píxeis no meio da imagem de 2560 × 1440. Só essa zona aparece em todos os dispositivos.

### Quantas palavras deve ter um banner?

Quatro a oito para o título, mais no máximo uma linha pequena de apoio. Os banners veem-se por pouco tempo e muitas vezes em tamanho pequeno.

### Que resolução precisa um banner impresso?

Pergunta à gráfica. Os banners grandes vistos de longe costumam ser impressos a partir de ficheiros bem abaixo de 300 dpi no tamanho final.