12 Princípios da Hierarquia Visual Todos os Não Designers Necessitam de Saber

Hierarquia Visual é um método de organização dos elementos do design por ordem de importância. Em outras palavras, é um conjunto de princípios que influenciam a ordem em que percebemos o que vemos.

Neste guia, listamos 12 princípios de hierarquia visual que todo designer iniciante precisa conhecer.

Temos muito a cobrir por isso vamos começar.

Tabela de Conteúdos

O que é Hierarquia Visual?

Princípio #1: Visibilidade dos Impactos do Tamanho

Princípio #2: Perspectiva Cria uma Ilusão de Profundidade

Princípio #3: Atenção do Desenho de Cor e Contraste

Princípio #4: Desenho Organizado de Fontes

Princípio #5: Espaço Proporciona Ênfase e Movimento

Princípio #6: Proximidade Sugere Relacionamentos

Princípio #7: Espaço Negativo Enfatiza

Princípio #8: Alinhamento Direciona os Olhos

Princípio #9: Grupos Ímpares Criam Foco

Princípio #10: Repetição Unifica uma Composição

Princípio #11: Linhas Sugerem Movimento

Princípio #12: Grelhas Organizam um Desenho

Hierarquia Visual Infográfica

O que é Hierarquia Visual?

Hierarquia Visual é um princípio de desenho que se refere a como os elementos estão dispostos num desenho. A hierarquia visual ajuda os designers e desenvolvedores a dispor cada elemento de uma forma lógica que ajuda o visual a ser digerido corretamente.

Em um design, isto significa que o cabeçalho estará no topo da fonte maior, com cada elemento subseqüente dimensionado com base na importância. Isto ajuda o utilizador a compreender melhor o fluxo para que saiba onde procurar primeiro.

A razão pela qual a hierarquia visual é um princípio tão importante de compreender é porque cabe ao designer criar a hierarquia de forma a que o visualizador nem sequer tenha de pensar onde procurar primeiro. O seu olhar é automaticamente atraído para cada elemento na ordem exacta em que deve ser visto.

Também criámos uma versão em vídeo deste post do blog para o ajudar a compreender melhor a hierarquia visual. Você pode vê-lo abaixo.

1 Tamanho Impactos Visibilidade

Bigger é melhor, certo? Enquanto o clássico adágio ainda está em debate, o tamanho é sem dúvida a forma mais eficaz de enfatizar elementos visuais. Simplificando, elementos maiores chamam mais atenção do que elementos menores.

É a razão precisa pela qual as manchetes dos jornais aparecem em fontes maiores, e as grandes histórias geralmente têm manchetes ainda maiores do que os artigos no resto da página. Em qualquer desenho, elementos maiores – quer sejam palavras ou imagens – não só serão mais notáveis, como também carregarão a mensagem mais forte.

Nota no exemplo acima como a palavra maior é também a mais marcante e emotiva. É muito mais provável que os leitores respondam rapidamente à palavra “cracking” do que a segunda maior palavra, a “performance” básica. O desenho não seria tão eficaz se as palavras tivessem o mesmo tamanho ou se outra palavra na página, como “agir” ou “tempo” fosse ainda maior.

Outro princípio importante relacionado a este conceito é a escala, que é o tamanho de um objeto em relação a outro. Um único objeto, não importa quão grande ou pequeno, não tem escala até que seja comparado a outro. Ele permite-nos criar equilíbrio num desenho e focar nos elementos dominantes. Quanto maior a escala, maior a ênfase.

2 Perspective Creates an Illusion of Depth

Utilizando a perspectiva, os designers podem criar uma ilusão de profundidade que vai de alguns centímetros a vários quilómetros. Como vemos ilusões semelhantes no mundo real, geralmente percebemos objetos maiores como estando mais próximos do que objetos menores semelhantes e, portanto, eles geralmente chamam a atenção antes de qualquer outro objeto em uma página.

Por exemplo, uma ilustração de uma estrada normalmente será mais larga em seu ponto mais baixo e gradualmente se tornará mais estreita quanto mais alta ela se estender através da tela. Da mesma forma, um objeto mais próximo do espectador sempre aparecerá maior do que o mesmo objeto mais distante.

Perspectiva de Proper empregará escala e proporção para comunicar com precisão a distância apropriada. Um desenho de um trecho de 5 milhas de estrada recuará muito mais acentuadamente do que um trecho de meia milha desenhado na mesma tela de tamanho.

3 Atenção ao desenho de cor e contraste

Apenas como elementos maiores são percebidos como mais importantes do que elementos menores, cores brilhantes geralmente chamam mais atenção do que matizes mais embotados. Por exemplo, se uma única frase em um bloco de texto é destacada com uma cor brilhante, ela imediatamente chama a atenção dos leitores.

Considerar o desenho acima. Observe como ele chama muito mais a atenção quando os tons naturais foram destacados para as cores neon? O esquema de cores é conhecido como um duótono, uma tendência cada vez mais popular do web-design. O efeito, que coloca um par de cores contrastantes sobre uma foto, empresta a desenhos marcantes que surgem figurativamente da página ou do ecrã.

Cores dramaticamente contrastantes também podem enfatizar elementos específicos do que um espectro numa escala mais suave. Colocar um objeto vermelho contra um fundo verde ou preto vai chamar mais atenção do que o mesmo objeto vermelho sobre um fundo laranja ou roxo.

As combinações de cores usadas em um desenho, e como elas se relacionam umas com as outras, são conhecidas como seu esquema de cores. A escolha do esquema de cores de um designer pode criar unidade, harmonia, ritmo e equilíbrio dentro de uma criação, mas também pode criar contraste e ênfase.

Um design que usa muitas cores contrastantes muitas vezes irá parecer desorganizado e incoesivo. O mesmo pode ser dito às vezes de desenhos que usam um esquema de cores que não adere à teoria da cor. Mas escolher a melhor paleta envolve muito mais do que escolher aleatoriamente uma combinação monocromática, complementar ou tétrica.

Cores semelhantes podem ser usadas para agrupar elementos relacionados em um design, e a escolha de cores pode até mesmo sugerir peso e distância. Cores mais quentes, como vermelho e amarelo, avançam para o primeiro plano de um design com um fundo escuro, enquanto cores frias, como azul ou verde, geralmente recuam para o fundo. O oposto ocorre com um desenho sobre um fundo claro: Cores frias, como o azul e o verde, aparecem mais próximas das cores quentes. É exatamente como o olho humano o percebe.

Por isso, a escolha da cor pode realmente afetar a capacidade dos espectadores de identificar uma figura do fundo dentro de um desenho. A mistura de cores quentes e frias pode criar profundidade, tal como a perspectiva.

As combinações eficazes de cores dependem não só da posição de cada tonalidade na roda de cores, mas também do seu calor e contraste com as cores circundantes. Veja o tutorial de Visme sobre como escolher esquemas de cores impactantes.

4 Fontes Organize Design

P>Pense sobre um esboço, um currículo tradicional ou um índice. Geralmente, cada um é composto de vários tamanhos de tipo, com títulos maiores em um tamanho maior do que as subseções e detalhes menores. Usando uma variedade de tamanhos de tipos não só enfatiza o que é mais importante, mas também organiza o design geral do documento.

Typeface hierarchies podem ser criadas com texto de vários tamanhos, pesos e espaçamento – ou uma combinação de cada elemento. Mesmo que uma única fonte seja usada ao longo de um design, variando seu tamanho e peso não só chama a atenção para elementos mais importantes, mas cria uma composição geral que é fácil de ler e entender.

Apenas imagine um currículo que usa um tipo maior e mais ousado para referências do que para o nome do candidato. Ele pode não só parecer descuidado, mas provavelmente causaria uma grande confusão para aqueles que escaneam rapidamente uma montanha de aplicações.

Likewise, um design que apresenta uma série de tipos que são todos do mesmo tamanho, fonte e peso não vai efetivamente atrair o foco para muito de nada — um desafio que tem que ser enfrentado rapidamente com tantos públicos gastando fração de segundos para medir a qualidade do seu design.

É por esta razão que a maioria dos programas de web-design oferecem não só uma selecção manual de atributos de tipo de letra, mas uma hierarquia predefinida que consiste em fontes de título, subtítulo e cabeçalho graduado, para além de textos básicos de cópia.

Veja o design acima? Parece mais organizado e fácil de ler quando todas as palavras têm o mesmo tamanho, ou quando os princípios da hierarquia são aplicados?

5 Espaço dá ênfase e movimento

Regra do espaço

Um dos princípios mais básicos de composição visual lida com o que você deixa de fora do seu design. De acordo com a Regra do Espaço, um design esteticamente agradável requer a sua quota-parte de espaço negativo sem desordem, frequentemente referido como “espaço branco”, independentemente da cor de fundo real do design.

Ao organizar os elementos de uma composição, os designers podem usar o espaço em torno do conteúdo para chamar a atenção para elementos particulares – pense num único elemento numa página em branco – ou para enviar uma mensagem visual completamente separada, tal como a “seta” escondida encontrada dentro do famoso logótipo FedEx.

Espaçamento estratégico pode até mesmo desenhar os olhos dos espectadores através da página numa sequência direccionada, contribuindo para padrões de digitalização de páginas.

Page-scanning patterns

Leitores tendem a digitalizar páginas com base em padrões particulares, observáveis através dos seus movimentos oculares. Quando os designers querem que o público observe elementos numa determinada ordem, muitas vezes confiam nos padrões mais comuns.

falantes nativos de inglês, por exemplo, lêem da esquerda para a direita. Portanto, eles normalmente apresentam um padrão de leitura semelhante quando confrontados com uma página de texto. O árabe, por outro lado, é escrito da direita para a esquerda. Os habituados a ler essa língua têm mais probabilidades de digitalizar páginas nesta direcção “oposta”. Os designers devem ter essas diferenças em mente ao criar conteúdo para audiências globais.

F-Patterns

O padrão mais comum de movimentação dos olhos dos leitores ingleses é o padrão F. Porquê? Porque é precisamente assim que lemos um livro, uma carta ou uma página web. Nós digitalizamos a página da esquerda para a direita ao longo do topo e novamente para cada linha de texto até chegarmos ao fundo da página.

Por causa desta tendência natural, os designers utilizam mais frequentemente o padrão F ao comporem websites e outras ilustrações que dependem muito do texto. Porque ler noutra direcção é apenas desconfortável quando não é o que estamos habituados.

Z-Patterns

Designs que dependem mais de imagens são muitas vezes compostos num padrão Z. Como o cérebro processa as imagens mais rapidamente do que o texto, os leitores podem escanear a página rapidamente olhando para cima da esquerda para a direita, depois para baixo da página de forma diagonal antes de completar o scan, cruzando novamente da esquerda para a direita (ou da direita para a esquerda se o público normalmente lê nessa direção).

Designers podem enfatizar certos elementos de uma composição, colocando-os ao longo deste padrão comum de movimento dos olhos em “Z”. Pense em um título, uma imagem e um subtítulo.

6 Proximidade Sugere Relacionamentos

Proximidade, ou onde os elementos aparecem em relação uns aos outros, é um dos elementos mais básicos de composição. Simplesmente falando, colocar elementos relacionados próximos sugere aos leitores que eles estão, de fato, relacionados.

Pense em uma tela branca com um grupo de cinco pontos em um lado e um único ponto no outro lado. Nossa primeira suposição será sempre que os cinco são, de fato, um grupo.

Colocar elementos próximos uns dos outros pode enviar outras mensagens, também. Por exemplo, colocar elementos em certos locais num mapa pode fornecer ao público uma compreensão da distância, seja perto ou longe. Claro, isto também depende do tamanho e da escala do mapa. Uma polegada nem sempre é uma milha.

Ao colocar elementos dentro de uma determinada proximidade uns dos outros, imagens e mensagens podem ser criadas. Pense com que frequência você vê três círculos e uma linha posicionada de forma a sugerir a forma de um rosto feliz ou triste? A imagem sugerida então frequentemente ganha mais atenção do que os seus elementos individuais. Você vê um rosto feliz, ou você vê três círculos e uma linha?

7 Espaço Negativo Enfatiza

Apenas como agrupando itens próximos um do outro sugere sua relação, incluindo o espaço branco em torno dos elementos os separa como grupos separados de informação. O espaço vazio e negativo não só facilita a digestão da informação para os leitores, agrupando-a em compartimentos, mas também cria foco, pois ajuda a zerar os olhos em itens individuais.

Composições sem amplo espaço negativo podem resultar em um design confuso, confuso e caótico. Em outras palavras, menos é mais. Designers experientes podem até utilizar o espaço em branco para sugerir uma mensagem visual adicional. Basta pensar na “seta” implícita no centro do famoso logotipo da FedEx, ou no design da Coca-Cola, acima.

8 Alinhamento Direciona os Olhos

Alinhamento faz parte da estrutura pela qual os elementos são colocados em um design. Ele dita que os componentes visuais, sejam eles texto ou imagens, não são posicionados arbitrariamente ao longo de uma composição. Por exemplo, uma página típica de texto é alinhada à esquerda, para que os objetos compartilhem uma margem esquerda.

Muitos desenhos visuais são centralizados ou justificados, o que significa que eles são espaçados ao longo de uma página para que compartilhem ambas as margens esquerda e direita. Se as palavras fossem apenas espalhadas aleatoriamente por uma página em todas as direcções, criariam um cenário bastante confuso.

Em desenhos com padrão F, os objetos são geralmente alinhados à esquerda, enquanto os padrões Z geralmente empregam uma combinação de alinhamentos esquerdo, central e direito, como no anúncio acima.

Designs visuais simples alinham-se mais frequentemente no centro da moldura, um formato que proporciona equilíbrio e harmonia, e que também é esteticamente agradável.

Os leitores mais ocidentais estão acostumados a ler da esquerda para a direita de uma página. Portanto, desenhos com texto são frequentemente alinhados à margem esquerda da mesma forma.

Alinhamentos rectos são frequentemente utilizados para proporcionar equilíbrio a um desenho geral que pode ser mais pesado visualmente no lado esquerdo. Da mesma forma, alinhamentos à esquerda podem oferecer o mesmo efeito no cenário inverso.

9 Grupos ímpares Criar Foco

A Regra das Probabilidades permite aos designers enfatizar imagens particulares colocando-as no centro de um grupo. Colocando um número igual de objetos vizinhos em cada lado do ponto focal principal – criando um grupo ímpar – o resultado aponta claramente para o elemento visual mais importante, localizado no centro.

Por exemplo, um grupo de um ou três elementos é mais marcante do que um único par. Da mesma forma, grupos compostos por um número ímpar de objetos são quase sempre considerados mais interessantes e esteticamente mais agradáveis do que os grupos de números pares. Porquê? As pessoas sentem-se mais confortáveis com o equilíbrio.

10 Repetition Unifies a Composition

Apenas como o contraste enfatiza e chama a atenção para os elementos do design, a repetição cria unidade, o que aumenta a compreensão e o reconhecimento.

P>Pense na maioria dos textos publicados. Os desenhos das páginas são organizados de tal forma que o corpo do texto é uma fonte, os títulos dos capítulos são outros e as notas de rodapé são uma terceira fonte diferente – tudo consistente ao longo de toda a publicação. Esta repetição de estilo cria um trabalho coeso, reconhecido como um todo.

Para um design unificado, repita alguns elementos – quer seja fonte, cor, forma ou tamanho – através de toda a composição. Estilos consistentes ajudam a definir claramente a hierarquia visual de qualquer design.

Take, por exemplo, o infográfico na introdução que apresenta os nossos 12 princípios de hierarquia visual. A repetição das mesmas fontes e estilos ao longo do documento unifica claramente a lista e diz aos leitores que cada entrada é parte de um todo.

Repetição também pode dar um novo significado aos elementos. Com que frequência você vê um texto azul sublinhado se destacar em uma página? O suficiente para reconhecer instantaneamente a fonte como um hiperlink, certo? A repetição deste estilo num design diz ao seu público onde clicar para obter mais informações. Que outros estilos populares podem dar ao seu design um significado adicional?

11 Linhas Sugerem Movimento

Movimento é uma das formas mais eficazes de atrair a atenção dos espectadores, especialmente quando está implícito dentro de um design imóvel. As linhas são obviamente eficientes em apontar para itens de ênfase – basta pensar numa seta – mas elas não precisam aparecer fisicamente na página para fazer o truque.

Linhas de direção podem ser implicadas através do uso de elementos repetidos – pense numa linha de pontos – a proximidade de objetos ou formas, assim como a relação de espaço positivo e negativo. Por exemplo, ao inclinar um objeto para cima ou para baixo, podem ser criadas linhas que sugerem vôo ou descida.

12 Grids Organize a Design

Os designs mais efetivos são compostos através de algum tipo de grade. A grade mais típica é a composição modular clássica de cruzamento de linhas verticais e horizontais.

Artistas, fotógrafos e designers gráficos há muito 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.

Elementos visuais importantes são colocados ao longo das linhas, enfatizando os quatro pontos onde as linhas se encontram. As composições fora do centro são geralmente consideradas mais agradáveis esteticamente quando comparadas com desenhos em que o ponto focal principal é colocado no centro da moldura. A regra incentiva o uso do espaço negativo, a proximidade inteligente dos elementos e o alinhamento eficaz.

Não só é mais comum, mas a grelha modular é geralmente o desenho mais legível. Ainda assim, às vezes a melhor maneira de criar ênfase é quebrar as regras.

Designs de Grade Alternativa

Em vez da clássica grade vertical-horizontal, os designers podem escolher uma composição diagonalmente direcionada para garantir que sua criação se distancie em uma página e chame a atenção geral dos espectadores.

Quebrar a grade

Alguns designers escolherão quebrar a grade completamente, colocando aleatoriamente elementos visuais ao longo de uma página, a fim de melhor se distanciar do texto circundante bloqueado pela grade. Esse texto circundante pode estar no mesmo design ou numa página circundante.

Não se deixe enganar pelo conceito de aleatoriedade. Espalhar aleatoriamente elementos por um fundo sem razão ou estratégia específica não se vai transformar milagrosamente numa obra-prima de Jackson Pollock. Ao quebrar a grade, toda escolha ainda deve ser calculada e com propósito.

Princípios da hierarquia visual são algumas das estratégias mais eficazes para enfatizar elementos de um design e esclarecer uma mensagem visual. Mas como com muita vida, você pode ter muito de bom.

Os designers devem escolher sabiamente quais os princípios a empregar, ou arriscar diluir qualquer ênfase e quebrar a hierarquia visual. Se tudo se destaca, então nada se destaca.

Não tem a certeza se a sua hierarquia é eficaz? Então teste-a. Basta olhar para o espaço na frente da sua página ou tela, permitindo que o design real se desvaneça para o fundo até se tornar um desfoque de formas e cores. O que se destaca?

Or, para evitar que fique com os olhos cruzados, você pode usar o teste de desfocagem fazendo uma captura de tela do seu design, abrindo-o no Photoshop e aplicando o filtro Gaussian Blur.

Se a atração principal ainda for o(s) elemento(s) que você planejou enfatizar, sua hierarquia visual é eficaz.

Visual Hierarchy Infographic

Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.

Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>