Hierarquia Visual e Espaçamento em UI Design ver no navegador
Aula 1
6 minutos de leitura
O que é hierarquia visual?

Provavelmente você já se deparou com uma interface bonita, agradável e confortável aos olhos, não é mesmo? Aposto até que pensou: "Eu queria ter feito isso". A boa notícia é que você pode! 

Isso que você sentiu e que da a impressão de que está tudo perfeito, leva como base esses três aspectos simples:

Orientação, que nada mais é do que levar o usuário de ação em ação sem que ele se sinta pressionado ou coagido para navegar. 

Comunicação, que precisa ser clara e criar links na mente do usuário com o propósito de diminuir a carga cognitiva que ele recebe. 

Impacto emocional, isso quer dizer que sua interface não precisa ser mecânica e quadrada. Foque em torná-la divertida e fácil de usar.

Em resumo, você pode levar em conta que você tem três objetivos a cumprir quando for projetar uma interface. Ela precisa orientar o usuário, comunicar com propósito e causar impacto emocional. Mas não se desespere, nós podemos alcançar (ou chegar bem perto) apenas fazendo uso de hierarquia visual e o uso correto de espaçamentos.

Hierarquia visual:

Para explicar em poucas palavras o que é hierarquia visual, vou colocar na íntegra uma frase que li uma vez em um e-book (o link para ele estará no final do curso como apoio)

"A hierarquia visual é a diferença entre um site que influencia estrategicamente o fluxo e as decisões do usuário e um site que apenas "parece legal"."

Em termos simples, é ela que irá determinar quais elementos receberão atenção do usuário, atraindo seus olhos diretamente par eles. Isso pode acontecer para promover algum conteúdo específico, incentivar inscrições em newsletters ou cliques em call to actions. Além disso, é responsável por melhorar a experiência em um âmbito geral e fazendo que cada usuário aprecie sua visita em vez de apenas cumprir metas.

Site do iFood tem boa hierarquia tipográfica e espaçamentos

Não há dúvidas que a orientação do usuário seja o principal objetivo, contudo há um forte apelo estético por trás da hierarquia, deixando a interface naturalmente mais bonita em comparação as que não possuem qualquer ordem na disposição dos elementos.  

Essa ordenação pode acontecer em várias "frentes", mas para facilitar o entendimento das próximas aulas, vamos assumir que existem esses três tipos de hierarquia: tipográfica, por cor e por tamanho. Além disso, vamos complementar com duas características que são fundamentais para alcançar uma boa hierarquia: contraste e espaçamento. 

Ao longo dos próximos e-mails iremos aprender um pouco mais sobre cada um dos itens acima e ver a diferença enorme que fazem quando bem aplicados em uma interface.

⚠️ 👨🏻‍🏫

Se surgir alguma dúvida e você for inscrito no Plano Topzera 💎 , basta responder esse email para receber meu suporte em até 24 horas de segunda à sexta.

Willian Matiola
Grande abraço!
Welliton Matiola, Co-fundador da UI Lab
Instagram: @wellitonmatiola
UI Lab

Tv. Germano Magrin, 100 Ed. Pathernon Sala 501, Caixa Postal 136, Criciúma - Brasil

O melhor lugar para ser um UI Designer melhor!

⚠️Não receber mais emails (Unsubscribe) ⚠️