Design101: Utilizando alinhamentos fortes
Hoje vamos examinar um dos princípios mais básicos em design: alinhamento. Esse tópico enganosamente simples é, na verdade, bastante complexo e está entre as mais notáveis habilidades nos designers atualmente.
Uma forte compreensão de como e quando usar certos alinhamentos o tornará instantaneamente um designer melhor e continuará sendo um alicerce fundamental para tudo o que você criar ao longo de sua carreira.
Explore o Envato Elements
Introdução ao Alinhamento
Para muitos, uma discussão sobre alinhamento pode parecer um exercício arbitrário. Essa teoria básica do design é seguramente apenas para indivíduos que nunca projetaram nada em sua vida, não para a comunidade profissional que frequenta sites como esse. Direita?
Eu próprio aprofundaria o argumento de que essa discussão é para iniciantes, afirmando que uma compreensão sólida do alinhamento visual é uma base imbatível para todos os tipos de design. É o tipo de conhecimento que, uma vez apreendido, você usará em todos os layouts criados como designer.
No entanto, apesar da idéia de que esses conceitos estão no cerne do que nós, como designers, fazemos, o alinhamento parece ser a principal fonte da maioria do design deficiente que vejo hoje na web.
Designers autodidatas geralmente têm uma noção intuitiva de como usar alinhamentos, mas isso pode e falha, sem o conhecimento explícito do backup.
Alinhando as Coisas
A idéia essencial do alinhamento é mente simples: alinhar as coisas. Fora do design orgânico, que é um tópico totalmente diferente, todos os elementos que você coloca em uma página devem ser acompanhados por um processo de pensamento lógico quanto ao seu posicionamento.
Novamente, isso é material básico, certo? Todo mundo já faz isso ... certo? Errado. Considere o seguinte site que foi enviado recentemente à nossa galeria CSS. Uso isso não como um exemplo mesquinho, mas como um instrumento de ensino. O designer é um cara incrível que está apenas começando. Ele está melhorando suas habilidades diariamente e está ansioso para aprender.
Este exemplo é extremamente típico e é exatamente o tipo de coisa que vemos todos os dias nos envios de nossa galeria. O valor estético aqui não é ruim. As cores vivas e as texturas interessantes chamam sua atenção muito bem. No entanto, o alinhamento aqui realmente errou o alvo.
Os problemas aqui podem ser difíceis para muitas pessoas. Por esse motivo, eu sempre recomendo simplificar um design para examinar as formas básicas. Você me verá fazendo isso em vários artigos que escrevo sobre design e você definitivamente deve experimentá-lo em alguns de seus próprios designs.
Agora que vemos os objetos gráficos em um estado simplificado, podemos analisar melhor o volume de espaço que eles ocupam e solucionar quaisquer problemas de alinhamento.
Observe que de repente os elementos na página parecem dispersos. A área de conteúdo principal na parte inferior não está alinhada com o banner pendurado na parte superior esquerda ou com os elementos dispersos na parte superior direita. Além disso, o logotipo do Facebook parece pequeno e isolado por si só, e o título é desconcertado da borda da navegação, que é desconcertada da borda do conteúdo.
Embora esse design parecesse bastante decente quando estávamos apenas percebendo, agora vemos que ele poderia usar muita reestruturação. A partir daqui, há duas coisas importantes que você precisa resolver: Alinhamento e espaço negativo.
Esses conceitos estão extremamente intimamente ligados um ao outro. Trabalhar com o espaço negativo tem muito a ver com o foco nas lacunas e a aplicação de simetria básica. Para obter mais informações sobre o curso de ação adequado em relação ao espaço negativo, leia o meu Guia do espaço negativo em Seis revisões.
Neste artigo, seguiremos em frente, focando mais em como usar os alinhamentos básicos com os quais você está familiarizado em layouts complexos.
Alinhamento ao centro
Layouts centralizados são o método de escolha para praticamente todas as pessoas no planeta ... exceto para designers. Por alguma razão, centralizar itens na página parece o que você deveria fazer. Certamente o trabalho principal de um designer é simplesmente centralizar itens!
Eu me deparei com esse problema alguns anos atrás, quando entreguei um design que eu havia criado para um desenvolvedor codificar. Quando ele me mostrou a versão final, tudo foi movido da esquerda alinhada para a central alinhada! Ele explicou simplesmente que sempre preferiu alinhar tudo ao centro "para que pareça agradável".
A realidade é que centralizar cada item é a escolha de alinhamento mais fraca que você pode fazer.
Não há arestas rígidas a serem seguidas; portanto, seus olhos precisam fazer muito mais trabalho para absorver o layout geral e absorver o conteúdo específico.
Quando usar
Isso não quer dizer que os alinhamentos centrais sempre devem ser evitados. Eu mesmo os usei em demos para este site. A chave é saber quando usá-los.
Acho que o melhor cenário possível para um alinhamento central é quando há muito pouco em uma página. Quanto mais complicado o layout, menos alinhamentos no centro funcionam. Se uma determinada página não tem muita coisa acontecendo, os alinhamentos centrais podem fazer uma afirmação poderosa.
Alinhamento à esquerda
Os alinhamentos esquerdos, embora sem dúvida chatos, são sólidos e devem ser o seu alinhamento padrão para boa parte do trabalho que você faz.
Estamos acostumados a ver o conteúdo organizado de maneira alinhada à esquerda. Abra um livro ou jornal e você encontrará muitos alinhamentos à esquerda. Navegue pelos anúncios em seu lixo eletrônico, novamente, muitos alinhamentos à esquerda. Você os verá no Facebook, nos resultados de pesquisa do Google, nos fluxos do Twitter e em todos os outros sites importantes.
Os alinhamentos à esquerda dominam o mundo, ou pelo menos as sociedades que lêem da esquerda para a direita. Você não deve depender completamente de um alinhamento esquerdo para tudo, apenas saiba que esse é o caminho seguro.
Quando usar
Use em todos os tipos de situações, mas principalmente quando houver muito texto. Basta dar uma olhada na página que você está lendo agora. Se isso fosse alinhado ao centro, seria um pesadelo.
Observe que, especialmente na Web, alinhar à esquerda algo não significa que você não pode centralizá-la. Por exemplo, uma div HTML geralmente contém vários parágrafos e imagens alinhados à esquerda, mas é centralizada na página usando CSS.
Alinhamento à direita
Alinhamentos corretos são provavelmente os mais raros. Como lemos da esquerda para a direita, parece estranho que algo se agarre à borda direita.
No entanto, é um alinhamento perfeitamente forte que pode ser usado minuciosamente em seus projetos, especialmente na impressão (tende a ser ainda mais inesperado online).
Quando usar
Muitas vezes, embora nem sempre, um alinhamento correto transmita uma sensação de singularidade. Se você está projetando algo que precisa se destacar e se sentir diferente, um alinhamento correto é um ótimo lugar para começar.
Justificando Alinhamentos na Web
O alinhamento que deixamos de fora é obviamente justificado. Isso entra em vigor quando você une um site inteiro como elemento conceitual.
O interessante sobre o design da Web é que ela geralmente envolve uma mistura de alinhamentos. Você provavelmente já ouviu designers sugerir nunca misturar alinhamentos, mas esse conselho simplesmente não funciona no mundo real.
Em vez disso, é necessário tomar decisões para os elementos de uma página e para os elementos da página como um todo. Observe como iniciei esta discussão examinando um exemplo de visualização do alinhamento de um site como um todo, mas depois discuti os alinhamentos de itens individuais.
Depois de definir um alinhamento para o texto e as imagens em sua página, juntar tudo geralmente envolve colocar tudo na página em um alinhamento justificado. Embora você possa ter uma margem irregular, justificar tudo pode adicionar o toque de arrumação final que faltava no exemplo original.
Observe como no site acima há um forte alinhamento à esquerda, mas tudo no lado direito também foi alinhado para criar uma aparência justificada e coesa. O pequeno botão de login está alinhado com as imagens do navegador, alinhadas com o lado direito do ícone do calendário.
Este é um design limpo e profissional. Pode não ser apropriado para todos os projetos, mas muitas vezes vejo designers tentando alcançá-lo e falhar e queria abordar algumas das causas prováveis.
Essa é uma das razões pelas quais os sistemas de grade são tão populares. Jogar tudo em uma grade garante que seus alinhamentos sejam robustos e fáceis de seguir.
Conclusão
Para resumir, quando possível, use alinhamentos fortes que facilitem o acompanhamento dos olhos pelo fluxo de informações. Os alinhamentos de centro são aceitáveis, mas tornam-se mais difíceis de implementar adequadamente à medida que o conteúdo de uma página aumenta.
Lembre-se de que o alinhamento se refere a itens específicos em uma página, bem como a organização dos objetos como um todo. Gaste tempo em todos os designs, certificando-se de que todos os seus elementos estejam alinhados corretamente com tudo na página. Isso se aplica vertical e horizontalmente ao longo de todas as arestas do design.
