MyLeoNes™

Hierarquia visual — Design, 14–17 anos

A hierarquia visual guia o olhar através de uma mensagem. O tamanho, o contraste, o espaço, a cor e a posição indicam o que se deve notar primeiro, o que vem depois e o que pode esperar.

Ideia

As pessoas não lêem todas as partes de uma página, cartaz ou aplicação com a mesma atenção. Uma hierarquia visual cria uma ordem: a mensagem principal destaca-se, a informação de apoio segue-se e os pormenores ficam disponíveis sem competir. Os designers constroem esta ordem para que o observador compreenda rapidamente a mensagem e saiba onde olhar a seguir.

Porquê

Sem hierarquia, todos os elementos pedem atenção ao mesmo tempo e o observador tem de descobrir o que importa. Este é um problema de comunicação, não apenas de decoração. Os designers usam hierarquia porque a atenção é limitada: uma ordem clara pode ajudar alguém a encontrar uma instrução de emergência, um preço ou o botão seguinte sem perder tempo.

Exemplo resolvido

Imagina um cartaz para um concerto escolar. Primeiro, escreve “sexta-feira, 18 de Outubro” em tamanho grande e com muito contraste, porque a data é essencial. Depois, coloca o nome da banda um pouco mais pequeno, a hora e a sala a seguir, e por fim os bilhetes no texto mais pequeno. Deixa espaço à volta da mensagem principal para que uma imagem colorida não a domine.

Erro comum

Um erro compreensível é tornar tudo grande, carregado ou muito colorido para que nada pareça desimportante. O resultado é que o olhar não tem um ponto de partida claro. Os designers cometem este erro porque cada parte pode parecer importante quando é vista isoladamente. Compara a página inteira: a hierarquia depende das relações entre os elementos.

Onde se usa

A hierarquia visual é usada em sites de notícias, mapas, menus, embalagens, apresentações e sinais públicos. Um horário de comboios torna o destino e a hora de partida fáceis de encontrar antes de mostrar notas sobre a plataforma. O mesmo princípio ajuda o ecrã de um telemóvel a mostrar a acção principal sem esconder escolhas secundárias úteis.

Continua a explorar

Outras línguas

A carregar o MyLeoNes™…