Grids no Web-Design
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-WebDesign.png)
Neste artigo, vamos falar de algumas dicas sobre as Grids e como utilizá-las.
Benefícios do uso de Grids
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Consistencia-300x300.png)
Transparência e consistência
As grids constroem o layout da interface, graças ao qual reforçam a consistência na colocação de elementos. Além disso, uma grid bem elaborada garante uma melhor e mais fácil digitalização dos componentes na tela, o que contribui para uma experiência positiva do usuário.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Responsivo-300x300.png)
Mais fácil de criar capacidade de resposta
Hoje em dia, como referido no artigo “Web Responsivo”, os designs responsivos são essenciais! O uso das grids fornece um layout consistente em vários dispositivos com diferentes tamanhos de tela.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Design-300x300.png)
Processo de design mais rápido
As grids fornecem aos designers diretrizes para proporções entre elementos, como espaçamento e margens, o que acelera o trabalho e reduz a possibilidade de erro.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Colaboração-300x300.png)
Colaboração mais fácil
As grids facilitam o trabalho de designers e programadores.
Graças a um plano de layout comum ou diretrizes para espaçamento e margens, o trabalho é coerente e mais integrado.
Terminologia básica da grids
Antes de começarmos a trabalhar com a construção da grid, vale a pena conhecer a terminologia de seus elementos para saber o que são, pelo que são responsáveis, e como utilizá-los.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Termminologia-1024x818.png)
Dimensões do dispositivo
É fundamental pensar no dispositivo para o qual estamos a criar o
projeto para verificar o funcionamento do ecrã e conhecer possíveis limitações. Aqui temos os exemplos das três resoluções de ecrã mais comuns.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Dimensoes-do-dispositivo-1024x818.png)
Número de colunas
O número de colunas usadas na estrutura da grid depende do designer e das necessidades do projeto. No entanto, podemos usar as estruturas de grid mais populares, abaixo temos os tipos usados para vários dispositivos.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Numeros-de-Colunas-1024x818.png)
Sistema de grid de 4 pontos
Uma grid e os elementos de interface construídos para uma determinada escala são mais fáceis de dimensionar e também trazem ordem ao design. Os sistemas de grid de 8pt ou 4pt são os tipos mais comums. (4pt dá-nos mais flexibilidade no momento de desenvolver o projeto)
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Sitema-de-4pt-1024x818.png)
Grid Simples vs Complexa
Ao projetar, podemos usar o modelo de grid padrão, que consiste apenas em colunas verticais, ou criar uma grid mais avançada adicionando linhas na horizontal, o que ajuda a organizar o conteúdo do projeto e garantir a consistência dos elementos.
![](https://boomer.pt/wp-content/uploads/2022/11/w47_Grids-no-Web-—-Grid-Simpes-vs-Complexa-1024x817.png)
Em suma, o fundamental da utilização de Grids é a perceção de como elas funcionam e usá-las da maneira consistente e correta.