No terceiro artigo da série, apresento alguns exemplos do princípio da proximidade Gestalt aplicado ao web design.
Este artigo é parte da série “Gestalt aplicado ao design web“. Confira a lista de todas as partes:
- Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade;
- Gestalt aplicado ao design web (parte 2): princípio da proximidade;
- Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade (artigo atual);
- Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento;
- Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento;
- Gestalt aplicado ao design web (parte 6): princípio da experiência passada.
No artigo anterior foi apresentado o princípio da proximidade que, aplicado ao design web, informa que elementos visuais próximos transmitem a idéia de unicidade e, além disso, que estes elementos são relacionados, de alguma maneira.
Navegando pela web, “pincei” alguns exemplos do princípio de Gestalt da proximidade aplicado à designs de web sites. Como este artigo tem algumas imagens um pouco pesadas, coloco, abaixo, o link para quem realmente quiser acompanhar os exemplos e ler o post até o fim.
Exemplos do princípio da proximidade no design web
Vejam neste screenshot 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, estão relacionados, já que apresentam informações gerais sobre a conta de e-mail.
Com o ato simples de colocar cor no fundo de alguns elementos, o princípio da proximidade foi muito bem aplicado.
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.
No Photorec (atualmente fora do ar), o princípio da Gestalt também foi utilizado: cada um dos retângulos mostrados na parte inferior contém uma informação sobre o serviço oferecido. Os retângulos foram explicitamente colocados devido à composição do design, entretanto, mesmo que não estivessem ali, quem entrasse no site continuaria sabendo que cada coluna seria uma “chamada” diferente, mas que trata de um assunto em comum.
A treforest design, com muita propriedade, utilizou o princípio da proximidade para “dividir” as informações presentes. Notem que os textos (brancos) estão “ligados” aos respectivos tópicos (amarronzados). A proximidade entre os dois sugere que cada texto é referente a cada tópico. Além disso, quem olha interpreta que são vários tópicos diferentes em função da distância entre cada tópico.
A Web Major (com um excelente web site, diga-se de passagem) utiliza o princípio da proximidade da Gestalt através dos espaçamentos e das cores. O retângulo escuro, é a “chamada” principal (tem letras maiores e fica na parte superior); ele é “separado” das “chamadas” secundárias, que estão abaixo. Estas secundárias, por sinal, são “divididas” umas das outras através do espaçamento e do fundo aplicado a cada um. Vejam que elas são inter-relacionadas, e isto é transmitido devido ao fato de todas apresentarem igual distância e terem o mesmo background.
O belo site da Guardian Community (atualmente fora do ar) 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 web site, que é, ao mesmo tempo, um convite para que 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.
Breves considerações sobre o princípio da proximidade
Eu poderia inserir mais um monte de exemplos, mas, creio, já deu para perceber a aplicação do princípio de Gestalt da proximidade em sites profissionais e de muita qualidade. Percebam que os web designers destes sites que apresentei como exemplo têm muita consciência das leis de Gestalt e as aplicam com muita propriedade, o que os permite elaborar composições bonitas e inteligentes, que realmente chamam a atenção do visitante e agrada aos sentidos.
Como comentei no artigo anterior desta série, sabendo que elementos próximos dão a idéia de unicidade e relacionamento, que têm ligação entre si, é possível planejar melhor o design de um web site. Logicamente que o princípio da proximidade não foi e não é aplicado sozinho para a construção de layouts. Outras leis de Gestalt também fazem parte desta verdadeira maestria.
No próximo artigo da série: princípio do alinhamento.