Arte e Design Digital: A sintonia secreta das artes plásticas na user interface
Não é de hoje que arte e design são semelhantes e muito discutidos pois a sua verossimilhança, seus conceitos circulam um entre o outro.
No curso sobre As Leis da Percepção Visual: unidade, peso, equilíbrio e movimento, Pepe Gimeno traz diversos insights sobre como o criação e observação da arte criam belas unidades gráficas.
Pepe Gimeno comenta sobre sua relação de trabalho com o descarte do lixo do mar e sua aplicação nas artes. Ele utiliza do lixo para criação de unidades visuais com diferentes tipos de peso e movimento visual, o mais interessante é como ele consegue retratar essas unidades dentro de camadas de grid, sombra, densidades e pesos visuais diferentes.
O processo de encontro de unidades visuais acontece conforme a maturidade visual que desenvolvemos, aprendizado, experiência, retenção das informações visuais.
Por exemplo, se você observar a arte de forma estática, sem movimento terá um tipo de informação, ao dar vida como cores, linhas e o peso dos itens contidos na imagem, aliados ao movimento que a imagem está passando para você, terá um outro sentido sobre aquilo que está observando.
Trabalha-se também com forma, fundo e cores, onde a simples observação das unidades menores nos faz refletir sobre o que está tentando nos dizer e como está tentando trabalhar com o outro que está ao lado.
Formas de realizar a composição de uma unidade gráfica são:
1 - Proximidade e semelhança;
2 - Um grid que organize e compacte as formas e suas estruturas;
3 - Criação de uma forma, as pequenas unidades que formam o todo;
criam uma composição, uma forma final;
4 - Ordem e organização do espaço que será trabalhado;Para trabalhar com peso em peças gráficas ou artes, utilizamos o contraste, tamanho e a cor para definir o peso visual da unidade inteira ou de alguns itens dentro da unidade que conversaram com o todo.
Movimento a partir da unidade utilizando proximidade e semelhança:
Peso e movimento, caso observar o circulo possui um peso fisico e de cor maior utilizando espaço da folha, ele traz a sensação de movimento e que está caindo ou irá rolar para baixo da folha escura onde está deitado.
Nas imagens abaixo a versão 1 — Peso, tem um forte tom avermelhado que vem debaixo para cima, dá sensação que acabou de afundar o papel na tinta vermelha, traz uma sensação de nudez para o branco.
Já caso da versão 2 — Peso, criando peso na parte de cima, trará a sensação de que há tinta vermelha escorrendo para baixo. Sensações de peso e movimento nas duas imagens são totalmente diferentes, ainda que os elementos sejam os mesmos. Já pensou como essa técnica pode ser usada nas peças gráficas que você cria? E porque é importante posicionar corretamente os elementos no espaço da folha que você tem?
A terceira imagem de sobreposição e peso manteve o equilibrio visual porque manteve espaço negativo em branco, enquanto a textura e as cores unem os elementos visuais. O adesivo azul no centro chama atenção para o ponto onde você deve olhar, junto com o ponto roxo que aparenta segurar todo o resto dos adesivos que estão ao seu redor sucessivamente. Quando você observou as formas desse jeito?
A imagem Equilibrio e Movimento logo abaixo, dá sensação de unidade das peças e sua união formam o movimento visual. Os gravetos que estão utilizando grande parte do total da folha, formam um guarda-chuva visual dos itens que estão logo abaixo, bem como sua margem delimitada pela principal composição centralizada.
A segunda peça Equilibrio cria uma forma de ângulo agudo ou “/” que torna visualmente agradavel e compositiva, delimitando um certo peso visual no canto lateral esquerdo e o mesmo peso mais acima no canto lateral direito. As peças não brigam por peso, e dividem o espaço negativo do papel branco.
A terceira peça Sobreposição e peso manteve uma estrutura vertical alongada de papeis rasgados e fora dela na margem, existe um adesivo “79. — ” trazendo nossos olhos para ele para em seguida observar o adesivo enrolado que parece estar grudado e caindo sob a parede amarela. A composição é pensada de forma que mantenha o equilibrio visual dos elementos que em conjunto formam o todo.
Todos esses exemplos trazidos e montados a partir do curso de Pepe Gimeno são para demonstrar que a simplicidade e a observação de cada uma das partes, o cuidado podem gerar interessantes peças de design ou arte.
A arte imita a natureza e por sua vez , o ser humano imita a natureza.
E como tudo isso está ligado ao design e aos sistemas que são criados?
Tudo requer equilibrio, medidas, grids e pesos diferentes para comunicar o que você deseja passar no projeto que está criando.
Coloquei abaixo um exemplo de interface onde todas as medidas foram levadas em conta para sua criação e foram colocados alguns pontos de cor demonstrando onde há mais peso visual, caso houvessem imagens nos cards acinzentados teriamos pontos de peso visual diferentes. Outro ponto importante que deve ser observado é o grid, nesse caso foi usada a régua vermelha para exemplificar. Cada parte dos elementos é um tipo de organismo separado.
Podemos trazer o exemplo da Atoms Design Methodology onde pequenos atomos como formas básicas(texto, quadrado, circulo, cores), que juntas formam moléculas (radio button, check box) e formam organismos (label+radio button, card[imagem, texto, quadrados e ícones]) que formam um template e por fim uma página completa e bem estruturada.
Assim é formada a natureza tal qual, a arte, o design e sua forma de organização.
Pepe diz que há um caos organizado, as vezes parece que está tudo desorganizado e mal estruturado mas precisamos olhar mais perto, entender os motivos e os conceitos para então classificar o sistema, categorizar e organizar mais e melhor.
Espero poder lhe ajudar com alguns noções interessantes de observação que o autor trouxe com o passar do curso, e que possam contribuir com a sua visão de design de interface de algum modo.
