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.
- 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.
- 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 (artigo atual)
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.
Olá!
Venho acompanhando essa série sobre Gestalt, e está ótima!
Sempre ouvi falar em gestalt, mas não conseguia imaginar como aplicar no design e a maioria dos textos foca muito na parte mais “psicológica” , deixando a prática de lado. =D
A tua série tá rebentando. Tomara que ainda venham muitos posts por aí.
@ Elomar França
Oi, Elomar! Muitíssimo obrigado pelos elogios! Certamente com sua ajuda e de outros leitores, terei estímulo para continuar a escrever mais e mais!
Esta série sobre Gestalt é realmente interessante, para aprendermos, principalmente, que nada do que vemos na web (que tenha qualidade) é feito ao acaso! É coisa pensada e planejada, de “profissa”, mesmo!
Já está quase terminando a série, mas, depois, farei mais outras!
Obrigado por comentar e volte sempre!
Está de parabéns pelos posts !!!! eu estava rodando a net para achar dicas e cai no lugar certo, espero que com essas dicas eu possa melhorar meu site e dos meus clientes !! Obrigado e continue postando mais dicas !!!
@ Luiz Carlos
Muito obrigado, Luiz! Espero que seus trabalhos melhorem com este estudo e com os próximos que fará; é sempre bom aprimorar as técnicas com boas novas informações! ;-)
Abraços e volte sempre (assine o feed do desenvolvimento para web para saber das novidades)!
Parabéns, estou cursando web design e precisei fazer um trabalho sobre getalt aplicado-prícipio da continuidade, esse foi o melhor site que visitei e o que realmente tirou minhas dúvidas, espero que seu trabalho possar ser reconhecido, até mais.
@ Fábio
Eu também espero, Fábio! Já foi reconhecido por você, o que é ótimo! Também espero que as informações lhe tenham sido úteis! Volte sempre! ;-)