Pular para o conteúdo
PT

Escolha o próximo passo

Estrutura e conteúdo

Uma landing page boa começa pela hierarquia

Organize a mensagem, os títulos e as chamadas para ação para que cada seção ajude a pessoa a entender a oferta e decidir o próximo passo.

Badsite4 min de leitura
Colagem editorial Badsite sobre hierarquia de conteúdo em uma landing page.

Comece pela pergunta de quem chegou

Quem abre uma landing page não conhece necessariamente o seu produto, o contexto da campanha ou o significado dos nomes que você usa internamente. A primeira tela precisa oferecer um ponto de entrada: o que é isso, para quem serve e por que continuar lendo. Uma frase espirituosa pode participar da composição, mas não deveria ser a única explicação da oferta.

Escreva a mensagem principal em linguagem direta antes de escolher a hero. Para uma ferramenta de agendamento, ‘Organize seus atendimentos em uma agenda compartilhada’ comunica mais do que ‘O futuro da produtividade chegou’. Depois acrescente personalidade à redação e ao visual sem remover a informação que permite reconhecer o produto.

Dê uma tarefa a cada seção

Monte um roteiro curto com as perguntas que a página precisa responder. A ordem depende da oferta e de quanto o público já conhece sobre ela. Um produto novo pode exigir uma demonstração cedo; um serviço conhecido pode precisar apresentar condições e diferenciais antes. Não existe uma sequência universal que dispense esse julgamento.

Escreva uma frase ao lado de cada seção explicando sua função. Se você não consegue dizer o que ela acrescenta, provavelmente precisa ajustar ou remover esse trecho. Use informações verificáveis: uma demonstração real é mais útil que uma grade de números sem origem, e uma explicação honesta pode substituir depoimentos que ainda não existem.

  • Apresentação: o que você oferece e para quem.
  • Funcionamento: como a pessoa usa ou contrata a oferta.
  • Detalhes: o que está incluído e quais são as condições.
  • Decisão: qual ação vem agora e o que acontece depois dela.

Faça o visual e o HTML contarem a mesma história

Destaque a mensagem principal pelo tamanho, pelo contraste e pelo espaço ao redor. Uma página em que todos os títulos gritam obriga a pessoa a descobrir sozinha o que importa. Reserve o maior peso visual para a oferta e crie diferenças claras entre título de seção, subtítulo e informação complementar.

Na estrutura do documento, use um H1 para o assunto principal desta página, H2 para suas grandes seções e H3 quando uma delas tiver subdivisões. Escolha o nível pelo papel do conteúdo, e ajuste o tamanho com CSS. O tutorial de títulos da W3C explica como uma hierarquia lógica ajuda a organizar a leitura e a navegação por tecnologias assistivas.

Nomeie a ação que o botão realiza

‘Criar conta’, ‘Ver modelos’ e ‘Agendar conversa’ antecipam destinos diferentes. Escolha o rótulo que descreve o próximo passo e mantenha o mesmo nome quando repetir a ação. Se o formulário só inicia uma solicitação, não apresente o botão como se a compra ou o agendamento já estivesse garantido.

Você pode ter ações secundárias, desde que a diferença seja compreensível. Um botão preenchido pode carregar o caminho principal e um link simples oferecer mais detalhes. Evite acrescentar urgência, descontos ou disponibilidade limitada que não existam. A decisão fica mais fácil quando o conteúdo esclarece as condições, sem depender de pressão artificial.

Revise com conteúdo real no celular

Na tela pequena, confira a ordem em que as informações aparecem. Uma imagem lateral pode acabar afastando uma explicação do botão que depende dela. Títulos precisam quebrar sem esconder palavras, e os controles devem continuar fáceis de identificar. Percorra a página também com o teclado e verifique se o foco segue a ordem de leitura.

Finalize lendo somente os títulos. Eles formam uma sequência que explica a oferta? Depois leia apenas os botões: está claro para onde cada um leva? Esse exercício não substitui observar pessoas usando a página, mas encontra problemas básicos antes de publicar. Uma hierarquia clara começa com decisões sobre o conteúdo e se confirma na experiência completa.

Para aprofundar

Badsite

Ideias e ferramentas para quem quer criar uma internet com mais personalidade.

Da ideia para a tela

Agora, faça
alguma coisa boa.

Componentes, seções e templates para tirar seu próximo site do papel.

Explorar a biblioteca