Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento

No quinto artigo da série, apresento alguns exemplos web do princípio da boa continuidade ou, como prefiro, princípio do alinhamento.

Como apresentado no artigo anterior, o princípio do alinhamento é muito importante! 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).

Em qualquer web design feito por alguém que estudou o mínimo, é possível encontrar aplicações do princípio do alinhamento. Lembrem-se: nada é por acaso (tanto no desenvolvimento web, quanto na vida)!

Este artigo contém imagens com tamanho significativo. Em função disso, há um link, logo abaixo, para continuar ler o restante da matéria.

Em cada screenshot, tracei linhas para evidenciar como o alinhamento nas páginas web acontece. Percebam, novamente, que nada é por acaso. Mesmo em sites “abertos”, sem muitos elementos de delimitação, é possível identificar o uso do princípio da boa continuidade em ação. É justamente através dele que elementos

Exemplos do princípio da proximidade aplicado ao web design

Vejam no site da aleusia como os blocos de textos superiores mantém 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“, estão alinhados com a linha que fica abaixo do subtítulo “Welcome to Aleusia“. Por que eles simplesmente não eliminaram esta linha e desceram um pouco o subtítulo? 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.

Conhecimento é poder, meus caros!

No site da desi9n, eles pecaram só um pouquinho no alinhamento dos textos de descrição dos serviços (em baixo das respectivas imagens). Percebam que eles estão ligeiramento recuados à esquerda. 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). 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. 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).

A brasuca Luxicom tem um design muito bonito e com imagens bem trabalhadas! Utilizaram muito bem o recurso da sangria naquele dispositivo móvel (“sangria” é quando algum elemento “extrapola os limites”). 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. O botão “Buscar” não é desalinhado no web site; deve ter dado algum problema quando o superscreenshot gerou a imagem…

Enfim, existem literalmente milhões de exemplos de aplicação do princípio de Gestalt do alinhamento pela web à fora. 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! ;-)

Ah! Perceberam que, além dos elementos estarem alinhados, alguns deles (os mais próximos), apresentam uma outra característica em comum? Eles estão exatamente com as mesmas distâncias um do outro! Não se esqueçam do princípio da proximidade!

No próximo artigo: princípio da experiência passada.