TÉCNICAS DE DESIGN
Grids
O que são? Quando usar Grids?
✓ São linhas "invisíveis" que servem para Sempre!
As grids ajudam no equilíbrio, hierarquia,
organizar os elementos da interface. alinhamento e consistência de uma interface.
✓ Os grids existem para ajudar a determinar o
posicionamento e o equilíbrio dos objetos de
um determinado layout.
✓ Os Grids permitem criar uma linguagem visual
comum em toda a página.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Benefícios da grid para o usuário Benefícios da Grid para o designer
✓ Facilita a leitura e a disponibilização dos ✓ Rapidez para adicionar, alterar e mover
elementos. elementos.
✓ Melhora a experiência visual. ✓ Os padrões de espaçamento e alinhamento
✓ Menos esforço cognitivo para interpretar proporcionam uma linha de trabalho uniforme.
o conteúdo. ✓ Linguagem visual comum em toda a página.
✓ O olho humano percebe a distribuição ✓ Mantém a consistência do trabalho, caso outro
proporcional dos elementos e associa as designer trabalhe no arquivo.
informações com maior facilidade.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Benefícios da grid para developers
✓ É o caminho mais fácil para que o layout
alcance o pixel perfect.
✓ A responsividade é aplicada com mais
facilidade.
✓ Atualização do layout de forma consistente.
✓ Rapidez na construção do front-end do site.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Terminologias 1. Colunas
▪ São os blocos verticais dentro do layout do
1. Colunas
Grid.
2. Gutter
▪ Determinam a área onde será posicionado o
3. Margem
conteúdo.
4. Breakpoints
▪ A largura de cada coluna é medida
5. Elementos de Campo
percentualmente em vez de números fixos.
Assim, permite a flexibilidade de adaptação
para diversos tamanhos de ecrã.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
▪ O número de colunas vai depender do tamanho
e resolução de cada tela (breakpoint).
▪ Nesse sentido, os layouts mais comuns são os
de 4, 8 e 12 colunas.
▪ Estas configurações mais comuns são bastante
flexíveis, permitindo uma melhor responsividade
entre dispositivos diferentes, mas cada designer
decide o número de colunas a utilizar!
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
2. Gutters
Os Gutters (calhas, em português) são os espaços
entre as colunas num layout de Grids.
Dão à grid algum espaço para respirar.
A largura dos Gutters é fixa dentro de um mesmo
breakpoint, mas em diferentes breakpoints
podem mudar de tamanho.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
3. Margem
As margens são os espaços laterais à esquerda e à
direita do conteúdo da página.
Assim como os Gutters, a sua largura é fixa, mas
adapta-se consoante os diferentes breakpoints.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
4. Breakpoints
São os intervalos de layouts predeterminados
para diferentes tipos de tamanho de ecrãs.
Existem breakpoints para ecrãs de telemóvel,
tablets e desktops.
Para cada breakpoint há um layout de grid
diferente para que o conteúdo seja distribuído
e alocado de uma maneira melhor.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
5. Elementos de campo
São blocos de design, sejam eles em texto,
imagem ou uma mistura dos dois.
Os elementos de campo são alocados dentro
do grid de forma a ficarem alinhados com as
colunas e Gutters.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Formatos da Grid flexível
O formato 960px, foi utilizado durante Também pode utilizar uma grid de
muitos anos, mas devido às novas 1440px de largura, que é o tamanho
resoluções de monitores, ficou ultrapassado. máximo recomendado ao utilizar um
Hoje em dia, o formato mais comum é Grid flexível.
1140px de largura, para que haja uma boa
adaptação às resoluções maiores de
monitores.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Formatos da Grid flexível
Em websites
960px (não utilizar) 1140px (o mais utilizado) 1440px (o maior)
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Como escolher o número de colunas?
Depende do objetivo do projeto. Mas o número de colunas pode variar de
A razão para trabalhar com 12 colunas, que é o projeto para projeto. Basicamente, quanto
formato mais utilizado, é por causa da flexibilidade maior o número de colunas, (14 ou 21, por
proporcionada e por ser capaz de dividir o layout ex.) maior o quantidade de possibilidades
uniformemente. Ou seja, pode dividir 12 por 2, 3, para dividir o layout. Geralmente esse tipo de
4 e ter uma serie de modulações disponíveis (2 x Grid é utilizado quando se tem muito
6, 3 x 4). conteúdo editorial e o design é projetado
com uma largura de 1140px ou mais.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Não deve deixar que os elementos
fiquem em cima dos Gutters. Caso
contrário, o Grid perde toda a sua
utilidade.
Formadora Angélica Rogeiro
TÉCNICAS DE DESIGN
Grids
Ferramentas
[Link]
[Link]#columns-gutters-and-
margins
[Link]
[Link]
[Link]
Formadora Angélica Rogeiro