Um grid é a estrutura subjacente à organização de elementos em uma página. Grids permitem posicionar elementos de forma eficiente e consistente, facilitando a criação e tomada de decisões do designer.
2. O Que é um Grid? (AMBROSE, HARRIS, 2009 p.5)
• O GRID é a BASE sobre a qual um DESIGN é CONSTRUÍDO;
• Ele permite que o DESIGNER ORGANIZE de modo EFICIENTE diversos
ELEMENTOS em uma PÁGINA;
• GRID = ESQUELETO;
• GRID = ORDEM + ESTRUTURA AO TRABALHO.
3. O que eu posso definir
HIERARQUIA, CAMADAS,
com um grid? POSICIONAMENTO
4. Por que usar grids? (AMBROSE, HARRIS, 2009 p.10)
• O GRID fornece uma ESTRUTURA para todos os ELEMENTOS de DESIGN
de uma PÁGINA;
• Elementos estruturados FACILITAM e SIMPLIFICAM os PROCESSOS de
CRIAÇÃO e de TOMADA DE DECISÃO por parte do designer;
• O grid aumenta a PRECISÃO e a CONSISTÊNCIA da LOCALIZAÇÃO dos
elementos da página = + CRIATIVIDADE;
• Grids permitem que o designer tome DECISÕES CONSCIENTES e use o
seu TEMPO de modo EFICIENTE;
• DINAMISMO, IMPACTO a partir do posicionamento dos elementos.
5. Como vemos
A hierarquia da visualização
o monitor? da informação
6. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
7. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
8. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
9. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
10. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
11. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
12. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
13. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
14. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
15. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
16. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
17. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
18. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
19. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
20. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
21. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
22. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
23. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
24. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
25. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
26. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
27. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
28. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
29. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
30. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
31. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
32. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
33. Páginas e Telas
• Elementos ATIVOS;
• Elementos PASSIVOS;
• Natureza do conteúdo;
• O olho varre a superfície
em busca da informação.
34. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
35. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
36. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
37. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
38. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
39. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
40. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
41. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
42. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
43. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
44. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
45. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
46. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
47. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
48. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
49. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
50. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
51. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
52. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
53. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
54. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
55. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
56. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
57. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
58. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
59. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
60. Defina o roteiro
Mudar o Grid, da viagem
da sua vida
Muda a Visualização hoje. Sem falta.
• Colunas;
• Margens; Veneza
• Módulos de Imagem;
• Agrupamento;
• Proporção;
• Posição, Tamanho, Ênfase.
62. A Pirâmide Invertida (AMBROSE E HARRIS, 2009, p. 20)
Nível Primário
Quem ou qual é o assunto;
que serviço é oferecido;
onde é o evento, etc.
63. A Pirâmide Invertida (AMBROSE E HARRIS, 2009, p. 20)
Nível Primário
Quem ou qual é o assunto;
que serviço é oferecido;
onde é o evento, etc.
Nível Secundário
Outras informações importantes;
leituras adicionais, etc.
64. A Pirâmide Invertida (AMBROSE E HARRIS, 2009, p. 20)
Nível Primário
Quem ou qual é o assunto;
que serviço é oferecido;
onde é o evento, etc.
Nível Secundário
Outras informações importantes;
leituras adicionais, etc.
Último nível
Detalhes