Hierarquia Visual para Iniciantes

Hierarquia visual é a organização de objetos em uma ordem específica para chamar a atenção para as áreas pretendidas.

Comumente usada no design de UX, a hierarquia visual fornece ao leitor uma navegação mais fácil e ajuda a direcionar sua atenção para onde você deseja.

O uso inadequado ou a falta de hierarquia visual podem deixar os visitantes do site confusos e perdidos.

A hierarquia visual é predominante em cartazes e anúncios para ajudar a direcionar a atenção para os elementos pretendidos.

Este blog fornecerá aos iniciantes o básico da hierarquia visual.

Hierarquia Visual Dividida

Dividir a hierarquia visual em partes mais simples ajuda a explicar como os designers lidam com o conceito de design.

Três são três papéis principais na hierarquia visual, dois dos quais estão fortemente relacionados.

Tamanho

Alterar o tamanho dos objetos pode ajudar a chamar a atenção para eles ou afastá-los.

É essencial deixar o tamanho maior para as informações mais importantes que você deseja expressar. Usar muitos elementos de tamanho semelhante tirará esse efeito, pois nada se destaca tanto.

Dimensionar tamanhos é vital para mostrar como ele se compara a outros objetos. Criar uma sensação de equilíbrio ajuda no dimensionamento para enfatizar como seu objeto maior se compara aos menores.

Se você tiver informações que não são importantes, tê-las em um tamanho pequeno as manterá fora do caminho e as deixará onde os usuários as verão por último.

Cores e contraste

Cores mais brilhantes fazem um trabalho melhor em chamar a atenção do que outras. Esse efeito aumenta quando você combina cores brilhantes com fundos mais escuros. O resultado faz com que suas informações apareçam mais e chamem a atenção com facilidade.

Cor e contraste são duas peças de hierarquia visual, mas ambos trabalham juntos na perfeição para chamar a atenção.

Uma maneira de usar esse método é alterar a cor de um texto destacando-o com uma cor chamativa; ele vai chamar a atenção antes de qualquer outro texto colorido maçante.

Quanto maior o contraste, mais forte a atenção é captada. Adicionar diferenças drásticas de cores, como um fundo escuro com uma fonte vermelha brilhante, atrairá a atenção do usuário e fará com que seja a primeira coisa que eles notem em qualquer imagem ou página da web.

Ao criar cores contrastantes para chamar a atenção, é melhor mantê-las no mínimo. Muitos objetos contrastantes confundem o leitor e criam um efeito indesejável e desconcertante.

Outra maneira de usar cores é escolher paletas semelhantes para criar uma correlação entre objetos específicos.

É melhor reservar essa tática apenas para os elementos mais necessários em uma página, pois é para onde você deseja que toda a atenção seja direcionada primeiro.

Um bom design de UX inclui muito contraste, com a maioria das estéticas usando forte contraste para criar trabalhos impressionantes.

Os Padrões F&Z

Quando se trata de fornecer informações principalmente por meio de texto, existem dois padrões principais que melhor aproveitam a forma como processamos informações visuais.

Esses padrões funcionam para a maioria dos idiomas, mas funcionam muito bem para o inglês, pois as palavras são lidas da esquerda para a direita e de cima para baixo.

O Padrão F

O padrão F é a escolha perfeita para designs que contêm texto extenso. O design segue a letra com o seu nome, começando no canto superior esquerdo e movendo-se para a direita.

Depois disso, o espectador vasculha a lombada em busca de subtítulos ou manchetes.

O padrão é alternadamente chamado de padrão E, embora o padrão F seja mais icônico.

Para usar o padrão F, você precisa colocar todas as informações vitais no lado esquerdo em pequenos títulos para chamar a atenção.

Esse design é excelente para eliminar o tédio associado à leitura de texto em grandes blocos de parágrafos.

Os usuários podem escanear manchetes para identificar manchetes atraentes ou marcadores, pois servem para chamar a atenção.

O Padrão Z

Enquanto o padrão F é adequado para sites com muito texto, o padrão Z é diferente.

O padrão Z é perfeito para sites ou anúncios que não possuem vários parágrafos de texto.

O design começa com as informações de prioridade mais alta no canto superior esquerdo e, em seguida, em cascata em importância para o canto superior direito, canto inferior esquerdo e canto inferior direito.

Os usuários navegarão facilmente pelo padrão Z, pois é um design usado com frequência e simples de entender.

A seção superior esquerda geralmente é reservada para um logotipo, pois será a primeira coisa que as pessoas notarão. No canto superior direito, há uma chamada à ação posicionada após os usuários terem visto o logotipo da empresa. A chamada para ação nessa situação geralmente é um prompt de registro.

O meio do design geralmente inclui uma imagem para preencher a parte vazia.

A parte inferior esquerda e direita inclui todo o texto ou informação pretendida que pretende mostrar ao visitante.

Entendendo a Tipografia

A hierarquia tipográfica é fácil de entender e é aplicável a qualquer design que envolva muito texto, que é a grande maioria. Ele pode ser dividido em três partes, com a ordem de título, subtítulos e, finalmente, seu texto.

Seus títulos contêm informações essenciais, são colocados no topo do seu design e são o conteúdo mais visível.

Seus subtítulos funcionam para classificar todo o seu texto e ordenar a confusão de parágrafos. Sempre mantenha seus subtítulos menores que seus títulos, pois eles não devem competir em prioridade.

Os subtítulos fornecem navegação direta para que os usuários encontrem informações específicas.

Sua última peça é o seu texto, que geralmente envolve parágrafos. O tamanho da fonte deve ser pequeno, mas manter a legibilidade. As duas seções anteriores funcionam para facilitar a navegação dos usuários por seus textos densos.

A importância do espaçamento

Para sites que contêm informações mínimas, deixar muito espaço em torno de informações importantes fará com que a atenção seja atraída para o centro, onde está todo o espaço.

Esse conceito também deve se aplicar a todos os seus outros designs, adicionar muitas informações deixará você com uma experiência de usuário desagradável.

Conteúdo envolvente com espaço fornece um design UX simples e fácil de seguir.

Acumular muita informação e deixar pouco espaço ao redor das áreas deixará você com um design que parece esmagador e deixará as pessoas confusas. Quando os usuários estão confusos, eles sempre têm a chance de sair do seu site, certifique-se de retratar apenas informações importantes.

Usando o alinhamento

É importante alinhar seus designs, pois ter o texto posicionado aleatoriamente criará uma imagem agitada para se olhar.

Os designs de padrão F e padrão Z incorporam o uso de alinhamento. Os designs de padrão F usam alinhamento à esquerda, enquanto os designs de padrão Z usam alinhamentos à esquerda e à direita e alinhamentos centrais.

Ao fazer um design visual com texto como foco, é melhor alinhar à esquerda.

Para projetos estritamente visuais com foco simplista, alinhar todos os elementos ao centro tende a criar um design atraente.

Usando grades

Ao construir projetos, as grades são um método comum para ajudar no processo de criação. O uso da regra dos terços permite adicionar equilíbrio aos seus projetos.

Para usar a regra dos terços, adicione uma grade ao seu design e deixe-a descansar em duas linhas horizontais e verticais. O resultado fornece um design que é agradável e mais fácil para os olhos.

Os objetos mais próximos do centro chamarão a atenção, enquanto os mais distantes atrairão a atenção por último.

Proximidade e Relação

Quando os elementos estão mais próximos, seu leitor irá supor que eles estão relacionados.

Isso pode ajudá-lo a organizar muitas informações e torná-las mais fáceis de entender para o espectador.

Agrupar imagens com texto significa que ambas estão relacionadas e os leitores associarão as duas. Ter uma imagem e o texto distantes fará com que o leitor assuma que ambos os elementos não estão relacionados e não têm nada a ver um com o outro.

Fontes e hierarquia visual

Alterar o tamanho de sua fonte com fontes maiores reservadas para informações importantes ajudará a direcionar a atenção para elas.

Para um pôster, os nomes devem ser uma das fontes maiores, enquanto itens como um endereço devem ser escritos em uma fonte pequena.

Passando do tamanho da fonte, o uso de diferentes tipos de fontes ajudará a direcionar a atenção do usuário. Use uma fonte diferente para títulos, subtítulos e texto informativo. Esse método de design ajudará a dar ao seu trabalho o pop necessário para reunir e manter a atenção do leitor.

Dicas de hierarquia visual

Antes de começar a criar seu design, fazer algumas anotações pode ajudar a organizar seu design e até mesmo ajudá-lo a criar designs mais estéticos.

Anote as informações mais importantes que você precisa priorizar e quais métodos você usará para fazer isso.

Além disso, tente imaginar a jornada do leitor e tente melhorar o design do UX e remova todos os detalhes confusos.

O ROI de um bom design de UX sempre vale o trabalho extra, portanto, não subestime sua importância.

Embrulhar

Hierarquia visual é sobre ditar a ordem que você quer que a atenção do seu leitor vá; você quer que as informações vitais sejam vistas primeiro, seguidas de todo o resto.

O uso de contraste pode criar cores que se destacam e se tornar a primeira coisa que os leitores notam em um design.

Saber quais informações você deseja que sejam vistas primeiro pelos leitores permitirá que você use todos os elementos da hierarquia visual para fornecer aos outros um bom design de UX.