O que é uma retícula

Qualquer documento que tiver que ser construído terá que estar composto em base a uma retícula.


A retícula é uma série de guias que nos darão os tamanhos das colunas para o texto, gráficos e imagens que tivermos que compor.

De dentro para fora

Neste artigo vamos explorar o design da retícula de dentro para fora. Vamos compor primeiro uma retícula para os conteúdos e logo, veremos como compor a retícula para o resto dos elementos de navegação (botões, etc...).

A folha em branco

A primeira aproximação que devemos fazer para poder projetar uma retícula é conhecer o conteúdo, hierarquias e objetivos do documento.

Devemos conhecer com clareza o que deve comunicar o documento, a temática do mesmo (se é opinião, se é uma receita, se é um informe técnico...).

Se nosso site pode albergar diferentes tipos de documentos deveremos desenhar tantas retículas como tipos de documentos. Não há outra via. Não se pode pensar em um desenho "para tudo" já que perderemos legibilidade e compreensão por parte dos usuários.

Se o usuário se vê exposto a diferentes tipos de conteúdo baixo o mesmo esquema, pode se perder. É chave que uma diferença visual marque uma diferença editorial.

Já conhece o conteúdo... coloque sobre o papel.

Há duas formas de se aproximar ao desenho da retícula.

O matemático.

Supomos que alguém pode diretamente tomar a largura do documento, calcular a proporção áurea e tirar uma retícula.



Neste caso, as linhas azuis nos marcan a proporção aúrea do documento e daí podemos obter uma retícula.

Particularmente, não costumo gostar deste método porque dá por entendidos muitos aspectos de largura de parágrafo, etc.. que são necessários cuidar.

O orgânico

A aproximação mais natural é a orgânica onde o conteúdo nos dará as proporções que logo poderemos sistematizar em forma de retícula. Por isso, o primeiro passo para estabelecer a retícula é colocar um conteúdo sobre o papel... ou neste caso, sobre o navegador.

Devemos ser capazes de criar uma largura de texto onde vejamos que nosso conteúdo flui de forma natural.


Na tela, a leitura é mais difícil que em papel e portanto, devemos cuidar a largura da linha. Em geral, algo superior aos 350 pixels com tipografias de tamanho 10 / 11 / 12 costuma ser correto.

Ainda assim, devemos cuidar muito destes aspectos de tamanho e largura de linha já que um documento que pode ser lido com comodidade na tela economiza muito tempo aos usuários.

Especialmente em âmbitos como intranets, universidades ou centros de documentação, se conseguimos fazer os documentos legíveis em tela, a economia de impressões, etc... pode ser enorme.

Esta largura de coluna base é o ponto de partida para a retícula.


Agora temos que ver como colocaremos as fotos, chamadas de texto, anotações, etc...


Sistematizando a retícula

Dentro de nossa largura geral, devemos de ser capazes de dividir la retícula em um número suficiente de colunas e filas como para poder alojar todo tipo de elementos, porém, sem que sejam muitos para que pareça arbitrário ou complexo demais para gerenciar.

Aqui igualmente devemos trabalhar de forma orgânica à princípio criando o layout de forma livre. Photoshop costuma ser a ferramenta mais cômoda.

Devemos compor as fotografias, possíveis gráficas de forma natural e logo ver como sistematizar os elementos.

Ou seja, devemos separar os processos de design e produção.

E é bom que sejam pessoas diferentes. O designer deve se liberar de possíveis travas técnicas que lhe impeça expressar com liberdade o conceito a modelar.

Se os aspectos técnicos são os que imperam, afinal todas as web acabam parecendo o mesmo.

A retícula é a única via para um design escalável

O design baseado na retícula é a única via que garante que seu projeto, a nível de design, seja escalável.

Por outro lado, apesar de optar por um desenho orgânico como método de aproximação ao desenho, o melhor a nível operacional é que esse desenho se traduza em termos mais redondos possíveis.

Ou seja, que ao acabar o projeto tenhamos uma linguagem do estilo:

• Largura do parágrafo: 350 px
• Largura de coluna 1: 150 px
• Largura de coluna 2: 150 px
• ...

Desta forma a nível operacional qualquer ampliação, revisão, edição poderá se realizar desde uma base sólida.