Design de hero section: a primeira tela do seu site

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.

O que vai numa hero section

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.

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 e hierarquia visual 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.

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.

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 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 e texto sobre gradiente.

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.

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

Checklist da hero section

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

A hero abre a página; o resto da página precisa cumprir a promessa. Design de landing page cobre as seções que vêm depois.