Princípios da Gestalt aplicados em Direção de Arte para UX/UI
No meu primeiro texto sobre Direção de Arte, eu comentei na minha visão do assunto, que UX/UI estão interligados, que é impossível pensar em interfaces tratando os dois assuntos em separado, o que acontece é que às vezes, de acordo com o projeto, é necessário maior complexidade em um dos pontos, ou não, varia também se existem dois especialistas para cada assunto, se existe apenas uma pessoa híbrida ou ainda, se existe a figura do diretor de arte.
Nesse texto eu ainda disse que a direção de arte é olhar o produto digital, ou a interface, o que estiver sendo projeto de uma maneira única, mas enxergando as duas partes em separado e tratando-as com cuidados específicos concernentes a cada uma: User Interface e User Experience.
Resumindo o outro texto em uma frase seria:
“Quando eu falo em direção de arte, quero me referir a um sistema de leitura visual de elementos.”
Anne Freitas em UX pode coexistir sem UI?
Então chegamos ao assunto desse texto: o uso da Gestalt como sistema de leitura visual de elementos. “A palavra Gestalt, substantivo comum alemão, usada para configuração ou forma tem sido aplicada desde o início de nosso século a um conjunto de princípios científicos extraídos principalmente de experimentos de percepção sensorial.”
Trecho extraído do livro Arte e Percepção de Rudolf Arheim
O sistema de leitura da Gestalt foi muito utilizado principalmente para a leitura de obras de arte, mas ficou notoriamente conhecido através dos princípios aplicados pelos arquitetos e designers formados pela Bauhaus nos anos 20, os lemas eram: “forma segue a função”, aqui podemos fazer um paralelo com arquitetura da informação e “menos é mais” fazendo um paralelo com a interface minimalista.
Eu quero transportar o sistema de identidade visual da Gestalt, para as interfaces digitais, demonstrando seus princípios como norteadores de Direção de Arte nas mídias digitais.
Eu, tenho preferência pessoal por essa linha de identidade, utilizo sempre que posso, dentro de um estilo pessoal, sempre que o projeto permite, esse toque direto, o uso de espaços em branco, poucas cores, o trabalho na diagramação e uso de elementos gráficos, pois na minha concepção é muito útil para projetos que primam por uma ação rápida do usuário ou por uso de informações, pois não dá margem para ambiguidades e também reduz atritos através de elementos desnecessários.
Em interfaces digitais, é impossível começar um projeto sem antes pensar em um modelo de grid em qual basear seu projeto. Geralmente, para páginas web utilizo um padrão bastante difundido que é uma largura total de 960 px de conteiner com 12 colunas de 80 px respectivamente. Esse formato é muito utilizado devido aos princípios de responsividade aplicados em front-end, por isso é importante, antes de mais nada, sentar e conversar quais são as restrições técnicas do projeto e isso inclui o formato da grid.
Na Gestalt, em experimentos, foi utilizado o que chamaram de “esqueleto estrutural”, com a mesma configuração de um grid, ele tem a função de propor diferentes configurações entre o objeto e seu lugar no todo. A partir disso, falamos em forças, as quais podemos relacionar com pontos em que nossos olhos são conduzidos e no caminho que realizamos tanto no olhar quanto na interação com a interface.
Quando posicionamos os elementos na grid, estamos lidando com as “tensões” do olhar e da experiência. “A experiência visual é dinâmica (…) o que uma pessoa ou animal percebe não é apenas um arranjo de objetos, cores e formas, movimentos e tamanhos. É, talvez, antes de tudo, uma interação de tensões dirigidas. Estas tensões não constituem algo que o observador acrescente, por razões próprias, a imagens estáticas. Antes, estas tensões são inerentes a qualquer percepção como tamanho, configuração, localização ou cor. Uma vez que as tensões possuem magnitude e direção pode-se descrevê-las como “forças” psicológicas.” (Trecho extraído do livro Arte e Percepção de Rudolf Arheim)
Veja wireframe aplicado no grid a qual mencionei anteriormente:
“No centro todas as forças se equilibram e por isso a posição central conduz ao repouso.” Esse equilíbrio de forças provoca um efeito de estabilidade, a posição central também faz com que o elemento fique ’em foco’, isso proporciona uma leitura direta e um impacto maior, hierarquizando o elemento como principal na leitura.
Os boxes localizados logo abaixo, também têm o efeito de equilíbrio de forças, pelo posicionamento e pela distribuição uniforme dos mesmos, e por terem o mesmo tamanho. Em uma leitura de página de internet, em que ocorre de baixo para cima, em scrolls, podemos dividir a informação em dois blocos principais. Essa arquitetura preza pela leitura, leveza onde não perturba a visão e elegância devido aos espaços em branco e simplicidade que será trabalhada pelas imagens e cores.
Na interface, foi aplicada a escala de cores do guideline, de maneira que as cores mais saturadas ressaltassem os elementos mais importantes e a utilização de duas cores frias, no mesmo tom, para equilibrar as informações, mas sem causar uma monotonia, que existiria se usasse a mesma cor em diferentes tons, uma monocromia.
Para finalizar aqui, sem querer incorrer em um paralelo complexo, mas válido, vamos ainda pensar em termos de Design Thinking como processo, a meu ver, o processo cognitivo do Designer Thinker utiliza de alguns métodos, o mais difundido entre eles é o processo de convergir e divergir, notório pelo Double Diamond. A Gestalt como psicologia prega: “Se alguém quiser entender uma obra de arte, deve antes de tudo encará-la como um todo. O que acontece? Qual é clima das cores, a dinâmica das formas? Antes de identificarmos qualquer um dos elementos, a composição total faz uma afirmação que não podemos desprezar.”
No divergir podemos relacionar como o todo, o objetivo principal, ou as várias referência colhidas como ponto de partida através de uma research, o convergir como as partes, as etapas que temos que passar para a construção do objetivo.
Assim podemos relacionar o convergir e divergir como o todo pela parte, isso não é Direção de Arte? Peguemos UX e UI como partes e uma interface, objetivo, ação ou produto digital como um todo.
Copyright © 2017–2018 por Prisma Consultoria de Design
Todos os direitos reservados. Nenhuma parte desta publicação pode ser reproduzida, distribuída ou transmitida por qualquer forma ou por qualquer meio, incluindo fotocópia, gravação ou outros métodos eletrônicos ou mecânicos, sem a prévia autorização por escrito do editor, exceto no caso de breves citações incluídas em revisões críticas e alguns outros usos não-comerciais permitidos pela lei de direitos autorais.
