Princípios de Design - Uma Introdução à Hierarquia Visual

À 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 uma interface de usuário típica surgindo a cada ano, nossa compreensão fundamental de hierarquia visual, percepção e composição mudou?

O conceito moderno de percepção visual está enraizado não apenas na ciência, mas também na psicologia. Conseqüentemente, 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 design visual, pois 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 próximo do design gráfico, esses padrões foram estabelecidos para a mídia impressa e ainda precisam ser redefinidos para o digital.

Algo como uma “escola digital Bauhaus” que poderia estabelecer novos princípios de design ainda não se formou. Como as pessoas experimentam uma interface do usuário de uma maneira totalmente diferente da impressão, as regras de hierarquia visual e composição não são apenas datadas, elas simplesmente colapsam em uma interface de usuário.

Na maioria das vezes, 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 formatos impressos em 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 revisitada.

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 do conteúdo em uma composição para comunicar efetivamente informações e transmitir significado. A hierarquia visual direciona os espectadores para as informações mais importantes primeiro e depois para o conteúdo secundário.

Estabelecido através do uso adequado de tamanho, cor, forma, distância, proporção e orientação, o significado, conceito e humor de uma composição é transmitido através do uso criativo de elementos gráficos que determinam a hierarquia visual.

A hierarquia visual é fundamental para todo tipo de design visual, seja uma página de destino que precisa guiar os olhos do visitante ou a navegação de uma interface de usuário móvel. A compreensão do usuário de cada elemento é baseada nos outros elementos da composição e em seu contexto. Os elementos de composição 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 fundamental para um bom design visual. Por exemplo, a cor é o elemento 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 é frequentemente usada para identificar grupos, como quando uma cruz vermelha entre três monocromáticas de alguma forma se destaca como mais significativa.

Cores brilhantes e ricas se destacam mais do que as suaves e, portanto, têm um maior impacto visual. Em uma interface, a cor pode ser usada para apresentar um senso de estrutura e apontar para interações disponíveis. Uma única cor em uma interface monocromática pode distinguir uma seleção e até sugerir o que está além de um botão sobre o qual o usuário está passando.

A cor também é semeada com significado e emoção que podem transmitir informações explícitas ao subconsciente do espectador. Em branding, muitas pesquisas psicológicas foram feitas sobre a cor porque ela cria uma resposta visceral nos consumidores antes que eles tenham qualquer interação significativa com uma marca. Por exemplo, os azuis são muitas vezes percebidos como confiáveis, seguros e calmantes, enquanto os vermelhos são estimulantes e são conhecidos por aumentar os batimentos cardíacos das pessoas. No entanto, as cores podem ter um significado diferente dependendo da cultura.

Um bom exemplo de uso significativo e estrutural de cores em web design é o site The Names for Change. O site comunica imediatamente sua estrutura através do uso de cores; 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 potenciais dificuldades para o significado do site. Arrecadar fundos para itens diários, como meias ou tampões, não é empolgante o suficiente para se vender, então o tom gráfico radical do site aumenta o valor perceptivo dos itens diários ao mesmo tempo em que 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 pássaros menores. Sem mais informações, este simples gráfico comunica imediatamente a relação entre seus elementos: um pai e filhos, que coletivamente comunica uma família.

No design gráfico tradicional, uma estratégia típica é tornar os elementos mais importantes os maiores e, em seguida, reduzir o tamanho dos elementos hierarquicamente. O tamanho estabelece uma hierarquia visual porque os elementos maiores chamam a atenção primeiro e, portanto, parecem ser os mais importantes.

Tamanhos de fonte diferentes também são frequentemente usados ​​em corpos de texto para indicar diferenças significativas, como cabeçalhos, seções e aspas. Conteúdos secundários, como legendas de imagens, costumam ser menores para não competir com o corpo principal do texto.

Considere algumas das interfaces visuais mais usadas, 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.

Um exemplo que altera a estrutura típica de hierarquia visual em web design é o site de portfólio do estúdio de arte/design Ro/Lu. Seu site incomum pode não ser o mais intuitivo, mas desafia o arranjo visual do típico portfólio criativo online. Devido à aleatoriedade intencional de seus variados projetos, um diferente aparece como dominante cada vez que um visitante chega ao local, o que torna cada visita única e interessante.

O trabalho não é organizado hierarquicamente nos portfólios da maioria dos estúdios de design criativo porque cada projeto é único e considerado igualmente importante. O design do site Ro/Lu cria uma composição dinâmica com diferentes níveis de interesse a cada visita e incentiva os espectadores a investigar o extenso portfólio do estúdio. Consequentemente, a natureza eclética e interdisciplinar do estúdio de design é representada pela exibição aleatória de conteúdo.

Alinhamento na hierarquia visual

O alinhamento na hierarquia visual comunica um senso de ordem conectando os elementos espacialmente. Assim como os capítulos de um romance não linear, imagine um quadrado fora de linha em uma composição gráfica. Quando um único elemento rompe uma estrutura estabelecida, ele se destaca da composição e, assim, ganha significado em relação ao resto.

Uma composição rígida pode parecer estagnada e visualmente desinteressante, a menos que um elemento se destaque da grade visual, ou seja, de um senso de ordem. O desalinhamento, ou “quebrar a grade”, é uma oportunidade de dar mais peso visual a um elemento gráfico. Este conceito é fundamental para a hierarquia visual no design.

De acordo com um princípio no design visual tradicional, os elementos que são colocados no centro de um quadro parecem ser mais significativos. Por exemplo, conteúdo primário ou elementos de interface podem ser colocados no centro, enquanto navegação, menus e outros conteúdos secundários são frequentemente mantidos nas laterais.

Mas designers pioneiros gostam de desafiar o status quo. Quando o design interativo aplica princípios fundamentais de hierarquia visual e, em seguida, ultrapassa os limites em composições visuais inovadoras, novas experiências interessantes são criadas. Ao usar um alinhamento diferente, novas associações e significados são feitos entre os elementos.

Por exemplo, o projeto DNA é um site que usa uma série de hierarquias desconexas para comunicar a construção criativa do álbum do músico. A estrutura do site é complexa, assim como a construção do álbum.

Primeiro, os visitantes são convidados a ouvir a música clicando nas faixas do álbum, que são tradicionalmente alinhadas em formato de álbum. No entanto, ao permitir que os visitantes realinhem os elementos de DNA do site, o conceito do álbum é comunicado, não apenas como uma série de faixas, mas como uma construção não linear de elementos fragmentados ao longo do tempo.

Formas na hierarquia visual

Quando se trata de formas, vamos considerar quão imediatamente a forma de coração simples comunica seu uso potencial para 'curtir' na maioria das interfaces de usuário 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 personalidade ou significado aos elementos.

No design interativo, as formas geométricas são essenciais para uma comunicação eficiente, pois transmitem significado de forma mais rápida e universal do que o texto. Em vez de texto, ícones (símbolos), que geralmente são formas geométricas simples, tornaram-se o análogo para a maioria dos sistemas de navegação e UIs.

O objetivo por trás de 'curtir' uma imagem, baixar um arquivo, fazer um telefonema ou conferir uma mensagem é transmitido de forma simples e direta com ícones (formas geométricas). Essa forma de comunicação visual eficiente torna-se cada vez mais importante em um mercado global onde os produtos digitais atendem frequentemente a vastas audiências internacionais com vários idiomas.

Para destacar os diferentes modos de interação entre mídia impressa tradicional e digital, considere a diferença entre pesquisar em um jornal real pela seção de Artes e usar o ícone de pesquisa na maioria dos aplicativos. Até recentemente, a maioria dos sites de jornais apresentava suas páginas como se fossem impressas, e a experiência de vasculhar o conteúdo era desajeitada e desorientadora.

Quebrando os layouts tradicionais da web, o site Signes du Quotidien usa formas quadradas e circulares básicas de maneira sutil para apresentar uma hierarquia visual única que orienta os visitantes pelo conteúdo. O menu fica no centro da página e, quando os visitantes clicam nele, aparecem quatro pontos coloridos representando as quatro seções do site. Os visitantes, em seguida, arrastam um dos pontos para o quadrado para ir para essa seção.

Movimento na hierarquia visual

Um elemento em movimento terá maior peso visual em um grupo de elementos estagnados, e movimento na hierarquia visual é um princípio que é impossível de usar na impressão, mas pode definitivamente ser incluído no kit de ferramentas do designer visual.

O que o movimento pode comunicar além de uma tradução literal de si mesmo? O movimento é frequentemente usado em uma interface do usuário como uma pista de que um elemento pode interagir. O uso do movimento pode ser levado adiante e usado como uma forma 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 essencial de comunicação visual?

Para o site I Remember, a interface principal (que é animada) se destaca imediatamente, pois convida à interação. Embora o movimento e a interface sejam ferramentas de navegação funcionais, os designers visuais usaram a perda potencial desses elementos como forma de comunicar a missão subjacente do site: a doença de Alzheimer. Assim como as memórias desvanecidas dos pacientes para os quais a organização arrecada fundos, o site desaparece lentamente no nada sem interação ativa.

Som na hierarquia da informação

O som é outra ferramenta impossível de usar na mídia impressa, mas ainda a ser desenvolvida dentro dos princípios da hierarquia. 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 o conteúdo, bem como o humor ou o significado. Elementos de design que carregam certos sons podem ser agrupados em relação uns aos outros, e aqueles que são mais ousados ​​podem parecer os mais importantes ou podem significar separação do grupo.

A qualidade de um som anexado a um elemento deve identificar, caracterizar ou ajudar a estruturar rapidamente o conteúdo. Como um som que contrasta com seu elemento visual associado pode transmitir um novo significado?

Os próprios sons podem ser tão complexos que estabelecem todo o clima 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 que pode ser empregada é onde a mágica pode acontecer.

Por sua importância no trabalho criativo do coletivo, o site criado para a exposição do grupo de artistas alemão ZERO no Guggenheim utiliza o som como pano de fundo atmosférico, e também como forma de feedback ao navegar pelo site. Toques em negrito estabelecem as peças que representam o início de um tema, enquanto projetos terciários clicam em segundo plano.

O Conceito de Hierarquia Visual

Hierarquia visual é um conceito direto, e entender a teoria é realmente mais fácil do que a habilidade prática de um designer de executar uma composição bem estruturada. No entanto, ser inventivo em um novo meio mantendo um bom design é um desafio.

Novos médiuns aparecem o tempo todo, e as situações desafiadoras não vão diminuir – muito pelo contrário. Hoje existem mais de 200 tamanhos de tela diferentes em uso. E isso são apenas os bidimensionais. Primeiro, foi a internet, navegadores de desktop, depois vieram os celulares e tablets, e agora estamos entrando em um novo território com tecnologias como TV interativa, IoT, wearables, realidade virtual e aumentada.

O design que realmente ultrapassa os limites da mídia digital ainda está em sua infância. Esperamos que os princípios da hierarquia visual e do bom design acompanhem o rápido avanço da tecnologia para que nossa experiência de mídia digital permaneça cheia de significado e prazer.

Leia mais no Blog Toptal Design:

• Impulsione seu UX com hierarquia visual clara
• Fundamentos do Design – Um Guia para a Hierarquia Visual (com Infográfico)
• Princípios de Design: Introdução à Hierarquia
• Práticas recomendadas de design de interface do usuário para melhor digitalização
• Impulsione seu UX com estes princípios de design de interação bem-sucedidos