# Hierarquia visual: fazer as pessoas lerem pela ordem certa

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

Todo o design é lido por alguma ordem. Se não a escolheres, escolhe o elemento mais barulhento. Eis como decidir o que vem primeiro, segundo e terceiro, e fazê-lo acontecer.

## The short version

- A hierarquia visual é a ordem pela qual as pessoas reparam nas partes de um design e as leem.
- A hierarquia controla-se 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 lugar e os detalhes no fim.
- O elemento com mais contraste em relação ao que o rodeia costuma ser o primeiro a ser visto, seja qual for o tamanho, por isso as cores de acento devem ser gastas numa só coisa.
- O teste de semicerrar os olhos, desfocar a visão até só restarem formas, mostra num relance que elemento lidera de facto.

A **hierarquia visual** é a ordem pela qual as pessoas reparam nas partes de um design e as leem. Controla-se com cinco ferramentas: **tamanho**, **peso**, **cor e contraste**, **posição** e **espaço**. Uma hierarquia clara tem uma coisa que é vista primeiro, algumas vistas em segundo lugar e detalhes que só se encontram quando alguém os procura. Sem ela, tudo compete e as pessoas não leem nada.

## As cinco ferramentas da hierarquia visual

Todas as ferramentas funcionam da mesma maneira: tornam um elemento diferente dos vizinhos. Quanto maior a diferença, mais cedo o elemento é visto. Usar várias ferramentas no mesmo elemento reforça-o; usá-las em elementos diferentes põe-nos a competir.

| Ferramenta | Como cria ênfase | Exemplo |
| --- | --- | --- |
| Tamanho | O maior é visto mais cedo | Um título com o dobro do tamanho do texto à volta |
| Peso | Traços mais pesados destacam-se | Uma data a negrito numa linha de texto regular |
| Cor e contraste | Ganha a cor mais diferente | Um acento dourado num design escuro e calmo |
| Posição | O topo e o início do sentido de leitura vêm primeiro | O título no canto superior esquerdo |
| Espaço | Os elementos isolados atraem o olhar | Uma única linha com margens largas à volta |

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

## Decide a ordem antes de desenhar

Os problemas de hierarquia são normalmente problemas de decisão. Se não decidiste o que importa mais, o design não o consegue mostrar. Antes de abrires uma ferramenta de design, ordena o conteúdo.

1. **Lista tudo** Cada texto e cada imagem que o design tem de conter.
2. **Escolhe a coisa principal** Se as pessoas se lembrarem de um só elemento, qual deve ser? Esse é o nível um.
3. **Agrupa os factos de apoio** As duas a quatro coisas de que as pessoas precisam a seguir, como uma data, um local ou uma breve explicação. Esse é o nível dois.
4. **Tudo o resto é detalhe** Nomes de utilizador, letra pequena, logótipos. Esse é o nível três, pequeno e discreto.
5. **Corta o que não encaixa** Se algo não encontra um nível, provavelmente pertence à legenda ou ao diapositivo seguinte.

Uma publicação vertical de evento com Noite de lançamento como título grande, a data por cima e três linhas curtas de detalhe por baixo

Três níveis: primeiro o nome do evento, depois a data por cima e os detalhes por baixo, cada um um degrau claramente mais pequeno.

## Tamanho e peso

O tamanho é a ferramenta mais forte, e a mais fácil de errar por timidez. Se um título é só ligeiramente maior do que o texto por baixo, os dois parecem um erro e não uma hierarquia. Torna óbvios os degraus entre níveis; uma escala tipográfica, como descrito em [bases da tipografia](https://gradiently.design/pt-pt/guide/typography-basics), mantém-nos coerentes.

### Hierarquia plana

- Título pouco maior do que o texto corrido
- Tudo a negrito, por isso 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 tamanho do texto
- Negrito guardado para as poucas palavras que têm de liderar
- Três tamanhos com degraus claros entre eles
- Um título, uma linha de apoio

## Cor e contraste

O olhar vai primeiro para o que é mais diferente do que o rodeia. Uma pequena mancha de cor viva num design escuro e calmo ganha a um elemento maior num tom apagado. Isso faz da cor de acento um orçamento: gasta-a na coisa que deve liderar, ou na ação que queres que as pessoas façam, e em mais lado nenhum.

- Fundo: #0f1222
- Tinta principal: #f5f3ee
- Tinta secundária: #a7a9be
- Acento, usado uma vez: #ffb454

Uma paleta com a hierarquia incorporada. A tinta principal tem o maior contraste com o fundo (cerca de 16.8:1), a secundária visivelmente menos (cerca de 8:1, ainda muito legível), e o acento fica reservado a um único elemento.

Baixar o contraste é a forma de empurrar coisas para trás sem as encolher: uma tinta mais suave para legendas e etiquetas mantém-nas legíveis mas atrás do título. Mantém até o texto mais discreto acima dos mínimos de [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). A [regra 60-30-10](https://gradiently.design/pt-pt/guide/60-30-10-rule) é outra forma de pensar em quanto usar de cada cor.

## Posição e sentido de leitura

Nas línguas lidas da esquerda para a direita, as pessoas tendem a começar no canto superior esquerdo e a avançar para a direita e para baixo, por isso os elementos colocados ali são vistos cedo. Nas línguas da direita para a esquerda, o canto de partida inverte-se. Os layouts centrados e simétricos começam no meio e avançam para fora, o que serve designs curtos de mensagem única, como cartazes, citações e anúncios.

A posição também pode jogar contra ti. Nos formatos para redes sociais, os controlos da plataforma tapam partes da imagem, e nas miniaturas há um selo num canto. Mantém o primeiro elemento longe dessas zonas; [design de miniaturas do YouTube](https://gradiently.design/pt-pt/guide/youtube-thumbnail-design) mostra como.

## Espaço

O espaço faz dois trabalhos. À volta de um único elemento, isola-o, e o isolamento lê-se como importância: uma linha com margens generosas pode ultrapassar um bloco de texto muito maior. Entre elementos, agrupa-os: o que está perto lê-se como parte do mesmo conjunto. Põe a data e o local perto um do outro e mais longe do título, e as pessoas leem-nos como uma única unidade de detalhe.

Uma publicação vertical com um título a anunciar doze oficinas e uma linha de apoio

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

Uma publicação vertical com um grande número 12 e as palavras oficinas este 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 queres que as pessoas recordem: a ideia ou o número.

## Como testar a hierarquia visual

- **O teste de semicerrar os olhos.** Fecha os olhos até meio ou desfoca o design. A forma que continua a destacar-se é o teu verdadeiro nível um. Se não for a que escolheste, ajusta.
- **O teste dos dois segundos.** Mostra o design a alguém durante dois segundos e pergunta o que dizia. A pessoa deve repetir o teu nível um.
- **O teste da miniatura.** Reduz o design ao tamanho em que vai aparecer num telemóvel. Os níveis dois e três podem desaparecer, e não faz mal; o nível um não pode.
- **O teste em tons de cinzento.** Tira a cor. Se a hierarquia se desmoronar, dependia do tom e não do contraste de luminosidade.

A hierarquia fica mais difícil quando o fundo é carregado ou colorido, porque o contraste muda por baixo das palavras; [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) explica como manter o nível um legível onde quer que fique. Para anúncios, onde a hierarquia mais importa, vê [como desenhar uma publicação de anúncio](https://gradiently.design/pt-pt/guide/announcement-post-design).

## FAQ

### O que é a hierarquia visual?

A hierarquia visual é a ordem pela qual as pessoas reparam nas partes de um design e as leem, controlada com tamanho, peso, cor e contraste, posição e espaço.

### Quantos níveis de hierarquia deve ter um design?

Normalmente três: um elemento visto primeiro, alguns elementos de apoio em segundo lugar e os detalhes no fim.

### O que é o teste de semicerrar os olhos?

Fecha os olhos até meio ou desfoca o design até só restarem formas. O que continuar a destacar-se é aquilo em que as pessoas vão reparar primeiro.

### O tamanho é a única forma de criar hierarquia?

Não. O peso, o contraste, a cor, a posição e o espaço criam todos ênfase, e um elemento pequeno numa cor de acento viva pode ultrapassar um maior num tom apagado.