Proximidade e Alinhamento

E aí, boys!!

Hoje iremos falar um pouco mais sobre dois dos 4 princípios! São eles: proximidade e alinhamento!

“O princípio da proximidade diz que itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos com um conjunto coeso e não como um emaranhado de partes sem ligação.

Itens ou conjuntos de informações que não estão relacionados ente si não deveriam estar próximos; isso oferece ao leitor uma pista visual imediata da organização e do conteúdo da página.”

Boy, num tô entendendo nada!

Sia calme que a gente vai explicar um pouco melhor:

Vejam esses cartões de visita a seguir:

Quanto tempo vocês passaram até ler todas as informações? Perceberam que ao invés de ver um elemento só, vocês viram 5?

É o que ome? 5 elementos?

Sim, 5 informações separadas! Isso porque elas estão espalhadas pelo cartão, e não juntas! O nome “Toad Hall” provavelmente foi o primeiro que você viu pelo fato de estar em negrito, ou seja, chamou mais a atenção que o número do telefone ou endereço, por exemplo! Ao contrário do segundo cartão, já que existem 2 nomes em negrito! Chame um amigo e pergunte por onde ele começou a ler e qual foi a ordem de leitura das informações!

E agora, José? #miajude

A solução é simples: agrupar as informações fazendo com que elas se tornem uma unidade visual. Assim, conseguimos ler a informação de uma vez, ao invés de ficar passando o olho pela página. A proximidade implica em uma relação.  Ó aí embaixo:

Dessa maneira, você consegue ler as informações com calma, porém numa ordem!

Ahhhh, agora sim! Tava entendendo era nada!

Mas peraí que ainda tem mais um! É o de alinhamento!

Como o próprio nome já diz, significa que os elementos vão estar alinhados, enfileirados, numa mesma linha. Tudo bem aprumadinho!

Esse princípio indica que nada pode ser colocado aleatoriamente numa página, cada item deve ser conectado visualmente com outro na página. Ainda que os elementos não estejam fisicamente juntos um do outro, sua mente criará uma linha imaginária conectando-os.

Como é a conversa, ome? Explique melhor!

Lembram daquele cartão de visitas ali em cima? E apois! Espiem como fica o alinhamento dele:

Este exemplo apresenta a mesma organização visual, mas está alinhado à direita. Agora o canto bem delimitado à direita ficou visível. A linha invisível que conecta as extremidades dos dois conjuntos de texto é mais forte se comparada à opção com o alinhamento centralizado.

Esse e mais exemplos você encontra no livro “Design para quem não é designer”, de Robin Williams.

Amanhã tem vídeo, hein? Fiquem ligados lá no nosso canal do YouTube! Um xêrooo e até mais!