# Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade > Gestalt Parte 3: Exemplos práticos do Princípio da Proximidade na web. Cases reais mostrando agrupamento visual e organização eficiente de conteúdo. Veja! URL: https://dpw.dev/design/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/ Publicado em: 2008-02-14 Categoria: design Tags: planejamento, series, web-design Autor: Tárcio Zemel 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](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-1-origem-do-termo-significado-e-utilidade/ "Ler o primeiro artigo da série."); - [Gestalt aplicado ao design web (parte 2): princípio da proximidade](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-2-principio-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](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-4-principio-da-boa-continuidade-ou-principio-do-alinhamento/); - [Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/); - [Gestalt aplicado ao design web (parte 6): princípio da experiência passada](https://desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-6-principio-da-experiencia-passada/). No [artigo anterior](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-2-principio-da-proximidade/) 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 ![Gmail: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screengmail_1.gif) Vejam neste _screenshot_ do _site_ do [GMail](http://www.gmail.com/) 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. ![Whoooz web media: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screenwhoooz_2.gif) No _site_ da [Whoooz! Webmedia](http://www.whoooz.nl/) 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. ![Photorec: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screenphotorec_3.gif) 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. ![Treforest Design: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screentreforestdesign_4.webp) A [treforest design](http://www.treforestdesign.com/), 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. ![Web Major: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screenwebmajor_5.webp) A [Web Major](http://www.webmajor.com/) (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_. ![Guardian Community: aplicação do princípio de Gestalt da proximidade.](/images/blog/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/screenguardiancommunity_6.webp) 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](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-2-principio-da-proximidade/), 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**. --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml