Uma das melhores formas de se organizar os elementos em uma página ou tela é usar grades de alinhamento, também chamadas de grids. Essas ferramentas dividem o espaço visível em áreas e dão maior consistência a um layout. São o terror de quem está começando a fazer design e a salvação de quem já tem alguma prática.

Sua função é criar ordem no caos que pode se transformar um documento. O grid padroniza os espaços e ajuda o usuário a achar o que procura no lugar esperado todas as vezes. E força o designer a pensar construtivamente, de forma estruturada, para que o visitante não tenha que descobrir, a cada instante, o que foi projetado.

Se ele é assim tão bom, porque apavora quem está começando? Exatamente por falta de prática. Como não estão habituados com a estrutura, não conseguem conceber grids inovadores ou ocupar criativamente seus espaços e acabam se prendendo a uma camisa de força estrutural. Pura bobagem. O processo correto deve ser: examine os elementos a mostrar – monte o grid – encaixe os elementos. Se não se encaixarem é sinal de que o grid não funciona. Nesses casos, deve-se redesenhá-lo. Mas atenção: só se faz um grid para todo o projeto gráfico de uma revista ou website. Não existem documentos com um grid para cada página, isso é Calvinball.

O grid dá apoio à legibilidade, reconhecimento, alinhamento e compreensão da mensagem. Se ele for bem feito vai garantir a repetição (os elementos ficam sempre nos locais esperados), composição (facilita o equilíbrio dos elementos na interface) e comunicação (sua estrutura previsível facilita a compreensão das diversas telas de uma interface). Seu principal uso é a unificação do campo visual em uma mensagem consistente e harmoniosa.

Acima de tudo, um grid deve se encaixar como uma luva ao layout e servir exclusivamente para ele e para nenhum outro. Só assim teremos certeza de que ele está adequado. Grids muito genéricos são como folhas em branco, só que com umas linhas para atrapalhar. Grids muito detalhados são como folhas de papel quadriculado, igualmente inúteis.

Referências visuais

O grid usa o princípio da Gestalt de reconhecimento de formas estáveis e fortes. Ao organizar o conteúdo da página ou tela em grandes imagens, ajuda o leitor a agrupar os elementos em conjuntos de significado e orienta a leitura. Ele não precisa ser retangular, pode seguir qualquer forma. O calendário maia, em referência ao Sol, era organizado em uma estrutura circular. O mesmo acontece em mapas astrais. O grid retangular é o mais comum por um motivo bastante simples: os papéis e as telas de TV e computador são retangulares.

Espaços horizontais e verticais

Outro princípio da Gestalt — o relacionamento entre objetos em um campo visual — estimula o uso sensato dos espaços horizontal e vertical. Espaços horizontais são a entrelinha, o espaço entre os parágrafos, o espaço entre um texto e uma imagem, os espaços entre duas imagens e assim por diante. Espaços verticais são margens, larguras de colunas, espaços entre objetos e textos, espaço entre ícones e botões etc. Em uma relação equilibrada, eles são múltiplos entre si. Alterar um deles implica na alteração de todos os outros.

Os espaços horizontais e verticais interagem e influenciam para transmitir ao usuário a estrutura do documento, que é percebida como um todo, dinamicamente, de uma só vez. Por isso, é preciso considerar os espaços horizontais e verticais e sua interferência na página como um todo. Medir páginas em unidades mais precisas — como pontos tipográficos ou pixels, em vez dos genéricos centímetros — é um bom começo.

O grid deste livro, por exemplo.

As linhas cinzas são a pauta. Todo o texto se apóia nelas, mesmo que contorne alguma imagem. As linhas horizontais mais escuras dividem a área total para que imagens possam ser apoiadas. O texto corre em duas colunas, blocado.

Imagens podem ocupar uma coluna inteira ou meia, por isso essas linhas verticais de apoio que ficam bem no meio das colunas de texto.