# Hierarquia visual: como fazer as pessoas lerem na ordem certa

[Canonical HTML page](https://gradiently.design/pt-br/guide/visual-hierarchy)

Todo design é lido em alguma ordem. Se você não escolher, o elemento mais barulhento escolhe. Veja como decidir o que vem primeiro, em segundo e em terceiro, e como fazer isso acontecer.

## The short version

- 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.

**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 |

As cinco ferramentas. A maioria dos designs fortes usa duas ou três delas no mesmo elemento principal.

## 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.

Um post de evento vertical com Noite de lançamento como título grande, a data acima e três linhas curtas de detalhes abaixo

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](https://gradiently.design/pt-br/guide/typography-basics), 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.

- Fundo: #0f1222
- Texto principal: #f5f3ee
- Texto secundário: #a7a9be
- Destaque, usado uma vez: #ffb454

Uma paleta com hierarquia embutida. O texto principal tem o maior contraste com o fundo (cerca de 16,8:1), o secundário bem menos (cerca de 8:1, ainda muito legível) e o destaque fica reservado para um único elemento.

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](https://gradiently.design/pt-br/guide/color-contrast-accessibility). A [regra 60 30 10](https://gradiently.design/pt-br/guide/60-30-10-rule) é 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](https://gradiently.design/pt-br/guide/youtube-thumbnail-design) 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.

Um post vertical com um título anunciando doze oficinas e uma linha de apoio

As palavras lideram: o título traz a novidade e o detalhe apoia.

Um post vertical com um grande número 12 e as palavras oficinas neste outono

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](https://gradiently.design/pt-br/guide/text-on-gradient) 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](https://gradiently.design/pt-br/guide/announcement-post-design).

## FAQ

### 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.