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 quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento . In the fifth article of the series, presenting some examples of Web principle of good continuity, or as I prefer, principle of alignment.

Como apresentado no artigo anterior , o princípio do alinhamento é muito importante! As presented in the previous article, the principle of the alignment is very important! Quando utilizado correta e conscientemente, podemos fazer layouts mais organizados , mais consistentes e profissionais , já que, utilizando este princípio de Gestalt , podemos insinuar que elementos visuais têm interelações entre si (e outras coisas mais). When used correctly and conscientiously, we can make layouts more organized, more consistent and professional, since, using this principle of Gestalt, can insinuate that visual elements have interelações between them (and other things).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. In any web design done by someone who studied the least, it is possible to find applications of the principle of alignment. Lembrem-se: nada é por acaso (tanto no desenvolvimento web , quanto na vida)! Let me remind you: nothing is by chance (both in web development, as in life)!

Este artigo contém imagens com tamanho significativo. This article contains images with significant size. Em função disso, há um link , logo abaixo, para continuar ler o restante da matéria. As a result, there is a link, below to continue reading the rest of the field.

Em cada screenshot , tracei linhas para evidenciar como o alinhamento nas páginas web acontece. In each screenshot, tracei lines to demonstrate how the alignment happens on web pages. Percebam, novamente, que nada é por acaso. Percebam, again, that nothing is by chance. Mesmo em sites “abertos”, sem muitos elementos de delimitação, é possível identificar o uso do princípio da boa continuidade em ação. Even on sites "open", without many elements of demarcation, can be identified using the principle of good continuity in action. É justamente através dele que elementos It is through him that elements

Exemplos do princípio da proximidade aplicado ao web design Examples of the proximity principle applied to web design

Vejam no site da aleusia como os blocos de textos superiores mantém um perfeito alinhamento com os da parte inferior. Look at the site of aleusia as the blocks of text above maintains a perfect alignment with the bottom. A base da caixa de busca, acima e à direita, possui a mesma “linha base” que o logotipo. The basis of the search box, above and right, has the same "baseline" that the logo. 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 “. Look interesting feature that they used: the texts on the right "Quote of The Day" and "Support", are aligned with the line that is below the subtitle "Welcome to Aleusia." Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? Why do not they simply eliminated this line and fell slightly the subtitle? 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. Since, unconsciously, visitors realize that this is a little misaligned, they "provide more attention" at that point, that "uncomfortable" their perception, thus, it is guaranteed that most people who visit this Web site will read the text of presentation.

Conhecimento é poder , meus caros! Knowledge is power, my dear!

No site da desi9n , eles pecaram só um pouquinho no alinhamento dos textos de descrição dos serviços (em baixo das respectivas imagens). At the site of desi9n, they fell only slightly in the alignment of text description of services (below their images). Percebam que eles estão ligeiramento recuados à esquerda. You will notice that they are indented ligeiramento left. Retirar esta margem e justificar o texto, talvez resolvesse o caso; entretanto, talvez eles tenham escolhido um texto alinhado à esquerda para não passar a idéia de conservadorismo ; para dizer que eles são “despojados” (no bom sentido , claro). Remove this margin and justify the text, perhaps solve the case, but perhaps they have chosen a text aligned left not to pass the idea of conservatism, to say they are "cleared" (in the right direction, of course). Coisa que, aparentemente, é característica quase que obrigatória no mundo de designers … Nos textos das 3 colunas, abaixo, suas bases estão quase alinhadas, também. Thing that, apparently, is almost obligatory feature of designers in the world… In the texts of 3 column, below, their bases are almost aligned, too. Eles poderiam ter pensado melhor nas palavras para promover um perfeito alinhamento entre todos (mas isso, às vezes, é bem difícil de fazer, mesmo, por isso, essa passa… rsrs). They might have thought the best words to promote a perfect alignment between all (but that it is sometimes hard to do well, even so, this becomes… rsrs).

A brasuca Luxicom tem um design muito bonito e com imagens bem trabalhadas! The brasuca Luxicom has a very beautiful design and worked well with images! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (”sangria” é quando algum elemento “extrapola os limites”). Used very well the use of bleeding in that mobile device ( "bleeding" when some element is "beyond the limits"). 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. You will notice that the upper site (above the dark rectangle) is well alinhadinha, but the bottom does not respect the good continuity: desalinhados is with its elements in relation to those above. O botão “Buscar” não é desalinhado no web site ; deve ter dado algum problema quando o superscreenshot gerou a imagem… The "Search" is not misaligned on the web site; should have a problem when the superscreenshot generated the image…

Enfim, existem literalmente milhões de exemplos de aplicação do princípio de Gestalt do alinhamento pela web à fora. Finally, there are literally millions of examples of applying the principle of Gestalt alignment of the web to the outside. Basta procurar que, agora que você já tem consciência de sua existência e aplicação, vai identificar os acertos e equívocos dos web designers rapidinho! Just look, now that you are already aware of its existence and implementation, vai identify the successes and mistakes of web designers rapidinho! ;-)

Ah! Perceberam que, além dos elementos estarem alinhados, alguns deles (os mais próximos), apresentam uma outra característica em comum? They saw that, in addition to the elements are aligned, some of them (the closest), have another characteristic in common? Eles estão exatamente com as mesmas distâncias um do outro! They are exactly the same dist â references to each other! Não se esqueçam do princípio da proximidade ! Do not forget the principle of proximity!

No próximo artigo: princípio da experiência passada . In the next article: principle of past experience.