Guia sobre Grid

Saiba o que é e como um Grid pode te auxiliar no seu processo criativo

grids

Eae!

Td bele?

Hoje vamos falar de Grids . Grids que são elementos fundamentais no design. Usamos eles para quase tudo: desde um cartão de visita até a criação de um site. Grid é o esqueleto dos nossos projetos auxiliando na criação, e por ter tal importância eu não poderia deixar de falar deles aqui no Chief, né?

Neste artigo vou falar do grid de uma forma mais ampla e que serve tão pro “online quanto pro gráfico”. Minha ideia não é ditar nenhuma regra e sim mostrar as principais possibilidades que temos, bele?

Então vamos começar!!

Neste artigo você descobrirá:

Um pouco da história dos Grids

A utilização de grids é muita antiga, encontra-se casos de organização através de esquemas retangulares desde os  manuscritos. Com certeza Grids é mais antigo que o próprio design gráfico.

grid2big

Nos primeiros impressos também encontramos grids definidos. E também é possível encontrar o termo grids na arte, na arquitetura, e na Gestalt.

Mas os grids ganharam mais força mesmo após a revolução industrial através de estudos como os de Theo van Doesburg , de  Jan Tschichold  no livro The New Typography (1928), e do movimento racional da Bauhaus.

Durante a Segunda Guerra, a Súiça, que era neutra, acolheu muitos refugiados intelectuais, incluindo nomes do design como o do próprio Jan Tschichold e Herbert Bayer. E esse grupo de artistas e designers refugiados ajudaram a formalizar e promover o uso da ferramenta que se tornou um ícone do design e do movimento suíço principalmente com seus cartazes famoso até hoje.

E toda essa racionalidade influenciou o design gráfico que a partir, principalmente dos anos 60, começou a usar largamente os Grids.

josefmuellerbrockman11

O que é um Grid

Grid é um elemento técnico-formal formado por um conjunto de linhas auxiliares na vertical e horizontal, ou de retângulos, que proporcionam uma estrutura para construção das nossas peças de comunicação visual, gráfico ou web, auxiliando na ordenação, distribuição, alinhamento e dimensão dos elementos gráficos (imagens, textos, formas).

A função principal do Grid é organizar as informações dentro de uma estrutura. É auxiliar o designer no sentido de conservar um padrão, uma consistência visual do layout  em  todas as suas telas, seja ela web ou gráfico.

A anatomia de um Grid

Cada parte de um grid tem um nome, uma função, por isso vamos conferir agora os elementos que compõem um grid. Vamos lá?

Margens

São os espaços negativos (em branco) entre o limite da página (borda) e o início do Conteúdo. As margens enquadram o conteúdo, auxiliam na questão do manuseio (quando se trata do impresso), dão “respiro” aos textos e imagens proporcionando também descanso dos olhos, além de servirem como um espaço para informações secundárias.

margem

Guias horizontais

São os alinhamentos horizontais. As faixas quebram o espaço horizontalmente. São usadas para orientar os olhos na leitura e também para criar diferentes inícios, pausas, áreas de respiro (em branco) para os textos e imagens.

linhas

Colunas

São as estruturas verticais que criam divisões horizontais, delimitam o espaço a ser ocupado pelo conteúdo entre as margens. A largura e quantidade das colunas é indeterminado, depende do projeto e do que o designer definir ser o melhor.

coluna

Módulos

São unidades formadas através da junção da coluna com a linha base.

modulos

Zonas Especiais

São conjuntos de módulos, que formam uma unidade.

zonas-espaciais

Calhas(gutters)

São os espaços em branco de separação entre colunas e linhas.

calhas

Marcadores

São elementos secundários localizados na parte externa (margem), como por exemplo, cabeçalhos, nomes de seções, paginação e etc.

marcador

A importância de se utilizar um Grid

Usar um sistema de “grid” permite projetar com mais facilidade, simplicidade, na organização dos elementos gráficos da peça, seja ela um site ou um cartaz.

Grid é tudo de bom, porque:

Podemos mais facilmente determinar o fluxo de leitura que queremos o nosso leitor tenha.

nos ajuda a projetar em proporções harmoniosas balanceando os pesos dos elementos gráficos do layout.

Permite criar peças mais eficazes.

Auxilia a posicionar os elementos com maior precisão.

Mas David, ele vai limitar minha criatividade?

Não!!! Relaxa, Galucho, não tem nada a vê isso.
Grid é usado há muitos anos pelos melhores designers do mundo.

Ele é uma ferramenta de suporte que nos ajuda na construção, no posicionamento dos elementos, etc.

O Grid não é limitador, pelo contrário, ele nos ajuda a dispor melhor o nosso layout.  Como já falei no artigo sobre Gestalt (veja aqui) é importante saber usar com parcimônia fatores variados como contraste, repetição, pregnância, etc. Não é porque você está usando um grid que precisa deixar tudo “alinhado a esquerda”, saka?

Ele será uma diretriz, mas um designer criativo saberá como “quebrar a regra” para atingir seu objetivo de comunicação.

Grid não é limitador para nada, seja um site ou um projeto gráfico, basta saber usar e “quebra-lo” quando precisar. Quebre as regras quando precisar.

MULLER-BROCKMANN-musica-viva-poster-green

Como criar um Grid

Primeiro você precisa saber qual será o suporte: Qual o tamanho da página, qual orientação, quais limitações. (você pode conferir mais sobre isso aqui).

Também precisa saber qual o conteúdo será diagramado e para que será diagramado?

É texto corrido de uma revista ou é uma capa de um livro? É um site portfólio de um fotógrafo com várias imagens grandes ou um portal de notícias com mais texto do que imagens?

A partir daí será possível definir a melhor maneira de organizar o conteúdo através do auxílio do Grid.

Existem várias formas de criar Grids, e o Indesign e o Photoshop (através de GuideGuide) fazem isso automaticamente.

Para web existem muitos Grids prontos (a maioria voltado para criação de websites) como o br.blurb.comModular Grid, Gridpak , Bootstrap responsive grid PSD .

E até Grids para a criação de ícone de IOS: Free App Icon Templates, iOS 7 Icon Template, iOS Icons Guidelines.

E você pode e deve criar o seu grid dependendo do projeto. Existem vários modos para isso.

Temos os famosos Grids de Villard e de  Jan Tschichold .

Van de Graaf canon in book design.svg

Mas uma dica útil e que serve para quase todos os caso é usar um grid modular através da  Proporção Áurea (um dia ainda escrevo sobre hehe). Existem outros modos de se alcançar essa proporção, mas o modo mais rápido é  dividir o seu layout em 3 partes iguais usando a regra dos terços e achar os quatros pontos áureos no layout.

E depois subdivido esses retângulos para achar mais pontos, subpontos, e assim  ganhamos inúmeras possibilidades.

grid-tercos

Tipos de Grids

Existem várias maneiras de utilizarmos os grids. Irei mostrar a seguir os  modelos mais comuns.

Grid de uma coluna

É usado geralmente para textos grandes, corridos, contínuos, como livros, relatórios ,etc. Possui uma estrutura mais simples e basicamente é formado por apenas um bloco de texto.

grid-uma-coluna

Grid de duas colunas

Esse grid é mais flexível que a de uma coluna e normalmente é usado para conter grande volume de textos.

grid-duas-coluna

Pode ser utilizado para apresentar somente um texto ou textos independentes separados pelas colunas. Pode ser organizado com colunas de larguras idênticas ou diferentes.  Neste caso, normalmente para manter a proporção,  a mais larga tem o dobro da largura da coluna estreita.

grid-duas-coluna-2

Grid de múltiplas colunas

Nos dá mais flexibilidade que as anteriores. Também é usado para grande quantidade de conteúdo e pode utilizar colunas de larguras variadas. Websites, jornais, revistas, tabelas, etc; utilizam bastante esse tipo de grid.

grid-mutiplass-colunas

Grid modular

Esse Grid utiliza colunas verticais mais múltiplas guias horizontais.

É geralmente utilizado em projetos mais complexos, como jornais, gráficos, etc. Os módulos proporcionam maior controle do conteúdo e dos espaços menores.

grid-modular

Grid hierárquico

O grid hierárquico é composto por zonas de hierarquias, como o próprio nome já diz, e dividi as telas, impresso ou online, horizontalmente.

É praticamente um grid de colunas horizontais com larguras diferentes.

grid-hieraquico

Os sites na Internet utilizam bastante esse tipo de grid devido a estrutura usual e também ao conteúdo dinâmico e redimensionamento que ocorre por causa dos diferentes tipos de tela.

Mas não é somente para sites, esse grid se adapta às exigências do projeto, então podemos usá-los também em livros, revistas, cartazes, etc.

Como usar um Grid

Existem vários tipos de técnicas para a diagramação.  Irei mostrar as mais aplicadas no mercado.  Todas nós vemos no nosso cotidiano principalmente em revistas, jornais, anúncios e folhetos.  Porém cm o avanço da tecnologia e do design web, também é possível aplicar praticamente todas elas em interfaces web, claro que com alguns nuances hehehe.

Vamos conferir?

Técnica do “L”

Muito utilizado em diversas mídias, principalmente em revistas e jornais. Nessa técnica o posicionamento da mancha de texto, em relação a imagem acaba criando o formato da letra L.

A letra L pode ser usada em ambos os lados e de cabeça para baixo.

l l(2)

Técnica do “U”

O caminho por onde o texto corre, em relação a imagem acaba criando
a forma a letra U.

u(2)u

Técnica do “T”

Também temos a estrutura da letra T. Ela ajuda a dar sentido de continuidade.

t

T(2)

Técnica do “H”

Também temos uma estrutura feita com a letra H. Podemos usar tanto o H maiúsculo quanto o minúsculo.

h

h(2)

Técnica do “I”

Na estrutura da letra I criamos uma ou mais colunas. Ela é bem dinâmica e e pode conferir mais espaço para as imagens e por vezes até certa elegância ao layout.

i

i(2)

Técnica de suporte

A estrutura de suporte é mais monótona e podemos colocar o texto tanto acima quanto abaixo da imagem. Apesar de um pouco “pobre”, na  web funciona bem, principalmente em blogs e sites com bastante texto.

suportesuporte(2)

Áreas de respiro e Ritmo de leitura

Precisamos dar atenção para as áreas de respiro que são as áreas brancas do layout que servem para deixa-la mais leve , clean, e menos cansativa. Por vezes, somente adicionando uma área de respiro você consegue modificar totalmente uma peça. Só basta saber usá-lo com coerência.

respiro

E também devemos prestar atenção no ritmo de leitura. Olhe o Primeiro exemplo como é confuso saber para onde devo seguir a leitura:

ritmo-de-leitura

Já nesse outro caso é bem mais fácil saber para onde seguir, né?

ritmo-de-leitura-certo

É o Designer que determina o ritmo e direcionar a leitura, para onde ele quer que o leitor siga.

Considerações Finais

Como podemos ver um sistema de grid é uma ferramenta que ajuda, e muitos os designers a organizar a informação de maneira coerente e harmoniosa.

Utilizar um grid com certeza é algo muito vantajoso, e de forma alguma vai prejudicar a sua criação, pelo contrário, vai ajudar para que suas ideias sejam postas de maneira mais clara e seu projeto mais estruturado.

Tudo isso que vimos até nesse post ainda é pouco comparado ao tanto de coisas que se tem para estudar e a para falar sobre Grids.

Então continue estudando aí que eu vou continuar daqui, bele?

E você, utiliza grids em seus layout? Comente abaixo!

Forte abraço.

Até mais.

Referências:

Livro: Crias Grids – 100 Fundamentos de Layout

http://blog.popupdesign.com.br/perguntas-frequentes-sobre-grids/

http://99designs.com/designer-blog/2013/03/26/history-of-the-grid-part-2/

http://www.graphics.com/article-old/brief-history-grids

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • ☠ Cap’n Gab ☠

    David, tô adorando seus artigos, vai me ajudar muito em meus estudos. Parabéns =) !!

  • Fernanda

    Olha só, justamente hj q eu estava estudando um pouco mais sobre grids recebi o link para o seu conteúdo no meu e-mail. Ótimas dicas! :)

    • VLw, Fernanda.

      Fico feliz que estou ajudando e que acertei no dia e horário tbm hehehe :P

      Até Mais.

      Forte Braço

  • Ótimo artigo David. Parabéns!!
    Acredito que o grande ponto positivo desse artigo seja a forma “simples” que você abordou o tema. Não que grids sejam simples, muito pelo contrário, sabemos que um grid pode ser extremamente complexo. No entanto, aqui podemos entender perfeitamente a importância do grid e desmistificar a famosa desculpa de que o grid limita a criatividade!!

    Terão novos artigos aprofundando um pouco mais no tema? :)

    • Olá Diogo.

      Muito Obrigado pelas considerações!

      Sim, com certeza. Tem muitooo a se falar sobre isso.

      Grids para website, por exemplo, é um assunto que pretendo abordar em breve :)

      Até Mais.

      Abrs.

  • julio cesar aires de araujo

    cara essa matéria foi nota 10, amei sobre o assunto, já vou usar em meus sites a teoria das grids , valeu pelo conteúdo, blog com conteúdo de qualidade.abraços

    • Olá Julio.

      Fico feliz que o artigo te impulsionou a usá-los. Vc não vai se arrepender :)
      Muito obrigado pelo comentário.

      Forte abraço.

  • Vitória Lima

    David, parabéns pelo seu blog/site, minha amiga precisou de ajuda com a materia que tivemos por estar doente, e eu recomendei seu conteudo! tá bem completinho e seu blog ja está salvo nos meus favoritos. abraços :3

    • Olá Vitória.

      Muito obrigado. Fico muito feliz com isso e espero que tenha ajudado.

      E nem me fale de doença…Fiquei bem mal recentemente!! :/

      Sucesso e saúde para todos nós :D

      Forte abraço!

  • Top o artigo! Parabéns…nunca havia me atentado pra essas técnicas!

    • Olá Arlei.

      Obrigado pelo Comentário! :D

      Abraço!

  • Marcelo Dantas

    Cara que artigo maravilhoso, estava buscando mais informações sobre o assunto e achei essa obra prima. Muito obrigado por compartilhar. Parabéns pelo site.

    • Olá Marcelo!

      Valeu! Muito obrigado pelo comentário! :D

      Forte abraço!

      Até Mais

  • Alexandra Mazurky

    Fantástica contribuição! era realmente o que eu estava buscando. Parabéns pelo excelente conteúdo.

    • Olá Alexandra.

      Muito Obrigado! :D

      Forte Abraço!

  • fulanodigital

    Davy, muito bom o seu artigo. Esclarecedor, com bons exemplos e ótima didática. Estou escrevendo um artigo sobre a Grid do Bootstrap e tenho procurado informações sobre “O que é uma Grid”. Já está me ajudando muito na introdução. Gostaria de apontar para este seu artigo e usá-lo como referência. Peço sua autorização para ambos.
    Se não quiser, sem problema algum, ok?
    Abração!

  • Rodrigo Mendes Vieira

    Valeu David, otimo artigo, to lendo muita coisa sua aqui hehe.

    • Olá Rodrigo.

      Muito obrigado pelo elogio!

      Sucesso para ti! :D

      Abraço!