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.

Gostou? Compartilhe!
Você também vai gostar de

Participe da discussão!


  • TurboDesign

    Passei a conhecer mais o 960 Grid System, achei show de bola http://960.gs/

  • Rafael

    Tb uso o 960.gs

  • http://www.facebook.com/gabriel.vince Gabriel Vince

    Excelente artigo, parabéns!

    • http://www.facebook.com/people/Robson-Godoy-da-Rosa/1383416035 Robson Godoy da Rosa

      Valeu cara! =]

  • janailson leite

    Ótimo artigo! Sempre uso grids em meus trabalhos.

  • Pingback: Design

  • http://www.vaptdesign.wordpress.com/ Felipe Alves

    Muito bo artigo!

    • Robson Godoy

      Valeu!

  • http://www.facebook.com/dani.ventura93 Dani Ventura

    Robson adoreii o artigo e já votei em vocês no peixe grande!
    estou no terceiro período de design gráfico e estou estudando grid em Editoração I,esse artigo me ajudou muito a tirar umas dúvidas que eu ainda tinha,muito obrigada!Super recomendado bjss

  • http://www.facebook.com/profile.php?id=1419900150 Rodolpho Cenovicz

    Acho o Grid essencial para praticamente todo o tipo de trabalho/material. Além de organizar o conteúdo, ele define uma relação de proporção entre os elementos.. O grid só é restritivo e limitador, pra quem não sabe usar! Depois que comecei a entender e usar o grid e a tipografia, meus trabalhos se tornaram mais consistentes.

  • Anderson Figueiredo

    Muito legal o artigo, me esclareceu várias dúvidas em relação ao grid modular e de colunas… o que é possível mudar, melhorar…. vejo muitos grid prontos, mas não sabia direito pra que servia cada um.. legal… Uso alinhamento, margens tals no meu dia a dia.. mas agora estou interessado nos grid…. pois acredito que irão enriquecer muito o meu trabalho.