Grids: O que são e para que servem

Um grid (ou malha) é um dos elementos fundamentais do design. O grid é, por natureza, o elemento mais ordenado do Desenho, sendo útil para inúmeros tipos de projeto.

Os grids surgiram com a proposta de serem uma ferramenta de ordem e arranjo de elentos visuais, uma forma estudada de se resolver visualmente uma composição e obter coesão no layout.

Cartaz de Josef Müller-Brockmann

Atualmente, alguns designers contestam o uso de Grids pois o consideram restritivo demais.

Uma definição
Mas enfim, o que é um grid?

Um grid é uma malha construída com diversos retângulos, usada para ordenar elementos gráficos. Segundo Derek Birdsall (apud Tondreau),

Os grids são os elementos mais mal compreendidos e mal-utilizados no layout de páginas. Um grid é útil apenas se for derivado do conteúdo que ele pretende tratar.

Ou seja, só podemos partir para a criação de um grid após termos definido o tipo de projeto que estamos trabalhando. O grid sempre é construído após termos definido o conceito do trabalho, afinal, “o conteúdo determina a estrutura que o grid terá” (TONDREAU, 2009).

As maiores vantagens de se usar grids em um trabalho é a clareza, organização e facilidade de distinção entre as diferentes informações contidas no layout (tanto na hora de criação pelo designer, quanto pelo usuário que consegue navegar com uma facilidade muito maior pelo trabalho).

Partes de um grid
A imagem abaixo ilustra um exemplo de grid:

Margens: espaços negativos entre a borda da página e a área do conteúdo. As margens exercem grande influencia sobre o conceito trabalhado no projeto, e por isso seu tamanho deve ser muito em estudado. Podem servir tanto como área de descanso para os olhos, como para chamar a atenção para o conteúdo que elas enquadram.

Linhas de fluxo: alinhamentos horizontais no espaço. Não são linhas visíveis, mas são usadas para guiar o sentido de leitura do usuário pela página.

Zonas especiais: grupos de módulos que formam campos distintos. Esses campos servem para informações específicas do projeto (imagens, publicidade, etc).

Módulos: cada pequena unidade que compõe a malha. São espaçados uniformemente e permitem inúmeras possibilidades de composição.

Marcador: elementos que auxiliam na navegação pelo documento, como número de página, título de seção, etc.

Coluna: áreas verticais que contém texto ou imagens. As colunas podem ter o mesmo tamanho ou tamanhos variados, dependendo da informação que está sendo trabalhada e dos elementos gráficos a se dispor no layout.

Tipos de grids
Os tipos mais comuns de grid são:

Grid de uma coluna: geralmente usado em textos corridos como relatórios e livros. O foco nesse tipo de grid é o texto.

Grid de duas colunas: pode ser utilziado quando temos grande volume de texto e precisamos apresentar conteúdos diferentes. As colunas podem ser iguais ou diferentes, dependendo do contexto.

Grid de múltiplas colunas: usualmente aplicados em sites e revistas, permitem uma flexibildiade muito maios que os anteriores. Combina colunas de larguras iguais ou diferentes (geralmente larguras diferentes).

Grids modulares: permitem um controle mais refinado em trabalhos com grande número de informações, como jornais, calendários, etc. São compostos por uma combinação de colunas, que organizam o conteúdo em porções pequenas de espaço.

Grids hierárquicos: estrutura organizada em zonas de hierarquia, muitas vezes compostas por colunas horizontais.

E você, utiliza grids em seus trabalhos? Ou também os considera restritivos demais?

Referências Bibliográficas
CARUSONE, Antonio. The grid system. Disponível em: http://www.thegridsystem.org/. Acesso em 18 de abril de 2012.

SAMARA, Timothy. Elementos do design: guia de estilo gráfico. Tradução Edson Furmankiewkiewicz – Porto Alegre: Bookman, 2010.

TONDREAU, Beth. Criar Grids: 100 fundamentos de layout.Tradução Luciano Cardinali – São Paulo: Editora Blucher, 2009.

Fonte: Design Blog

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s