Advertisement
  1. Web Design
  2. Design Theory

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

Scroll to top
Read Time: 4 min
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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.