Design de Seção Hero
Projeta a primeira tela que os usuários veem em um site — a seção hero. Você tem de 2 a 4 segundos para comunicar quem você é, o que faz e por que o visitante deve permanecer. Cada pixel acima da dobra é uma decisão de conversão.
Pontos de Decisão
Árvore de Decisão do Padrão de Layout
Qual é o objetivo principal?
├── Conscientização/memorabilidade da marca → Hero visual full-bleed
├── Clareza/demonstração do produto → Hero dividido (cópia à esquerda, visual à direita)
├── Exibição/comparação de recursos → Hero centralizado com grade de recursos abaixo
└── Construção de autoridade/credibilidade → Hero editorial/assimétrico
Existe um visual forte do produto?
├── Sim (capturas de tela do app, dashboard, demonstração) → Hero dividido
└── Não (API, serviço, conceito abstrato) → Hero centralizado
Qual é o público-alvo?
├── Desenvolvedores/técnico → Centralizado, minimalista (estilo Linear/Vercel)
├── Negócios/empresarial → Dividido com visuais profissionais
├── Consumidor/estilo de vida → Full-bleed com imagens de estilo de vida
└── Criativo/design → Layout editorial/assimétrico
Complexidade do conteúdo?
├── Proposta de valor simples (1 linha) → Full-bleed ou centralizado
├── Médio (título + subtítulo) → Dividido ou centralizado
└── Complexo (vários benefícios) → Dividido com cópia estruturada
Árvore de Decisão da Estratégia de CTA
Qual é o modelo de negócio?
├── Freemium/teste → "Comece Grátis" + "Veja a Demonstração"
├── Orientado a vendas → "Fale com Vendas" + "Ver Preços"
├── Compra direta → "Compre Agora" + "Saiba Mais"
└── Geração de leads → "Solicite Orçamento" + "Casos de Sucesso"
Nível de intenção do usuário?
├── Alta intenção (pesquisou o nome da marca) → Apenas CTA direto
├── Intenção média (ciente do problema) → CTA primário + secundário
└── Baixa intenção (descoberta) → CTA suave + cópia focada em valor
Modos de Falha
1. Confusão de Carrossel
Sintoma: Conteúdo hero rotaciona automaticamente, taxa de rejeição >70% Diagnóstico: Usuários não conseguem processar mensagens rotativas; ocorre paralisia de decisão Correção: Substituir por uma única mensagem mais forte; usar hero estático com uma proposta de valor clara
2. CTA Abaixo da Dobra
Sintoma: Baixa taxa de conversão apesar do alto tráfego; CTA no celular exige rolagem Diagnóstico: Ação principal não visível no carregamento inicial da página Correção: Reduzir altura do hero ou mover o CTA para cima; garantir visibilidade na largura móvel de 375px
3. Proposta de Valor Pouco Clara
Sintoma: Alta taxa de rejeição, baixo tempo de engajamento, feedback confuso do usuário Diagnóstico: O título descreve o que você é, não o que você faz pelos usuários Correção: Lidere com resultado/benefício; "Entregue 10x mais rápido" não "Plataforma de DevOps"
4. Hierarquia Visual Pobre
Sintoma: Usuários perdem informações importantes, baixo clique no CTA (<2%) Diagnóstico: Todos os elementos de texto com o mesmo peso visual; nenhuma ordem de leitura clara Correção: Escalar o título 2-3x maior que o texto do corpo; usar cor/peso para guiar o olhar
5. Gargalo de Desempenho
Sintoma: Alta taxa de rejeição no celular; pontuações LCP lentas >3 segundos Diagnóstico: Ativos hero superdimensionados bloqueiam o caminho crítico de renderização Correção: Otimizar imagens (WebP/AVIF), carregar sob demanda ativos não críticos, pré-carregar imagem do hero
Exemplos Trabalhados
Exemplo: Hero de Produto SaaS (Layout Dividido)
Cenário: Construindo hero para uma ferramenta de revisão de código voltada para equipes de desenvolvedores
Passo 1: Decisão de Layout
- Objetivo: Demonstração do produto ✓
- Visual forte: Sim (capturas de tela de diff de código) ✓
- Público: Desenvolvedores ✓
- Decisão: Hero dividido com visual do produto
Passo 2: Estratégia de Cópia
Título: "Entregue código mais rápido com confiança" (focado em resultado)
Subtítulo: "Revisão de código automatizada que pega bugs antes dos seus usuários" (benefício específico)
CTA Primário: "Comece Teste Grátis" (modelo freemium)
CTA Secundário: "Veja Como Funciona" (demonstração para usuários hesitantes)
Passo 3: Tratamento Visual
- Esquerda: Cópia + CTAs (40% de largura)
- Direita: Demonstração animada de diff de código (60% de largura)
- Fundo: Padrão sutil de pontos para estética de desenvolvedor
Passo 4: Adaptação para Celular
- Empilhar: Cópia em cima, visual embaixo
- Título escala de 3rem para 2.25rem
- Botões de CTA empilhados verticalmente com espaçamento de 1rem
Especialista vs Iniciante:
- Iniciante: Usa CTA genérico "Saiba Mais"
- Especialista: Usa "Veja Como Funciona" (implica demonstração visual)
- Iniciante: Título "Ferramenta de Revisão de Código para Equipes"
- Especialista: Título "Entregue código mais rápido com confiança" (resultado para o usuário)
Portões de Qualidade
- CTA primário visível sem rolagem na largura móvel de 375px
- Título comunica a proposta de valor em ≤10 palavras
- Hero carrega com LCP ≤2,5 segundos (testar com limitação de rede)
- Taxa de contraste do texto ≥4,5:1 contra qualquer fundo
- Layout para celular empilha limpo sem rolagem horizontal
- Elemento de prova social presente (logotipos, métricas ou depoimento)
- Mensagem única e clara (sem conteúdo rotativo ou múltiplas propostas de valor)
- Taxa de clique no CTA ≥2% (medir após 1 semana)
-
prefers-reduced-motionrespeitado para animações - Imagem do hero usa prioridade de carregamento adequada (eager/high)
Limites de NÃO USO
NÃO use esta skill para:
- Arquitetura completa de site → use web-design-expert
- Estratégia de conteúdo SEO → use seo-visibility-expert
- Layouts de post de blog → use web-design-expert
- Páginas de produto de e-commerce → use ecommerce-conversion-expert
- Fluxos de integração em várias etapas → use user-experience-expert
- Identidade de marca/design de logotipo → use brand-design-expert
Delegue em vez disso quando:
- Cliente precisa de redesign completo do site → web-design-expert
- Foco está na otimização de ranking de busca → seo-visibility-expert
- Hero faz parte de uma jornada complexa do usuário → user-experience-expert