Curso de UI Design para Iniciantes

Trabalhando com Grid

Aula 16
Exemplo de grid 12 colunas

O que é Grid?

 

De maneira geral, grid pode ser definido como um conjunto de linhas arranjadas dentro de um esquema que auxiliam na aplicação dos princípios básicos do design: que é o equilíbrio, a unidade, harmonia, o espaço e a forma.

 

Os grids existem tanto para os projetos offline, quanto para os projetos digitais. Embora sejam visualmente diferentes nos dois casos, sua utilidade é a mesma.

 

Eu lembro que no meu primeiro emprego lá em meados de 2012 a primeira coisa que perguntei quando cheguei foi qual era o grid utilizado na empresa. E a resposta do meu gerente de projeto foi que não era usado nenhum grid porque isso limitava a criatividade. E por incrível que pareça eles demoraram pra perceber que o uso de grid era fundamental para os projetos.

 

O grid é fundamental porque ele permite alinhar itens, distribuir elementos e quebrar componentes em seções garantindo um layout visualmente agradável. Além disso, ele facilita na hora de desenvolver o front-end. Principalmente quando é preciso fazer os layouts se adaptarem à outras resoluções de tela.

 

Na próxima aula veremos alguns tipos de grid que nós podemos utilizar para dar ordem aos nossos projetos.

Anatomia de um Grid

Um grid é composto por várias partes e você constantemente vai ver e fazer uso delas. Então vamos explorar melhor cada uma.

Colunas

São as seções verticais do grid. Geralmente os grids possuem 12 colunas, mas você pode trabalhar com quantas quiser desde que ela seja divisível por 2(14 colunas, 16, 24...).

Grid - Colunas

Linhas (Rows)

São as seções horizontais do grid. Não são muito utilizadas mas se você quiser montar padrões de espaçamento de texto elas são bem úteis. E quando há colunas + linhas em um grid eles se tornam grids modulares como você pode ver no próximo exemplo.

Grid - Linhas (rows)

Módulos

Os módulos são criados pela intersenção das linhas com as colunas.

Grid - Módulos

Regiões

As regiões são os elementos proprimamente aplicados dentro da grid, ocupando uma ou mais colunas.

Grid - Regiões

Gutters

Os gutters são os espaçamentos entre uma coluna e outra. Se o espaçamento entre duas colunas é 30px, cada coluna terá um gutter de 15px em cada lado.

Exemplos

Selecionei alguns projetos para vocês verem como o grid foi trabalhado.

O Dribbble usa um grid de 970px em que cada coluna possui 53px e um gutter de 30px.

O Smartmockups utiliza o padrão do grid Bootstrap: 1170px, 12 colunas, cada coluna com 56px e com o gutter de 30px. Eu acentuei os elementos e a quantidade de colunas que cada um deles ocupa dentro da grid. 

 

Na aula de amanhã vamos ver 2 tipos de grid: o Bootstrap e o grid baseado em 8pt. Se ficou com alguma dúvida é só me chamar lá no Slack. ;)

Ficou com dúvidas? Tire todas elas no canal do slack exclusivo do curso. Você já foi adicionado lá!

Grande abraço,
Willian Matiola - Co-Fundador
contato@uilab.com.br

UI Lab

CNPJ:  24.667.130/0001­40