Princípios do design gráfico: os 10 que eu uso em todo projeto

Os princípios do design gráfico são dez decisões que aparecem em qualquer peça, de um cartão de visita a um site: hierarquia, contraste, alinhamento, proximidade, repetição, espaço negativo, equilíbrio, grid, tipografia e cor. Duas peças podem ter o mesmo texto, a mesma foto e as mesmas cores e ainda assim parecer de níveis diferentes. A distância entre elas está nessas dez decisões, e nenhuma depende de programa, de talento ou de uma fonte caríssima.

Eu uso esses princípios em todo projeto que conduzo, e eles não mudam com a tendência da estação. O que muda é o seu gosto.

Os dez princípios, com a pergunta e o teste de cada um

Para cada princípio eu deixei a pergunta que faço antes de mexer na peça e o teste que mostra se ele está resolvido. Todos os testes levam um minuto e são feitos na própria peça.

Hierarquia e contraste decidem o que a pessoa vê primeiro

Hierarquia é a ordem de leitura da peça: o que aparece primeiro, o que vem depois e o que fica por último. Essa ordem existe sempre, com ou sem decisão sua. Contraste é a ferramenta que a torna visível, porque sem diferença suficiente entre os elementos a hierarquia fica na sua intenção e não na peça.

Você constrói hierarquia com cinco recursos: tamanho, peso, cor, posição e espaço em volta. Duas delas resolvem a maior parte das peças, e três níveis dão conta de quase tudo: um principal, um secundário e o resto como apoio. No contraste, o que mais funciona e menos se usa é a diferença entre claro e escuro, que o olho percebe antes da diferença de cor. Por isso eu converto a peça para escala de cinza antes de aprovar: se o texto desaparece no fundo, a combinação não serve.

E existe um número que decide isso sem achismo. A WCAG, diretriz de acessibilidade da web do W3C, publicada como recomendação em outubro de 2023 e revisada em dezembro de 2024, pede contraste mínimo de 4,5 para 1 em texto comum e 3 para 1 em texto grande, a partir de 24 px ou 18,5 px em negrito. Calculei a minha própria paleta para mostrar como isso aparece na prática:

O texto secundário fica em 4,26 sobre o areia, abaixo do mínimo para letra pequena. O mocha só serve para texto grande, e o caramelo claro nunca é cor de texto: é fundo, fio e detalhe. Nada disso precisa ser decorado, porque o verificador da WebAIM é gratuito.

Alinhamento, proximidade e grid são a estrutura que segura a peça

Esses três princípios cuidam de onde as coisas ficam. Alinhamento diz que nada entra na página por acaso, proximidade organiza a informação em grupos usando só distância, e grid é a malha invisível que você monta antes de colocar qualquer elemento.

Em alinhamento, o erro mais comum de quem está começando é centralizar tudo, porque centralizar parece seguro. Escolher um eixo, em geral a margem esquerda, e levar tudo até ele cria uma linha vertical que o olho sente sem ver. Mais traiçoeiro é o quase alinhado: em um post meu que eu refiz, o @ estava seis pixels fora do nome, e isso basta para o conjunto parecer torto.

Proximidade tem origem fora do design. Em 1923, Max Wertheimer publicou na revista Psychologische Forschung o estudo que descreve as leis de agrupamento da Gestalt, entre elas a proximidade: o olho junta o que está perto antes de a pessoa pensar sobre aquilo. A medida prática que vem disso vale em um cartão como em uma página de site: o espaço entre os grupos precisa ser claramente maior que o espaço dentro de cada grupo. Se dentro do grupo há 8 px, entre um grupo e outro use 24 px ou mais.

O grid tem três partes: margens, colunas e o espaço entre colunas, que em inglês se chama gutter. A largura da coluna sai de uma conta:

(largura total − as duas margens − espaço entre colunas × número de espaços) ÷ número de colunas

Nos meus slides, com 1920 px de largura, margens de 120 px, 12 colunas e 24 px entre elas: (1920 − 240 − 11 × 24) ÷ 12 = 118 px por coluna. Doze colunas são tão usadas na web porque doze se divide por dois, três, quatro e seis. Em post e cartão, quatro colunas já resolvem.

Repetição e espaço negativo são onde a peça começa a virar marca

Repetição é a regra de que elementos com a mesma função têm sempre a mesma aparência: a mesma fonte nos títulos, a mesma medida de margem, o logotipo na mesma posição, a cor de acento sempre para a mesma coisa. Espaço negativo é o vazio que você desenha de propósito. Os dois trabalham na escala do conjunto.

O teste da repetição cabe em um minuto: pegue três peças da mesma marca, cubra o logotipo e pergunte se ainda dá para saber de quem são. Se não der, existem peças, e ainda não existe um sistema. O exemplo mais conhecido é o manual de padrões gráficos do metrô de Nova York, feito por Massimo Vignelli e Bob Noorda em 1970, que define fonte, cores, setas e a posição de cada placa. A sinalização continua reconhecível mais de cinquenta anos depois.

O espaço, por sua vez, é um dos sinais de valor mais rápidos que existem. Quando uma marca preenche cada canto, ela costuma parecer mais barata do que é, mesmo com um trabalho excelente. Então, quando uma peça não funciona, eu tento tirar antes de acrescentar. Isso não vale para tudo: varejo popular e comunicação que precisa de energia podem ser mais densas, e funcionam bem quando a densidade também é uma decisão.

Tipografia e cor são os princípios que aparecem primeiro em uma peça amadora

Tipografia e cor fecham a lista porque são as duas em que o excesso se vê de longe: fonte demais, fonte sem papel, texto apertado, cinco cores sem função. A regra é a mesma nos dois casos: cada escolha precisa de um motivo.

Em tipografia, duas famílias por peça bastam, e muitas vezes uma só, com pesos diferentes, já dá a hierarquia inteira. Quando precisar diferenciar algo, mude tamanho, peso ou caixa alta, em vez de chamar uma fonte nova. Na minha marca, a Remaximina fica nos títulos, a Inter no texto e a manuscrita só em anotação. Cada uma tem um papel.

Três medidas evitam a maioria dos problemas de leitura. A entrelinha de texto corrido fica entre 1,4 e 1,6 vez o tamanho da letra, e a WCAG recomenda pelo menos 1,5 em parágrafos no nível mais exigente. O comprimento da linha fica entre 45 e 75 caracteres, com 66 como referência, segundo Robert Bringhurst em Elementos do estilo tipográfico. O tracking você só ajusta em título, e sempre fechando um pouco: em título grande o espaçamento que serve ao texto corrido fica largo demais, e em caixa alta o ajuste é menor do que em caixa alta e baixa.

Para os tamanhos, use uma escala em vez de escolher no chute: um tamanho base multiplicado sempre pelo mesmo número.

Em cor, a pergunta útil é para que serve cada uma. Uma paleta organizada tem base (o fundo, que aparece mais), apoio (blocos e fundo de seção), acento (chama atenção e aparece pouco) e neutros (as cores que precisam ser lidas). A proporção pesa mais que a escolha das cores, e a referência de 60, 30 e 10, que vem da decoração de interiores, lembra que o acento precisa ser pouco para continuar sendo acento. Josef Albers demonstrou em A interação da cor, de 1963, que a mesma cor é percebida de formas diferentes conforme o entorno, então cor se decide na aplicação, nunca na amostra isolada.

Como eu refaço uma peça, na ordem

A ordem em que você mexe economiza trabalho, porque ajustar a cor antes de resolver a hierarquia costuma significar refazer a cor depois. A sequência que eu sigo é esta:

1. Decidir o nível um: a única coisa que a pessoa precisa entender.
2. Tirar o que não tem função (moldura, sombra, texto de preenchimento) e devolver a margem.
3. Montar o grid: margens, colunas e espaço entre colunas.
4. Alinhar tudo a um eixo, inclusive o elemento que está a poucos pixels da linha.
5. Reduzir a tipografia a duas famílias e ajustar entrelinha e tracking no título.
6. Agrupar a informação, com mais espaço entre os grupos do que dentro deles.
7. Transformar listas longas em estrutura, com numeração ou colunas.
8. Definir a cor por papel, com um acento só.
9. Fazer os três testes: escala de cinza, desfoque e leitura no celular.
10. Conferir a peça ao lado das outras da marca, para ver se pertence ao mesmo sistema.

Perguntas frequentes

O que são os princípios do design gráfico? São as decisões que organizam qualquer peça visual: hierarquia, contraste, alinhamento, proximidade, repetição, espaço negativo, equilíbrio, grid, tipografia e cor. Valem para cartão, post, apresentação, embalagem e site, e não dependem de programa nenhum.

Preciso saber desenhar para aplicar esses princípios? Não. Eles tratam de onde as coisas ficam, de quanto espaço existe entre elas e de que diferença existe entre uma e outra. Funcionam no Illustrator, no Figma, no Canva ou no papel.

Quantas fontes eu posso usar em uma peça? Duas famílias dão conta de quase tudo: uma para título, uma para texto. Quando precisar de mais hierarquia, mude tamanho, peso ou caixa alta, em vez de acrescentar uma terceira fonte.

Qual princípio eu corrijo primeiro quando a peça não está funcionando? Hierarquia. Decida qual é a única coisa que a pessoa precisa entender e organize o resto em volta. Boa parte dos problemas de contraste, de espaço e de cor se resolve junto.

Dá para aprender design gráfico sozinha? A lógica, dá: observar projetos bons e entender por que funcionam leva você longe. O que acelera é ter o nome das decisões e alguém apontando o erro na sua peça.