Eae! Td bele?
Hoje vamos falar de Grids. Este artigo é um verdadeiro Guia sobre Grids no Design.
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?
E antes iniciar com o conteúdo, quero aproveitar a oportunidade para te avisar que estamos com inscrições abertas para o nosso curso de Fundamentos do Design Visual. O curso Fundamentos do Design Visual é focado nos fundamentos, conceitos e princípios do Design Visual. Clique no link abaixo e conheça o nosso curso.
⭐️Curso Fundamentos do Design Visual⭐️
Saiba mais ➡ https://www.fundamentosdodesign.com.br
Dito isso, então vamos começar!!
Neste artigo você descobrirá:
- De onde vem os Grids
- O que é um Grid
- A anatomia de um Grid
- A importância de se utilizar um Grid
- Como criar um Grid
- Como usar um Grid
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.
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.
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.
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.
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.
Módulos
São unidades formadas através da junção da coluna com a linha base.
Zonas Espaciais
São conjuntos de módulos, que formam uma unidade.
Calhas(gutters)
São os espaços em branco de separação entre colunas e linhas.
Marcadores
São elementos secundários localizados na parte externa (margem), como por exemplo, cabeçalhos, nomes de seções, paginação e etc.
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.
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.com, Modular 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 .
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.
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 de duas colunas
Esse grid é mais flexível que a de uma coluna e normalmente é usado para conter grande volume de textos.
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 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 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 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.
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.
Técnica do “U”
O caminho por onde o texto corre, em relação a imagem acaba criando
a forma a letra U.
Técnica do “T”
Também temos a estrutura da letra T. Ela ajuda a dar sentido de continuidade.
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.
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.
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.
Á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.
E também devemos prestar atenção no ritmo de leitura. Olhe o Primeiro exemplo como é confuso saber para onde devo seguir a leitura:
Já nesse outro caso é bem mais fácil saber para onde seguir, né?
É o Designer que determina o ritmo e direcionar a leitura, para onde ele quer que o leitor siga.
Vídeo – Grids no Design – O que é Diagramação? O que são Grids Design?
Abaixo deixo um vídeo que gravei para o meu curso Web Designer PRO sobre grids e diagramação. Nele falo tanto sobre grids para projetos digitais quanto gráficos.
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
Also published on Medium.