Toda interface começa na mente do designer (projetista) antes de existir na tela. O problema é que a maioria das ferramentas de design convida você a começar pelo cursor, pela cor ou pelo componente, antes de estabelecer a intenção.

Esse post reúne os pensamentos que valem ter antes de projetar: hierarquia visual, teoria das cores, composição, acessibilidade e os mecanismos psicológicos que determinam como um usuário percebe o que você construiu.

Conceitos fundamentais

Conceito	O que é
UI (User Interface, Interface do Usuário)	A camada visual com que o usuário interage diretamente: botões, campos, tipografia, cores.
UX (User Experience, Experiência do Usuário)	O arco completo da experiência: o que o usuário sente antes, durante e depois da interação.
Hierarquia Visual (Visual Hierarchy)	Organização dos elementos visuais para que o olho percorra a interface na sequência pretendida.
Affordance (percepção de uso)	Pista visual que sinaliza como um elemento deve ser usado. Um botão com sombra convida ao clique.
Heurística (Heuristic)	Regra de ouro baseada em comportamento humano observado, usada para avaliar usabilidade sem teste formal.
OKLCH (Lightness, Chroma, Hue / Luminosidade, Croma, Matiz)	Espaço de cor perceptualmente uniforme: um incremento de luminosidade sempre parece o mesmo salto visual, independente do matiz.
WCAG (Web Content Accessibility Guidelines, Diretrizes de Acessibilidade para Conteúdo Web)	Padrão internacional com critérios mensuráveis para interfaces acessíveis, organizado nos níveis A, AA e AAA.
Design System (Sistema de Design)	Conjunto de componentes reutilizáveis e regras compartilhadas que formam um vocabulário visual consistente.
Viés Cognitivo (Cognitive Bias)	Atalho mental que influencia percepção e decisão antes de qualquer raciocínio consciente.
Círculo Cromático (Color Wheel)	Representação visual das relações entre cores, base para construir harmonias e paletas coesas.

O que o olho lê antes da mente

Antes de o usuário processar texto ou função, o olho faz uma varredura automática da tela, guiada por contraste, tamanho e peso visual. Hierarquia funciona quando cada elemento tem papel claro: título, subtítulo, conteúdo de suporte. O erro mais comum é dar o mesmo peso a tudo, forçando o usuário a inferir o que importa.

Três atributos criam hierarquia:

• Tamanho tipográfico: maior registra antes. Um h1 de 48px é lido antes de um parágrafo de 16px.
• Contraste de cor: texto com alto contraste sobre o fundo é percebido antes do atenuado. Tokens como foreground e muted-foreground em design systems modernos refletem essa gradação.
• Peso visual: negrito, preenchimento com cores saturadas, bordas e sombras. Tudo que “pesa” mais na tela atrai o olhar antes.

Hierarquia é o mapa que o usuário segue sem precisar decidir.

Cor como sistema, não como decoração

Cor comunica antes da palavra. A maioria das pessoas aborda cor como preferência pessoal em vez de sistema com regras, e isso gera paletas que parecem aleatórias.

Toda cor tem três atributos: matiz (o nome da cor no círculo cromático), croma (a intensidade ou pureza) e luminosidade (o quão clara ou escura ela é). Em espaços de cor tradicionais como RGB ou HSL, esses atributos não são perceptualmente uniformes: cores de mesma “luminosidade” numérica podem parecer muito mais brilhantes ou escuras dependendo do matiz.

OKLCH resolve isso. Um incremento de +0.10 em luminosidade sempre parece o mesmo salto visual, qualquer que seja o matiz. O resultado são escalas tonais equilibradas com contraste previsível entre paradas, qualidade essencial para temas acessíveis.

Temperatura de cor costuma ser ignorada na composição. Cores quentes (vermelhos, laranjas, H 0° a 60° em OKLCH) avançam visualmente: parecem mais próximas e urgentes. Cores frias (azuis, verdes, H 180° a 280°) recuam: remetem a calma e confiança. Separar planos com temperatura cria profundidade sem exigir grande diferença de luminosidade.

Harmonias que organizam a paleta

Harmonias são relações geométricas no círculo cromático. O círculo organiza todas as cores visíveis em uma roda contínua: as primárias (vermelho, amarelo, azul) ficam espaçadas em 120°, as secundárias (laranja, verde, violeta) surgem entre elas e as terciárias preenchem os intervalos restantes.

A posição de cada cor no círculo determina como ela se relaciona com as outras. Harmonias são os ângulos entre essas posições: quanto mais distante no círculo, maior o contraste entre as cores.

Cada harmonia tem uma personalidade distinta:

• Análoga (±30°): três cores vizinhas. Paletas suaves e naturais, ideais para fundos e superfícies sem tensão visual.
• Complementar (180°): duas cores opostas. Máximo contraste e vibração. Use a cor de apoio com moderação (10 a 20% da composição) ou o resultado fica agressivo.
• Split-complementar (150° e 210°): a cor base mais as duas adjacentes à sua complementar. Mantém o contraste com menos tensão. Bom ponto de partida para projetos que precisam de destaque sem parecer chamativo.
• Triádica (120°): três cores equidistantes. Vibrante e equilibrada quando uma cor domina e as outras atuam como acentos.

Paletas com quatro ou mais cores (tetrádica, quadrada) exigem hierarquia clara entre elas. Sem uma cor dominante definida, a composição parece caótica.

Composição que guia a atenção

A regra 60-30-10 distribui cores em proporções que criam equilíbrio e direcionam o olhar:

• 60% para a cor dominante: neutros ou a cor primária suavizada. É o fundo, os textos de suporte, as bordas.
• 30% para a cor de suporte: a cor primária interativa, botões, links.
• 10% para a cor de destaque: badges, CTAs, alertas. Pouca área, máximo impacto.

Espaço em branco age como cor ativa na composição: cria respiro, separa grupos visuais e amplifica a percepção das cores adjacentes. Interfaces que tentam preencher todo espaço disponível cansam mais rápido.

Para texto, a regra prática em OKLCH: mantenha pelo menos 4 paradas de diferença entre fundo e texto para garantir WCAG AA (4.5:1). Para AAA, 6 ou mais paradas. O par 50 sobre 900 (e o inverso em dark mode) produz contraste acima de 7:1 independentemente do matiz.

Espaçamento, densidade e respiro

Espaçamento é uma decisão de design que determina o quanto cada elemento respira e como o olho percebe agrupamentos. Tratar como algo que “sobra depois” gera interfaces que parecem apertadas mesmo quando o conteúdo caberia com folga.

O sistema mais adotado é o grid de 8px: todos os valores de espaçamento são múltiplos de 8 (8, 16, 24, 32, 40, 48…). O motivo é prático: a maioria dos dispositivos trabalha com densidades de tela divisíveis por 8, então valores nessa escala renderizam com pixels inteiros, sem suavização artificial. O resultado é mais nítido.

Os dois cards têm o mesmo conteúdo. A diferença está nos valores de espaçamento interno.

Padding vs margin: padding é o espaço interno de um componente (entre o conteúdo e a borda). Margin é o espaço externo (entre componentes). A regra prática: use padding para definir o respiro dentro de um card ou botão, use margin para separar elementos entre si no layout.

Densidade visual é uma escala com dois extremos. Dashboards e tabelas de dados usam espaçamento compacto porque o usuário precisa ver muita informação ao mesmo tempo. Páginas de leitura, landing pages e formulários pedem espaçamento generoso porque a atenção precisa de foco. Definir a densidade certa começa com entender o contexto de uso.

Mobile e desktop

O que muda do desktop para o mobile vai além do tamanho de tela: o método de interação é diferente.

No desktop, o ponteiro do mouse tem precisão de 1px. Botões podem ser menores, informações mais densas, menus mais complexos.

No mobile, o dedo tem uma área de contato de 40 a 57px. Elementos interativos abaixo de 44×44px viram armadilhas de toque, frustrando o usuário mesmo que visualmente pareçam grandes o suficiente.

Boas práticas de espaçamento por contexto:

• Margens laterais: 16px no mobile, 24–32px no tablet, 40–80px no desktop (ou max-width centralizado).
• Altura de linha (line-height): 1.5 para corpo de texto, 1.2 para títulos. Texto muito comprimido cansa; muito espaçado perde fluidez de leitura.
• Tamanho de fonte no mobile: mínimo 16px para corpo de texto. Fontes menores obrigam o browser a fazer zoom automático, quebrando o layout.
• Gap entre itens de lista ou cards: 8px para listas compactas, 16–24px para listas de conteúdo, 24–32px para grids de cards.
• Espaço de toque extra: quando um ícone pequeno precisa ser interativo, aumente a área de clique com padding sem aumentar o ícone visualmente.

Acessibilidade não é checklist final

WCAG organiza suas diretrizes em três níveis: A (mínimo), AA (padrão da indústria) e AAA (excelência). Para texto normal, AA exige contraste mínimo de 4.5:1. Para texto grande (acima de 18pt regular ou 14pt negrito), 3:1.

Tratar acessibilidade como checklist pós-design transforma verificação em retrabalho: quando a paleta já está aprovada, alterar cores para passar contraste afeta toda a identidade visual. Validar contraste durante a construção da escala tonal é parte do processo, não etapa separada.

Em OKLCH, a uniformidade perceptual torna isso mais direto. Diferenças de L entre paradas predizem contraste WCAG de forma confiável na maioria dos matizes. Atenção especial para amarelo e ciano: têm luminância percebida alta mesmo com L moderado. Teste com uma ferramenta de contraste real antes de aprovar qualquer combinação nesses matizes.

WCAG cobre mais que cor: foco visível (1.4.11), espaçamento de texto (1.4.12) e movimento (2.3.3). Para paletas, os critérios mais diretos são 1.4.3 (contraste de texto) e 1.4.11 (contraste de componentes não-texto, que exige 3:1).

Psicologia que dirige a interface

Rian Dutra, designer e pesquisador em Ciências Cognitivas, estuda como vieses cognitivos moldam a percepção do usuário antes de qualquer avaliação racional da interface. Seu ângulo central é que o design de experiência lida com os mecanismos pelos quais o cérebro humano processa informação e toma decisões.

As 10 heurísticas de Nielsen continuam sendo o mapa mais direto para avaliar usabilidade:

1. Visibilidade do status do sistema: o usuário deve saber o que está acontecendo. Barras de progresso, estados de carregamento, confirmações visuais.
2. Correspondência com o mundo real: use linguagem e símbolos que o usuário já conhece. O ícone de lixeira comunica exclusão sem instruções.
3. Controle e liberdade do usuário: erros devem ser reversíveis. Desfazer é funcionalidade de design, não de engenharia.
4. Consistência e padrões: terminologia, posição e comportamento uniformes ao longo da interface reduzem carga cognitiva.
5. Prevenção de erros: evitar o erro é mais eficaz que uma boa mensagem de erro. Validação inline, confirmações antes de ações destrutivas.
6. Reconhecimento antes da lembrança: exiba opções em vez de exigir que o usuário memorize. Menus dropdown, sugestões de busca.
7. Flexibilidade e eficiência: atalhos para usuários experientes sem comprometer o fluxo de novatos.
8. Design estético e minimalista: cada elemento extra compete com os que importam. Apresente o essencial.
9. Diagnóstico e recuperação de erros: mensagens claras que explicam o problema e sugerem a solução.
10. Ajuda e documentação: quando necessária, a ajuda deve ser fácil de encontrar e focada na tarefa.

Três vieses cognitivos com impacto direto em UX:

• Efeito de enquadramento (Framing Effect): a mesma informação muda de impacto conforme a apresentação. “5% de chance de falhar” e “95% de chance de funcionar” descrevem a mesma realidade com efeitos opostos na percepção.
• Escassez (Scarcity Bias): elementos que comunicam limitação (“últimas vagas”, “oferta por tempo limitado”) aumentam percepção de valor e urgência.
• Ilusão de controle: usuários tomam decisões mais confiantes quando sentem que controlam o fluxo, mesmo em sistemas com poucas opções reais. Microinterações e feedback visual contribuem para essa sensação.

Dark mode como estratégia, não como inversão

Dark mode de qualidade exige uma escala tonal própria: o olho percebe a luz de forma diferente em ambientes escuros, e as mesmas cores de um tema claro se comportam de maneira diversa sobre fundos escuros.

Fundos escuros pedem L entre 0.12 e 0.18. Abaixo de 0.10, o contraste se torna alto demais com qualquer conteúdo e causa fadiga em uso prolongado.

Evite branco puro em dark mode. Texto #fff sobre fundo escuro produz contraste de 21:1, muito além do necessário, causando halação visual em leituras prolongadas. Use off-white com L entre 0.92 e 0.97 para texto primário e L entre 0.60 e 0.75 para texto secundário.

Cores de destaque precisam de mais luminosidade no escuro. Uma cor de botão primário com L = 0.55 em light mode pode precisar de L = 0.65 a 0.70 em dark mode para manter o mesmo impacto visual.

Para bordas: em tema claro, opacidade de 15 a 20% funciona bem. Em dark mode, bordas opacas escuras se fundem com o fundo. Bordas claras com opacidade de 8 a 12% (como oklch(1 0 0 / 10%)) separam cards sem criar peso visual excessivo.

O pensamento antes da execução

Quem chega ao editor com hierarquia pensada, paleta fundamentada e restrições de acessibilidade conhecidas entrega mais rápido e com menos retrabalho. A ferramenta executa as decisões; a qualidade delas acontece antes.

O ponto de partida do design é decidir o que o olho lê primeiro.

Referências

• Rian Dutra: Psicologia.Design
• Rian Dutra: Heurísticas de UX Design
• Match Themes: Teoria, Harmonias e WCAG na prática
• Match Themes: seção de Teoria das Cores (interativa)
• WCAG 2.2, Critério 1.4.3: Contraste Mínimo
• Evil Martians: OKLCH in CSS, why quit RGB & HSL
• Refactoring UI
• Material Design 3: Color System

Ver todos os artigos →