Advertisement
  1. Web Design
  2. Design Theory

Forças Invisíveis: Alinhamento, Direção e Foco

by
Read Time:4 minsLanguages:
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Size, Contrast, and Balance

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O design é cheio de "forças invisíveis", todas ajudando na comunicação clara e direta. Da mesma forma que você tem a obsessão pela fonte certa ou pela combinação de cores correta, seu projeto falhará miseravelmente se não prestar atenção a essas forças invisíveis.

Essa é a parte um de três de uma série sobre essas forças, então, comecemos com alinhamento, direção e foco.

Introduzindo os "Elementos"

Para entender de verdade as forças invisíveis do design, é preciso parar de pensar nele como fontes, cores, imagens e texto e começar a pensar nessas coisas como "elementos".

Cada um dos cabeçalhos é um "elemento", cada parágrafo é um "elemento" grande e cada imagem é um "elemento".

Em cada um desses elementos, existem outros elementos–podemos chamá-los de "sub-elementos". Sua logo pode ter "símbolo" e "texto" como elementos distintos. E cada letra em um texto pode ser considerado um elemento em si.

Toda essa conversa sobre elementos me faz lembrar das aulas de química (que nunca tive), mas é equivalente. Quando você combina elementos corretamente, você obtém algo explosivo, que pula da página. Quando os combina atropeladamente, obtém algo defeituoso.

Alinhamento

Design é desafiador porque você tem de transformar um tedioso espaço bi-dimensional em algo interessante e que passe uma mensagem. Especialmente hoje, com dispositivos móveis minúsculos e vestíveis, é importante fazer isso da forma mais eficiente. Cada pixel precisa fazer bem seu trabalho.

Por isso, alinhamento é importante. Ao alinhar elementos uns aos outros, podemos dizer muito.

Por exemplo, esses quadrados estão todos alinhados.

E se alterarmos seus alinhamentos, mudamos, completamente, sua composição.

E se quebramos esse alinhamento, parece algo caótico.

Se usarmos ícones de mídia social ao invés de quadrados, podemos ver como alinhamento é bem útil. E se esses ícones de mídia social...

Parecessem com isso?

Direção

Quando alinhamos elementos, criamos senso de direção com uma linha imaginária. Vários projetistas chamam-na de "eixo". Pense como o eixo de uma roda: todo o peso da roda gira ao redor do eixo. Tem de estar bem equilibrado. Similarmente, o eixo ajuda a controlar o equilíbrio da composição.

Vê todos esses elementos alinhados? Podemos chamá-los de eixo dessa composição.

Se alinharmos outros elementos próximo ao eixo, ele ainda domina e controla a composição.

Seu avô estava certo: tome cuidado com seus eixos. Por exemplo, evite alinhar centralmente textos com uma composição "assimétrica".

Independente de como posicionar seu texto: centralizado, à esquerda ou à direita (esqueça texto justificado para web), você cria um eixo junto do seu alinhamento.

Ao centralizar texto, você cria um eixo e todo o peso desse texto gira em torno do eixo. O resto da composição também quer ser centralizada ao redor do eixo.

Logo, se você joga algum texto alinhado à esquerda próximo ao texto centralizado, a composição começa a ficar confusa. Agora, você tem dois eixos lutando entre si. Isso não é de assustar?

A exceção é quando o elemento centralizado toma a largura da composição e os elementos alinhados à esquerda ou à direita estão na mesma composição. Assim, os eixos não brigam entre si.

Note que ambas as colunas estão alinhas à esquerda.

Comumente, você vê esse padrão em design para dispositivos móveis. Nessa captura de tela do app do Yelp, os menus superior e inferior tem orientação centralizada, enquanto o resto está alinhado à esquerda.

Ou você poderia criar um eixo ao usar o vão criado por uma coluna alinhada à direita e a outra alinhada à esquerda.

Foco

Até agora, concentramo-nos nos eixos verticais. Também podemos ter eixos horizontais (ou diagonais, que serão raros em projetos para web e dispositivos móveis).

Quando dois eixos fortes cruzam, criaremos uma área focal. O olho seguirá, naturalmente, qualquer eixo forte, logo, se dois eixos fortes cruzam, o olho gastará bastante tempo lá.

A qualquer momento, em um projeto mobile ou web, haverá algo que queremos que o usuário consentre-se, assim, podemos usar eixos cruzantes para chamar atenção, como nessa página de destino:

O texto alinhado à esquerda cria um eixo e o alinhamento do botão "buy now", com a imagem, cria outro. O local que eles cruzam, criamos a área focal.

Conclusão

Ao usar alinhamento para construir eixos, controlar direção e estabelecer áreas focais, adequamos melhor nosso projeto aos objetivos: seja aumentar a legibilidade ou gerar conversão.

Volte para ver meu próximo artigo, onde falarei sobre como ajustar o tamanho dos elementos para criar projetos harmoniosos, bonitos e claros.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.