Composição Visual & Linguagens
Um checklist dos princípios que fazem uma peça visual "funcionar" — hierarquia, Gestalt, equilíbrio, contraste, ritmo, alinhamento, enquadramento, cor/valor — e um panorama das linguagens visuais (Swiss, brutalism, editorial…). Cada tópico em poucas linhas, com as armadilhas. Se algo soar novo, o ponteiro → aprofunde em… indica a apostila completa.
O formato "Essencial"
Densa, sem rodeios, feita para ser varrida.
- Leia rápido. Se você já faz, siga. Se travou, é sinal de estudar/praticar.
- → aprofunde em…: Layout, Grade & Espaçamento, Tipografia, Cor, Branding, Design Systems & Design Tokens, Ilustração, Imagem & Arte-direção.
- Estes princípios valem para UI, pôster, slide, editorial, ilustração e motion — a mídia muda, a disciplina não.
- Caixas ⚠️: o erro clássico de cada tópico. Checklist final para marcar.
Hierarquia visual
O olho pousa primeiro no que mais contrasta com o entorno. → aprofunde em Layout, Grade & Espaçamento · Tipografia
- Um ponto de entrada por tela/peça — o elemento de maior peso. "Tudo em destaque" = nada em destaque.
- As alavancas: tamanho, peso, cor/contraste, espaço (isolamento), posição, família/estilo, caixa. Use uma ou duas por nível, não todas.
- Ordem visual = ordem de importância — e, na web, idealmente = ordem no DOM (teclado, leitor de tela).
- 3–5 níveis de hierarquia bastam: entrada → apoio → detalhe.
Criar hierarquia só com tamanho de fonte — infla a peça e some em telas pequenas. Muitas vezes só peso + cor + espaço resolvem, sem mexer no tamanho.
✔️ Auto-checagem
Qual é o ponto de entrada da sua última tela? Quantas alavancas você usou por nível? A ordem visual bate com a ordem de importância e com o DOM?
Gestalt
As leis de como o cérebro agrupa o que vê. → aprofunde em Layout, Grade & Espaçamento
| Lei | Em uma frase |
|---|---|
| Proximidade | o que está perto é lido como um grupo — a alavanca nº 1 |
| Similaridade | o que se parece (forma, cor, tamanho) é lido como relacionado |
| Continuidade | o olho segue linhas e alinhamentos |
| Fechamento | completamos formas incompletas (um card sugerido só por espaço + fundo) |
| Figura-fundo | separamos o objeto do fundo; ambiguidade cansa |
| Região comum | o que está dentro de uma mesma área/painel é um grupo (mais forte que proximidade) |
Força do agrupamento: região comum > proximidade > similaridade > alinhamento. Combine com parcimônia — proximidade sozinha costuma bastar.
✔️ Auto-checagem
Cite as 6 leis. Qual é a mais forte para agrupar? Onde na sua última peça a proximidade está ambígua (algo a igual distância de dois grupos)?
Equilíbrio e peso visual
Cada elemento "puxa" o olhar com uma força; compor é equilibrá-las. → aprofunde em Layout, Grade & Espaçamento
- Peso visual depende de: tamanho, contraste, cor (saturada/escura pesa mais), densidade, isolamento (espaço em volta), posição (mais alto e à direita pesa mais).
- Simétrico: calmo, formal, estável — pode ficar estático.
- Assimétrico equilibrado: pesos diferentes que se contrabalançam — dinâmico, o mais comum em UI real.
- Radial: tudo irradia de um centro.
- Espaço negativo ativo: uma área vazia grande e intencional cria foco e "respiro premium".
- Tensão: um elemento perto da borda, ou fora do grid de propósito, cria energia — se for intenção, não acidente.
✔️ Auto-checagem
O que faz um elemento "pesar" mais? Simétrico vs assimétrico — o que cada um transmite? Você tem espaço negativo intencional ou só "sobra"?
Contraste e ênfase
Contraste = diferença deliberada e forte. "Quase igual" lê como erro. → aprofunde em Tipografia · Cor
- Eixos de contraste: tamanho, peso, cor, forma (retas × curvas), direção, textura, densidade, e — o mais barato em layout — escala e espaço.
- Para diferenciar, diferencie de verdade: dois títulos de 18 e 20px parecem bug; 18 e 30px parecem hierarquia.
- O elemento de maior contraste com o entorno vira o ponto focal.
- Contraste simultâneo: um cinza parece colorido sobre um fundo saturado; conte com isso.
Timidez: mudar tudo "um pouquinho". Meio-contraste não cria hierarquia nem interesse — só parece descuido. Comprometa-se com a diferença.
✔️ Auto-checagem
Cite 4 eixos de contraste. Seus níveis de hierarquia estão "diferentes de verdade" ou só um pouco? O que é contraste simultâneo?
Ritmo, repetição e escala
Repetir cria consistência e ritmo; escalar com sistema cria harmonia. → aprofunde em Layout, Grade & Espaçamento · Design Systems & Design Tokens
- Repetição de espaçamentos, tamanhos, estilos e posições → o olho aprende o padrão uma vez; menos carga cognitiva.
- Ritmo: intervalos previsíveis (entre itens de lista, entre seções). Alternância (A-B-A-B) e progressão (crescente) dão variação sem caos.
- Escala modular: escolha uma razão (1.2, 1.25, 1.333…) e derive tamanhos a partir de uma base, em vez de valores avulsos.
- Escala de espaçamento base 4/8, em
rem— os mesmos degraus para tudo.
✔️ Auto-checagem
O que a repetição faz pela leitura? O que é uma escala modular? Sua peça usa uma escala de espaçamento ou valores "no olho"?
Alinhamento e grelha
Distância comunica relação; poucos eixos de alinhamento fazem parecer "de sistema". → aprofunde em Layout, Grade & Espaçamento
- Nada "a olho": todo elemento se alinha a algum outro (borda, eixo, linha de base).
- Um eixo forte (texto à esquerda) cria um trilho que o olho segue; centralizar tudo o destrói — use centralização por decisão, para poucos elementos.
- C.R.A.P.: Contraste, Repetição, Alinhamento, Proximidade — resolve a maioria dos layouts.
- Proximidade: espaço dentro do grupo < espaço entre grupos. Tenha ≥ 3 níveis, nunca espaçamento uniforme.
- Grelha = andaime de consistência, não prova de qualidade; quebre-a de propósito (full-bleed) quando fizer sentido.
- Alinhamento óptico > matemático (ícones, aspas, formas redondas às vezes "vazam" para parecer alinhados).
✔️ Auto-checagem
Quantos eixos de alinhamento sua tela tem? O que é C.R.A.P.? Por que espaçamento uniforme é ruim? Alinhamento óptico vs matemático?
Enquadramento e fluxo
Onde o assunto fica no quadro e por onde o olho anda. → aprofunde em Ilustração, Imagem & Arte-direção
- Regra dos terços: o foco fora do centro geométrico dá dinamismo; centralizado dá calma/formalidade.
- Centro óptico fica um pouco acima do geométrico — o que é centralizado "na conta" parece baixo; suba um tico.
- Direção do olhar: formas, linhas e o olhar de figuras guiam o olho num caminho; nada deve "sair" da composição sem querer.
- Padrões de varredura: Z (peças esparsas), F (muito texto), Gutenberg (diagonal, cantos "mortos").
- Crop e enquadramento para o uso: uma imagem que vai ao lado de texto precisa de peso no lado oposto e respiro no lado do texto; guarde um focal point.
✔️ Auto-checagem
Regra dos terços vs centralizar — quando cada um? Por que o centrado "na conta" parece baixo? O que guia o olhar numa composição?
Cor e valor na composição
Valor (claro/escuro) faz o trabalho pesado; cor tempera. → aprofunde em Cor
- Valor antes de cor: se a peça funciona em tons de cinza (hierarquia legível, foco claro), a cor só melhora. O teste da escala de cinza.
- 60-30-10: ~60% cor dominante (em UI, quase sempre neutro/superfície), ~30% secundária, ~10% acento (a cor de ação/destaque).
- Contraste de valor é o que dá legibilidade; contraste de matiz é o que dá energia.
- Temperatura: quentes avançam, frios recuam — cria profundidade.
- Acessibilidade: contraste de texto ≥ 4.5:1 / 3:1; nunca informação só por cor.
✔️ Auto-checagem
Por que "valor antes de cor"? O que é 60-30-10 e o que costuma ser os 60% numa UI? Contraste de valor vs de matiz — o que cada um dá?
Linguagens visuais e estilos
Uma "linguagem visual" é um conjunto coerente de decisões; tendência ≠ atemporal. → aprofunde em Branding
| Linguagem | Marcas visuais | Comunica |
|---|---|---|
| Swiss / International | grelha rígida, sans-serif (Helvetica/Akzidenz), muito espaço, assimetria, foto P&B, alinhamento à esquerda | ordem, clareza, neutralidade, "atemporal" |
| Flat / minimal | sem sombra/gradiente, formas simples, poucas cores | modernidade, funcionalidade (padrão de UI dos anos 2010–20) |
| Neubrutalism | bordas grossas pretas, sombras duras, cores saturadas, tipografia crua, "sem polimento" | autenticidade, energia, anti-corporativo |
| Glassmorphism | painéis translúcidos com blur, profundidade, luz | leveza, camadas, "premium" (usar com cuidado de contraste) |
| Editorial / maximalista | tipografia grande e expressiva, sobreposição, cor ousada, ruptura de grelha | personalidade, voz, "revista" |
| Memphis / pós-moderno | formas geométricas soltas, cores primárias, padrões, caos controlado | lúdico, jovem, retrô-anos-80 |
| Skeuomorfismo / neumorphism | texturas e sombras imitando o físico / relevo suave monocromático | familiaridade (skeu) / suavidade (neu — problemas sérios de contraste) |
- Escolha uma alinhada à marca e ao público, e seja coerente — meia dúzia de estilos misturados = ruído.
- Tendência tem prazo de validade. Quanto mais "da moda" o estilo, mais rápido data. Base atemporal (hierarquia, grelha, tipografia sólida) + um tempero atual é mais durável que apostar tudo na tendência.
- Uma linguagem própria nasce de decisões repetidas: as mesmas formas, o mesmo tratamento de foto, o mesmo uso de cor e tipo — documentadas (ver Branding, arte-direção).
Adotar um estilo da moda (neumorphism, glass) e descobrir que ele quebra a acessibilidade (contraste insuficiente) ou não escala para todos os componentes. Teste o estilo em texto pequeno, estados, dark mode e daltonismo antes de comprometer.
✔️ Auto-checagem
O que caracteriza o estilo Swiss? Por que "tendência ≠ atemporal"? Como nasce uma linguagem visual própria? Que estilos têm risco de contraste?
O resto do essencial
Hábitos que melhoram qualquer composição.
| Hábito | O mínimo |
|---|---|
| Teste de esguelha | desfoque os olhos (ou aplique blur): o que salta é o ponto de entrada; a ordem dos borrões é a ordem de leitura real |
| Teste da escala de cinza | tire a cor: a hierarquia e o foco continuam legíveis? Se sim, a base está sólida |
| Storyboard/thumbnails | 3–5 mini-esboços de composição antes de ir para a ferramenta — barato de errar |
| Moodboard com critério | para alinhar linguagem (forma, humor, cor), não para copiar; anote por que cada referência está ali |
| Crítica útil | descreva o efeito ("está estático, o olho não anda") e a direção ("quebre a simetria, foco fora do centro") — não "não gostei" |
| Referências fora do design | cinema, fotografia, arte, editorial — é de onde vem o "olho" |
| Coerência entre mídias | a composição da tela, do slide, do post e do vídeo deve parecer a mesma marca |
| Gosto × adequação | separe "eu gosto" de "serve ao briefing e à marca" |
✔️ Auto-checagem
Como funciona o teste de esguelha? E o da escala de cinza? Como se dá uma crítica útil? De onde vem o "olho"?
Checklist final de composição
Se você marca todos, a peça tem base sólida. Onde travar, volte à seção.
- defini um ponto de entrada claro, e a ordem visual = ordem de importância (= DOM, na web)
- criei hierarquia com 1–2 alavancas por nível (não só tamanho de fonte), em 3–5 níveis
- usei proximidade para agrupar (espaço dentro < espaço entre), com ≥ 3 níveis de espaçamento
- apliquei as leis de Gestalt conscientemente (região comum > proximidade > similaridade)
- equilibrei os pesos visuais (simétrico ou assimétrico por decisão) e tenho espaço negativo intencional
- fiz o contraste "de verdade" — nada "quase igual"
- repeti espaçamentos/tamanhos/estilos e usei uma escala modular + escala de espaçamento base 4/8
- alinhei tudo a poucos eixos; nada "a olho"; ajuste óptico onde preciso
- posicionei o foco com regra dos terços / centro óptico e dirigi o fluxo do olhar
- resolvi a peça em valor antes da cor; apliquei 60-30-10; contraste ≥ 4.5:1 e nada só por cor
- escolhi uma linguagem visual coerente com a marca, ciente do prazo de validade das tendências
- passei no teste de esguelha e no teste da escala de cinza
Aprofundamento: Layout, Grade & Espaçamento · Tipografia · Cor · Branding · Design Systems & Design Tokens · Ilustração, Imagem & Arte-direção.