Resumindo
- Hierarquia visual é a ordem em que as pessoas percebem e leem as partes de um design.
- A hierarquia é controlada com cinco ferramentas: tamanho, peso, cor e contraste, posição e espaço.
- A maioria dos designs não precisa de mais de três níveis: uma coisa vista primeiro, algumas vistas em segundo e os detalhes por último.
- O elemento com mais contraste em relação ao entorno costuma ser visto primeiro, seja qual for o tamanho, então as cores de destaque devem ser gastas em uma coisa só.
- O teste de apertar os olhos, borrar a vista até sobrarem só formas, mostra de relance qual elemento realmente lidera.
Nesta página
Hierarquia visual é a ordem em que as pessoas percebem e leem as partes de um design. Você a controla com cinco ferramentas: tamanho, peso, cor e contraste, posição e espaço. Uma hierarquia clara tem uma coisa vista primeiro, algumas vistas em segundo e detalhes que só são encontrados quando alguém procura por eles. Sem ela, tudo compete e as pessoas não leem nada.
As cinco ferramentas da hierarquia visual
Todas as ferramentas funcionam do mesmo jeito: deixam um elemento diferente dos vizinhos. Quanto maior a diferença, mais cedo o elemento é visto. Usar várias ferramentas no mesmo elemento o reforça; usá-las em elementos diferentes os coloca para competir.
| Ferramenta | Como cria ênfase | Exemplo |
|---|---|---|
| Tamanho | O maior é visto antes | Um título com o dobro do tamanho do texto em volta |
| Peso | Traços mais pesados se destacam | Uma data em negrito em uma linha de texto regular |
| Cor e contraste | A cor mais diferente vence | Um único destaque dourado em um design escuro e calmo |
| Posição | O topo e o início da direção de leitura vêm primeiro | O título no canto superior esquerdo |
| Espaço | Elementos isolados atraem o olhar | Uma única linha com margens largas em volta |
Decida a ordem antes de criar
Problemas de hierarquia costumam ser problemas de decisão. Se você não decidiu o que importa mais, o design não tem como mostrar. Antes de abrir uma ferramenta de design, classifique o conteúdo.
- 1
Liste tudo
Cada trecho de texto e cada imagem que o design precisa conter.
- 2
Escolha a coisa principal
Se as pessoas lembrarem de um só elemento, qual deveria ser? Esse é o nível um.
- 3
Agrupe as informações de apoio
As duas a quatro coisas de que as pessoas precisam em seguida, como uma data, um lugar ou uma explicação curta. Esse é o nível dois.
- 4
Todo o resto é detalhe
Perfis, letras miúdas, logos. Esse é o nível três, pequeno e discreto.
- 5
Corte o que não se encaixa
Se algo não encontra um nível, provavelmente pertence à legenda ou ao próximo slide.
Três níveis: primeiro o nome do evento, depois a data acima e os detalhes abaixo, cada um um degrau bem menor.
Tamanho e peso
O tamanho é a ferramenta mais forte, e a mais fácil de errar por timidez. Se um título é só um pouco maior que o texto abaixo, os dois parecem um erro e não uma hierarquia. Deixe os degraus entre os níveis evidentes; uma escala tipográfica, como a descrita em noções básicas de tipografia, mantém esses degraus consistentes.
Hierarquia achatada
- Título quase do tamanho do texto corrido
- Tudo em negrito, então nada se destaca
- Quatro tamanhos diferentes quase iguais
- Dois títulos com o mesmo peso
Hierarquia clara
- Título com pelo menos cerca do dobro do texto corrido
- Negrito reservado às poucas palavras que devem liderar
- Três tamanhos com degraus claros entre eles
- Um título, uma linha de apoio
Cor e contraste
O olho vai primeiro para o que é mais diferente do entorno. Uma pequena mancha de cor viva em um design escuro e calmo vence um elemento maior em um tom apagado. Isso faz da cor de destaque um orçamento: gaste com a única coisa que deve liderar, ou com a ação que você quer que as pessoas tomem, e em nenhum outro lugar.
Baixar o contraste é como você empurra coisas para trás sem diminuí-las: uma cor mais suave para legendas e rótulos os mantém legíveis, mas atrás do título. Mantenha até o texto mais discreto acima dos mínimos de contraste de cores. A regra 60 30 10 é outro jeito de pensar em quanto usar de cada cor.
Posição e direção de leitura
Em idiomas lidos da esquerda para a direita, as pessoas tendem a começar no canto superior esquerdo e seguir para a direita e para baixo, então os elementos colocados ali são vistos cedo. Em idiomas da direita para a esquerda, o canto inicial se inverte. Layouts centralizados e simétricos começam no meio e se abrem para fora, o que combina com designs curtos de mensagem única, como pôsteres, citações e anúncios.
A posição também pode jogar contra você. Nos formatos de redes sociais, os controles da plataforma cobrem partes da imagem, e nas thumbnails um selo fica no canto. Mantenha o primeiro elemento longe dessas áreas; design de thumbnail para YouTube mostra como.
Espaço
O espaço faz dois trabalhos. Em volta de um único elemento, ele o isola, e isolamento se lê como importância: uma linha com margens generosas pode superar um bloco de texto bem maior. Entre elementos, ele agrupa: coisas próximas são lidas como coisas que andam juntas. Coloque a data e o lugar perto um do outro e mais longe do título, e as pessoas vão ler os dois como uma unidade de detalhe.
As palavras lideram: o título traz a novidade e o detalhe apoia.
Um número lidera: o mesmo conteúdo, reordenado para que o número seja visto primeiro.
O mesmo conteúdo pode sustentar hierarquias diferentes. A escolha depende do que você quer que as pessoas lembrem: a ideia ou o número.
Como testar a hierarquia visual
- O teste de apertar os olhos. Feche os olhos pela metade ou borre o design. A forma que ainda se destaca é o seu verdadeiro nível um. Se não for a que você escolheu, ajuste.
- O teste dos dois segundos. Mostre o design a alguém por dois segundos e pergunte o que ele dizia. A pessoa deve repetir o seu nível um.
- O teste da miniatura. Reduza até o tamanho em que vai aparecer no celular. Os níveis dois e três podem sumir, e tudo bem; o nível um não pode.
- O teste em tons de cinza. Tire a cor. Se a hierarquia desmoronar, ela dependia do matiz e não do contraste de luminosidade.
A hierarquia fica mais difícil quando o fundo é carregado ou colorido, porque o contraste muda embaixo das palavras; texto sobre gradiente mostra como manter o nível um legível onde quer que ele fique. Para anúncios, onde a hierarquia importa mais, veja como criar um post de anúncio.
Perguntas frequentes
O que é hierarquia visual?
Hierarquia visual é a ordem em que as pessoas percebem e leem as partes de um design, controlada com tamanho, peso, cor e contraste, posição e espaço.
Quantos níveis de hierarquia um design deve ter?
Geralmente três: um elemento visto primeiro, alguns elementos de apoio em segundo e os detalhes por último.
O que é o teste de apertar os olhos?
Feche os olhos pela metade ou borre o design até sobrarem só formas. O que ainda se destaca é o que as pessoas vão perceber primeiro.
O tamanho é o único jeito de criar hierarquia?
Não. Peso, contraste, cor, posição e espaço também criam ênfase, e um elemento pequeno em uma cor de destaque viva pode superar um maior e apagado.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
