Design da secção hero: o primeiro ecrã do teu site

Um bom design de secção hero responde a três perguntas antes de alguém deslizar o ecrã: o que é isto, é para mim e o que faço a seguir. O hero é o primeiro ecrã do teu site, normalmente um título, uma frase de apoio, um único botão principal e uma imagem. Tudo o resto (logótipos, selos, um segundo botão, um carrossel) tem de justificar o espaço que tira a esses quatro. Este guia cobre as palavras, a composição e a construção; para o fundo isolado, vê fundos hero para sites.

O que entra numa secção hero

Escrever o título do hero

O título é a frase mais difícil do teu site. Os slogans engenhosos falham porque podiam ser de qualquer um. Um bom título diz para quem é, o que recebem ou o problema que remove, nas palavras que os teus clientes realmente usam. Lê-o em voz alta ao lado da página inicial de um concorrente: se pudesses trocá-los sem ninguém notar, não é específico o suficiente.

Guarda a linha de apoio para o como ou a prova, não para repetir o título. Para mais sobre as palavras, escrever texto para visuais e hierarquia visual ajudam.

Três composições de hero que funcionam

• Centrada. Título, linha e botão empilhados ao meio sobre um fundo. Forte para marcas, lançamentos e produtos que são mais uma sensação do que um ecrã.
• Dividida. Palavras à esquerda, imagem do produto ou captura de ecrã à direita. Ideal quando ver o produto é o argumento: aplicações, bens físicos, comida.
• Imagem ou vídeo de sangria total. Uma fotografia ou ciclo preenche o ecrã com palavras sobre uma zona calma. Serve hotéis, restaurantes, eventos e portefólios, se a legibilidade for bem tratada.

O apelo à ação

Um botão principal, visualmente o elemento mais forte depois do título. Dá-lhe o nome do que acontece a seguir, não de um verbo genérico: “Começar um teste grátis”, “Reservar mesa”, “Ver a ementa”. Se juntares uma opção secundária, faz dela uma ligação de texto mais discreta, para que as duas nunca compitam.

Fundos de hero e legibilidade

O fundo é metade da impressão e a razão mais comum de um hero falhar. As fotografias carregadas e os gradientes vivos lutam com o título, e uma sobreposição escura em tudo achata o ambiente. Planeia uma zona calma por trás das palavras, mantém o pormenor mais agitado longe delas e verifica o contraste em todas as larguras de ecrã, porque a zona por trás do texto muda à medida que a composição se reorganiza.

É aqui que um Mark do Gradiently é útil: a sua zona mais calma e de melhor contraste move-se para trás das tuas palavras e a cor do texto é escolhida a partir da sua própria paleta, por isso o título lê-se a 1920×1080 e num telemóvel sem caixa nem sombra. Para abordagens em CSS, vê sobreposição de gradiente e texto sobre gradiente.

Desenhar o hero para telemóveis

Num telemóvel o hero é estreito e alto, por isso as composições divididas empilham-se e as imagens de sangria total cortam-se muito. Decide o que o telemóvel mostra em vez de deixares acontecer: o título e o botão devem estar visíveis sem deslizar, a imagem pode descer ou encolher.

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

Uma lista de verificação da secção hero

1. 1

   Escreve primeiro o título

   Antes de escolher imagens, escreve cinco títulos e escolhe o mais específico. A composição segue as palavras.

2. 2

   Corta até uma ação

   Escolhe o único passo seguinte que queres que a maioria dos visitantes dê e faz dele o único botão.

3. 3

   Escolhe uma imagem que prove ou crie o ambiente

   Uma captura de ecrã, uma fotografia do produto ou um fundo que leve a marca. Não uma fotografia de banco de imagens de pessoas a apontar para portáteis.

4. 4

   Verifica a legibilidade em todo o lado

   Redimensiona o navegador de largo a estreito e vê o texto contra o fundo durante todo o percurso.

5. 5

   Mantém-no rápido

   A imagem do hero é muitas vezes a maior coisa da página. Dá-lhe o tamanho certo e serve WebP ou AVIF.

O hero abre a página; o resto da página tem de cumprir a promessa. Design de landing pages cobre as secções que se seguem.