Ebook Grid

fundamentosdodesign.com.
br
Fundamentos
do Design Visual
Princípios, Conceitos e Fundamentos
1
fundamentosdodesign.com.br
Aprenda e domine os
Fundamentos do Design
O Curso Fundamentos do Design Visual (FDV) é um curso focado nos fundamentos e princípios do
Design onde você aprende sobre Tipografia, Cores, Gestalt, Grids, entre outros.
Aprenda os fundamentos do Design para você deixar de ser amador para ser um Designer que sabe
o que faz defendendo os seus projetos baseado em conceitos e fundamentos.
SAIBA MAIS SOBRE O CURSO
2
Sobre o autor
David Arty
Designer, empreendedor, fundador do
blog Chief of Design e Designimador.
Trabalha na área criativa, desde 2009.
Atuou em agências, empresas de TI e

marketing digital, participando de grandes lançamentos da área.
Também atua como docente em cursos de Design e Web Design, passando por
instituições como SENAC SP e Digital House, e em treinamentos e cursos onlines.
3
GRID
Grid é elemento formado por conjuntos de linha auxiliares na vertical e horizontal,
ou de retângulos, onde se proporciona uma estrutura para construção de peças de
comunicação visual, gráfico ou web.

Funções de
um Grid
• Organizar as informações em sua estrutura;
• Contribuir para ordenação, distribuição; alinhamento e
dimensão dos elementos gráficos;
• Auxilia na consistência visual do layout em todas suas telas.
5
Anatomia de um Grid
Cada parte de um grid tem um nome, uma função, por isso
vamos conferir agora os elementos que compõem um grid.
6
Anatomia do Grid
Margens
São os espaços negativos (em branco) entre o limite da página (borda) e o
início do conteúdo.
Servem para enquadrar o conteúdo e dar “respiro” aos textos e imagens.
7
8
Anatomia do Grid
Guias horizontais
São os alinhamentos horizontais.
São usados para orientar os olhos na leitura.
9
10
Anatomia do Grid
Colunas
São estruturas verticais que criam divisões horizontais.
Servem para delimitar o espaço a ser ocupado pelo
conteúdo entre as margens.
11
12
Anatomia do Grid
Módulos
São unidades formadas através da junção da
coluna com a linha base.
13
14
Anatomia do Grid
Zona especiais
São conjuntos de módulos, que formam
uma unidade.
15
16
Anatomia do Grid
Calhas (gutters)
São os espaços em branco de separação
entre colunas e linhas.
17
18
Anatomia do Grid
Marcadores
São elementos secundários localizados na parte externa (margem), como por
exemplo, cabeçalhos, nomes de seções, paginação e etc.
19
20
Tipos de grids
Existem várias maneiras de utilizarmos os grids.
Veremos a seguir os modelos mais comuns.
21
Tipos de Grid
Grid de uma coluna

É usado geralmente para textos grandes, corridos, contínuos,
como livros. E é formado por apenas um bloco de texto.
22
23
Tipos de Grid
Grid de duas colunas

É um módulo mais flexível que de uma coluna.
Pode ser usado para somente um texto ou textos
independentes separados por uma coluna. E suas
colunas podem ter larguras idênticas ou diferentes.
24
25
26
Tipos de Grid
Grid de múltiplas colunas

Mais flexível que as anteriores, também pode ser usado
para grande quantidade de conteúdo e pode ter largura
de colunas variadas.
27
28
Tipos de Grid
Grid modular
Esse Grid utiliza colunas verticais mais múltiplas
guias horizontais e proporcionam maior controle do
conteúdo. É utilizado em projetos mais complexos.
29
30
Tipos de Grid
Grid hierárquico
O grid hierárquico é composto por zonas de
hierarquias, como o próprio nome já diz, ele divide as
telas em colunas horizontais com larguras diferentes
com base no conteúdo e informações.
31
32
Quer Aprender
mais?
Acesse nossa Playlist
de Fundamentos do Design
no Youtube! CLIQUE AQUI!
33
34

Ebook Grid

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ebook Grid

Enviado por

Direitos autorais:

Formatos disponíveis

fundamentosdodesign.com.

Princípios, Conceitos e Fundamentos

o que faz defendendo os seus projetos baseado em conceitos e fundamentos.

SAIBA MAIS SOBRE O CURSO

Atuou em agências, empresas de TI e

ou de retângulos, onde se proporciona uma estrutura para construção de peças de

comunicação visual, gráfico ou web.

• Contribuir para ordenação, distribuição; alinhamento e

dimensão dos elementos gráficos;

• Auxilia na consistência visual do layout em todas suas telas.

Servem para enquadrar o conteúdo e dar “respiro” aos textos e imagens.

São usados para orientar os olhos na leitura.

Servem para delimitar o espaço a ser ocupado pelo

conteúdo entre as margens.

coluna com a linha base.

entre colunas e linhas.

exemplo, cabeçalhos, nomes de seções, paginação e etc.

Grid de uma coluna

como livros. E é formado por apenas um bloco de texto.

Grid de duas colunas

Grid de múltiplas colunas

Você também pode gostar