Grid, resolução e o 8pt
Não sei se é para todos (acredito que sim 😅), mas no início de projetos de design para um site, sistema ou aplicativo, começar com um documento em branco é bem intimidador. Para tornar nossas escolhas mais seguras e harmônicas, é fundamental escolher ou criar um bom grid para ter como base. E, para melhorar ainda mais, é comum pensar em um grid múltiplo de 8 (8pt grid). Com essa escala é possível facilitar as decisões de design e manter a consistência entre as páginas.
Um pouco sobre o layout grid
Existem vários tipos de grid, mas neste artigo vamos focar no grid de colunas que é o tipo mais comum usado por designers digitais. Ele é nada mais que dividir uma página em vários campos verticais para alinhar os objetos nestes. Jornais e revistas usam grades de coluna extensivamente.
No caso da criação de layout grids para web é comum usar frameworks — como bootstrap, por exemplo — ou usar alguma ferramenta de criação. Para usuários mais familiarizados é comum já criar um layout grid no próprio aplicativo utilizado. No caso da Linx e Stone Co usamos o Figma como aplicativo de design e criamos o layout grid com base em múltiplos de 8.
O 8pt grid
8pt grid é uma forma de pensar os tamanhos e alinhamentos dos elementos em uma página usando múltiplos de 8 (ou 4). É uma boa unidade básica para se trabalhar, fácil de multiplicar e acaba ficando bem fácil de usar. Usando o método, conseguimos diminuir o tempo em decisões de layout e assim, mantemos uma UI mais consistente. Usando múltiplos de 8 também é possível cobrir uma variedade maior de dispositivos mais facilmente.
“It’s a good basic unit to work with. the numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them. They’re kind of fun when you get use to them. — Publicado por Vitsky em dezembro de 2019.
Para explicar um pouco melhor, um ponto é uma medida de espaço independente da resolução de tela utilizada. Exemplo simples para utilizar é ‘1x’ de resolução (1pt = 1px). Então, se um ícone tem 24px em 1x, em tela retina (2x) ele vai ter 48px e em uma super retina (3x) ele assume 72px.
Fluido x Fixo
Quando criamos layout grids para páginas web e sistemas temos que pensar de forma responsiva, ou seja, de forma que se encaixe em diferentes resoluções. Temos que lembrar também que nem sempre o nosso site ou sistema vai ser exibido em modo de tela cheia, porque nossos sistemas operacionais trabalham com janelas que podem ser redimensionadas. Então temos que imaginar um layout grid que se adapte nessas condições, para que elementos não fiquem ocultos ao diminuir e aumentar uma janela. Podemos resolver isso projetando de 2 formas: com layout fixo ou layout fluido.
O layout fixo é respeitando números específicos de largura para a página, assim os pontos de quebra sempre com as mesmas larguras e alturas de elementos.
O layout fluido é pensado para quando não queremos fixar uma largura específica para uma página, mas sim para o conteúdo respeitar a largura do navegador.
No caso do design guide da Linx e Stone Co, adotamos uma estratégia mista, pensando de forma responsiva. O nosso grid é fluido até chegar uma largura específica, na qual é fixado para não “quebrar” em larguras muito grandes.
Soft grid x Hard grid
Agora o grid com o 8pt Grid, como faz para manter os múltiplos de 8? No caso, usa-se o soft grid com múltiplos de 8 para os espaçamentos dos elementos. No método encontra elementos que não respeitam em tamanho o 8pt grid, mas que se alinham perfeitamente entre eles e seus espaçamentos. Logo abaixo deixo um link e um vídeo para quem quiser se aprimorar nestes métodos.
Conclusão
O layout grid é usado baseado no 8pt grid para manter uma UI consistente, tomar menos tempo nas decisões de UI e para manter o design multi-plataforma e responsivo. No caso do guide Linx e Stone Co, estamos usando o método soft grid, para manter a consistência entre os elementos de uma página ao invés de nos travar em elementos múltiplos de 8 perfeitos (escolhemos a forma fluida e fácil de desenvolver).
“Consistent, and scalable spacing helps you eliminate guesswork whilst designing and developing. It requires fewer design decisions. And it enables a much faster turnaround on projects. — Marc Andrew em setembro de 2020.
