Gestalt para web

Os Princpios Gestaltistas da
Organizao da Percepo
Os princpios da organizao da percepo de Wertheimer foram apresentados num
artigo de 1923. Ele props que percebemos os objetos da mesma maneira como
percebemos o movimento aparente, isto , como totalidades unificadas, e no
como aglomerados de sensaes individuais.
Gestalt uma teoria uma escola de
pensamento, que estuda como os seres
humanos percebem as coisas. Ela apregoa
que nossa percepo no se d por pontos
isolados, mas, sim, por uma viso de todo.
Os Princpios Gestaltistas da
Organizao da Percepo
Segundo a teoria da Gestalt, o processo cerebral primordial na percepo visual
no um conjunto de atividades separadas. A rea visual do crebro no responde
a elementos separados do que visualizado, nem vincula esses elementos mediante
algum processo mecnico de associao. O crebro, na verdade, um sistema
dinmico em que todos os elementos que estejam ativos num dado momento
interagem entre si; elementos semelhantes ou prximos uns dos outros tendem
a se combinar, e elementos distanciados ou diferentes no 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 compem (vistos como um todo, como
falado) e de que maneira isso influi na vida das pessoas.

Quer dizer, sabendo como a viso humana, possvel fazer, o que quer
que seja, levando-se em considerao determinadas prticas benficas que
agradam percepo. Por exemplo: fazendo um design web levando-se em conta
determinados princpios, possvel criar uma composio que agrada aos olhos e
percepo dos visitantes!
Para que serve a Gestalt?
O estudo de princpios bsicos de Gestalt, aplicados ao design para web, podem
oferecer a quem os usa a chance de compor melhores layouts e, conseqentemente,
agradar mais aos visitantes dos sites que produz. As pessoas se sentiro
confortveis e navegar por ali ser um verdadeiro prazer!
Quando algum entra em um site e pensa No
gosto deste site, mas no sei explicar o
motivo, na verdade sabe, mas o sabe de forma
inconsciente! Seu crebro, inconscientemente,
percebe que existem discrepncias entre os
elementos e que eles esto fora do lugar.
O princpio da Proximidade.
Partes que esto prximas no espao parecem formar uma unidade e tendem a ser
percebidas juntas. Ou seja, quando vrios objetos esto prximos entre si, formam uma
unidade visual nica, coesa, e no mais parecero distintos. Esta relao que forma o
um sugere que estes elementos so relacionados, de alguma maneira.
Vejam este quadrado.
Na verdade no um quadrado!
So vrias bolinhas dispostas uma
ao lado da outra. Mas, pelo
princpio da proximidade,
interpetamos com um quadrado.
As mesmas bolinhas, dessa vez
dispostas um pouco diferente.
Vemos as bolinhas em quatro
colunas duplas, e no como um
grande conjunto de vrias bolinhas
como na outra imagem.
O princpio da Proximidade aplicado na web.
Vejam neste print do site do GMail e percebam os
relacionamentos:

Itens da direita: O formulrio 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 prximos, esto relacionados, j que apresentam
informaes gerais sobre a conta de e-mail.
No site da Whoooz Webmedia o princpio da proximidade foi
usado para separar os tpicos de informao que constam na
pgina inicial. Percebam que o simples espaamento entre os
textos fez com que colunas se formassem, cada uma delas
relativa ao respectivo tpico, que est em negrito. Eles se
valeram apenas de texto puro e, aplicando o princpio da
proximidade, conseguiram o resultado da diviso destes tpicos.
O site da Guardian Community torna ntida a separao entre contedo
principal e contedos relacionados. O texto que devido pgina inicial
apresentado sem background, inserido diretamente no grande retngulo
branco inferior; a seu lado, esto indicaes para os visitantes se informarem
mais a respeito do site, que , ao mesmo tempo, um convite para que se
continue lendo o restante dos contedos. Os trs retngulos coloridos
tratam de assuntos de alguma forma relacionados, j que possuem o mesmo
tamanho, tm igual espaamento e ttulos e contedos iguais. Elementos
prximos so elementos relacionados.
O princpio da Continuidade.
H uma tendncia na nossa percepo de seguir uma direo, de vincular os elementos de
uma maneira que os faa parecer contnuos ou fluindo numa direo 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 princpio da Continuidade aplicado na web.
Geralmente quem est comeando a mexer com web design, tende a colocar os elementos
visuais da composio de forma um tanto que ao acaso, tentando preencher qualquer espao
em branco que aparea. O mais triste que fazem isso, geralmente, desconsiderando os
demais elementos constituintes.

Na verdade, o que acontece que o web designer no se atenta para este importantssimo
princpio de Gestalt: o princpio da continuidade ou princpio do alinhamento.

De acordo com este princpio, cada elemento constituinte de um layout deve ter uma
conexo visual com outro elemento. Quer dizer, nada deve ser feito/colocado
arbitrariamente, sem levar em considerao a totalidade da composio. E essa conexo
pode ser feita alinhando os elementos que precisam passar a idia de que so ligados.
Vejam no site da Aleusia como os blocos
de textos superiores mantm 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,
esto alinhados com a linha que fica
abaixo do subttulo Welcome to Aleusia.
Por que eles simplesmente no
eliminaram esta linha e desceram um
pouco o subttulo? J que,
inconscientemente, os visitantes
percebem que este elemento est um
pouco desalinhado, eles prestam mais
ateno naquele ponto, que incomoda
sua percepo; dessa forma, garantido
que a maioria das pessoas que visitarem
este web site lero o texto de
apresentao.
A Luxicom tem um design muito bonito e
com imagens bem trabalhadas!
Utilizaram muito bem o recurso da
sangria naquele dispositivo mvel
(sangria quando algum elemento
extrapola os limites). Percebam que a
parte superior do site (acima do
retngulo escuro) est bem alinhadinha;
entretanto, a parte inferior no respeito a
boa continuidade: est com seus
elementos desalinhados em relao aos
que esto em cima. O boto Buscar
no desalinhado no web site; deve ter
dado algum problema quando o
superscreenshot gerou a imagem
O princpio da Semelhana.
Partes semelhantes tendem a ser vistas juntas como formassem um grupo.

A igualdade de forma e de cor desperta tambm a tendncia de se construir unidades, isto ,
de estabelecer agrupamentos de partes semelhantes.

Em condies iguais, os estmulos mais semelhantes entre si, seja por forma, cor, tamanho,
peso, direo, e outros, tero maior tendncia a serem agrupados, a constiturem partes ou
unidades.
Os crculos parecem formar uma
classe e os pontos, outra, e ns
tendemos a perceber fileiras de
crculos e fileiras de pontos em vez
de colunas.
O princpio da Semelhana aplicado na web.
Veja como o site
da Globo.com
resolve de forma
inteligente a
diviso dos
diversos tipos de
contedo do site:
por semelhana
nas cores.

A Ready Made Designs utiliza o princpio da similaridade atravs das
cores. As chamadas "Who are we", "Why use us" e "What do I get"
esto sobre um mesmo retngulo escuro e se relacionam por
possurem semelhana de fundo. Vemos a semelhana e a
proximidade no exemplo acima concorrendo para a unidade visual do
layout. Note que o retngulo contendo as trs chamadas est sobre
um fundo semelhante em termos de cor.
Semelhana e proximidade so
dois fatores que, alm de
concorrerem para a formao de
unidades, concorrem tambm
para promoverem a unificao
do todo, daquilo que visto, no
sentido da harmonia, ordem e
equilbrio visual.
O princpio da Complementao
ou Fechamento.
H uma tendncia na nossa percepo de completar figuras incompletas, preencher as
lacunas vazias.

O princpio 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
completssemos visualmente um objeto incompleto. Ocorre geralmente quando o desenho
do elemento sugere alguma extenso lgica.
Percebemos um tringulo e um
quadrado respectivamente, apesar
da figura estar incompleta.
O princpio 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 inteligvel; porm,
vendo-as como uma unidade (pelo princpio do fechamento), fica
claro que se trata do livro exibido a esquerda do site.
O princpio da Simplicidade
ou Pregnncia.
A pregnncia a lei bsica da percepo visual da Gestalt e, assim definida: Qualquer padro
de estimulo tende a ser visto de tal modo que a estrutura resultante to simples quanto o
permitam as condies dadas. Os psiclogos da Gestalt denominaram isso como Prgnanz ou
boa forma. Uma Gestalt simtrica, simples e estvel, no podendo ser tornada mais
simples ou mais ordenada.

Uma boa pregnncia pressupe que a organizao formal do objeto, no sentido psicolgico,
tender a ser sempre a melhor possvel do ponto de vista estrutural.
1 - Quanto melhor for a organizao visual da forma do objeto, em termos de facilidade de
compreenso e rapidez de leitura ou interpretao, maior ser o seu grau de pregnncia.

2- Naturalmente, quanto pior ou mais confusa for a organizao visual da forma do objeto,
menor ser o seu grau de pregnncia.
O princpio da Simplicidade
ou Pregnncia.
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 utilizao do elemento
humano (a moa), criando uma
idia de tridimesionalismo ao
arrancar parte do papel, fator
de alta pregnncia. Remete ao
mundo real e no h nada que
tenha mais pregnncia do que
elementos relacionados ao
mundo real, tridimensional uma
vez que o bidimensional mais
relacionado ao mundo das
abstraes, demandando muito
mais pacincia e porque no
dizer talento, para criar mais
pregnncia usando elementos do
universo abstrato. E podemos
falar dos elementos que
remetem aos adesivos, aos
papis sujos, que reforam ainda
mais a tridimensionalidade da
proposta.
O princpio da Pregnncia aplicado na web.
A composio inteira
percebida como
mancha visual
harmnica, cujas
linhas visuais de
leitura se resolvem
internamente, sem
remeter a algo externo,
gerando rudo. D a
impresso que no
falta nem sobra nada.
Tambm se percebe
que, mesmo com a
riqueza de formas,
tudo assimilado
imediatamente como
uma entidade visual
harmnica de alta
pregnncia.
O princpio da Figura/Fundo.
Tendemos a organizar percepes 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: Princpio 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 princpio da Figura/Fundo aplicado na web.
O background ou fundo incide
sobre a formao 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
esto sobre ele, entretanto
mais "amorfo", dando unidade
visual, e no tirando a ateno
das partes principais do projeto
grfico. Note tambm que,
neste layout, h diferena de
cor de alguns elementos, mas
no existem cores vivas,
apenas cores amenas, suaves,
criando a relao e a to
desejada unidade visual.
Rubin usa a expresso figura e fundo, ao assinalar
que 'destaca-se uma parte da configurao 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
ttulo 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 polmica da
semana.