3 razões para mudar sua concepção sobre grids

To grid or not to grid?

Existem muitas discussões em torno de grid, enquanto alguns designers são adeptos e defensores dessa técnica de design, outra frente acredita que o uso dela pode ser restritivo, atrapalhando o processo de criação e limitando a liberdade do designer.

Independente de sua posição, destacamos 3 pontos que podem fazer você considerar a utilização dessa técnica no seu processo de design. Ressaltando que o tema grid é bem extenso e existem muitos artigos e livros. Caso vocês queiram se aprofundar mais no final do post vamos adicionar alguns links.

Grid, what?

Opa não sabe o que é grid? Então antes de mostrar alguns benefícios de utilizar esse sistema vamos começar pelo começo…. O QUE É UM GRID?

Grid é uma estrutura geométrica constituída por eixos de linhas, verticais e horizontais, que auxiliam o designer na ordenação, distribuição, alinhamento e dimensão de elementos gráficos(textos, imagens, formas).

Em termos ainda mais básicos, grid é uma maneira de fornecer uma estrutura em que os designers possam apresentar conteúdos e imagens de um modo muito mais legível e gerenciável.

A utilização dessa técnica garante consistência visual no layout, além de ajudar a direcionar os usuários no caminho que seus olhos devem percorrer em um determinado layout, tela, design.

O conceito de grid não é recente, é possível encontrar registros do uso dessa técnica desde muito antes de design virar uma matéria acadêmica. Durante a era do renascimento, princípios matemáticos e arquitetônicos surgiram no meio da arte e da pintura como forma de estabelecer regras de perspectiva — métodos que pudessem transportar a sensação profundidade relativa a uma linha de horizonte.

Masolino’s ‘St. Peter Healing a Cripple and the Raising of Tabitha’ (1425). Nessa pintura já é possível observar o uso de perspectiva

O grande “boom’’ e popularização do sistema de grid ocorreu por volta da primeira guerra mundial, na Suíça. Uma das únicas regiões neutras durante a guerra e que foi ponto de encontro para os refugiados intelectuais da época. Além disso, a região também era um dos únicos locais que possuía suprimentos de impressão, como papel e tinta( itens fortemente racionados nesse período).

Nessa época surgiram alguns estudos sobre o tema e inclusive o livro The new typography(1928), de Jan Tschichold e Theo Van Doesburg.


As partes da Grid

Mas quais são as partes que constituem um Grid?

Margem

Ilustração do papel da margem em um sistema de grid

As margens são o espaço fora das colunas e linhas. São elas que dão “respiro’’ aos textos e imagens, garantindo descanso aos olhos do leitor e também servindo como espaço para informações secundárias.


Colunas

As colunas são as seções verticais da grid. São elas que vão delimitar o espaço a ser ocupado pelo conteúdo. Quanto mais colunas, maior a sua flexibilidade.


Flowlines/Linhas Guia

Flow lines, são linhas invisíveis, usadas para ajudar os alinhamentos horizontais e guiar o sentido de leitura do usuário pela página e pode ser utilizada par impor um ponto final e inicial para texto e imagens.


Módulos

Os módulos são unidades de espaço criadas pela intersecção de linhas e colunas. Eles fazem o papel de demarcar o espaço que vai ser ocupado por futuros elementos(imagens,vídeos etc..).


Unidades/Regiões

Unidades ou regiões são agrupamentos de colunas, linhas ou módulos que formam um elemento de uma composição.


Gutters/Calhas

O gutter é o espaço em branco que faz a separação das colunas e das linhas. Quanto mais separado ou mais apertado o gutter for, menos e mais tensão visual são criadas.


Os benefícios de utilizar Grids

Agora que já introduzimos o conceito de grid, seguem 3 pontos para tentar fazer você virar casaca e entrar para o time Grid.


1.Consistência
“I see graphic design as the organization of information that is semantically correct, syntactically consistent and pragmatically understandable.’’
Massimo Vignelli

Utilizar um sistema de grid permite com que os designers sejam capazes de atingir um nível de consistência em seus projetos que de um modo livre seria muito mais complexo de atingir.

O comportamento do aplicativo spotify em diversos tamanhos de telas, preservando a consistência

Alcançar o nível de consistência e uniformidade também são fatores importantes para garantir uma boa experiência para o usuário, tornando um aplicativo, site fácil de navegar, ler e compreender. E é através do uso de um sistema de grid que o designer é capaz de trazer uma experiência concisa e familiar para os usuários, tornando o conteúdo acessível.


2.Ordem
‘‘The grid is the most vivid manifestation of the will to order in graphic design. […]Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.’’
-Grids Are Good

No seu livro the laws of simplicity, John Maeda comenta que nós seres humanos somos por natureza seres organizacionais. Sempre tentando agrupar e categorizar tudo que encontramos pela frente.

Dentro do design, grids são uma forma de criar ordem no layout. É uma ferramenta que ajuda a organizar o espaço, texto, imagens e qualquer outro elemento, trazendo equilíbrio. Mais do que isso essa técnica impede com que o designer jogue aleatoriamente componentes na página sem pensar.

Comparativo de ruas de algumas cidades americanas. Mais um exemplo do uso de grids

Se você parar por um instante e observar tudo que tem a sua volta, é bem provável que encontre o conceito de grid em mais lugares do que imagina(janelas de prédios, mapas, ruas, revistas). Existe um grid invisível em cada superfície. Você não é capaz de ver, mas ele está ali para orientar.

A ordem não só traz benefícios para o processo de criação dos designers como também define expectativas, regras, timbres e alguns casos o tom do design.


3. Velocidade
“The grid sys­tem is an aid, not a guar­an­tee. It per­mits a num­ber of pos­si­ble uses and each designer can look for a solu­tion appro­pri­ate to his per­sonal style. But one must learn how to use the grid; it is an art that requires practice.”
-Josef Müller-Brockmann

Existem muitas discussões de que a utilização de um grid atrapalha o processo de design pois acaba tomando muito tempo. E isso não é verdade, muito pelo contrário, além da questão de consistência e ordem que já foram mencionadas, o grid também auxilia os designers na resolução de problemas em menor tempo.

Uma vez definido um sistema de grid, o designer tem menos trabalho de ficar indo e voltando, fazendo questionamentos sobre a consistência de sua peça, tornando o processo mais eficiente.

Ademais a utilização dessa técnica impõe algumas restrições ao designer, reduzindo o número sem fim de possibilidades na hora de desenvolver uma peça.


Conclusão

O sistema de grid é mais uma das inúmeras técnicas disponíveis, que irão auxiliar os designers na resolução de problemas. Existem muitos designers que não utilizam o sistema de grid no dia-a-dia porém como citei acima, o uso dele pode trazer alguns benefícios que o fazem uma ferramenta excelente para o desenvolvimento de um layout.

Se você deseja se aprofundar mais no tema, no final do post coloquei as referências que foram utilizadas como base para a concepção dessa peça.

já usou grid hoje?

Referencias

Quem quiser se aprofundar mais sobre Grid

Outros

Coisas aleatórias com grids

Creditos

Imagens

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.