# Design de hero section: a primeira tela do seu site

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

Os visitantes decidem se vão ficar antes de rolar a página. É na hero que eles decidem, então cada palavra e cada pixel ali precisam merecer o lugar.

## The short version

- A hero section é a primeira tela inteira de um site e deve dizer o que é o produto, para quem é e o que fazer a seguir.
- As partes essenciais são um título, uma frase de apoio, uma chamada para ação principal e um visual que mostra o produto ou cria o clima.
- Títulos específicos que nomeiam um resultado funcionam melhor que slogans que serviriam para qualquer empresa.
- Uma hero precisa de uma ação principal; um segundo link, mais discreto, tudo bem, mas mais opções diluem a principal.
- Faça a versão para celular de propósito, porque muitos visitantes veem a hero primeiro numa tela estreita.

Um bom **design de hero section** responde três perguntas antes de qualquer rolagem: o que é isto, é para mim e o que eu faço agora. A hero é a primeira tela do seu site, normalmente um título, uma frase de apoio, um único botão principal e um visual. Todo o resto (logos, selos, um segundo botão, um carrossel) precisa justificar o espaço que tira desses quatro. Este guia cobre as palavras, o layout e a construção; só para o fundo, veja [fundos para hero de site](https://gradiently.design/pt-br/guide/website-hero-background).

## O que vai numa hero section

| Parte | Função | Tamanho típico |
| --- | --- | --- |
| Sobretítulo (opcional) | Contexto ou categoria: “Para cafés independentes” | 2 a 5 palavras |
| Título | A promessa, nas palavras do leitor | 4 a 10 palavras |
| Frase de apoio | Como funciona ou o que torna diferente | Uma frase, de 15 a 25 palavras |
| Botão principal | O único próximo passo | 2 a 4 palavras |
| Link secundário (opcional) | Um caminho de menor compromisso: “Veja como funciona” | 2 a 4 palavras |
| Visual | Mostrar o produto, o resultado ou a sensação | Uma imagem, um vídeo em loop ou um fundo |

Se uma parte não ajuda o visitante a decidir se fica, o lugar dela é mais abaixo na página.

## Escrevendo o título da hero

O título é a frase mais difícil do seu site. Slogans espertos falham porque poderiam ser de qualquer um. Um bom título diz para quem é, o que a pessoa ganha ou qual problema some, com as palavras que os seus clientes realmente usam. Leia em voz alta ao lado da home de um concorrente: se desse para trocar os dois sem ninguém perceber, não está específico o bastante.

| Vago | Específico |
| --- | --- |
| Impulsionando o seu crescimento | Contabilidade para freelancers, feita toda sexta-feira |
| O futuro do café | Grãos de origem única, torrados na segunda, na sua porta até quinta |
| Design descomplicado | Posts com a cara da sua marca, em todos os tamanhos |
| Sua jornada de bem-estar começa aqui | Pilates em grupos pequenos em Leeds, seis pessoas por turma |
| Soluções inovadoras para equipes modernas | Agendas compartilhadas para clínicas que odeiam horários duplicados |

As versões específicas são mais longas, e tudo bem. Num título, clareza vale mais que brevidade.

Reserve a frase de apoio para o como ou para a prova, não para repetir o título. Para mais sobre texto, [como escrever textos para visuais](https://gradiently.design/pt-br/guide/writing-copy-for-visuals) e [hierarquia visual](https://gradiently.design/pt-br/guide/visual-hierarchy) ajudam.

## Três layouts de hero que funcionam

- **Centralizado.** Título, frase e botão empilhados no meio, sobre um fundo. Forte para marcas, lançamentos e produtos que são mais sensação do que tela.
- **Dividido.** Palavras à esquerda, imagem do produto ou captura de tela à direita. Ideal quando ver o produto é o argumento: apps, produtos físicos, comida.
- **Imagem ou vídeo sangrado.** Uma foto ou um loop ocupa a tela com as palavras sobre uma área calma. Combina com hotéis, restaurantes, eventos e portfólios, desde que a legibilidade seja bem resolvida.

Uma hero centralizada de site para uma torrefação, com título e frase de apoio sobre um gradiente quente

Centralizado: as palavras sustentam tudo e o fundo cria o clima.

Uma hero dividida de site para um software de agenda de clínicas, com texto à esquerda e espaço para uma imagem do produto

Dividido: palavras de um lado, espaço do outro para uma captura de tela do produto.

## A chamada para ação

Um botão principal, visualmente o elemento mais forte depois do título. Dê a ele o nome do que acontece em seguida, não um verbo genérico: “Começar teste grátis”, “Reservar mesa”, “Ver o cardápio”. Se você acrescentar uma opção secundária, faça dela um link de texto mais discreto, para que os dois nunca disputem atenção.

### Evite

- Três botões com o mesmo peso
- “Enviar”, “Saiba mais” ou “Clique aqui”
- Um botão da mesma cor do fundo
- O botão abaixo da dobra no celular
- Um carrossel automático com mensagens diferentes

### Faça

- Um botão e um link mais discreto
- Um texto que diz o que acontece em seguida
- Uma cor de botão que não aparece em nenhum outro lugar da tela
- Título e botão visíveis num celular de 390 px de largura
- Uma mensagem, bem dita

## Fundos da hero e legibilidade

O fundo é metade da impressão e o motivo mais comum de uma hero falhar. Fotos carregadas e gradientes muito vivos brigam com o título, e uma camada escura sobre tudo achata o clima. Planeje uma área calma atrás das palavras, mantenha os detalhes mais agitados longe delas e confira o [contraste](https://gradiently.design/pt-br/guide/color-contrast-accessibility) em todas as larguras de tela, porque a área atrás do texto muda conforme o layout se reorganiza.

É aí que um Mark do Gradiently é útil: a região mais calma e de melhor contraste dele se move para trás das suas palavras e a cor do texto é escolhida a partir da própria paleta, então o título se lê em 1920×1080 e no celular sem caixa nem sombra. Para abordagens em CSS, veja [sobreposição de gradiente](https://gradiently.design/pt-br/guide/gradient-overlay) e [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient).

## Criando a hero para celular

No celular a hero fica estreita e alta, então os layouts divididos se empilham e as imagens sangradas são cortadas sem dó. Decida o que o celular mostra em vez de deixar acontecer: título e botão devem aparecer sem rolar, e o visual pode descer ou diminuir.

- Desktop 1920×1080: 1920 × 1080
- Notebook 1440×900: 1440 × 900
- Celular 390×844: 390 × 844

A mesma hero em três tamanhos de tela comuns. O que cabe ao lado do título no desktop precisa ir acima ou abaixo dele no celular.

```css
.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}
```

`svh` se ajusta à tela visível do celular, `clamp()` escala o texto entre celular e desktop, e `text-wrap: balance` equilibra as linhas do título.

## Checklist da hero section

1. **Escreva o título primeiro** Antes de escolher imagens, escreva cinco títulos e fique com o mais específico. O layout segue as palavras.
2. **Reduza a uma ação** Escolha o único próximo passo que você quer que a maioria dos visitantes dê e faça dele o único botão.
3. **Escolha um visual que prove ou crie o clima** Uma captura de tela, uma foto do produto ou um fundo que carregue a marca. Não uma foto de banco de imagens com pessoas apontando para notebooks.
4. **Confira a legibilidade em todo lugar** Redimensione o navegador do largo ao estreito e observe o texto contra o fundo o tempo todo.
5. **Mantenha a página rápida** A imagem da hero costuma ser o maior arquivo da página. Dimensione direito e sirva em [WebP ou AVIF](https://gradiently.design/pt-br/guide/webp-images).

A hero abre a página; o resto da página precisa cumprir a promessa. [Design de landing page](https://gradiently.design/pt-br/guide/landing-page-design) cobre as seções que vêm depois.

## FAQ

### O que é a hero section de um site?

A primeira tela inteira de uma página, acima da dobra. Geralmente tem um título, uma frase de apoio, um botão principal e um visual.

### O que o título da hero section deve dizer?

O que o produto faz e para quem, com as palavras do próprio cliente. Resultados específicos vencem slogans genéricos.

### Quantos botões uma hero section deve ter?

Um botão principal. Um segundo link de texto, mais discreto, para uma opção de menor compromisso tudo bem, mas mais opções enfraquecem a principal.

### Qual deve ser o tamanho da imagem da hero?

Crie em 1920×1080 para desktop e ofereça versões menores para celular com `srcset`, para que os visitantes no celular baixem um arquivo mais leve.

### A hero section deve ocupar a tela inteira?

Não necessariamente. Uma hero de tela cheia combina com sites guiados pela marca; sites de produto costumam se beneficiar de uma hero mais curta que deixa ver o conteúdo abaixo.