Curso Web Design | O que é Gestalt e como aplicá-la em seus projetos

Link to Blog do Curso Web Design - Microcamp SP

O que é Gestalt e como aplicá-la em seus projetos

Posted: 21 Nov 2013 04:05 AM PST

Criar um design bonito e funcional pode parecer fácil para alguém que tenha frequentado um bom curso ou uma boa escola de design. Mas para a grande maioria de pessoas que nunca estudaram ou participaram de qualquer atividade relacionada ao aprendizado das teorias gerais do Design, essa tarefa pode não ser tão fácil assim. Uma questão que ainda intriga a maioria dessas pessoas é: o que realmente define um bom designer? É apenas talento? A pessoa possui algum tipo de “olho especial” que o auxilia a perceber o que funciona e o que não funciona? Ou existe uma metodologia lógica e científica por trás de tudo isso que pode guiá-la e levá-la a criar um grande projeto?

Pensando nisso, o Blog do Web Design publica com alguma regularidade alguns posts sobre a Teoria Geral do Design. Alguns deles como A importância de ser Criativo, A Teoria das Cores e o Web Design, Simetria e Assimetria e A Hierarquia Visual e o Design tiveram uma boa repercussão entre os leitores. Eles foram escritos para que você possa conhecer, refletir e aplicar em seu dia-a-dia esses conhecimentos e a se aprofundar um pouco mais nas idéias, teorias e estudos gerais sobre o assunto. Hoje, falaremos sobre a Gestalt – um assunto muito rico e importante e que provavelmente mudará algumas de suas idéias sobre o que é Design. A sugestão de escrever sobre o tema foi dada pelo nosso leitor assíduo (e amigo) Fábio Vianna, de Santos -SP. Você também pode sugerir temas para o Blog, basta apenas deixá-los na área de comentários no final da página ou entrar em contato conosco. Espero que apreciem o tema e boa leitura!

O Princípio da Gestalt

Gestalt, também conhecida como a “Teoria da forma”, é uma teoria do ramo da Psicologia sobre como o ser humano percebe as formas e sua relação com o ambiente ao seu redor. A palavra tem origem alemã e não possui uma tradução exata para a nossa língua. Por isso, o termo mais próximo em português seria "dar forma" ou "dar configuração a forma", mas ainda assim eles ainda não fazem justiça ao seu significado pleno na Psicologia.

Essa teoria surgiu no início do século passado, na Alemanha e teve como principais expoentes Kurt Koffka, Wolfgang Köhler e Max Wertheimer. Ela afirma que a percepção das formas em geral não se dá por pontos isolados, mas sim por uma visão de "todo". Mais: ela afirma que quando observarmos apenas um fragmento de uma forma, ocorre uma tentativa do cérebro de "restaurar" o todo para o entendimento do que foi percebido. Esse fenômeno perceptivo é norteado pela busca de fechamento, simetria e regularidade dos pontos que compõem uma figura (objeto).

Como podem observar, a percepção é o ponto de partida e um dos temas centrais dessa teoria. A Gestalt entende que a disposição dos elementos unitários que compõem o todo é de suma importância para entender como a forma é percebida pelo cérebro. Uma de suas formulações bastante conhecida é a de que “o todo é diferente da soma das partes“. Para compreender, melhor, vejamos algumas imagens a seguir:

Você enxerga uma letra “C” de “Carrefour” no espaço negativo da peça azul e vermelha? Ou só enxerga as peças?

Reparou como o círculo dentro das duas figuras tem o mesmo tamanho? Não? Pois é, essa é uma prova de como os objetos ao redor fazem com que nossa percepção sobre eles sofra mudanças.

linhas retas ou tortas? retas é claro... os elementos desalinhados causam a sensação de estão tortas.

Linhas retas ou tortas? Retas é claro… os elementos desalinhados causam a sensação de que estão tortas.

Trazendo essa teoria e sua aplicação para dentro de nossa área, os designers tendem a se concentrar em detalhes do projeto web, em vez de sua aparência geral. Eles se concentram em botões, caixas, curvas, sombras, fontes entre outros inúmeros elementos de uma página. É claro que tudo isso é importante, mas pode não fazer diferença alguma se o cliente não gostar do projeto à primeira vista, pois justamente o que a maioria das pessoas não entende é que o cérebro vê a forma geral de qualquer projeto para em seguida, começa a concentrar-se e ver os detalhes.

Observe a imagem a seguir:

Em um primeiro momento, você provavelmente vê um par de cabeças de pessoas idosas. Mas olhando mais de perto você começa a perceber os detalhes que compõem essa imagem e começa a enxergar uma outra totalmente diferente.

Por outro lado, veja agora este segundo exemplo para entender como a maioria dos detalhes não são realmente tão importantes em uma primeira visualização:

À primeira vista, você vê o todo e depois se concentra nos detalhes (como no exemplo anterior). O que não percebe é que essas duas imagens podem parecer idênticas, mas há 5 diferenças sutis nos detalhes – mas que no final das contas têm pouco ou nenhum impacto sobre o “design”:

- O pássaro preto no canto superior esquerdo está olhando direção oposta;
– O 'sombrero' (chapéu) do homem à esquerda é diferente;
– A Bengala do homem é invertida e um pouco mais escura;
– Os tijolos do pavimento na parte inferior direita são maiores na segunda imagem;
– A mulher está olhando na direção oposta.

Como deve ter percebido, apesar de ter percebido essas mudanças, isso não provocou qualquer impacto diferente em você sobre o conceito geral da imagem… Vamos ver outro exemplo comum:

Estas são duas versões de um Fusca, um modelo de 1969 e outro de 1993, e apesar de várias mudanças nos detalhes em quase 3 décadas, o projeto permanece essencialmente o mesmo. Mas eles têm diferenças. No entanto, o que você pensou quando viu essas duas imagens lado a lado foi "Olha, um Fusca!" (ou dois, no caso). Isto é devido à maneira como nossos cérebros funcionam: processamos primeiramente as imagens de forma inteira e rápida e não vemos ou percebemos inicialmente mudanças em detalhes. O todo se sobressai inicialmente.

Mais um exemplo curioso:

Se olharmos para a imagem acima com muita atenção, veremos um cão dálmata farejando o chão, junto a sombra de algumas árvores. Talvez você não o enxergue da primeira vez que olhar essa imagem (eu demorei um pouco), mas aos poucos começará a identificar suas partes (pés, orelhas, nariz, cauda, etc), e então definir a forma do cão a partir desses componentes. Assim é nossa percepção: vemos o todo e depois nos concentramos nos detalhes (se assim nos for exigido).

O mesmo acontece a cada projeto que criamos: o layout nunca é percebido através da identificação de suas partes (cabeçalho, navegação, conteúdo, botões, abas, etc…), o design é percebido como um todo, à primeira vista. Isso é uma lição importante que a Gestalt nos ensina e que devemos levar em consideração na hora de planejar nossos trabalhos.

Princípios básicos da Gestalt

Como foi dito no início deste post, Gestalt se baseia na percepção da forma. Após muitos estudos, os Gestaltistas criaram os Princípios da Gestalt , que são uma forma de organizar as diversas formas de percepção visual. Eles definiram como os elementos diferentes em um campo podem ser organizados seguindo certas regras, que você vê a seguir. Não colocarei todas aqui, somente as mais essenciais, pois o assunto é longo e dá margem para mais de um post. Mas as que citarei são as mais importantes e se você desejar, poderá pesquisar mais sobre o assunto.

A Unidade

Considera-se único o elemento que não possua agrupamento e nem relações com outros elementos ou objetos. Como pode perceber na figura a seguir, não existe qualquer tipo de relação entre o objeto da esquerda e o da direita. Eles são únicos em suas formas e cores e composições. A isso damos o nome de Unidade.

A Proximidade

Na Gestalt, são elementos que estão próximos uns dos outros se agrupam entre si, sendo percebidos como uma única unidade, como pode ver no exemplo a seguir:

A Semelhança

Objetos semelhantes tendem a se agrupar, essa semelhança pode ser na cor, forma ou tamanho:

A Segregação

Reconhecimentos de formas por estímulos provocados por efeitos visuais com pontos, linhas, planos, volumes, cores, sombras, brilhos, texturas, etc. Na imagem da esquerda, temos uma forma que tanto pode ser vista como uma taça ou como dois rostos de frente um para o outro. O que você escolhe ver? À direita, temos o panda que serve como logo da WWF - na verdade uma série de formas irregulares que sugerem um panda.

O Fechamento

Esse princípio diz que nossa mente interpreta um objeto completo simplesmente se os elementos parecerem se agrupar. Na figura a seguir você pode ver com clareza algumas formas que surgem a partir do que é sugerido na composição de outras. Sua mente irá percebê-las e “fechá-las” de imediato:

A Continuidade

Diz respeito ao alinhamento de elementos que produzem um conjunto harmônico e passam a impressão de que os elementos estão relacionados. Na figura à esquerda, as esferas sugerem uma linha como a que é vista na forma imediatamente à direita.

A Pregnância

O cérebro tende a perceber mais rápido as formas organizadas. A pregnância de uma forma pode ser medida de acordo com sua:

Legibilidade
Compreensão
Máximo de clareza possível
Sua utilização pode ser aplicada estrategicamente como recurso de narrativa para controlar a leitura.

Nas figuras a seguir, podemos perceber como a junção de diferentes formas compõem uma outra, maior, que é a primeira ser interpretada pelo nosso cérebro. Na esquerda, o logotipo da empresa Unilever. Na direita, uma imagem do cantor Jim Morrison.

Simetria

A propriedade de um corpo de ter dois lados como que refletidos num espelho. Elementos simétricos são percebidos com mais facilidade do que os não assimétricos e geralmente são os primeiros a serem notados em um design:

Aplicando o Princípio da Gestalt em seus projetos web

Abaixo estão alguns exemplos de páginas web e suas respectivas silhuetas de layout. A silhueta é o que o cérebro identifica como a forma principal da página. Tentar mudar outra coisa senão a forma principal resultará, mais ou menos, no mesmo design… e voltar para o seu cliente com o mesmo desenho depois de terem solicitado mudanças vai provocar a sensação de que nada foi feito. O projeto vai ser o mesmo até que você faça mudanças na Gestalt estrutural.

Você ficará surpreso com a quantidade de designers que cometem esse erro – e muito se perguntam por que o cliente ainda odeia um projeto ou por que sentem que nada foi alterado ou adicionado, embora você tenha trabalhado incansavelmente para melhorar os elementos individuais.

Principio de Continuidade no site da Havaianas. As linhas tracejadas indicam a divisão do site e o caminho que a visão percorre para acessar os conteúdos.

Outro exemplo de continuidade através da divisão simples do layout.

Exemplo do princípio de Pregnância na forma central do site.

A Globo.com usa a Semelhança para induzir o leitor a identificar os conteúdos (onde Verde= Esportes; Vermelho=Noticiário e Laranja=Entretenimento).

Normalmente, ao desenhar um projeto seguro e geralmente "quadrado", você perceberá que isso irá resultar em um projeto comum, nada muito criativo. Tente sempre experimentar outras formas, outros formatos, realize mudanças… tudo isso irá contribuir para singularidade e criatividade do seu design. Tente sempre começar com o container, ou a "casca" estrutural de um projeto; esqueça os detalhes e componentes individuais nesse momento. Dê atenção a estrutura e desenvolva seu projeto pensando no todo. Após essa etapa e quando você e o cliente estiverem satisfeitos com a estrutura, pegue seus wireframes e começar a trabalhar os detalhes.

Pense no seu projeto como um amendoim coberto de chocolate: se você começar o seu trabalho de design pensando apenas no amendoim, de dentro para fora, a camada externa de chocolate (que é o que será percebido em um primeiro momento) sempre vai depender da forma desse amendoim e você terá pouco controle sobre o resultado da aparência externa.

No entanto, se você tratar o seu projeto como um ovo de chocolate, trabalhando na camada exterior em primeiro lugar, e moldá-la como você deseja – ajustando seu conteúdo interno para coincidir com o formato- então realmente não importa com o que você irá preenchê-lo, esse projeto sempre terá o formato pretendido.

Excesso de imagens, de fontes, animações e de cores e podem provocar um desequilíbrio na aplicação dos princípio da Gestalt. E isso se deve ao fato de que é muito difícil (embora não impossível) conseguir contemplar todas. A questão é o quanto o designer consegue negociar com seu próprio conhecimento, ou seja, o quanto está disposto a aplicar um pouco de cada lei da Gestalt a fim de simplificar o resultado. Em geral, os designers tendem a ver no ambiente virtual a oportunidade de exercitar livremente toda a sua habilidade estética e seu conhecimento tecnológico e aí jogam toda a sorte de elementos visuais dentro da página.

Em geral, os erros estão aí, no início do processo. Planeja-se mal ou quase nunca se planeja e o resultado vai sendo um grande acúmulo de erros. É importante planejar, pois nesta fase, se pode então considerar todas as leis da Gestalt e observar a melhor forma de compor elementos, organizar a informação que tecnologia utilizar, quais as necessidades de comunicação, entre outros tópicos importantes.

Por hoje, ficarei por aqui. Espero que as dicas tenhas sido úteis, assim como boa parte das explicações. Em breve retornaremos ao assunto com outros princípios do Gestalt. E se você se interessou pelo assunto, uma boa dica é pesquisar e ler os textos e livros que serviram como base para este post, como “Gestalt do objeto – Sistema e leitura visual da forma” de João Gomes Filho (Editora Escrituras); “Uma introdução ao estudo de psicologia” de Ana Maria Bock (Editora Saraiva) e o texto no site do Instituto Gestalt de São Paulo (http://www.gestaltsp.com.br/o-que-e-gestalt/).

Espero que tenham gostado e usem o espaço abaixo para compartilhar suas opiniões e ideias para fazer do Blog Web Design um blog cada vez melhor. Até a próxima postagem!

Páginas

quinta-feira, 21 de novembro de 2013