Your SlideShare is downloading. ×
Fundamentos do grid Prof. Luiz Agner PAI-2 Produção e Análise da Imagem 2 (2008-1)
Fundamentos do grid <ul><li>Todo trabalho de design envolve a solução de problemas em níveis visuais e organizativos. Figu...
Fundamentos do grid <ul><li>O grid introduz uma ordem sistemática num leiaute e permite que o designer diagrame uma grande...
Fundamentos do grid <ul><li>Um grid é um conjunto específico de relações de alinhamento que funcionam como guias para a di...
Fundamentos do grid <ul><li>Construir um grid eficaz para um projeto gráfico significa destrinchar e analisar cuidadosamen...
Vantagens do grid <ul><li>Clareza </li></ul><ul><li>Eficiência </li></ul><ul><li>Economia </li></ul><ul><li>Identidade </l...
Projetando um grid <ul><li>O projeto de grid tem  duas fases :   </li></ul><ul><ul><li>Avaliação </li></ul></ul><ul><ul><l...
Projetando um grid <ul><li>Avaliação  - O designer avalia as características informativas e as exigências de produção: os ...
Projetando um grid <ul><li>2 -  Exploração  - Dispor o conteúdo de acordo com as diretrizes dadas pelo grid. Geralmente, a...
Tipos de grid: <ul><li>Retangular </li></ul><ul><li>De colunas </li></ul><ul><li>Modular  </li></ul><ul><li>Hierárquico </...
Grid retangular <ul><li>1 -  Grid retangular  (ou manuscrito) </li></ul><ul><li>É o grid mais simples. Deriva dos manuscri...
Grid retangular
Grid de colunas <ul><li>2 -  Grid de colunas </li></ul><ul><li>O grid de colunas é muito flexível e podem ser usadas para ...
Grid de colunas <ul><li>O grid de colunas pode ser composto, formado por grids diferentes, cada um destinado a um tipo de ...
Grid de colunas
Grid de colunas
Grid de colunas
Grid modular <ul><li>3 -  Grid modular </li></ul><ul><li>Grid de coluna com muitas guias horizontais, criando uma matriz d...
Grid modular
Grid modular
Grid hierárquico <ul><li>4 –  Grid hierárquico </li></ul><ul><li>É uma abordagem orgânica da ordenação dos elementos e da ...
Grid hierárquico <ul><li>O conteúdo dinâmico da maioria dos sites e o redimensionamento das janelas exigem a flexibilidade...
Grid hierárquico
Grid hierárquico Exemplos de CSS grids
Variação e violação <ul><li>Cada problema de design é diferente e requer uma estrutura de grid que trate de suas especific...
Variação e violação <ul><li>Um grid só funciona realmente se o designer vai além de sua uniformidade implícita e o utiliza...
Upcoming SlideShare
Loading in...5
×

Palestra - Fundamentos do Grid

34,979

Published on

Aula preparada para a UniverCidade (Rio), sobre o grid. Baseado no livro "A Construção do Grid", de Timothy Samara. Disciplina Produção e Análise da Imagem 2.

9 Comments
64 Likes
Statistics
Notes
No Downloads
Views
Total Views
34,979
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
9
Likes
64
Embeds 0
No embeds

No notes for slide

Transcript of "Palestra - Fundamentos do Grid"

  1. 1. Fundamentos do grid Prof. Luiz Agner PAI-2 Produção e Análise da Imagem 2 (2008-1)
  2. 2. Fundamentos do grid <ul><li>Todo trabalho de design envolve a solução de problemas em níveis visuais e organizativos. Figuras, símbolos, massa de textos, títulos e tabelas devem se reunir para transmitir informação. O grid é uma maneira de juntar esses elementos. </li></ul>
  3. 3. Fundamentos do grid <ul><li>O grid introduz uma ordem sistemática num leiaute e permite que o designer diagrame uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto. </li></ul>
  4. 4. Fundamentos do grid <ul><li>Um grid é um conjunto específico de relações de alinhamento que funcionam como guias para a distribuição de elementos num formato. </li></ul><ul><li>Todo grid possui as mesmas partes básicas, por mais complexo que seja. O grid deve atender às exigências informativas do conteúdo. </li></ul>
  5. 5. Fundamentos do grid <ul><li>Construir um grid eficaz para um projeto gráfico significa destrinchar e analisar cuidadosamente o conteúdo, identificando as qualidades visuais e semânticas do espaço tipográfico. </li></ul>
  6. 6. Vantagens do grid <ul><li>Clareza </li></ul><ul><li>Eficiência </li></ul><ul><li>Economia </li></ul><ul><li>Identidade </li></ul>
  7. 7. Projetando um grid <ul><li>O projeto de grid tem duas fases : </li></ul><ul><ul><li>Avaliação </li></ul></ul><ul><ul><li>Exploração </li></ul></ul>
  8. 8. Projetando um grid <ul><li>Avaliação - O designer avalia as características informativas e as exigências de produção: os múltiplos tipos de informação, a natureza das imagens e a quantidade delas. O designer deve prever os problemas de diagramação: títulos compridos demais, cortes nas fotografias e espaços vazios por falta de material em alguma seção. </li></ul>
  9. 9. Projetando um grid <ul><li>2 - Exploração - Dispor o conteúdo de acordo com as diretrizes dadas pelo grid. Geralmente, a variedade de soluções para diagramação de uma página com um certo grid é inesgotável. Um grid realmente bom cria infinitas possibilidades de exploração. O designer deve testá-lo até o limite. O designer não pode ter medo do seu grid. </li></ul>
  10. 10. Tipos de grid: <ul><li>Retangular </li></ul><ul><li>De colunas </li></ul><ul><li>Modular </li></ul><ul><li>Hierárquico </li></ul>
  11. 11. Grid retangular <ul><li>1 - Grid retangular (ou manuscrito) </li></ul><ul><li>É o grid mais simples. Deriva dos manuscritos tradicionais que mais tarde resultaram na impressão de livros. Sua tarefa é acomodar um longo texto corrido, como um romance ou uma tese. Desafio: deve se criar conforto e estímulo para evitar o cansaço visual. Deve ser trabalhado o tamanho do tipo, o espaçamento e as margens. </li></ul>
  12. 12. Grid retangular
  13. 13. Grid de colunas <ul><li>2 - Grid de colunas </li></ul><ul><li>O grid de colunas é muito flexível e podem ser usadas para separar diversos tipos de informação. Exemplo: colunas para texto corrido e imagens, com legendas em coluna separada. </li></ul>
  14. 14. Grid de colunas <ul><li>O grid de colunas pode ser composto, formado por grids diferentes, cada um destinado a um tipo de conteúdo. Exemplo: a natureza da informação a ser veiculada pode pedir um grid de três colunas e outro de duas colunas, ambos com a mesma margem. </li></ul><ul><li>Às vezes, um guia horizontal perto do topo define a posição dos cabeçalhos ou início dos textos. </li></ul>
  15. 15. Grid de colunas
  16. 16. Grid de colunas
  17. 17. Grid de colunas
  18. 18. Grid modular <ul><li>3 - Grid modular </li></ul><ul><li>Grid de coluna com muitas guias horizontais, criando uma matriz de células (chamadas módulos). Padrão estético e conceitual associado à ordem política e social (1950-1980), derivado da concepção racionalista da Bauhaus e do Estilo Internacional suíço. Serve para informações tabulares, gráficos, formulários e diagramas. </li></ul>
  19. 19. Grid modular
  20. 20. Grid modular
  21. 21. Grid hierárquico <ul><li>4 – Grid hierárquico </li></ul><ul><li>É uma abordagem orgânica da ordenação dos elementos e da informação. A largura das colunas e entrecolunas pode variar. A página da internet é um exemplo de gride hierárquico. </li></ul>
  22. 22. Grid hierárquico <ul><li>O conteúdo dinâmico da maioria dos sites e o redimensionamento das janelas exigem a flexibilidade na largura e comprimento e impedem a abordagem estritamente modular (mas continua a requerer a padronização das áreas de exibição). </li></ul>
  23. 23. Grid hierárquico
  24. 24. Grid hierárquico Exemplos de CSS grids
  25. 25. Variação e violação <ul><li>Cada problema de design é diferente e requer uma estrutura de grid que trate de suas especificidades. Um grid realmente bom cria infinitas possibilidades de exploração, mas mesmo assim, às vezes é melhor transgredir o grid. </li></ul>
  26. 26. Variação e violação <ul><li>Um grid só funciona realmente se o designer vai além de sua uniformidade implícita e o utiliza para criar uma narrativa visual dinâmica capaz de manter o interesse ao longo das páginas. O maior risco do grid é sucumbir à sua regularidade. Quem cria um leiaute sem graça não é o grid, é o designer. </li></ul>

×