Palestra - Fundamentos do Grid

37,715 views
37,544 views

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
72 Likes
Statistics
Notes
No Downloads
Views
Total views
37,715
On SlideShare
0
From Embeds
0
Number of Embeds
2,191
Actions
Shares
0
Downloads
0
Comments
9
Likes
72
Embeds 0
No embeds

No notes for slide

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>

×