gestalt 8

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

*
Gestalt para web
*
Os Princípios Gestaltistas da Organização da Percepção
Os princípios da organização da percepção de Wertheimer foram apresentados num artigo de 1923. Ele propôs que percebemos os objetos da mesma maneira como percebemos o movimento aparente, isto é, como totalidades unificadas, e não como aglomerados de sensações individuais.
Gestalt é uma teoria – uma escola de pensamento, que estuda como os seres humanos percebem as coisas. Ela apregoa que nossa percepção não se dá por “pontos isolados”, mas, sim, por uma visão de “todo”.
*
Os Princípios Gestaltistas da Organização da Percepção
Segundo a teoria da Gestalt, o processo cerebral primordial na percepção visual não é um conjunto de atividades separadas. A área visual do cérebro não responde a elementos separados do que é visualizado, nem vincula esses elementos mediante algum processo mecânico de associação. O cérebro, na verdade, é um sistema dinâmico em que todos os elementos que estejam ativos num dado momento interagem entre si; elementos semelhantes ou próximos uns dos outros tendem a se combinar, e elementos distanciados ou diferentes não tendem a se combinar.
*
Para que serve a Gestalt?
Levando em conta a Psicologia da Gestalt, que é o que interessa, para o caso, sua utilidade é analisar e “diagnosticar” as maneiras pelas quais percebemos o mundo em que vivemos. Os elementos que o compõem (vistos como um “todo”, como falado) e de que maneira isso influi na vida das pessoas.
Quer dizer, sabendo como é a “visão humana”, é possível fazer, o que quer que seja, levando-se em consideração determinadas práticas benéficas que agradam à percepção. Por exemplo: fazendo um design web levando-se em conta determinados princípios, é possível criar uma composição que agrada aos olhos e à percepção dos visitantes!
*
Para que serve a Gestalt?
O estudo de princípios básicos de Gestalt, aplicados ao design para web, podem oferecer a quem os usa a chance de compor melhores layouts e, conseqüentemente, agradar mais aos visitantes dos sites que produz. As pessoas se sentirão confortáveis e navegar por ali será um verdadeiro prazer!
Quando alguém entra em um site e pensa “Não gosto deste site, mas não sei explicar o motivo”, na verdade sabe, mas o sabe de forma inconsciente! Seu cérebro, inconscientemente, “percebe” que existem discrepâncias entre os elementos e que eles estão fora do lugar.
*
O princípio da Proximidade.
Partes que estão próximas no espaço parecem formar uma unidade e tendem a ser percebidas juntas. Ou seja, quando vários objetos estão próximos entre si, formam uma unidade visual única, coesa, e não mais parecerão distintos. Esta relação que forma o “um” sugere que estes elementos são relacionados, de alguma maneira.
Vejam este quadrado.
Na verdade não é um quadrado! São várias bolinhas dispostas uma ao lado da outra. Mas, pelo princípio da proximidade, interpetamos com um quadrado.
As mesmas bolinhas, dessa vez dispostas um pouco diferente. 
Vemos as bolinhas em quatro colunas duplas, e não como um grande conjunto de várias bolinhas como na outra imagem.
*
O princípio da Proximidade aplicado na web.
Vejam neste print do site do GMail e percebam os relacionamentos:
Itens da direita: O formulário para entrar na conta de e-mail e, abaixo, para se cadastrar no GMail. Esse relacionamento é inferido devido a os dois terem o fundo colorido; 
Itens da esquerda: Justamente por todos terem fundo branco e estarem próximos, estão relacionados, já que apresentam informações gerais sobre a conta de e-mail.
*
No site da Whoooz Webmedia o princípio da proximidade foi usado para separar os tópicos de informação que constam na página inicial. Percebam que o simples espaçamento entre os textos fez com que colunas se formassem, cada uma delas relativa ao respectivo tópico, que está em negrito. Eles se valeram apenas de texto puro e, aplicando o princípio da proximidade, conseguiram o resultado da divisão destes tópicos.
*
O site da Guardian Community torna nítida a separação entre conteúdo principal e conteúdos relacionados. O texto que é devido à página inicial é apresentado sem background, inserido diretamente no grande retângulo branco inferior; a seu lado, estão indicações para os visitantes se informarem mais a respeito do site, que é, ao mesmo tempo, um convite para que se continue lendo o restante dos conteúdos. Os três retângulos coloridos tratam de assuntos de alguma forma relacionados, já que possuem o mesmo tamanho, têm igual espaçamento e títulos e conteúdos iguais. Elementos próximos são elementos relacionados.
*
O princípio da Continuidade.
Há uma tendência na nossa percepção de seguir uma direção, de vincular os elementos de uma maneira que os faça parecer contínuos ou fluindo numa direção particular.
Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados, mais consistentes e profissionais.
Tendemos a seguir as colunas de bolinhas de cima para baixo.
*
O princípio da Continuidade aplicado na web.
Geralmente quem está começando a mexer com web design, tende a colocar os elementos visuais da composição de forma um tanto que ao acaso, tentando preencher qualquer espaço em branco que apareça. O mais triste é que fazem isso, geralmente, desconsiderando os demais elementos constituintes.
Na verdade, o que acontece é que o web designer não se atenta para este importantíssimo princípio de Gestalt: o princípio da continuidade ou princípio do alinhamento.
De acordo com este princípio, cada elemento constituinte de um layout deve ter uma conexão visual com outro elemento. Quer dizer, nada deve ser feito/colocado arbitrariamente, sem levar em consideração a totalidade da composição. E essa “conexão” pode ser feita alinhando os elementos que precisam passar a idéia de que são ligados.
*
Vejam no site da Aleusia como os blocos de textos superiores mantém um perfeito alinhamento com os da parte inferior. A base da caixa de busca, acima e à direita, possui a mesma “linha base” que o logotipo. Vejam que recurso interessante eles utilizaram: os textos à direita “Quote of The Day” e “Support“, estão alinhados com a linha que fica abaixo do subtítulo “Welcome to Aleusia“. Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? Já que, inconscientemente, os visitantes percebem que este elemento está um pouco desalinhado, eles “prestam mais atenção” naquele ponto, que “incomoda” sua percepção; dessa forma, é garantido que a maioria das pessoas que visitarem este web site lerão o texto de apresentação. 
*
A Luxicom tem um design muito bonito e com imagens bem trabalhadas! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (“sangria” é quando algum elemento “extrapola os limites”). Percebam que a parte superior do site (acima do retângulo escuro) está bem alinhadinha; entretanto, a parte inferior não respeito a boa continuidade: está com seus elementos desalinhados em relação aos que estão em cima. O botão “Buscar” não é desalinhado no web site; deve ter dado algum problema quando o superscreenshot gerou a imagem…
*
O princípio da Semelhança.
Partes semelhantes tendem a ser vistas juntas como formassem um grupo.
A igualdade de forma e de cor desperta também a tendência de se construir unidades, isto é, de estabelecer agrupamentos de partes semelhantes.
Em condições iguais, os estímulos mais semelhantes entre si, seja por forma, cor, tamanho, peso, direção, e outros, terão maior tendência a serem agrupados, a constituírem partes ou unidades.
Os círculos parecem formar uma classe e os pontos, outra, e nós tendemos a perceber fileiras de círculos e fileiras de pontos em vez de colunas.
*
O princípio da Semelhança aplicado na web.
Veja como o site da Globo.com resolve de forma inteligente a divisão dos diversos tipos de conteúdo do site: por semelhança nas cores.
*
A Ready Made Designs utiliza o princípio da similaridade através
das cores. As chamadas "Who are we", "Why use us" e "What do I get" estão sobre um mesmo retângulo escuro e se relacionam por possuírem semelhança de fundo. Vemos a semelhança e a proximidade no exemplo acima concorrendo para a unidade visual do layout. Note que o retângulo contendo as três chamadas está sobre um fundo semelhante em termos de cor. 
Semelhança e proximidade são dois fatores que, além de concorrerem para a formação de unidades, concorrem também para promoverem a unificação do todo, daquilo que é visto, no sentido da harmonia, ordem e equilíbrio visual.
*
O princípio da Complementação ou Fechamento.
Há uma tendência na nossa percepção de completar figuras incompletas, preencher as lacunas vazias.
O princípio de que a boa forma se completa, se fecha sobre si mesma, formando uma figura delimitada. O conceito de clausura relaciona-se ao fechamento visual, como se completássemos visualmente um objeto incompleto. Ocorre geralmente quando o desenho do elemento sugere alguma extensão lógica.
Percebemos um triângulo e um quadrado respectivamente, apesar da figura estar incompleta.
*
O princípio do Fechamento aplicado na web.
O pontilhismo tridimensional nos mostra, de maneira brilhante, como as partes formam o todo, ponto culminante da Teoria da Gestalt. Se observarmos os pontos isoladamente (falo da imagem 3D que gira pela tela), jamais notaremos nada inteligível; porém, vendo-as como uma unidade (pelo princípio do fechamento), fica claro que se trata do livro exibido a esquerda do site.
*
O princípio da Simplicidade ou Pregnância. 
A pregnância é a lei básica da percepção visual da Gestalt e, assim definida: Qualquer padrão de estimulo tende a ser visto de tal modo que a estrutura resultante é tão simples quanto o permitam as condições dadas. Os psicólogos da Gestalt denominaram isso como Prãgnanz ou “boa forma”. Uma Gestalt é simétrica, simples e estável, não podendo ser tornada mais simples ou mais ordenada.
Uma boa pregnância pressupõe que a organização formal do objeto, no sentido psicológico, tenderá a ser sempre a melhor possível do ponto de vista estrutural.
1 - Quanto melhor for a organização visual da forma do objeto, em termos de facilidade de compreensão e rapidez de leitura ou interpretação, maior será o seu grau de pregnância.
2- Naturalmente, quanto pior ou mais confusa for a organização visual da forma do objeto, menor será o seu grau de pregnância.
*
O princípio da Simplicidade ou Pregnância. 
Mas ela poderia muito bem ser fechada desta maneira: em uma estrela de 8 pontas.
Perceba que tendemos fechar a figura ao lado como a forma mais simples: um quadrado neste caso.
*
“A utilização do elemento humano (a moça), criando uma idéia de tridimesionalismo ao arrancar parte do ‘papel’, é fator de alta pregnância. Remete ao mundo real e não há nada que tenha mais pregnância do que elementos relacionados ao mundo real, tridimensional – uma vez que o bidimensional é mais relacionado ao mundo das abstrações, demandando muito mais paciência – e porque não dizer – talento, para criar mais pregnância usando elementos do universo abstrato. E podemos falar dos elementos que remetem aos adesivos, aos papéis sujos, que reforçam ainda mais a tridimensionalidade da proposta.”
O princípio da Pregnância aplicado na web.
*
A composição inteira é percebida como mancha visual harmônica, cujas linhas visuais de leitura se resolvem internamente, sem remeter a algo externo, gerando ruído. Dá a impressão que não falta nem sobra nada. Também se percebe que, mesmo com a riqueza de formas, tudo é assimilado imediatamente como uma entidade visual harmônica de alta pregnância. 
*
O princípio da Figura/Fundo.
Tendemos a organizar percepções no objeto observado (a figura) e o segundo plano contra o qual ela se destaca (o fundo). A figura parece ser mais substancial e destacar-se do seu fundo.
Muitas formas só se constituem como figuras definidas quando ficam como sobre
ou recortadas de um fundo mais neutro.
O vaso de Rubin: Princípio da figura e fundo. Percebemos um vaso ou duas faces se entreolhando, dependendo da escolha do que é figura (o tema da imagem) e o que é fundo.
*
O princípio da Figura/Fundo aplicado na web.
O background ou fundo incide sobre a formação da unidade visual. Tal detalhe reflete o conceito "figura-fundo". Nota-se no exemplo do site Ready Made Designs que o fundo é semelhante em cor à maioria dos elementos do layout que estão sobre ele, entretanto mais "amorfo", dando unidade visual, e não tirando a atenção das partes principais do projeto gráfico. Note também que, neste layout, há diferença de cor de alguns elementos, mas não existem cores vivas, apenas cores amenas, suaves, criando a relação e a tão desejada unidade visual. 
Rubin usa a expressão figura e fundo, ao assinalar que 'destaca-se uma parte da configuração total do estimulo (figura) enquanto uma outra parte recua e é mais amorfa. 
*
Percebam que neste e-mail marketing do Instituto Infnet,
o conceito de figura/fundo é utilizado como background do título principal, utilizando dois tons de azul.
*
Neste outro e-mail marketing do Instituto Infnet, o conceito de figura/fundo é utilizado da maneira mais tradicionalmente conhecida.
*
A polêmica da semana.