Como utilizar e aplicar o 8-pt grid

Entenda sobre como criar interfaces consistentes e harmônicas com um simples sistema de grid

Você que constrói interfaces, dentre várias skills que você precisa estudar e ter para melhorar sua produção, o 8-point grid (ou grid de 8 pontos) é uma das mais importantes, e que do meu ponto de vista, após ver o portfólio de alguns designers juniors, é algo que você precisa saber cedo.

Bom, eu imagino que se você está lendo esse artigo, é porque já deve saber o que é grid em interfaces digitais, e quais as vantagens de usa-la, e o que eu trago hoje é um modelo diferente da grid convencional que vemos por aí, repleta de colunas ou linhas. Essa é uma grid totalmente quadriculada, consistindo num quadradinho de 8×8 pixels, repetindo-se por toda a sua interface digital.

A primeira vista é estranho mesmo, mas o entendimento e a aplicação é muito mais simples do que se imagina. Basicamente, todos os elementos e componentes dispostos na sua interface passarão por essa “revisão” em cima do 8-pt grid, e diferente do sistema de colunas que conhecemos e usamos, aqui trabalhamos a dimensão, margens e paddings dos elementos. Isso quer dizer que todos os valores que você deverá trabalhar devem ser múltiplos de 8 (8, 16, 24, 32, 40…).

Porquê a escolha do número 8

Talvez você não tenha reparado, mas as resoluções mais comuns hoje, em pixels, são divisíveis por 8. A maioria dos casos envolve a largura, que é a parte com maior relevância, mas algumas alturas também são incluídas nessa tabela, e essa informação já é um guia perfeito para se basear num tamanho para seus designs em ferramentas de prototipação, considerando ainda que alguns Design Systems, Style Guides e frameworks que dão atenção para breakpoints se baseiam fortemente em resoluções que são divisíveis por 8.

Uma tabela de com as colunas “Resolução”, “Multiplos de 8” e “Multiplos de 10”, mostrando em 8 linhas as resoluções mais comuns utilizadas atualmente.
Resoluções de tela mais utilizadas. Fonte: Spec

Utilizando o 8-pt grid

Como eu falei, você utiliza esse sistema para tudo numa interface digital. Enquanto o sistema de colunas é aquele que vamos usar para alinhar os conteúdos, a grid de 8 pontos é a que vamos utilizar para organizar os espaçamentos envolta disso.

Na imagem está uma interface simples de login, com título, subtítulo, campo de e-mail e senha, e botões de “entrar” e “criar conta”. Está marcado em locais diferentes a margem e o padding entre os elementos.
Exemplo de uma interface de login utilizando o 8-pt grid.

Como no exemplo à cima, temos distanciamento em vários locais, seja na vertical ou horizontal, para cada elemento que adicionamos numa interface, e o plano é adequar esse espaçamento com valores múltiplos de 8. Pode ser que a primeira vista, isso se reflita apenas a margens, mas como você pode ver no campo “e-mail”, o próprio placeholder segue o modelo da grid, contando com um padding total de 16px.

Para isso, não existe uma receita de bolo dizendo qual é o valor ideal para se utilizar. Isso é uma decisão de design ao responsável definir, tendo em mente que manter o equilíbrio é extremamente importante, ou seja, espaçamentos grandes podem ser tanto agradáveis, causando um bom respiro, quanto problemáticos, desviando olhares e aumentando, mesmo que poucos segundos, a busca do usuário em finalizar seu objetivo.

Tipografias são bem-vindas

Falo muito sobre a distância entre os elementos, mas o fator de se basear nos múltiplos de 8 para construir um produto digital pode se refletir até mesmo nos tamanhos dos textos nas interfaces que você está criando. Veja o seguinte exemplo:

Na imagem possuem três textos com tamanhos divisíveis por 8. O primeiro possui 32, o segundo 24 e o terceiro 16 pixels.
8-pt grid aplicado em tipografia.

Na imagem, tenho textos em que seus tamanhos são totalmente baseados nesse sistema que você está lendo. Um título com 32 pixels, um subtítulo com 24 pixels, e uma descrição curta, com 16 pixels. É uma aplicação bem simples, e que com certeza agiliza muito no tempo de decisão, mas quanto maior for a hierarquia textual que você planejou, maior poderão ser o tamanho dos seus textos, chegando a valores como 64 ou 72 pixels, que em dispositivos móveis, ou até mesmo monitores pequenos, pode haver muita quebra, causando a perca da harmonia que tanto lutamos para manter.

Aplicando 8-pt em grids de coluna

A partir do momento que vamos trabalhar com esse sistema de grids nas nossas interfaces, é importante que as grids de coluna — como a famosissíma grid de 12 colunas do bootstrap — sigam essa matemática também, pois dessa forma, a disposição dos elementos na tela seguirão um padrão já pré-estabelecido por você, e para construirmos isso, basta entendermos três pontos sobre a grid de colunas.

A imagem possui uma grid de 12 colunas, identificando com cores as margens, nas laterais esquerda e direita, as colunas, e o gutter.
Anatomia de uma grid de colunas.

Temos as margens laterais, as colunas e os gutters, que são os espaços entre as colunas. A largura das colunas é algo que nunca iremos mexer. Esse é um valor que será construído automaticamente a partir do tamanho da margem e dos gutters. Margens costumam ser maiores, para centralizar o conteúdo de um site, criar um respiro e não grudá-los nos cantos do seu navegador. Já os gutters terão um valor menor, que irá organizar todos os elementos. Recomendo utilizar valores que variam entre 8 a 24 pixels, lembrando que, conforme menor for a resolução de um dispositivo, menos colunas existirão, menos espaço haverá, logo, gutters também terão valores menores, mas lembre-se: o respiro é importante.

No fim, tudo é 8

Esse é um sistema de grid muito simples de se aprender e aplicar. A tomada de decisão para definir a distância dos elementos ficará mais automática conforme você for criando coisas e trabalhando com essa grid incluída nos seus projetos de interface, então não se preocupe se por um acaso você sentir que está “demorando” ou que tem dúvidas sobre se um espaçamento está realmente bom ou não. Você, como um profissional que constrói produtos digitais, sabe melhor do que ninguém que testar é a forma ideal para se validar a eficácia de alguma coisa, então não fique com receios.

Comentários

2 respostas para “Como utilizar e aplicar o 8-pt grid”

  1. Avatar de Vinicius Cravo
    Vinicius Cravo

    Conteúdo muito bom! Valeu!

  2. Avatar de joyce

    artigo muito bom, prof, valeu mesmo! to estudando pela alura e sua didática é demais!

    só uma dica: dá uma mexidinha na cor da legenda onde você explica o que é Gutter, porque aqui no fundo preto ela tá bem apagadinha ficando na cor cinza, na minha cabeça a palavra era Outter hahahah

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *