Hierarquia
Visual
12 princípios que você necessita conhecer
antes de começar a fazer seus designs
Apredendo sobre a
hierarquia de forma
descomplicada
A hierarquia visual é basicamente a forma como a gente organiza os elementos
num design para guiar o olhar de quem vê. Não é só estética — é sobre fazer o
público entender o que é mais importante e a sequência certa de consumo da
informação, de forma natural e sem esforço.
É como se fosse uma parceria com a Arquitetura da Informação: a arquitetura
organiza os dados de forma lógica e a hierarquia visual destaca o que deve brilhar
primeiro. Então, no design, você vê um título grandão lá em cima e depois os
elementos vão diminuindo, de acordo com o peso de cada informação.
Se o público precisa pensar muito para saber o que ler depois, é porque a hierarquia
visual falhou. Ela precisa criar um fluxo automático. Por exemplo:
VOCÊ
e você pode voltar para ler essa frase ou não.
VAI LER ISSO
PRIMEIRO.
E depois vai ler isso em seguida.
Você vai querer ler este texto se desejar obter mais informações sobre
E provavelmente
o assunto, pois ele contém uma quantidade considerável de informações
você vai ler isso
mesmo sendo compacto e com um espaçamento não ideal. Muitas
antes do
pessoas provavelmente vão pular este parágrafo, por isso é importante
parágrafo.
dar atenção à hierarquia da informação.
01
01 Tamanho dos
elementos:
Coisa grande chama atenção. Simples. Um título gigante grita
mais que o subtítulo pequeno. Escala é tudo: comparar tamanhos
diferentes cria foco e equilíbrio.
Font: [Link]
Quanto maior, melhor! Certo? Bom, embora esse seja um ditado
super conhecido, ele ainda é bastante controverso e pode ter
sentido em algumas circunstâncias e pode não ter sentido em
outras. Mas uma coisa é inegável, o tamanho dos elementos da
hierarquia visual de um design é ferramenta mais eficiente para se
enfatizar a importância de uma determinada informação.
Já que os elementos maiores
chamam mais atenção do que
os elementos menores.
Simples assim.
02
E é exatamente por isso que as manchetes dos Jornais recebem
aquelas fontes super dimensionadas e é pelo menos motivo que
os cartazes de promoção sempre possuem a boa e velha OFERTA
em caixa alta e com uma cor super chamativa.
02 Perspectiva:
Usar profundidade dá a sensação de distância e movimento. O
que é maior parece mais próximo, então pega mais atenção. A
perspectiva certa ajuda a contar a história visualmente.
Font: [Link]
Ao aplicar corretamente as técnicas de perspectiva, os designers
podem criar uma ilusão de profundidade que pode variar de
alguns centímetros a vários quilômetros. Esse é um dos momentos
em que a arte imita realmente a vida, já que nós nos pegamos
admirando essas ilusões de profundidade o tempo inteiro em
nossas vidas.
Ao utilizar a perspectiva adequada, podemos empregar efeitos
de escala e proporção para comunicar com precisão a distância
apropriada. Um desenho de um trecho de cinco milhas de estrada
terá um recuo muito mais acentuado do que um trecho de meia
milha desenhado na mesma tela e com o mesmo tamanho.
03
03 Contraste de cores:
Cores fortes e diferentes saltam na frente das cores apagadas.
Uma frase colorida num texto cinza, por exemplo, vai pular aos
olhos. Mas é importante não exagerar pra não virar bagunça.
Font: [Link]
Da mesma forma como damos uma maior importância para
elementos visuais maiores, em comparação com elementos
menores dentro do mesmo design, também temos a tendência de
dar mais importância para os elementos que possuem cores mais
fortes e brilhantes, quando comparados com elementos visuais
com cores mais opacas.
As combinações de cores usadas em um design e como elas se
relacionam entre si são conhecidas como seu esquema de cores.
A escolha do esquema de cores de um design pode criar unidade,
harmonia, ritmo e equilíbrio numa criação, mas também pode criar
contraste e ênfase.
Um design que usa muitas cores contrastantes, pode acabar
dando a impressão de ser um design desorganizado e incoerente.
O mesmo pode ser dito de designs que usam um esquema de
cores que não trabalha com a teoria das cores. Mas escolher a
melhor paleta envolve muito mais do que escolher aleatoriamente
uma combinação monocromática, complementar ou tetrádica.
04
As cores semelhantes podem ser usadas para agrupar elementos
que se relacionam num design, e a escolha da cor pode até
sugerir peso e distância. Cores mais quentes, como vermelho e
amarelo, avançam para o primeiro plano de um design que utiliza
um fundo escuro, enquanto as cores frias, como azul ou verde,
geralmente recuam para o fundo.
O oposto ocorre com um design que possui um fundo claro: as
cores frias, como azul e verde, parecem mais próximas do que as
cores quentes. E isso não é teoria, é ciência, afinal de contas, é
assim que o olho humano percebe as cores.
Font: [Link]
Portanto, a escolha das cores de um design pode afetar a
capacidade dos espectadores de identificar uma figura no fundo
de um design. E da mesma forma, misturar cores quentes e frias
pode criar profundidade, assim como as técnicas de perspectiva.
Combinações de cores eficientes e bem elaboradas não
dependem apenas da posição de cada matiz na roda de cores,
mas também do seu calor e do contraste com as cores
circundantes.
05
04 Uso de fontes:
Mudança de tamanho e peso da fonte organiza e prioriza a
informação. Cabeçalho maior, subtítulo um pouco menor, corpo do
texto normalzinho. Se tudo tem o mesmo tamanho, ninguém sabe
o que é mais importante.
Font: [Link]
Vamos pensar em um esboço, pense em um índice tradicional ou
um sumário. Geralmente, cada um deles é composto por vários
tamanhos de fontes, com títulos principais em um peso maior do
que subseções e os detalhes menores.
É exatamente sobre isso que vamos falar. Usar fontes com
tamanhos e pesos variados não só enfatiza as informações mais
importantes, mas também te ajuda a organizar o design geral de
um documento ou qualquer outro tipo de arte que precise de
muitos textos.
As hierarquias tipográficas podem ser criadas com texto de vários
tamanhos, pesos e espaçamento, ou com uma combinação
desses elementos. Mesmo que você esteja usando uma única
fonte, variar seu tamanho e peso não apenas traz a atenção para
os elementos mais importantes, mas também cria uma
composição geral que é fácil de ser lida e entendida.
06
Font: [Link]
Da mesma forma, um design que apresenta uma série de fontes
que possuem o mesmo tamanho e peso não consegue fazer com
que os leitores se foquem em um ponto específico do conteúdo,
eliminando assim a hierarquização das informações apresentadas.
E é exatamente por isso que a maioria dos programas de web-
design oferecem uma hierarquia pré-definida que consiste em
fontes de título, subtítulo e título graduado, além de fontes
específicas para o corpo do texto.
Você viu este design aqui em cima? Ele daria a impressão de ser
mais organizado e fácil de ler se todas as palavras fossem do
mesmo tamanho, ou ele seria mais legível se os princípios de
hierarquia visual das fontes fossem aplicados?
Acho que nem precisamos responder essa pergunta, não é
mesmo?
07
05 Espaçamento
(espaço negativo):
Deixar "respiro" no design valoriza o que importa. Espaço vazio não
é desperdício — é estratégia. Ele direciona o olhar e dá foco aos
elementos principais.
Font: [Link]
Um dos princípios mais básicos sobre as composições visuais, diz
respeito aos elementos visuais que você deixa fora do seu design.
Conforme a regra do espaçamento, um design esteticamente
agradável requer uma determinada parcela de espaço negativo
livre de elementos. O espaço negativo também é chamado muitas
vezes de "espaço branco", mas isso não tem nada a ver com a cor
do plano de fundo do design. O espaço negativo é basicamente
um espaço do design que não possui nenhum recurso visual.
Quando organizamos os elementos de uma composição,
podemos usar os espaços negativos ao redor dos elementos
visuais em destaque para chamar ainda mais a atenção para
aquele elemento específico.
08
Por exemplo, vamos pensar em único elemento disposto em um
fundo branco. Todo esse espaço negativo em torno desse
elemento destaca ainda mais a importância dele. Podemos usar
como um exemplo muito claro, o logo da FedEx, que é
basicamente a palavra "FedEx" disposta em um fundo branco,
simples, mas ainda sim muito chamativo.
Usar os espaços negativos de maneira estratégica pode ser uma
grande oportunidade para atrair a atenção dos espectadores e
direcionar seu comportamento numa determinada página e até
mesmo direcionar uma sequência lógica de ações. Em outras
palavras, podemos dizer que usar corretamente os espaços
negativos pode funcionar como uma espécie de CTA subjetivo.
06 Proximidade
dos elementos:
O que está junto, a gente entende como relacionado. Se você quer
mostrar conexão, agrupe. Se quiser separar ideias, separe
fisicamente.
Font: [Link]
09
A proximidade, ou a posição em que os elementos estão
dispostos em relação uns aos outros, é um dos elementos mais
básicos de uma composição visual. Agrupar os elementos que
possuem uma determinada relação entre si, transmite aos
espectadores a clara noção de que aqueles elementos estão de
fatos relacionados uns com os outros.
Pense em uma tela branca com um grupo de cinco pontos de um
lado e um único ponto do outro lado. Nossa primeira suposição
sempre será de que os cinco pontos mais próximos uns dos
outros são, de fato, um grupo.
07 Espaço negativo
como destaque:
Além de agrupar, o espaço vazio também ajuda a destacar
elementos. Quanto mais "sozinho" visualmente, mais foco aquele
item ganha.
Font: [Link]
Da mesma forma como o agrupamento de elementos visuais cria
a noção de relação, utilizar o espaço negativo em torno de
elementos centrais pode te ajudar a criar um maior foco de
atenção para esses elementos e isso facilita a diferenciação entre
distintos grupos de elementos.
10
O espaço vazio e negativo não só facilita a compreensão das
informações pelos leitores, mas também pode te ajudar a criar
foco, já que os elementos circundados por espaços negativos
significativos se destacam do restante da composição, atraindo
assim o foco visual dos espectadores.
Composições que não contam com um amplo espaço negativo
podem fazer com que o design tenha um aspecto confuso,
abarrotado e caótico. Em outras palavras, quando se trata da
quantidade de elementos visuais em um design, podemos dizer
que menos é mais.
Mas é claro que isso varia de design para design e é preciso levar
sempre em consideração o estilo de design que está sendo
aplicado e o objetivo central daquele design.
Designers experientes podem até utilizar o espaço negativo para
sugerir uma mensagem visual adicional. Basta pensar na "seta"
implícita no centro do famoso logotipo da FedEx, ou o design da
Coca-Cola, acima.
08 Alinhamento:
Organizar elementos na mesma linha ou eixo passa ordem, lógica.
Pode ser alinhado à esquerda, ao centro, depende do tipo de
design, mas desalinhamento sem propósito só causa confusão.
Font: [Link]
11
O alinhamento dos elementos numa composição gráfica faz parte
da arquitetura de informação aplicada a um determinado design. É
o alinhamento dos elementos visuais que determina que os
elementos não sejam, ou sejam, dispostos aleatoriamente dentro
da composição.
Muitos designs visuais são centralizados ou justificados, o que
significa que eles estão espaçados em uma página para que
compartilhem as margens da esquerda e da direita. Se as palavras
fossem espalhadas aleatoriamente por uma página em todas as
direções, elas criariam um cenário bastante confuso e isso tornaria
o processo de compreensão daquele conteúdo em um verdadeiro
caos.
Os designs que optam por alinhamentos à direita são
frequentemente empregados para fornecer equilíbrio a um design
geral que pode ser visualmente mais pesado no lado esquerdo. Da
mesma forma, alinhamentos à esquerda podem oferecer o
mesmo efeito no cenário inverso.
09 Grupos ímpares:
Quando a gente monta grupos de 3 ou 5 elementos, é mais
agradável ao olhar do que 2 ou 4. Sempre sobra um no meio para
ser o foco da atenção.
Font: [Link]
12
A regra dos ímpares permite que os designers coloquem foco em imagens
específicas ao posicionar esses elementos no centro de um grupo. Ao colocar
um número par de objetos ao lado de um elemento, que se pretende ser o
elemento central do design, você consegue trazer o foco visual para esse
elemento.
Por exemplo, elaborar uma composição que apresente um grupo com um ou
três elementos é mais visualmente agradável do que criar uma composição
com 2 ou 4 elementos.
Ou seja, os grupos que consistem em um número ímpar de objetos são quase
sempre considerados mais interessantes e esteticamente mais agradáveis do
que grupos pares. Por quê? As pessoas se sentem mais confortáveis com o
equilíbrio gerado nas composições de elementos ímpares.
Isso acontece porque ao se trabalhar com elementos visuais ímpares, você
sempre terá um elemento visual de foco, posicionado no centro da composição,
e um número equilibrado (par) de elementos vizinhos. Esse equilíbrio é mais
agradável, visualmente falando.
10 Repetição:
Repetir cores, fontes ou formas gera unidade no design. Um
padrão repetido cria uma identidade, facilita a leitura e ajuda o
público a entender o que é clique, o que é título, o que é corpo de
texto...
Font: [Link]
13
Assim como a utilização do contraste pode enfatizar e trazer atenção para
determinados elementos dentro do seu design, a repetição de elementos pode
te ajudar a criar uma noção de unidade, o que aumenta a compreensão e o
reconhecimento do design.
Para entender isso, basta pensar na maioria dos textos publicados. Os designs
das páginas são organizados de tal forma que o corpo do texto é sempre
composto por uma única fonte, enquanto os cabeçalhos dos capítulos utilizam
outra fonte e as notas de rodapé usam uma terceira fonte. E todos esses
elementos são consistentes ao longo de toda a publicação. Esta repetição de
estilo cria um trabalho coeso, reconhecido como um todo.
Para se criar um design unificado, tente repetir algum elemento, seja uma fonte,
uma cor, uma forma ou o tamanho de algum elemento durante toda a sua
composição. Estilos consistentes ajudam a definir claramente a hierarquia visual
de qualquer design.
A repetição também pode dar um novo significado aos elementos da sua
composição. Com que frequência o texto sublinhado de azul se destaca numa
página? O suficiente para que as pessoas compreendam instantaneamente
que qual marcação é um hiperlink, certo?
Repetir este estilo em um design diz ao seu público onde clicar para obter mais
informações. E aqui fica um questionamento para você, quais são os outros
elementos que podem ser repetidos no seu design para se criar um sentido
adicional? Ou uma mensagem adicional?
11 Linhas que
direcionam o olhar:
Linhas, até invisíveis (como a sequência de imagens), puxam o
olhar para onde a gente quer. Isso cria movimento e ritmo na
leitura.
14
Font: [Link]
Assim como a utilização do contraste pode enfatizar e trazer atenção para
determinados elementos dentro do seu design, a repetição de elementos pode
te ajudar a criar uma noção de unidade, o que aumenta a compreensão e o
reconhecimento do design.
Para entender isso, basta pensar na maioria dos textos publicados. Os designs
das páginas são organizados de tal forma que o corpo do texto é sempre
composto por uma única fonte, enquanto os cabeçalhos dos capítulos utilizam
outra fonte e as notas de rodapé usam uma terceira fonte. E todos esses
elementos são consistentes ao longo de toda a publicação. Esta repetição de
estilo cria um trabalho coeso, reconhecido como um todo.
Para se criar um design unificado, tente repetir algum elemento, seja uma fonte,
uma cor, uma forma ou o tamanho de algum elemento durante toda a sua
composição. Estilos consistentes ajudam a definir claramente a hierarquia visual
de qualquer design.
A repetição também pode dar um novo significado aos elementos da sua
composição. Com que frequência o texto sublinhado de azul se destaca numa
página? O suficiente para que as pessoas compreendam instantaneamente
que qual marcação é um hiperlink, certo?
Repetir este estilo em um design diz ao seu público onde clicar para obter mais
informações. E aqui fica um questionamento para você, quais são os outros
elementos que podem ser repetidos no seu design para se criar um sentido
adicional? Ou uma mensagem adicional?
15
12 Uso de grids:
Grids ajudam muito, principalmente para quem está começando.
Eles organizam o espaço e ajudam a posicionar melhor cada
elemento. A regra dos terços é o grid mais famoso e funciona
super bem para equilibrar o design.
Font: [Link]
A utilização dos grids no processo de criação de uma composição é um
elemento que dá muito o que falar. Diversos designers dispensam a utilização
dos grids, enquanto outros designer afirmam que é impossível criar um design
bem equilibrado sem utilizar os grids.
E a verdade é que esse ponto é muito subjetivo e varia de acordo com as
preferências dos designers. Mas não existem dúvidas que os grids podem
ajudar, e muito, principalmente os designers iniciantes, a criar composições mais
harmônicas e equilibradas.
O grid mais comumente utilizado é a composição modular clássica de linhas
horizontais e verticais que formam 9 quadrados, ou seções, no campo de
composição dos designs.
Artistas, fotógrafos e designers gráficos empregam a regra dos terços para
melhorar o equilíbrio geral de suas composições. A regra envolve dividir
mentalmente uma composição em uma grade composta de duas linhas
horizontais e duas verticais ou nove seções separadas.
14
Hierarquia visual é o que torna o design organizado, fácil de entender e
agradável de consumir. Quando bem aplicada, a pessoa nem percebe que está
sendo guiada pelo layout — ela simplesmente flui. Se ficou confuso,
provavelmente é porque a hierarquia não está funcionando.
Sempre vale testar: olhar seu
design, aplicar um desfoque
e ver se o elemento principal
ainda se destaca.
Se destaca, parabéns!
Se não, bora revisar!
15