desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web Developing web - xhtml, css, web standards, usability, accessibility, web design, SEO, blogs and technology to develop the web

No terceiro artigo da série, apresento alguns exemplos do princípio da proximidade Gestalt aplicado ao web design . In the third article of the series, presenting some examples of the principle of proximity Gestalt applied to web design.

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. In the previous article was presented the proximity principle that applied to web design, announced that visual elements coming forward the idea of unity and, moreover, that these elements are connected in some way.

Navegando pela web , “pincei” alguns exemplos do princípio de Gestalt da proximidade aplicado à designs de web sites . Navigating the web, "pincei" some examples of the principle of Gestalt designs applied to the proximity of 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. As this article has some images a little heavy, I, the undersigned, the link for those who really want to follow the examples and read the post until the end.

Exemplos do princípio da proximidade no design web Examples of the proximity principle in web design

Vejam neste screenshot do site do GMail e percebam os relacionamentos: Look at this screenshot of the site GMail and understand the relationships:

• Itens da direita: O formulário para entrar na conta de e-mail e, abaixo, para se cadastrar no GMail . Items on the right: The form to enter the e-mail account and, below, to register in GMail. Esse relacionamento é inferido devido a os dois terem o fundo colorido; This relationship is inferred because of the two have a colored background;
• Itens da esquerda: Justamente por todos terem fundo branco, estão relacionados, já que apresentam informações gerais sobre a conta de e-mail . Items from left: Precisely because they all white, are related, since they have general information about e-mail account.

Com o ato simples de colocar cor no fundo de alguns elementos, o princípio da proximidade foi muito bem aplicado. With the simple act of putting color on the bottom of some elements, the proximity principle was widely applied.

No site da Whoooz! At the site of Whoooz! Webmedia o princípio da proximidade foi usado para separar os tópicos de informação que constam na página inicial. Webmedia the proximity principle was used to separate the topics of information that appear on the homepage. 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. You will notice that the spacing between the simple texts has made is to form columns, each on their topic, which is in bold. Eles se valeram apenas de texto puro e, aplicando o princípio da proximidade, conseguiram o resultado da divisão destes tópicos. They valeram just plain text and, applying the principle of proximity, achieved the result of the division of these topics.

No web site Photorec , 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. In the web site Photorec, the principle of Gestalt has also been used: each of the rectangles shown in the bottom one contains information on the service offered. 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. The rectangles were placed explicitly because the composition of design, however, even if they were not there, who enters the site would continue knowing that each column would be a "call" different, but that is an issue in common.

A treforest design , com muita propriedade, utilizou o princípio da proximidade para “dividir” as informações presentes. The treforest design, with great ownership, used the principle of proximity to "divide" the information presented. 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 . Please note that the texts (white) are "linked" to their topics (amarronzados). The closeness between the two suggests that each text is for each t ó peak. Além disso, quem olha interpreta que são vários tópicos diferentes em função da distância entre cada tópico. Moreover, who looks interprets various topics that are different depending on the distance between each topic.

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. The Web Major (with an excellent web site, let it be said in passing) uses the principle of proximity of Gestalt through the spacing and colors. 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. The dark rectangle, is the "call" Main (has more letters and is at the top); he is "separate" from "called" secondary, which are below. Estas secundárias, por sinal, são “divididas” umas das outras através do espaçamento e do fundo aplicado a cada um. These secondary, for signal, are "divided" from each other through the spacing and the fund applied to each. Vejam que elas são inter-relacionadas, e isto é transmitido devido ao fato de todas apresentarem igual distância e terem o mesmo background . Look they are inter-related, and this is transmitted due to the fact that all have equal distance and have the same background.

O belo site da Guardian Community torna nítida a separação entre conteúdo principal e conteúdos relacionados. The beautiful site of the Community Guardian makes clear the separation between the main content and related content. 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 . The text that is due to the home page is presented without background, inserted directly into the large white rectangle below, at his side, indications are for visitors to inform more about the web site, which is at the same time, an invitation to to continue reading the rest of the content of ú. 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. The three colored rectangles deal with matters related in any way, as have the same size, have equal spacing and titles and content equals. Elementos próximos são elementos relacionados. Elements coming elements are related.

Breves considerações sobre o princípio da proximidade Brief consideration of the proximity principle

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 . I could insert a lot more of examples, but, I believe, has to realize that the principle of Gestalt sites in the proximity of professional and high quality. 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. Web You will notice that the designers of these sites that presented as an example are very aware of the laws of Gestalt and applied with great ownership, which allows produce intelligent and beautiful compositions, which really draw the attention of the visitor and agrada the senses.

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 . Comentei As in the previous article in this series, knowing that elements coming give the idea of unity and relationships, which are connected with each other, you can better plan the design of a web site. Logicamente que o princípio da proximidade não foi e não é aplicado sozinho para a construção de layouts . Logically that the principle of proximity was not alone and is not applied to the construction of layouts. Outras leis de Gestalt também fazem parte desta verdadeira maestria. Other laws of Gestalt are also part of this true mastery.

No próximo artigo da série: princípio do alinhamento . In the next article in the series: principle of alignment.