Girds, grelhas e linhas guias, o que são e como se usa?

No mundo do Design, sabemos que existem profissionais que preferem trabalhar de forma livre, utilizando de traçados soltos, tipografias desenhadas à mão, pincéis e tinta. Por outro lado, temos também profissionais que ja preferem trabalhar de forma mais “engenhosa”, utilizando de geometria, grids ou grelhas, linhas guias, réguas e medidas exatas para cada elemento de seu projeto. Pois bem, eu sou um desses 🙂 … Mas na realidade não existe o melhor e o pior, apenas  o que é adequado e o que atende a necessidade do cliente, indiferentemente do método ou técnica aplicada. Neste artigo irei abordar a minha visão de como é trabalhar sempre com base em grids e um pouquinho de minha experiência com esta área.

O que é uma grid

Antes de mais nada vamos ter a concepção de que Grid, Grade e Grelha são apenas variação de nome da mesma coisa, ou seja, cada designer se refere da forma que achar melhor, neste post, me referirei como GRID.

Visando manter um pensamento mais construtivista (um dia farei um post sobre construtivismo e desconstrutivismo, quando ele existir, estará disponível clicando aqui) cria-se grids que auxiliam seu processo criativo, estas podem ser aplicadas a qualquer projeto, seja produtos, cartazes, diagramação de livros e revistas, criação de símbolos e marcas, tipografia, interface, front end de um site e infinitas outras possibilidades.

A grid tem como função servir de ferramenta para o designer, e não como um fator justificador do seu projeto. Particularmente eu tenho muito auxilio na hora do processo criativo quando utilizo a grid, mas sem dúvidas ja houveram casos que desenvolvi sem nem se quer uma linha guia.

Como construir uma grid

Ao contrário do que muitos pensam, a grid não é uma ferramenta com “receita de bolo”, que segue alguns passos padrões que garantem que seu projeto saia lindo e perfeito… NÃO… A grid é uma ferramenta livre que pode ser construída da forma que o designer bem desejar. Porém existe uma única coisa que é essencial para que a grid funcione:

A relação da grid com algum elemento específico do layout.

É importante que a grid se relacione de alguma forma com algum elemento do layout que você esteja projetando. Isso é meio que obvio, afinal, se for construir uma grid apenas para que ela exista, não há motivos para construir a grid. A grid é feita para ser seguida de alguma forma ou de outra, por isso é importante esta relação, seja com uma tipografia, um espaçamento, um box, um traçado ou qualquer outra coisa. Seguindo essa lógica você pode usar o seu elemento como valor X, e este valor servirá de orientação para a criação de outros elementos, se o título mede X, o subtítulo mede meio X, á área de foto mede 10X e a área de texto 15X, por exemplo.

Entendendo esse conceito básico da grid, podemos partir para sua construção, primeiramente entendendo qual tipo de grid nós devemos ou podemos usar.

Grids Regulares

Podemos dizer que o tipo de grid mais comumente usado é a grid regular, ou seja, aquela que seu formato final acaba gerando uma área retangular de largura e altura específica, funcionando como uma espécie de folha milimetrada, a grid regular tem cada um de seus módulos separados por colunas e linhas, para que assim sirva de referência para posicionamento de elementos que irão compor o projeto.

As grids regulares são construídas de diversas formas, normalmente são de módulos quadriculares contendo uma quantidade específica de módulos para largura e altura. Porém ainda há aqueles que afirmam que não existe algum tipo de formula para a construção de uma grid deixando livre o uso de formas, quadriculares, retangulares, triangulares e até mesmo circulares.

Acima, Grids regulares com módulos quadrados, retangulares, redondos e triangulares.

As grids regulares facilitam a construção de algum símbolo ou grafismo e até mesmo de caracteres de alguma família tipográfica, porém a grid regular não gera perfeição fidedigna na reprodução final do elemento a menos que seja utilizado um módulo por completo ou que o designer se dê o trabalho de gerar subdivisões dentro de um próprio módulo.

Eu particularmente costumo utilizar Grids regulares para posicionamento de elementos, pois acho que ela tem boa performance na execução desta tarefa e me dá uma visão mais ampla de como ficará a disposição final.

Grids Irregulares

Ainda existem também as grids irregulares, ou seja, aquelas que tem um formato abstrato específico que auxilia diretamente a construção de um elemento, forma, ou até mesmo da marca como um todo, normalmente essas grids são compostas por círculos, quadrados e linhas individuais, devidamente alinhados ou angulados de forma que tenham relação uns aos outros e após o resultado final, serve de orientação exata para o desenho de um elemento específico.

A grid irregular pode ser construída de infinitas formas, pode ser criada seguindo a regra anterior de usar sempre um elemento como o valor base para tamanhos de outros, pode também ser baseada em um módulo do retângulo áureo, na largura de um retângulo raiz de dois, no raio de um círculo, no perímetro de um triângulo ou até mesmo na espessura de um caractere que compõe a marca, por isso tende a ser mais precisa e fiel na reprodução final.

Acima, uma grid irregular, criada somente com módulos do retângulo áureo, usada para a construção de uma marca.

OBS: em breve teremos um artigo sobre retângulo áureo e outras proporções, quando disponível você poderá acessá-lo clicando aqui.

Podemos ainda citar as grids mistas, ou seja, que mesclam partes da grid regular, com a grid irregular, neste caso, é comum que exista uma grid regular servindo como base para espaçamento, tamanhos ou posicionamento de elementos, porém a construção destes é feita através de uma grid irregular.

Acima, uma grid mista, com base em um módulo do retângulo áureo, criou-se uma grid regular, e usou-se esta para posicionar outros módulos do retângulo dentro da própria grid, que foi usada para a construção de uma marca.

Usando a grid na prática

Finalmente, após um breve exemplo de como você pode construir 3 tipos de grids diferentes vamos ver como seria possível aplicar estas grids na prática. Usarei como exemplo a própria grid anterior, por ser mista e ser um exemplo mais complexo.

O projeto tratava-se de uma marca chamada “Cravo & Rosa”, briefing à parte, a final, nosso objetivo aqui não é ver se o projeto foi feito adequadamente, mas sim, como foi construída e utilizada sua grid… O início foi simples, comecei com o uso de um simples retângulo áureo, e nele, separei alguns círculos que acreditava que seria necessário para construir o meu símbolo:

Após isso, desenhei uma grid regular com base no seu menor módulo, e dispus várias cópias dos círculos de forma lógica (ao menos para mim)  para construir uma grid irregular dentro da regular, visando conseguir visualizar o símbolo que desejava, gerando uma grid mista.

Feito isso destaquei a área que seria utilizada da minha grid, como dita na explicação dos tipos de grid, a grid irregular normalmente gera com grande exatidão o símbolo ou elemento buscado, logo, com o uso desta dentro da grid regular, conseguir obter com perfeição o símbolo que buscava.

Com o símbolo obtido, bastou fazer todo meu processo de seleção da família tipográfica que iria acompanhar o símbolo e também da paleta cromática (que ja havia sido determinada pelo cliente), feito isso eu desenhei outro retângulo áureo e usei seus módulos como medida para cada um dos elementos, símbolo, palavra 1, palavra 2, acessório e tagline.

Feito isso, construí uma nova grid, desta vez regular, utilizando um dos módulos quadrados do segundo retângulo áureo como referência, esta por sua vez me serviu como ferramenta de espaçamento e disposição, para que eu pudesse posicionar de forma mais harmônica todos os elementos da marca.

Por fim, este foi o resultado obtido:

Claro que a marca ainda possui algumas variações de assinatura, cor, uso isolado do símbolo… Mas este assunto não vem ao caso, como disse o meu objetivo era mostrar um pouco do processo que eu tive para construir a marca e como foi a minha utilização de grids neste processo.

Por final podemos nos questionar se a grid auxilia, restringe, melhora ou piora o design. Acredito que isso pode variar de designer para designer e claro, como eu mesmo já abordei, a grid é uma ferramenta e de nada serve uma ferramenta na mão de um profissional que não sabe usa-la, mas com certeza vale tentar, explorar e brincar um pouco com essa técnica, talvez ela possa se tornar muito útil para você assim como é para mim.

Se você gosta do assunto, não deixe de conferir o blog do Walter Mattos, o cara é muito bom no assunto e também tem alguns posts e videos explicando bastante sobre o assunto, vale conferir!

E para você? a grid é importante no dia-a-dia do seu trabalho? não? prefere trabalhar mais solto? Deixa aí seu comentário 😀

 

 

Este post foi escrito por AkiraKawazoe

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *