fbpx

Hierarquia Visual, uma introdução à alguns princípios de Design.

À medida que as tecnologias e as interfaces de usuário mudam, a necessidade de habilidades de design em design visual continua a crescer. Com novos exemplos de tipos de interfaces de usuário surgindo a cada ano, nossa compreensão fundamental da hierarquia visual, percepção e composição acaba mudando.
O conceito moderno de percepção visual está enraizado não apenas na ciência, mas também na psicologia. Consequentemente, independentemente das interfaces de usuário em constante mudança, a maneira como vemos e percebemos a informação visual permanecerá a mesma. Considerando isso, é possível que o design de interação contemporâneo melhore os fundamentos da composição gráfica e da hierarquia visual?
As regras fundamentais da percepção visual são críticas para qualquer projeto visual, pois elas instruem como as informações com um significado incorporado podem ser transmitidas o mais rápido possível. No entanto, como o design visual é um primo muito próximo do design gráfico, esses padrões foram estabelecidos para mídia impressa e ainda precisam ser redefinidos para o digital.
Algo como uma “escola digital da Bauhaus” que poderia estabelecer novos princípios de design ainda não foi formada. Como as pessoas experimentam uma interface do usuário de uma maneira totalmente diferente dos impressos, as regras da hierarquia visual e da composição não são apenas datadas, elas simplesmente colapsam em uma interface de usuário.
Na maior parte, os designers ainda tendem a tratar a tela como um objeto estático e bidimensional, e o desafio para os designers interativos é inovar além de simplesmente aplicar ou redimensionar os formatos de impressão aos seus projetos de mídia digital. Mas antes que novos designs possam avançar, uma compreensão fundamental da hierarquia visual, percepção e composição precisa ser revista.

Hierarquia visual: uma nova compreensão da composição visual para interfaces interativas

O que é hierarquia visual e por que é importante? Hierarquia visual é a disposição dos conteúdos e elementos em uma composição para comunicar efetivamente informações e transmitir significado. A hierarquia visual direciona primeiro os espectadores para as informações mais importantes, e depois para o conteúdo secundário.
Estabelecido através do uso apropriado de ‘tamanho, cor, forma, distância, proporção e orientação‘, o significado, o conceito e o humor de uma composição são transmitidos através do uso criativo de elementos gráficos que determinam a hierarquia visual.
A hierarquia visual é essencial para todo tipo de design visual, seja uma página de destino (landing page) que precise guiar o olho do visitante ou a navegação de uma interface de usuário móvel (aplicativos). A compreensão do usuário de cada elemento é baseada nos outros elementos da composição e em seu contexto. Os elementos que compõem as interfaces são tratados de acordo para formar relações visuais e, assim, estabelecer hierarquia visual em um design.

Cor na hierarquia visual

Muitas das regras da hierarquia visual podem parecer bastante simples e até banais, mas são uma base crítica para um bom design visual. Por exemplo, a cor é um dos elementos criativo mais impactante no design visual.
Considere as conotações imediatas de uma cruz vermelha versus uma monocromática. Quase universalmente, a cruz vermelha significa neutralidade e proteção. Tal é o potencial de comunicação imediata com o uso da cor. A cor também é freqüentemente usada para identificar grupos, como quando uma cruz vermelha entre três monocromáticas de alguma forma se destaca.
Cores vivas e ricas destacam-se mais do que as suaves e, portanto, têm um impacto visual maior. Em uma interface, a cor pode ser usada para apresentar um senso de estrutura e apontar para as interações disponíveis. Uma única cor dentro de uma interface monocromática pode distinguir uma seleção e até sugerir o que está além do botão em que o usuário está passando.
A cor também é semeada com significado e emoção que pode transmitir informações explícitas ao subconsciente do espectador. Em branding, uma grande parte da pesquisa psicológica foi feita sobre cores porque cria uma resposta visceral nos consumidores antes deles terem qualquer interação significativa com uma marca. Por exemplo, os azuis são frequentemente vistos como confiáveis, seguros e calmantes, enquanto os vermelhos são estimulantes e são conhecidos por aumentar as taxas cardíacas das pessoas. No entanto, as cores podem ter um significado diferente dependendo da cultura.
Um bom exemplo de uso estrutural e significativo de cores em web design é o site The Names for Change . O site comunica imediatamente sua estrutura através do uso da cor; a organização é dispersa por padrão, mas pode ser reorganizada por tópico e / ou cor.
No entanto, os tons escolhidos ajudam a superar uma das dificuldades potenciais para o significado do site. Arrecadação de fundos para itens diários, como meias ou absorventes internos, não é excitante o suficiente para se vender, de modo que o tom gráfico radical do site aumenta o valor perceptivo dos itens do cotidiano enquanto estabelece a estrutura organizacional subjacente necessária.

Tamanho na hierarquia visual

Vamos imaginar uma ilustração de um pássaro grande sentado ao lado de três menores. Sem qualquer informação adicional, este gráfico simples comunica imediatamente a relação entre seus elementos: um pai e filhos, que comunica coletivamente uma família.
No design gráfico tradicional, uma estratégia típica é tornar os elementos mais importantes os maiores e, em seguida, diminuir os elementos hierarquicamente. O tamanho estabelece a hierarquia visual porque os maiores elementos chamam a atenção primeiro e, portanto, parecem ser os mais importantes.
Tamanhos de fonte diferentes também são frequentemente usadas ​​em corpos de texto para indicar diferenças significativas, como cabeçalhos, seções e citações. O conteúdo secundário, como legendas de imagens, geralmente é menor para não competir com o corpo principal do texto.
Considere algumas das interfaces visuais mais utilizadas, como o Instagram . Nada na tela compete com as imagens e vídeos – eles ocupam mais de 60% da maioria das telas. O objetivo da interface do usuário é imediato.

Alinhamento na hierarquia visual

O alinhamento na hierarquia visual comunica um senso de ordem ao conectar os elementos espacialmente. Tal como acontece nos capítulos de um romance não linear, imagine um quadrado em pé fora de linha em uma composição gráfica. Quando um único elemento quebra uma estrutura estabelecida, ele se destaca da composição e, assim, alcança um significado relativo ao resto.
Uma composição rígida pode parecer estagnada e visualmente desinteressante, a menos que um elemento se destaque da grade visual, isto é, de um sentido de ordem. Desalinhamento, ou “quebrar a grade”, é uma oportunidade para dar a um elemento gráfico mais peso no visual. Este conceito é fundamental para a hierarquia visual no design.
De acordo com um princípio no design visual tradicional, os elementos colocados no centro de um quadro parecem ser mais significativos. Por exemplo, o conteúdo principal ou os elementos da interface podem ser colocados no centro, enquanto a navegação, os menus e outros conteúdos secundários são mantidos frequentemente para os lados.
Mas os designers pioneiros gostam de desafiar o status quo. Quando o design interativo aplica princípios fundamentais de hierarquia visual e, em seguida, empurra os limites para composições visuais inovadoras e novas experiências interessantes são criadas. Usando um alinhamento diferente, novas associações e significados são feitos entre os elementos.

Formas na hierarquia visual

Quando se trata de formas, vamos considerar como o simples formato do coração comunica seu uso potencial para um ‘like’ na maioria das interfaces de redes sociais. Para estabelecer importância ou grupos, considere um coração entre quatro círculos. Formas geométricas são como cores em que as formas carregam certas conotações que dão aos elementos personalidade ou significado.
No design interativo, as formas geométricas são essenciais para uma comunicação eficiente, pois transmitem o significado de forma mais rápida e universal do que o texto. Em vez de texto, os ícones (símbolos), que geralmente são formas geométricas simples, tornaram-se o análogo para a maioria dos sistemas de navegações e UIs.
O objetivo por trás de “curtir” uma imagem, baixar um arquivo, fazer uma ligação telefônica ou verificar uma mensagem é transmitido de maneira simples e direta com ícones (formas geométricas que representem a ação). Essa forma de comunicação visual eficiente torna-se cada vez mais importante em um mercado global em que os produtos digitais geralmente atendem a um vasto público internacional com vários idiomas.
Para destacar os diferentes modos de interação entre mídia impressa tradicional e mídia digital, considere a diferença entre pesquisar por um jornal real na seção Artes e usar o ícone de pesquisa na maioria dos aplicativos. Até recentemente, a maioria dos sites de jornais exibia suas páginas da mesma forma como da versão impressa, e a experiência de peneirar o conteúdo era desajeitada e desorientada.

Movimento na hierarquia visual

Um elemento móvel terá maior peso visual em um grupo de elementos estagnados, e o movimento na hierarquia visual é um princípio impossível de ser impresso, mas que definitivamente pode ser incluído no kit de ferramentas do designer visual.
O que o movimento pode comunicar? O movimento é frequentemente usado em uma interface do usuário como um indício de que um elemento pode ser interagido. O uso do movimento pode ser levado adiante e usado como uma maneira de comunicar algo único? Se a hierarquia visual não é apenas sobre a eficiência da comunicação, mas também sobre o significado incorporado, como o movimento pode ser usado como uma ferramenta de comunicação visual essencial.

Som na hierarquia de informação

O som é outra ferramenta muitas vezes impossível de ser usada na mídia impressa, como o som é totalmente não visual, não há regras para se referir. Mas o som também pode ser uma ferramenta de design que comunica efetivamente um conteúdo. Os elementos de design que carregam certos sons podem ser agrupados, e aqueles que são mais ousados ​​podem parecer os mais importantes ou podem significar separação de grupos.
A qualidade de um som anexado a um elemento deve identificar, caracterizar ou ajudar a estruturar conteúdo de forma rápida. Como pode um som que contrasta com o elemento visual associado ter um novo significado?
Os sons em si podem ser tão complexos que estabelecem um estado de espírito completo ou a mensagem de um design antes que qualquer coisa visual seja percebida. Assim como um pano de fundo colorido estabelece um clima, um som pode ficar em segundo plano ou fornecer feedback em uma interface do usuário, como responder ao toque de um botão no celular. O princípio da técnica é básico, mas a criatividade com a qual ela pode ser empregada é onde a magia pode acontecer.

O conceito de hierarquia visual

A hierarquia visual é um conceito direto, e entender a teoria é realmente mais fácil do que a capacidade prática de um designer de executar uma composição bem estruturada. No entanto, ser criativo em um novo meio, mantendo um bom design, é um desafio.
Novos formatos aparecem o tempo todo, e situações desafiadoras não vão diminuir – muito pelo contrário. Atualmente, há mais de 200 tamanhos de tela diferentes em uso. E são apenas os bidimensionais. Primeiro, foram a internet, os navegadores de desktop, vieram os celulares e tablets, e agora estamos nos movendo para um novo território com tecnologias como TV interativa, IoT , wearables , virtual e realidade aumentada .
O design que realmente empurra os limites da mídia digital ainda está no começo, os princípios da hierarquia visual e do bom design irão acompanhar o avanço da tecnologia, de modo que nossa experiência de mídia digital continue cheia de significado e prazer.
Phil Stunitz

Autor(a) Phil Stunitz

Co-founder, visual designer.

Mais posts de Phil Stunitz