anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

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

capa-gestalt

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?

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

mesmo tamanho

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:

Gestal aplicada

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:

Segundo exemplo

À 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:

Fuscas

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:

gestalt 04

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 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:

proximidade

A Semelhança

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

semelhança

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.

segregação

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:

fechamento

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.

continuidade

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.

pregnancia

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:

Simetria

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.

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.

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

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

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).

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.

Amendoim chocolate

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.

Ovo de páscoa

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!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

A arte do design front-end
 O que é Front-End? Segundo o Wikipédia: Em ciência da computação, Ambos são termos generalizados que
  • Thiago Oliveira

    Muito bom, obrigado!