🎯 O que e Hierarquia Visual
Hierarquia visual e a organizacao de elementos em ordem de importancia. E o que faz seu olho ir primeiro para o titulo, depois para a imagem, depois para o texto. Sem hierarquia, tudo compete pela atencao e nada se destaca.
💡 Definicao Tecnica
A hierarquia visual utiliza propriedades visuais (tamanho, cor, posicao, contraste, espacamento) para sinalizar ao cerebro o que olhar primeiro, segundo e terceiro.
- • Primario: O elemento mais importante (geralmente titulo ou CTA)
- • Secundario: Informacoes de suporte (subtitulos, imagens)
- • Terciario: Detalhes e informacoes complementares
📐 Exemplo: Hierarquia em Acao
Observe como seu olho naturalmente segue: Titulo → Subtitulo → Texto → Botao
🎯 Vocabulario para Prompts
Ao criar com IA, use: hierarquia visual clara,
titulo dominante,
elementos primarios, secundarios e terciarios bem definidos,
fluxo visual de cima para baixo.
📏 Tamanho Comunica Importancia
A regra mais fundamental da hierarquia: elementos maiores sao percebidos como mais importantes. Isso e instintivo - nosso cerebro evoluiu para prestar atencao em coisas grandes (predadores, comida, perigos).
📊 Escala Tipografica
Um sistema de tamanhos padronizado cria consistencia e hierarquia automatica:
✓ Contraste de Tamanho Claro
3 niveis claramente distinguiveis
✗ Tamanhos Muito Proximos
Hierarquia confusa, tudo parece igual
🎯 Vocabulario para Prompts
Use termos como: titulo hero grande (64px+),
escala tipografica consistente,
contraste de tamanho pronunciado,
texto de corpo 16-18px legivel.
🎨 Cor Atrai Atencao
Cor e a ferramenta mais poderosa para direcionar atencao. Um ponto de cor saturada em um fundo neutro captura o olho instantaneamente. E por isso que botoes de acao sao coloridos.
🔬 Como Cor Cria Hierarquia
- • Cores saturadas avancam visualmente (parecem mais proximas)
- • Cores dessaturadas recuam (parecem mais distantes)
- • Cores quentes (vermelho, laranja) chamam mais atencao que frias
- • Alto contraste = mais visibilidade e importancia percebida
👁️ Demonstracao: Onde seu olho vai?
O quadrado verde captura sua atencao imediatamente, mesmo sendo do mesmo tamanho
💼 Aplicacao Pratica
🎯 Vocabulario para Prompts
Use: CTA com cor de destaque,
fundo neutro com acentos coloridos,
hierarquia de cor (primaria, secundaria, neutra),
alto contraste para elementos importantes.
📍 Posicao Direciona
Onde um elemento esta posicionado afeta sua importancia percebida. Em culturas ocidentais, lemos de cima para baixo, esquerda para direita. Elementos no topo e a esquerda sao vistos primeiro.
📖 Padroes de Leitura
Padrao F
Comum em paginas com muito texto. Usuario escaneia horizontalmente no topo, depois desce pela esquerda.
Padrao Z
Comum em landing pages. Usuario vai do logo (topo esquerda) ao CTA (final direita).
🎯 Implicacoes para Design
- • Logo: Canto superior esquerdo (primeiro ponto de contato)
- • Navegacao: Topo da pagina (area de alta visibilidade)
- • CTA Principal: Acima do fold, visivel sem rolar
- • Informacoes secundarias: Abaixo do fold ou em colunas laterais
🎯 Vocabulario para Prompts
Use: logo no canto superior esquerdo,
CTA acima do fold,
fluxo de leitura natural (F ou Z),
conteudo prioritario no topo.
⚖️ Peso Visual
Peso visual e a "forca de atracao" de um elemento. Elementos com mais peso visual demandam mais atencao. O peso e determinado por uma combinacao de fatores.
📊 Fatores que Aumentam Peso Visual
Tamanho
Maior = mais pesado
Cor
Cores escuras e saturadas = mais pesadas
Densidade
Mais conteudo/textura = mais pesado
Contraste
Alto contraste com fundo = mais pesado
Forma
Formas regulares e solidas = mais pesadas
Isolamento
Elemento isolado com espaco ao redor = mais pesado
⚖️ Demonstracao: Equilibrio de Peso
Equilibrado
Um grande = varios pequenos
Desequilibrado
Peso muito desigual, layout "cai" para a esquerda
🎯 Vocabulario para Prompts
Use: layout equilibrado visualmente,
peso visual balanceado entre colunas,
elemento hero com alto peso visual,
botao com peso visual destacado.
🎯 Ponto Focal
O ponto focal e o elemento que primeiro captura a atencao. Todo design efetivo tem um ponto focal claro. Se tudo compete pela atencao, nada se destaca.
💡 Tecnicas para Criar Ponto Focal
Contraste
Diferente de tudo ao redor (cor, tamanho, forma)
Isolamento
Espaco vazio ao redor destaca o elemento
Linhas Direcionais
Elementos que "apontam" para o foco (setas, olhares)
Movimento
Animacao sutil em um elemento estatico
✓ Ponto Focal Claro
Um elemento domina claramente
✗ Multiplos Focos
Tudo compete, usuario fica confuso
🎯 Vocabulario para Prompts
Use: ponto focal claro e unico,
CTA como foco principal da secao,
titulo hero dominante,
hierarquia com um unico elemento destacado.
📝 Resumo do Modulo
Proximo Modulo:
1.3 - Tipografia como Comunicacao: Fontes falam mais que palavras