A versão curta
- 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.
Nesta página
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 |
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.
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, 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.
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. A regra 60-30-10 é 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 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.
As palavras lideram: o título traz a novidade e o detalhe apoia-a.
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 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
