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

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

Os visitantes decidem se ficam antes de deslizar o ecrã. O hero é onde decidem, por isso cada palavra e cada píxel deve merecer o seu lugar.

## The short version

- Uma secção hero é o primeiro ecrã inteiro 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 linha de apoio, um apelo à ação principal e uma imagem que mostre o produto ou crie o ambiente.
- Os títulos específicos que nomeiam um resultado funcionam melhor do que slogans que podiam ser de qualquer empresa.
- Um hero precisa de uma ação principal; uma segunda ligação mais discreta é aceitável, mas mais escolhas diluem-no.
- Desenha a versão de telemóvel de propósito, porque muitos visitantes veem primeiro o hero num ecrã estreito.

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](https://gradiently.design/pt-pt/guide/website-hero-background).

## O que entra numa secção hero

| Parte | Função | Extensão habitual |
| --- | --- | --- |
| Linha de contexto (opcional) | Contexto ou categoria: “Para cafés independentes” | 2 a 5 palavras |
| Título | A promessa, nas palavras do leitor | 4 a 10 palavras |
| Linha de apoio | Como funciona ou o que o torna diferente | Uma frase, 15 a 25 palavras |
| Botão principal | O único passo seguinte | 2 a 4 palavras |
| Ligação secundária (opcional) | Um caminho de menor compromisso: “Ver como funciona” | 2 a 4 palavras |
| Imagem | Mostrar o produto, o resultado ou a sensação | Uma imagem, um ciclo de vídeo ou um fundo |

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

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

| Vago | Específico |
| --- | --- |
| A potenciar o teu crescimento | Contabilidade para freelancers, feita todas as sextas |
| O futuro do café | Grãos de origem única, torrados à segunda, à tua porta até quinta |
| Design simplificado | Publicações sociais com a cara da tua marca, em todos os tamanhos |
| A tua jornada de bem-estar começa aqui | Pilates em pequenos grupos em Leeds, seis pessoas por aula |
| Soluções inovadoras para equipas modernas | Agendas partilhadas para clínicas que odeiam marcações duplicadas |

As versões específicas são mais longas, e não faz mal. Num título, a clareza vence a brevidade.

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](https://gradiently.design/pt-pt/guide/writing-copy-for-visuals) e [hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy) 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.

Um hero de site centrado para um torrador de café, com título e linha de apoio sobre um gradiente quente

Centrada: as palavras levam-no, o fundo cria o ambiente.

Um hero de site dividido para software de agendamento de clínicas, com texto à esquerda e espaço para uma imagem do produto

Dividida: palavras de um lado, espaço do outro para uma captura de ecrã do produto.

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

### Evita

- Três botões com o mesmo peso
- “Enviar”, “Saber mais” ou “Clica aqui”
- Um botão da mesma cor do fundo
- O botão abaixo da dobra num telemóvel
- Um carrossel automático de mensagens diferentes

### Faz

- Um botão, uma ligação mais discreta
- Um texto que diz o que acontece a seguir
- Uma cor de botão usada em mais nenhum sítio do ecrã
- Título e botão visíveis num telemóvel com 390 px de largura
- Uma mensagem, bem dita

## 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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) 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](https://gradiently.design/pt-pt/guide/gradient-overlay) e [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient).

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

- Computador 1920×1080: 1920 × 1080
- Portátil 1440×900: 1440 × 900
- Telemóvel 390×844: 390 × 844

O mesmo hero em três tamanhos de janela habituais. O que cabe ao lado do título no computador tem de ir para cima ou para baixo dele num telemóvel.

```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` ajusta-se ao ecrã visível do telemóvel, `clamp()` escala a letra entre telemóvel e computador, e `text-wrap: balance` equilibra as linhas do título.

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

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

O hero abre a página; o resto da página tem de cumprir a promessa. [Design de landing pages](https://gradiently.design/pt-pt/guide/landing-page-design) cobre as secções que se seguem.

## FAQ

### O que é uma secção hero num site?

O primeiro ecrã inteiro de uma página, acima da dobra. Costuma ter um título, uma linha de apoio, um botão principal e uma imagem.

### O que deve dizer o título de uma secção hero?

O que o produto faz e para quem, nas palavras do próprio cliente. Os resultados específicos vencem os slogans genéricos.

### Quantos botões deve ter uma secção hero?

Um botão principal. Uma segunda ligação de texto mais discreta para uma opção de menor compromisso é aceitável, mas mais escolhas enfraquecem a principal.

### Que tamanho deve ter a imagem de um hero?

Desenha a 1920×1080 para computador e fornece versões mais pequenas para telemóveis através de `srcset`, para os visitantes móveis descarregarem um ficheiro mais leve.

### Uma secção hero deve ocupar o ecrã todo?

Não necessariamente. Um hero de ecrã inteiro serve sites orientados pela marca; os sites de produto beneficiam muitas vezes de um hero mais curto que sugere o conteúdo abaixo.