desenho representando uma 8pt grid

8pt grid: o que é e para que serve?

Você já parou pra pensar quanto tempo você leva para decidir quanto vai ser o espaçamento entre os elementos da aplicação que você está construindo?

Ou então quando você planeja isso por horas, mas na hora de aplicar, o resultado não sai como o esperado? Complicado né?

Acredite, isso é mais comum do que você pensa e acontece com muitas pessoas! E se eu te dissesse que existe algo como uma “fórmula” para sempre acertar o espaçamento dos elementos, te ajudaria?

Essa fórmula é chamada de grid e quando usamos o espaçamento de 8pt no grid, alcançamos harmonia e consistência em todos os dispositivos.

Antes de entrarmos de cabeça no assunto, deixa eu me apresentar: me chamo Bernardo Marques e atualmente estudo desenvolvimento web na Kenzie Academy Brasil, ao mesmo tempo que faço Análise e Desenvolvimento de Sistemas. Sou apaixonado por tudo que é relacionado ao mundo da computação e confesso que sou um pouco detalhista demais.

Nessa minha paixão por computação, por alguns anos eu estudei design gráfico e também trabalhei como freelancer. Minha curiosidade me levou a tentar entender como funcionava o computador e os programas que eu usava por debaixo dos panos, foi aí que eu descobri minha grande paixão: o desenvolvimento web!

Bom, acho que isso explica um pouco/muito do tema que eu escolhi, não é? Até o final do artigo, quero que você entenda como o design do seu site pode te ajudar, principalmente se você quer ser um desenvolvedor com foco em front end. Vamos lá!

O design do seu site é importante!

É muito comum ouvirmos dizer que as primeiras impressões importam. E isso é muito importante se tratando de uma aplicação também! Uma pesquisa de credibilidade de sites publicada pela Universidade Stanford mostrou que 75% dos usuários julgam a empresa baseada em como o site dela se parece.

Um site com um layout agradável causa uma boa impressão e o torna responsivo, além de favorecer ele nos mecanismos de busca do Google!

Para você entender melhor a importância da responsividade em um site e como ela pode ajudar o usuário a ter uma experiência melhor, este artigo fala exatamente sobre isso!

O que é o 8pt grid?

Em design, o grid é um recurso onde usamos linhas (geralmente verticais e horizontais) para organizar os elementos de forma harmônica e padronizada. O 8pt grid é quando usamos múltiplos de 8 para definir tanto o espaçamento, quanto o tamanho dos elementos da página em que estamos construindo.

O motivo de usarmos múltiplos de 8 (ocasionalmente de múltiplos de 4, se a ocasião exigir) é que a maioria dos dispositivos tem as resoluções divisíveis por 8 (1920×1080, 1280×720…), fazendo com que esse padrão seja escalonável para todas as telas que usamos hoje! E hoje em dias existem tantas né?

E como usar?

Podemos implementar o 8pt grid de duas maneiras: usando o soft grid ou o hard grid.

O hard grid consiste em uma forma mais rígida de introduzir o 8pt grid, onde todos os elementos são estritamente posicionados em relação a um grid definido previamente.

No soft grid, que é o mais comum, as medidas são feitas a partir de outros elementos individualmente, tornando-o mais flexível. Nesse artigo vamos falar principalmente do soft grid.

Citando o designer Eliot Dahl, em seu artigo, o 8pt grid para o designer proporciona:

  • Maior eficiência e menos decisões a serem tomadas, uma vez que você já tem um padrão de qualidade entre todos os elementos da página;
  • Para os times, proporciona um padrão fácil de comunicação entre os designers e os desenvolvedores;
  • E para os usuários, um visual estético consistente para o site/aplicação mostrada. Sem o risco de ter pixels deslocados quando colocado em uma resolução diferente.

Aplicando o 8pt grid na prática

Nos espaçamentos da página:

A aplicação do 8pt grid em espaçamentos é tão simples quanto parece. Você simplesmente vai fazer com que a distância de um elemento para o outro seja múltipla de 8.

Você também pode querer usar uma certa distância para espaçamento entre elementos que fazem parte do mesmo conteúdo e o dobro desse espaçamento para separar novos conteúdos. (Por exemplo 8 pixel entre os parágrafos de um texto e 16 para um subtítulo.)

Tipografia

O padrão valor de 1 rem é igual a 16px, então você pode fazer incrementos de 0.5 rem para os textos. Mas vale lembrar que você pode ser mais flexível com o tamanho da fonte, fugindo dos números pares caso seja necessário.

Mas mesmo você pode ser mais flexível com os textos, é importante que mesmo assim o line-height seja pelo menos um múltiplo de 4.

Em botões e campos

O tamanho total do seu elemento tem que ser múltiplo de 8. Isso quer dizer que você vai ter que considerar as bordas e o preenchimento quando calcular o tamanho.

No exemplo abaixo o botão tem 32px de altura e o campo tem 30px + 2px de borda (1px em cima e 1px embaixo).

O espaçamento externo é de 16px e o espaçamento interno de 8px.

8-pt grid é, no final das contas, um padrão para facilitar seu trabalho

Lembre-se que de certa forma, você também é o usuário final. Então não se preocupe que se você sentir que um padrão diferente vai ficar mais atraente, provavelmente o seu cliente também vai achar.

Apenas fique atento que a principal vantagem deste padrão em uma página é a responsividade para todos os tamanhos de telas.

Se você quiser se aprofundar ainda mais sobre 8pt grid e alguns tópicos sobre ele que não foram abordados aqui, como a densidade de pixels, este artigo pode te ajudar.

Apesar do 8pt grid ser o mais usado, existem diversos layouts diferentes que você pode testar como o Fibonacci Grid.

Mas te dar um conselho? As gigantes Google e Firefox já disponibilizaram projetos que ensinam como usar e implementar esse modelo em seu projeto. E se o Google reconhece a praticidade do 8pt grid, quem sou eu pra dizer o contrário, né?

Em conclusão, apesar dos diversos padrões disponíveis, vale a pena olhar com carinho o 8pt grid por ser uma alternativa simples, responsiva e atraente.

Você vai perceber que o design da sua página vai ficar mais consistente e você vai poupar muito mais tempo, uma vez que você já tem um padrão definido de espaçamento e dimensões.

Algo que eu aprendi muito no primeiro trimestre aqui na Kenzie Academy Brasil foi a importância do seu produto ter consistência e seguir um padrão de boas práticas, tanto na parte interna (o código) quanto na parte visual.

Leia também:

0
Escreva o primeiro comentário

Deixe uma resposta

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