# Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento > Gestalt Parte 5: Exemplos práticos do Princípio do Alinhamento na web. Aplicações reais de continuidade visual em design de interfaces digitais. Veja! URL: https://dpw.dev/design/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/ Publicado em: 2008-03-11 Categoria: design Tags: planejamento, series, web-design Autor: Tárcio Zemel No quinto artigo da série, apresento alguns exemplos _web_ do **princípio da boa continuidade** ou, como prefiro, **princípio do alinhamento**. 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](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-3-exemplos-web-do-principio-da-proximidade/); - [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 (artigo atual); - [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/). Como apresentado no [artigo anterior](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-4-principio-da-boa-continuidade-ou-principio-do-alinhamento/ "Ler o artigo sobre o princípio do alinhamento."), 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 ![Exemplo de aplicação do princípio de Gestalt do alinhamento.](/images/blog/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/aleusia.gif) Vejam no _site_ da [aleusia](http://www.aleusia.com/ "Visitar a 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! ![Exemplo de aplicação do princípio de Gestalt do alinhamento.](/images/blog/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/ininedesign.gif) No _site_ da [desi9n](http://www.ininedesign.com/ "Visitar o 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). ![Exemplo de aplicação do princípio de Gestalt do alinhamento.](/images/blog/gestalt-aplicado-ao-design-web-parte-5-exemplos-web-do-principio-do-alinhamento/luxicom.gif) A brasuca [Luxicom](http://www.luxicom.com.br/ "Visitar a 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](http://www.superscreenshot.com/ "Visitar o site que tira fots de sites inteiros.") 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](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-2-principio-da-proximidade/ "Ler o artigo sobre o princípio da proximidade.")! No próximo artigo: **princípio da experiência passada**. --- 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