Princípios de hierarquia visual para designers

Os princípios de hierarquia visual para designers são um conceito de design usado para orientar como os olhos do espectador se movem através de um design e determinar quais elementos são mais importantes ou visualmente atraentes.

No início havia tábuas de pedra, rolos de papiro e papel. Depois vieram as telas de computador e os tablets eletrônicos. À medida que a tecnologia de exibição de páginas evolui, os designers ficam com uma maneira clara de organizar o conteúdo. Mas o que é melhor? Em suma , hierarquia visual.

Aqui está a definição de hierarquia visual: Hierarquia visual é o arranjo elementos gráficos em design em ordem de importância de cada elemento. O peso visual determina importância do elemento na hierarquia do design, dizendo ao espectador no que focar e em que ordem.

Recursos para designers. 50 grátis

Isto está se tornando uma questão cada vez mais importante à medida que estruturas responsivas forçam os designers a pensar em muitas páginas diferentes ao mesmo tempo. Diante de textos densos e pouca atenção, os designers desenvolveram 6 princípios para direcionar o olhar do leitor para as informações mais importantes.

Esses 6 princípios de hierarquia visual ajudarão você a projetar tudo, desde folhetos até aplicativos, garantindo que o usuário final tenha uma experiência de leitura positiva para os designers.

Todas as culturas são lidas de cima para baixo e a maioria das culturas é lida da esquerda para a direita. Mas embora esse conhecimento seja importante para design de página, os designers sabem que a tarefa é muito mais difícil.

Estudos recentes mostraram que as pessoas primeiro examinam uma página para ver se estão interessadas nela antes de lê-la. Os padrões de digitalização tendem a assumir uma de duas formas, "F" e "Z", e você pode tirar vantagem disso em seu design.

Padrões F. Princípios de hierarquia visual

Modelos F aplicam-se a páginas de texto tradicionais, como artigos ou postagens de blog. O leitor examina o lado esquerdo página procurando palavras-chave interessantes em títulos alinhados à esquerda ou frases iniciais do tópico, então para e lê (à direita) quando encontra algo interessante. O resultado parece um F (ou um E, ou algo com ainda mais listras horizontais; mas o termo "F" pegou).

Como você pode usar isso? Alinhe as informações importantes à esquerda e use títulos curtos e em negrito, marcadores e outros elementos semelhantes que chamam a atenção para quebrar blocos de parágrafos.

Modelo Z. Princípios de hierarquia visual

Padrões Z aplicam-se a outros tipos de páginas, como anúncios ou sites, onde as informações não são necessariamente apresentadas em parágrafos de bloco. O leitor primeiro examina a parte superior da página, onde é provável que informações importantes sejam encontradas, depois passa para o canto oposto diagonalmente e faz o mesmo na parte inferior da página.

Os web designers normalmente projetam suas páginas para corresponder explicitamente a esse comportamento, colocando as informações mais importantes nos cantos e orientando outras informações importantes ao longo das barras superior e inferior e conectando a diagonal.

Abaixo No design da assembleia da conferência de 2010, elementos importantes são o logotipo (canto superior esquerdo), um botão “registrar-se agora” (canto superior direito) e uma lista de alto-falantes (parte inferior), que estão estrategicamente posicionados em belos locais com padrão Z.

2. O tamanho é importante. Princípios de hierarquia visual
_

É muito simples: as pessoas leem primeiro as coisas grandes. Se seus olhos forem atraídos para “a performance” antes de “se dividir” no anúncio abaixo do Young Vic, você deve entrar em contato com um psicólogo perceptivo imediatamente: você provavelmente poderia ganhar um bom dinheiro sendo testado como uma anomalia rara.

O que é interessante é que esta tendência é suficientemente forte para rejeitar a regra de cima para baixo. Na imagem acima, “hackear” substitui “hora de agir” porque é maior e está à esquerda (portanto, a regra da esquerda para a direita ajuda).

Mas na página seguinte do Relatório Anual: Campanha pelos Direitos Humanos 2012 (desenvolvido na quinta coluna da mídia) lemos em letras grandes fonte “A Luta pela Igualdade na Campanha” antes do texto logo acima “Eleições 2012”. Princípios de hierarquia visual

“Eleições 2012” é a ordem de informação de mais alto nível: indica-nos o tema geral a que se refere a informação abaixo. Mas o designer decidiu que o título do artigo era mais interessante para os leitores e, por isso, avaliou-o para que fosse lido primeiro.

3. Espaço e textura. Princípios de hierarquia visual

Outra forma de chamar a atenção é dê ao conteúdo espaço suficiente para respirar . Se houver um espaço negativo significativo ao redor do botão ou se as linhas do bloco de texto forem amplamente seguidas, esses elementos serão mais facilmente visíveis aos leitores.

Como você pode ver na imagem abaixo (parte do site DrawtoClick), o espaçamento pode ser uma alternativa elegante ou complemento ao uso do tamanho. Aqui, o argumento de venda, “Notre agence vouscompagne...”, está escrito em letras muito pequenas, mas rodeado por uma abundância de espaços em branco, indicando a sua importância. Abaixo, as frases “Le Compendre”, “Le Réaliser” e “Le Partager” recebem destaque adicional, destacando-se do espaço envolvente.

Quando as pessoas falam sobre “textura” em relação à hierarquia visual, não se referem aos efeitos gráficos da textura. Em vez disso, esse tipo de “textura” refere-se à disposição ou estrutura geral do espaço, texto e outros detalhes de uma página. Este exemplo da Bright Pink ilustra bem o conceito:

Na primeira imagem, a palavra “Esporte” está acima na hierarquia do que “badminton” porque é mais alta, maior e mais ousada. Na imagem 2, as duas palavras são aproximadamente equivalentes, graças ao retângulo preto que destaca “badminton” e o coloca em seu próprio espaço.

Na terceira imagem, o rabisco de fundo interrompe o espaço “Esportes”, mas não o espaço “badminton”, e portanto resulta em uma inversão onde “badminton” é o mais alto na hierarquia. Este desenvolvimento é difícil de prever, por isso os designers frequentemente o associam a um sentido holístico de “textura”.

4. Peso e emparelhamento da fonte. Princípios de hierarquia visual

A seleção da fonte é fundamental para estabelecer a hierarquia visual. Entre os atributos mais importantes de uma fonte estão o peso, a largura dos traços que compõem suas letras e o estilo, como serifa e sem serifa. Outras modificações, como itálico, também podem desempenhar um papel.

Note como fone de ouvido influencia a ordem da hierarquia de palavras no web design abaixo para The Tea Factory: "chás perfeitos para ajudar você a se aquecer" é o nome do jogo, mas diferenças no peso da fonte e itálico, além do posicionamento das palavras, criam um ambiente mais experiência de leitura dinâmica e menos linear. "://azbyka.com.ua/foto/tea-factory.jpg" />

Em alguns casos, o objetivo é apresentar uma variedade de informações igualmente urgentes. Definir todos com o mesmo tamanho e peso garantirá a equivalência, mas também fará com que pareça monótono. A diferenciação de fontes é uma forma de evitar isso, como a capa da revista Trendi abaixo. Princípios de hierarquia visual

Preparando um folheto para impressão.

Aqui, os cinco teasers ao redor da periferia da página são iguais em hierarquia, mas alcançam variedade alterando duas fontes bem emparelhadas - uma com serifa de peso médio e a outra sem serifa leve, mas alta.

5. Cor e tonalidade. 

Aqui está outro acéfalo: as cores brilhantes se destacam das cores suaves ou tons de cinza, enquanto os tons mais claros parecem mais “distantes” e, portanto, caem mais abaixo na hierarquia do que os tons mais ricos e escuros. O site Where Are They contrasta a luz brilhante e a retroiluminação colorida com um efeito de grade preto e branco para o efeito de luminosidade:

O site do Guggenheim usa cores para enfatizar informações importantes, como a seleção do local, uma lista de exposições atualmente visualizadas e links para exposições especiais. Princípios de hierarquia visual

Melhor fonte para embalagens personalizadas

Já o site do Whitney Museum estabelece uma hierarquia dentro de uma fonte, espessura e tom (preto) usando matiz (o que significa adicionar branco ao tom base, tornando-o mais claro). “Cory Archangel on Pop Culture” está claramente abaixo de “New on Whitney Stories” na hierarquia visual, não apenas porque é mais baixo, mas também porque sua tonalidade é mais clara, tornando-o menos visível contra o fundo branco. Princípios de hierarquia visual

A cor tem um significado especial em design móvel aplicações onde o tamanho pequeno da tela limita sua capacidade de usar outras estratégias, como variação de tamanho e espaçamento amplo. No aplicativo Grainger Industrial Supply, o botão “Proceed to Checkout” é colorido em vermelho, destacando-se em qualquer página onde apareça. O painel Narrow Search Results, por outro lado, é cinza, tornando-o aproximadamente equivalente na hierarquia a outros elementos, como a barra de pesquisa e links de produtos.

6. Direção para designers.

Os layouts de página geralmente são projetados para seguir uma grade de linhas verticais e horizontais, tanto por convenção quanto por ser o formato mais legível. Nesse sistema, existe uma nova forma de estabelecer hierarquia: quebrar a grade.

O texto posicionado ao longo de uma curva ou diagonal se destaca automaticamente em relação ao texto bloqueado pela grade ao redor, ocupando o centro do palco. Esta tem sido uma estratégia eficaz em publicidade, como o pôster do ponto de ônibus da Frost Design.