Oi, vocês já pararam pra pensar como é complicado a utilização de grids no digital por uma série de fatores que às vezes nem os designers conseguem entender?
Por muito tempo dei de cara em layouts onde cada grid funcionava de um jeito, onde projetos do mesmo cliente não tinham lógica na criação de grid e o pior: a dor de cabeça na construção de padrões já me fez perder a consistência em alguns projetos por ser complexo demais.
Em 2014, depois de muita pesquisa e testes, encontrei algo que salvou minha vida e provavelmente deve ter salvado de um monte de designers. Uma configuração de grid que se encaixa matematicamente nas resoluções de tela que trabalhamos até hoje. Não darei certeza de quem trouxe isso para o digital na época, mas quem divulgou de forma mais clara em 2016 foi a equipe de design do Google com o Material.io e sua nova guideline, que envolveu todo o seu sistema de design.
Com auxilio de profissionais como o Yuri Coppe e o Denis Cabaldi, mais o material do Google e outros estudos de grid, encontramos uma lógica muito interessante que vou desmembrar pra vocês agora:
Imaginem um grid onde tudo é divisível por 8 (ou por 4), tudo mesmo, e que seja escalonável para todas as resoluções de tela existentes hoje.
Quando eu falo tudo, eu falo todos os elementos que compõem o seu design:
- Grid
- Fontes
- Ícones
- Botões
- Imagens
- Espaçamentos
É complexo?? É sim! Porém seu design vai seguir um grid de verdade e aos poucos você terá uma lógica de criação :)
Vamos aos exemplos:
Todos os exemplos possuem densidade de pixel 1x, mas vale para qualquer densidade quando for desenhar, e isso é papo para ouuuutro post.
No google temos uma belíssima imagem que mostra como devemos usar as colunas dependendo da resolução trabalhada, isso ajuda muito para começar o seu projeto:
Esse grid deve manter as 12 colunas a partir dos 840px até 1920px. No nosso exemplo vou utilizar o grid para resolução de 1280px (desk) e um para 320px (mobile).
Note que quanto menor a resolução, menor o número de colunas (o que é bastante comum quando se faz um projeto responsivo).
Para montar um grid, uma ótima ferramenta é o Grid.guide que auxilia a escolher um grid condizente com seu projeto.
Se você trabalha com sketch, tem uns prontos abaixo, olha que maravilha :)
Feito o Grid, chegou a hora onde a matemática entra com tudo :D
Lembra que eu falei sobre tudo ser divisível por 8? Olha o exemplo abaixo:
1. Espaçamento
Utilizamos inúmeros espaçamentos dentro de nossos projetos, certo? Às vezes não conseguimos nem mensurar todos os espaçamentos. Tente minimizar ao máximo suas opções determinando lógicas, como no exemplo abaixo:
- 16px para itens que fazem parte do mesmo conteúdo;
- 32px para divisão de novos conteúdos.
Isso vale tanto para as colunas quanto para as linhas.
2. Tipografia e elementos visuais
Nesta etapa, desmembro os elementos do layout de forma micro, mostrando os átomos da estrutura.
Pra quem não viu, no link abaixo falo sobre o Atomic Design, vale a leitura :)
Os estilos de texto, imagens e formatos de botões também possuem números divisíveis por 8, o que facilita posteriormente a configuração de blocos de conteúdo dentro do grid criado.
3. Botões e campos de formulário (moléculas)
Botões e campos de formulário também utilizam números divisíveis por 8.
Você precisa manter a consistência e prometo que tudo se encaixará lindamente :)
4. Módulos de notícia e newsletter (organismos)
Nesse exemplo temos 3 módulos, dois de notícias e um de newsletter que, mais uma vez, sem querer ser chato, eles são divisíveis por 8.
Deu para entender que independente do tipo de conteúdo ele precisa seguir a lógica de ser divisível por 8?
Seguindo essa lógica você consegue aumentar ou reduzir o grid para outras resoluções e o módulo não vai quebrar. Não existirá meio pixel e será muito mais fácil desenhar telas responsivas.
Links que falam sobre este grid:
Livros sobre Grids
