Sistema de Design Hero

O que Sistema de Design Hero faz?

Propósito

O Sistema de Design Hero fornece uma metodologia para projetar a área espacial mais crítica de uma página web: a seção introdutória. Enquanto hero-section-optimization na categoria Crescimento foca em mensagens e conversão, este sistema de design foca na anatomia visual, composição espacial e camadas do hero. Ele garante que conteúdo e visuais trabalhem em harmonia para estabelecer autoridade da marca, manter hierarquia visual e guiar o olhar para a ação primária em todos os tipos de dispositivo.

Casos de Uso

• Projetar o ponto de entrada principal para páginas iniciais e landing pages.
• Criar introduções "Sub-Hero" para páginas de produtos ou serviços de nível profundo.
• Estabelecer um padrão introdutório consistente em um site multipáginas.
• Gerenciar camadas complexas de texto, imagens e elementos interativos.
• Projetar adaptações responsivas para introduções imersivas com uso intenso de mídia.

Quando NÃO Usar

• Navegação Global do Site: Use site-navigation-system para o cabeçalho persistente.
• Orientação em Nível de Página: Use page-header-system para introduções com muitos utilitários (ex.: dashboards ou configurações) que priorizam metadados em vez de impacto.
• Artigos de Conteúdo: Onde o foco é um título simples e linha de crédito; use tipografia padrão ou page-header-system.
• Modais ou Overlays: Use overlay-and-dialog-system para camadas de interface temporárias.

Entradas

1. Prioridade de Conteúdo: O Título Principal (H1), Subtítulo e CTA Primário.
2. Ativos Visuais: Fotografia, ilustrações, vídeo ou padrões abstratos.
3. Modo de Layout: A composição é Dividida (Split), Centrada (Centered) ou Sangria Total (Full-Bleed)?
4. Sistema de Espaçamento Fluido: Para margens, preenchimento e ritmo vertical consistentes.
5. Paleta da Marca: Para tratamentos de fundo e legibilidade de sobreposições.

Saídas

1. Especificação da Anatomia do Hero: Definição das zonas de conteúdo (Introdução, Núcleo, Ação, Visual).
2. Blueprint de Composição: Regras para alinhamento (Esquerda vs. Centralizado) e relação com a mídia.
3. Estratégia de Camadas Visuais: Regras para sobreposição de texto, scrims e profundidade.
4. Mapa de Transformação Responsiva: Como o hero se adapta de viewports paisagem para retrato.

Fluxo de Trabalho

1. Selecione um Padrão de Composição

Escolha um padrão baseado na relação entre conteúdo e mídia:

• O Dividido (50/50): Texto de um lado, visual do outro. Melhor para clareza e produtos técnicos.
• O Empilhado Centrado: Todo o conteúdo centralizado, geralmente com uma imagem ou vídeo de fundo. Melhor para declarações impactantes e diretas.
• O Conteúdo Inserido (Inset): O conteúdo fica dentro de uma caixa contida sobre um fundo de sangria total. Melhor para sensações premium ou editoriais.
• O Overlay Deslocado: O texto se sobrepõe parcialmente a um elemento visual para criar profundidade.

2. Defina a Hierarquia Espacial (Anatomia)

Aplique visual-hierarchy-system às zonas do hero:

• Introdução/Sobrancelha (Opcional): Uma pequena etiqueta ou rótulo acima do H1 para contexto.
• O Título Principal (H1): O maior elemento de texto da página.
• O Subtítulo: Texto de suporte fornecendo detalhes (máx. 2-3 linhas).
• A Zona de Ação: Botões de CTA primário (e opcional secundário).
• A Âncora (Visual): O ponto focal que suporta a narrativa.

3. Estabeleça as Camadas e a Legibilidade

Se usar mídia de fundo, garanta que o texto seja legível:

• Scrims & Gradientes: Aplique uma Camada de Legibilidade (de imagery-and-media-system) para garantir contraste 4.5:1.
• Tratamentos de Desfoque: Use filtros de fundo (backdrop-filters) para suavizar fundos carregados atrás do texto.
• Profundidade: Use sombras ou deslocamentos sutis para distinguir o "plano" do conteúdo do "plano" de fundo.

4. Aplique Ritmo Vertical e Espaçamento

Use o fluid-spacing-system para definir "espaço para respirar":

• Preenchimento Superior/Inferior: Garanta que o hero tenha altura vertical suficiente (geralmente 60vh a 90vh no desktop).
• Lacunas Internas: Use espaçamento consistente entre H1, Subtítulo e CTAs (geralmente --space-m a --space-xl).

5. Mapeie o Pivô Responsivo

Planeje como o layout se transforma para telas menores:

• Empilhamento: Layouts divididos geralmente empilham com o visual no topo (para contexto) ou na parte inferior (para priorizar o H1).
• Mudança de Proporção: Imagens de fundo devem mudar de paisagem (16:9) para quadrado ou retrato (1:1 ou 4:5) para manter os pontos focais.
• Escalonamento de Texto: Garanta que o H1 reduza graciosamente usando fluid-typography-system.

Regras de Decisão

• A Regra do H1 Único: O hero DEVE conter o único H1 da página.
• Clareza sobre Complexidade: Se o ativo visual dificulta um pouco a leitura do texto, priorize um fundo mais simples ou um scrim mais pesado.
• A Zona do "Polegar": No mobile, garanta que os CTAs sejam colocados nos 2/3 inferiores da tela para fácil alcance.
• Peso Visual: O H1 e o CTA Primário devem ser os dois elementos mais visualmente distintos no hero.
• Alinhamento do Ponto Focal: Em layouts divididos, o "Sujeito" da imagem deve estar voltado para o conteúdo, não para longe dele.

Restrições

• Acessibilidade: Texto sobre imagens deve atender ao contraste WCAG AA (4.5:1). Headlines devem usar tags <h1> semânticas. Se o hero incluir vídeo de fundo ou animação com reprodução automática, forneça um controle de pausa visível (WCAG 2.2.2) e respeite prefers-reduced-motion.
• Responsividade: O hero nunca deve causar estouro horizontal (horizontal overflow). Layouts devem ser fluidos, não com altura fixa, para acomodar comprimentos de texto variáveis. Evite bloqueios de 100vh no mobile, que se comportam mal com o chrome dinâmico do navegador — prefira 100dvh ou uma altura mínima com preenchimento fluido.
• Performance: Vídeos de fundo devem estar mudos e ter uma imagem de "pôster" como fallback para conexões lentas.

Padrões Comuns de Falha

• A "Falha de Contraste": Colocar texto branco sobre uma imagem clara ou movimentada sem um scrim, tornando o título ilegível.
• Enterro da Ação: Colocar o CTA muito baixo, de modo que seja cortado "abaixo da dobra" em laptops menores.
• Sobrecarga de Mídia: Usar um vídeo de fundo muito distrativo que impede o usuário de ler a proposta de valor.
• O "Aperto Mobile": Forçar um layout dividido de desktop no mobile, resultando em texto minúsculo e uma imagem apertada.

Critérios de Validação

• O hero contém um H1 claro que é o elemento de texto mais proeminente.
• O CTA primário é visualmente distinto e segue interactive-state-system.
• Sobreposições de texto atendem aos requisitos de contraste WCAG AA (4.5:1).
• A composição espacial (ex.: Dividido, Centrado) é consistente com os objetivos da marca.
• O espaçamento vertical (preenchimento/lacunas) usa tokens do sistema de espaçamento fluido.
• O layout permanece funcional e legível em viewports mobile.
• Os pontos focais nas imagens são preservados durante o empilhamento responsivo.
• Vídeo/animação com reprodução automática tem controle de pausa e respeita prefers-reduced-motion.