📍 Proximidade
Elementos que estao perto uns dos outros sao percebidos como relacionados ou pertencentes ao mesmo grupo. Ja vimos isso no modulo anterior - agora vamos aprofundar.
👁️ Demonstracao: Proximidade
Voce ve 2 grupos de 3 circulos
Voce ve 6 circulos individuais
💼 Aplicacao em Web Design
- • Labels perto de inputs em formularios
- • Icone junto do texto que descreve
- • Cards agrupando informacoes relacionadas
- • Navegacao agrupada no header
🎯 Vocabulario para Prompts
Use: agrupar elementos relacionados por proximidade,
labels proximos aos inputs,
cards para agrupar informacoes,
principio Gestalt de proximidade.
🎨 Similaridade
Elementos que compartilham caracteristicas visuais (cor, forma, tamanho) sao percebidos como relacionados, mesmo que estejam distantes.
👁️ Demonstracao: Similaridade
Por Cor
Voce ve 2 grupos por cor
Por Forma
Voce ve 2 grupos por forma
💼 Aplicacao em Web Design
- • Todos os links com a mesma cor
- • Botoes primarios com estilo consistente
- • Icones do mesmo estilo (outline ou filled)
- • Cards com estrutura identica
🎯 Vocabulario para Prompts
Use: estilo visual consistente para elementos relacionados,
mesma cor para todos os links,
icones com estilo uniforme,
similaridade para indicar funcao igual.
➡️ Continuidade
O olho segue linhas, curvas e caminhos visuais naturalmente. Elementos alinhados em uma linha ou curva sao percebidos como relacionados e direcionam o olhar.
👁️ Demonstracao: Continuidade
Voce ve uma linha horizontal e uma linha inclinada cruzando, nao agrupamentos aleatorios
💼 Aplicacao em Web Design
- • Navegacao horizontal alinhada
- • Timelines e progress bars
- • Setas e linhas direcionais
- • Alinhamento a esquerda consistente
🎯 Vocabulario para Prompts
Use: alinhamento que guia o olho,
timeline visual com continuidade,
linha direcional para o CTA,
fluxo visual continuo de cima para baixo.
⭕ Fechamento
O cerebro tende a completar formas incompletas. Vemos o todo mesmo quando partes estao faltando. Isso permite designs mais elegantes e minimalistas.
👁️ Demonstracao: Fechamento
Voce ve um circulo, nao um arco
Voce ve a letra "E"
Voce ve um quadrado
💼 Aplicacao em Web Design
- • Logos minimalistas que implicam formas
- • Cards com bordas parciais
- • Carrossel mostrando items parcialmente (indica mais conteudo)
- • Icones simplificados
🎯 Vocabulario para Prompts
Use: formas implicadas/sugeridas,
carrossel com items parcialmente visiveis,
design minimalista usando fechamento,
icones simplificados que o cerebro completa.
🖼️ Figura/Fundo
Automaticamente separamos figura (objeto de foco) do fundo (contexto). Esse principio e essencial para criar foco e destaque no design.
👁️ Demonstracao: Figura/Fundo
Card (figura) sobre fundo claro
O que e figura, o que e fundo?
💼 Aplicacao em Web Design
- • Modais que escurecem o fundo
- • Cards elevados com sombra
- • Botoes que se destacam do fundo
- • Texto sobre imagem com overlay
🎯 Vocabulario para Prompts
Use: modal com overlay escuro no fundo,
cards elevados do fundo com sombra,
separacao clara figura/fundo,
destaque do elemento principal sobre contexto.
⚖️ Simetria e Ordem
O cerebro prefere padroes ordenados e simetricos. Designs equilibrados transmitem estabilidade, profissionalismo e harmonia.
👁️ Demonstracao: Simetria
✓ Simetrico/Ordenado
Transmite estabilidade
✗ Assimetrico/Desorganizado
Transmite caos
📏 Tipos de Simetria
Reflexao
Espelhamento
Rotacional
Gira ao redor de centro
Translacional
Repeticao regular
🎯 Vocabulario para Prompts
Use: layout simetrico e equilibrado,
grid ordenado de cards,
espacamento regular e previsivel,
design harmonico e profissional.
📝 Resumo do Modulo
Proximo Modulo:
1.7 - Responsividade e Mobile-First: Design que funciona em qualquer tela