Todos nós já entramos em uma página de internet e vimos um conteúdo bagunçado com muitas informações, sem nenhuma ou quase nenhuma organização. Entretanto, você já olhou para uma página da internet que possuía um conteúdo extremamente organizado, acessível e de fácil compreensão? Se sim, é provável que o responsável pela construção desse site tenha utilizado um recurso muito famoso entre designers, desenvolvedores etc. O nome dessa ferramenta e o assunto de hoje é: grid.
Não se assuste se você nunca tiver lido ou escutado essa palavra na vida. Aqui você vai entender um pouco melhor sobre esse recurso tão importante na confecção de peças gráficas, websites ou qualquer composição visual.
Os grids são linhas imaginárias e funcionam como guias para organizar o conteúdo de uma peça impressa ou online. Através dele é possível definir espaçamentos, estruturas e formatos ideais para algumas peças gráficas. Eles também são importantes para dar base e estruturar composições.
Vale ressaltar que o uso dessa ferramenta não é uma obrigatoriedade dentro de projetos, porém é um facilitador em diversas ocasiões.
Sabemos agora que a organização do conteúdo é planejada e que os grids são responsáveis por essa estruturação, mas ainda não vimos o que é um grid de fato.
No exemplo abaixo, as linhas guias indicam o espaço onde ficarão os conteúdos do site, os espaços em branco e a quantidade de colunas que essa página terá. Esse é um grid voltado para páginas de internet. Em um primeiro momento pode parecer confuso, mas garanto que você vai entender melhor com o outro exemplo que daremos.
Reprodução/Monica Galvan
Talvez ainda não tenha ficado tão fácil. Para entender melhor, vamos dar mais um exemplo, dessa vez com uma aplicação real. Veja que nas imagens deste website é possível ver que todo o material é alinhado e possui distâncias definidas, assim como áreas de respiro - os famosos espaços em branco que separam textos, imagens e elementos. Tudo isso é previamente planejado na construção da maioria dos sites e o grid é o responsável por essa organização.
Reprodução/Sony
Reprodução/Sony
Com esses exemplos a compreensão ficou um pouco mais fácil, não é? Esperamos que tenha gostado da leitura e que ela possa servir de auxílio para estudos ou de curiosidade para quem queira entender melhor como funcionam alguns processos de construção do design.
Referência: Walter Mattos