Medita estas coisas; ocupa- te nelas, para que o teu
aproveitamento seja manifesto a todos.
1 Timóteo 4:15
DWEB
Design para Web
Diagramação Web
2
Curso Superior de Tecnologia em Design Gráfico
Diagramação Web
2
Carlos José
carlosjose.unibratec@gmail.com www.carlosjose.net
@carlosjoser2n
Contatos
2
Diagramação Web
Apresentar os fundamentos de utilização de um sistema de grids para diagramação web.
Objetivo
2
Diagramação Web
Grid
Grid system
Agenda
2
Diagramação Web
Introdução
Cada recomendação gerada em
wireframe foi pensada e tem uma razão de ser. Logo, deve ser respeitada pelo designer.
Em qualquer tipo de interface, contraste, ritmo, harmonia e equilíbrio estão
presentes na composição.
Agregaram-se então a arquitetura de informação e a usabilidade como campos de estudo do que podemos chamar de “diagramação digital”.
Edição 71 Novembro 2009
2
Diagramação Web
Introdução
Grids não são uma moda passageira:
foram criados antes dos tipos móveis.
Parece que todos os designers interativos estão, pela primeira vez em suas
carreiras, olhando para os impressos e para a teoria gráfica em busca de
inspiração.
As pessoas justificam um projeto ruim porque “não quebra o grid”, eles
esquecem que feio é sempre feio.
O grid é uma ajuda, não uma garantia.
Edição 125 Dezembro 2010
2
Diagramação Web
Introdução
2
Diagramação Web
Introdução
2
Diagramação Web
Grid é a base sobre a qual um design é
construído.
Introdução
2
Diagramação Web
O grid permite que o designer organize de
modo eficiente diversos elementos.
Introdução
2
Diagramação Web
Grids adicionam ordem e estrutura ao design,
quer seja simples ou complexo.
Introdução
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Subdividir uma página vertical e horizontalmente em:
§ Margens
§ Colunas
§ Espaços entre colunas
§ Linhas de texto e espaços entre blocos de texto e imagens.
Grid?
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Grid?
Margem externa Margem central Módulos de imagem Grid de linhas de base
Coluna Medianiz Margem inferior Espaço entre colunas
2
Diagramação Web
A subdivisão forma a base de uma abordagem modular e
sistemática ao layout principalmente para
documentos com múltiplas páginas.
Por que usar?
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Torna o processo de design mais rápido e garante a
coerência visual.
Por que usar?
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Leitura
Como
lemos uma
página?
2
Diagramação Web
Qualquer página tem
elementos ativos e passivos devido à natureza do
conteúdo e à maneira como enxergamos a página.
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Leitura
Como
lemos uma
tela?
2
Diagramação Web
Da mesma forma que
analisamos uma página impressa em busca de
palavras-chave ou pontos de interesse.
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
O Designer pode interferir
nesse processo destacando ou adicionando marcadores afim de garantir que as seções e
informações mais importantes saltem aos olhos.
Leitura
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Passamos os olhos
rapidamente pelo topo da página, da esquerda para direita em duas faixas, e
seguimos para baixo a procura de algo relevante.
Padrão F
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Este padrão é resultante da tentativa de aprender
rapidamente informações em um website.
Padrão F
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Padrão F
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
As informações mais
importantes e impactantes aparecem no topo, seguidas
por informações secundárias e por fim as informações gerais por último.
Pirâmide Invertida
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Este padrão oriundo do jornalismo, visa gerar um
ponto de dobra criando uma linha imaginária que limita o que pode ser visualizado sem a rolagem de tela.
Pirâmide Invertida
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
Pirâmide Invertida
2
Diagramação Web
O Sistema de grid web está dividido em:
§ Largura fixa
§ Largura flexível ou responsiva
Grid system
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Largura fixa
A largura fixa têm como finalidade principal manter a largura o layout
inalterado independente da janela do navegador ou a resolução da tela do dispositivo ao qual está sendo exibido.
Grid system
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Grid system
http://960.gs/
2
Diagramação Web
Largura fixa
§ 12 Colunas – layout com pouco conteúdo.
§ A largura de uma coluna é de 60px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px.
Grid system
2
Diagramação Web
Grid system
2
Diagramação Web
Largura fixa
§ 16 Colunas – layout com médio conteúdo como blogs ou websites institucionais.
§ A largura de uma coluna é de 40px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px.
Grid system
40px
2
Diagramação Web
Largura fixa
§ 24 Colunas – layout com muito conteúdo como
portais de notícias e e-commerce com uma variedade de produtos muito vasta.
§ A largura de uma coluna é de 30px, a largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px.
Grid system
30px
2
Diagramação Web
Largura flexível ou responsiva
A largura flexível ou responsiva têm como finalidade principal ajustar a largura do
layout em função da janela do navegador ou da resolução da tela do dispositivo ao qual está sendo exibido.
Grid system
Fonte: AMBROSE, Gavin. Design básico: grids. São Paulo. Bookman, 2008.
2
Diagramação Web
Grid system
http://unsemantic.com/
2
Diagramação Web
Largura flexível ou responsiva
§ ? Colunas – para qualquer layout.
§ A largura de uma coluna pode ser 5%, 10%,
33.3333% ou 66.6667% para atingir um total de 100%.
§ A largura da margem da esquerda é de 10px e a largura da margem da direita é de 10px.
Os valores em pixel variam de acordo com a tela do dispositivo.
Este sistema de grid permite aninhar colunas.
Grid system
2
Diagramação Web
Grid system
12 Colunas - Unsemantic
2
Diagramação Web
Photoshop
Para criação de layout utilizando o grid system no Adobe Photoshop:
§ 960.gs (http://960.gs/)
§ GuideGuide (http://guideguide.me/)
Grid system
2
Diagramação Web
