Alinhamento

Se pudéssemos colocar o princípio do alinhamento no formato de um mandamento, seria: "Não colocarás nada arbitrariamente em uma página."

Um erro comum no design, cometido geralmente por quem é iniciante no assunto, é "jogar" os elementos no espaço que se tem para trabalhar (aqui chamaremos este espaço de página), sem considerar muito a questão de composição e, principalmente, de alinhamento.

O propósito básico do alinhamento é organizar e unificar. Pense em um punhado de pecinhas de diversos tamanhos: se você resolver simplesmente jogá-las dentro de uma caixa, provavelmente será muito difícil não só fechar esta caixa, mas buscar uma peça específica será um trabalhinho árduo; se você optar por encaixar as peças, alinhando-as, a otimização do espaço será muito mais evidente - e a composição bem mais agradável.

Pequenos engenheiros não devem fazer isso.

O sonho de toda mãe.

Quando os elementos são alinhados na página, tem-se uma unidade coesa. Mesmo se estes elementos estiverem distantes de si, o alinhamento age como uma linha invisível, conectando-os. Alinhar os elementos gráficos e textuais por uma linha dada (linha-guia) auxiliará você a conseguir uma composição ordenada e lógica, criando unidade e relações entre os elementos.

Os tipos mais comuns de alinhamento de elementos gráficos são pelas bordas e pelo centro.

Bordas: É possível fazer este tipo de alinhamento em qualquer objeto com as bordas niveladas - ângulos retos são bem adequados para isto, já que possuem quatro arestas planas para alinhar. Veja nos exemplos abaixo como conseguimos uma unidade coesa utilizando as bordas para alinhar:

Observe os alinhamentos pelas bordas verticais marcadas pelas linhas vermelhas e pelas bordas horizontais pelas linhas verdes.

Podemos alinhar também pelas bordas de uma forma maior, agrupando os elementos.

Centro: Os elementos também podem ser alinhados utilizando um eixo central. Formas simples funcionam muito bem com este tipo de alinhamentos porque seus centros são bem fáceis de ser identificados. O alinhamentos central funciona melhor com o eixo vertical, já que este se relaciona melhor com nosso sentido de simetria e equilíbrio. Já o eixo horizontal serve para objetos de formas mais complexas, já que se relaciona com nosso sentido de estabilidade.

Alinhamento central com eixo vertical.

Alinhamento central com eixo horizontal.

Se o alinhamento é muito importante na hora de compor com elementos gráficos, com os conteúdos textuais ele se faz absolutamente necessário; textos alinhados são mais fáceis de ler e cansam menos a vista. Podemos encontrar os seguintes tipos: à esquerda (no ocidente temos a vista educada para tratar com este tipo de alinhamento nos suportes), ao centro, à direita e justificado.

Exemplos de alinhamento de texto.

O designer vai utilizar os alinhamentos dependendo da sua necessidade, prestando atenção na composição total da página, tomando cuidado para não desconectar os elementos e mantendo um sentido de leitura fácil e rápido de ser identificado pelos olhos - ninguém gosta de se sentir perdido enquanto lê um texto com (pode ser sem também) figuras.

Exemplo de cartaz com bom alinhamento

Aqui temos um exemplo de uma boa peça gráfica (cartaz) sem e com o alinhamento marcado. Observe que na figura sem nenhuma marcação, é fácil identificar as informações (nome, local, data, hora), ainda que a maior porcentagem do cartaz seja composto pela imagem; isso ocorre porque o alinhamento permite essa sensação de unidade.

Exemplo de cartaz com mau alinhamento

Neste cartaz, embora seja possível verificar o alinhamento com as margens, a mistura de elementos colocados à esquerda com outros postos à direita e alguns centralizados faz o leitor se perder na quantidade de informações, que não acabam tendo ligação nenhuma - desse modo, é muito mais difícil obter uma boa leitura da peça, pois é preciso correr os olhos por todos os locais, o que acaba se tornando cansativo.

Ruim para a vista e para os negócios.

Este site, obstante elementos e cores que não se harmonizam, tem um sério problema de alinhamento - principalmente na área do menu, como podemos observar na figura demarcada. Cada seção segue um alinhamento, o que acaba dando uma sensação de confusão e dificultando o leitor na busca de um assunto específico. É um bom exemplo do que não se deve fazer, já que um internauta, quando não consegue identificar de imediato seu objeto de busca, simplesmente acessa outro site sobre o assunto da procura.

Somos todos muito unidos. E alinhados.

Já neste site, o alinhamento divide as seções de modo que sua navegação se torna didática: as seções principais na área de cima, os clippings ao lado, as manchetes ao centro. Um bom alinhamento em um site garante a unidade das seções e proporciona uma navegabilidade muito mais tranquila e rápida. Podemos perceber este alinhamento também em grandes portais de notícias, onde a área da esquerda concentra o menu com as diversas sub-seções, a área central serve para exposição dos destaques e a da direita dispõe clippings sobre variados assuntos.

O alinhamento, sendo um dos princípios fundamentais da diagramação, é quem vai guiar o leitor pela página, mostrando quais elementos estão unidos e qual a direção que esta leitura deve tomar. Um alinhamento confuso causa estranheza e cansaço; por isso o designer precisa, antes de engendrar imagens e efeitos fabulosos, caprichar nas bases da fundação da sua peça.

Referências bibliográficas:

WILLIANS, Robin. Design para quem não é Designer. 3. ed. São Paulo, Callis, 2009. DONDIS, Donis A. Sintaxe da Linguagem Visual. Trad. Jefferson Luiz Camargo. 2. ed. São Paulo, Martins Fontes, 1997. RIBEIRO, Milton. Planejamento Visual Gráfico. Brasília, Linha Gráfica e Editora, 1997. The Fundamentals of Graphic Design - Gavin Ambrose and Paul Harris Graphic Design the New Basics - Ellen Lupton and Jennifer Cole Phillips Grids – The Structure of Graphic Design – André Jute