Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grade de diagramação

18,103 views

Published on

Estruturando a informação

Published in: Design

Grade de diagramação

  1. 1. Grade de diagramação Estruturando a informação
  2. 2. Definição <ul><li>Segundo o dicionário Aurélio, diagramar significa: </li></ul><ul><ul><li>“ Dispor graficamente os elementos da peça gráfica que deverão fazer parte de uma publicação”; </li></ul></ul><ul><ul><li>“ Elaboração de leiaute ou esquema em que aparecem devidamente calculados e representados todos os elementos que compõem o material”. </li></ul></ul>
  3. 3. Evolução <ul><li>O conceito de diagramação sempre existiu. Nos primórdios da civilização, nossos antepassados tentavam organizar o pensamento estruturalmente ao se comunicar. </li></ul><ul><li>Durante a Revolução Industrial, foi elaborado um conceito de grade (malha ou grid ) para a diagramação, servindo como guia para orientar a posição dos tipos móveis nas prensas mecânicas de impressão. </li></ul><ul><li>Com o tempo, os designers perceberam que a grade poderia organizar melhor as informações permitindo um controle de leitura do registro visual. </li></ul>
  4. 4. Movimentos que evoluíram a diagramação <ul><li>Beaux-Art </li></ul><ul><li>Arts & Crafts </li></ul><ul><li>Art Nouveau </li></ul><ul><li>Construtivismo Russo </li></ul><ul><li>Dstijl </li></ul><ul><li>Bauhaus </li></ul><ul><li>Art Deco </li></ul><ul><li>Estilo Internacional </li></ul><ul><li>Revivalismo </li></ul><ul><li>Vernacular </li></ul><ul><li>New Wave </li></ul><ul><li>Art Punk </li></ul><ul><li>Academia de Arte Cranbook </li></ul>
  5. 5. Opiniões sobre grade de diagramação <ul><li>Para os simpatizantes: </li></ul><ul><ul><li>Fator essencial do projeto visual, possibilitando precisão, ordem e clareza das informações. </li></ul></ul><ul><li>Para outros: </li></ul><ul><ul><li>Oprime a criatividade, limitando o trabalho. </li></ul></ul>
  6. 6. Regra dos terços <ul><li>Tanto na pintura quanto na fotografia é comum o uso da grade para ajudar a compor visualmente uma imagem, enquadrando as informações de forma mais atraente. </li></ul>
  7. 7. Regra dos terços
  8. 8. Vantagens <ul><li>Clareza: </li></ul><ul><ul><li>Permite uma ordem sistemática de leitura, facilitando sua leitura e interpretação </li></ul></ul><ul><li>Eficiência: </li></ul><ul><ul><li>Uma vez que a estrutura foi planejada, um designer (ou vários) pode diagramar rapidamente uma quantidade enorme de informações </li></ul></ul><ul><li>Economia: </li></ul><ul><ul><li>É possível planejar melhor a utilização de todo o espaço disponível </li></ul></ul><ul><li>Identidade: </li></ul><ul><ul><li>A estrutura cria um padrão visual único, dando personalidade a composição </li></ul></ul>
  9. 9. Elementos da grade <ul><li>Margens </li></ul><ul><ul><li>Espaços negativos que indicam o limite do conteúdo. </li></ul></ul><ul><ul><li>Ajudam a estabelecer a tensão geral dentro da composição. </li></ul></ul><ul><ul><li>Pode ser utilizada para: </li></ul></ul><ul><ul><ul><li>Orientar o foco </li></ul></ul></ul><ul><ul><ul><li>Respiro </li></ul></ul></ul><ul><ul><ul><li>Área secundária de informação </li></ul></ul></ul>
  10. 10. Elementos da grade <ul><li>Coluna </li></ul><ul><ul><li>Alinhamento verticais que “bloca” a continuação de informação, contribuindo com a orientação da leitura. </li></ul></ul><ul><ul><li>Ajuda ao designer a dividir sua composição </li></ul></ul><ul><ul><li>A diferença da largura pode da mais peso a uma informação </li></ul></ul>
  11. 11. Elementos da grade <ul><li>Guias horizontais </li></ul><ul><ul><li>Alinhamento horizontal que ajudam a orientar o sentido da leitura </li></ul></ul><ul><ul><li>Definem pontos de partida </li></ul></ul><ul><ul><li>Criam respiro entre as informações </li></ul></ul>
  12. 12. Elementos da grade <ul><li>Módulos </li></ul><ul><ul><li>Unidades regulares que formam a grade </li></ul></ul>
  13. 13. Elementos da grade <ul><li>Zonas espaciais </li></ul><ul><ul><li>Agrupamento de módulos utilizados para reunir uma informação </li></ul></ul><ul><ul><li>Sua disposição é que definirá </li></ul></ul><ul><ul><ul><li>A geometrização </li></ul></ul></ul><ul><ul><ul><li>O agrupamento </li></ul></ul></ul><ul><ul><ul><li>A direção visual </li></ul></ul></ul>
  14. 14. Elementos da grade <ul><li>Marcadores </li></ul><ul><ul><li>Indicam a posição de informações secundárias ou elementos de repetição, como: </li></ul></ul><ul><ul><ul><li>Cabeçalho </li></ul></ul></ul><ul><ul><ul><li>Rodapé </li></ul></ul></ul><ul><ul><ul><li>Nome de seção </li></ul></ul></ul><ul><ul><ul><li>Paginação </li></ul></ul></ul><ul><ul><ul><li>Créditos </li></ul></ul></ul><ul><ul><ul><li>Etc </li></ul></ul></ul>
  15. 15. Fases de desenvolvimento <ul><li>Avaliação </li></ul><ul><ul><li>Analisar as características do conteúdo e a existência de produção do material. </li></ul></ul><ul><ul><li>Deve-se prever problemas de posicionamento, como títulos muito cumpridos, corte de imagens e espaços vazios por falta de conteúdo. </li></ul></ul><ul><ul><li>A grade deve ser flexível e dinâmica. Uma grade boa deve permitir infinitas possibilidades para a exploração. </li></ul></ul><ul><li>Diagramação </li></ul><ul><ul><li>Dispor o conteúdo na grade desenvolvida, mantendo a unidade do conteúdo sem comprometer a composição. </li></ul></ul>
  16. 16. Tipos de grade <ul><li>Retangular </li></ul><ul><ul><li>Versão mais simples que acomoda um longo texto corrido, como um livro. </li></ul></ul><ul><ul><li>Esse tipo causa cansaço, necessitando criar algo diferente para estimular a leitura. </li></ul></ul>
  17. 17. Tipos de grade <ul><li>Retangular </li></ul>
  18. 18. Tipos de grade <ul><li>Colunas </li></ul><ul><ul><li>É flexível e pode ser utilizado para separar diversos tipos de texto ou mesmo informação. </li></ul></ul><ul><ul><li>Pode ser composto por grades diferentes para tipo de conteúdo. </li></ul></ul>
  19. 19. Tipos de grade <ul><li>Colunas </li></ul>
  20. 20. Tipos de grade <ul><li>Modular </li></ul><ul><ul><li>Originário da Bauhaus e do Estilo Internacional suíço, utilizado combinar tipos de grades para unificação de conteúdo. </li></ul></ul><ul><ul><li>Quanto mais módulo, maior a flexibilidade, mas também aumenta o excesso de subdivisões, podendo gerar confusão ou redundância. </li></ul></ul>
  21. 21. Tipos de grade <ul><li>Modular </li></ul>
  22. 22. Tipos de grade <ul><li>Hierárquico </li></ul><ul><ul><li>Ordena as informações de forma semântica e ergonômica, dando mais peso e contraste para uma informação, variando a área viva em que ocupa. </li></ul></ul><ul><ul><li>É preciso fazer um estudo da interação ótica entre dos elementos para criar uma estrutura racional. </li></ul></ul>
  23. 23. Tipos de grade <ul><li>Hierárquico </li></ul>
  24. 24. Variação e violação <ul><li>O designer não deve temer sua grade. A grade é um guia invisível que existe para orientá-lo e não limitá-lo. </li></ul><ul><li>Crie esboços e experimente novos arranjos, principalmente em páginas duplas. </li></ul>
  25. 25. Variação e violação
  26. 26. Modificações
  27. 27. Grade de coluna dimensional
  28. 28. Desconstruindo a grade <ul><li>Nem sempre um conteúdo permite que uma grade consiga transmitir os valores de uma forma adequada. </li></ul><ul><li>As vezes, pode ser que necessite extrair um envolvimento emocional e intelectual mais complexo do público alvo. </li></ul><ul><li>Uma forma simples de fazer isso é deslocar colunas e guias para formar uma ilusão tridimensional. </li></ul>
  29. 29. Descontrução linguística <ul><li>Usada para representar visualmente uma palavra ou utilizá-la como grafismo. </li></ul>
  30. 30. Descontrução ótica espontânea <ul><li>Distribuição intuitiva, alterando os elementos de acordo com seus contrastes visuais. </li></ul>
  31. 31. Descontrução pictórica (conceitual) <ul><li>Representação ilusória de um tema, mantendo uma unidade de acordo com a idéia central. </li></ul>
  32. 32. Operação aleatória <ul><li>Construção intuitiva de acordo com o olhar e sensibilidade do designer. </li></ul><ul><li>Essa técnica exige muito controle sobre o acaso. </li></ul><ul><li>Um o artista pinta seu quadro jogando a tinta sobre a tela, mas sabe que surgiram certos padrões por causa do tamanho do pincel ou movimento do punho. </li></ul>
  33. 33. Referência bibliográfica <ul><li>As informações contidas nessa apresentação foram elaboradas com base na minha experiência profissional que, em algum momento, podem contradizer o que é explicado na teoria. </li></ul><ul><li>Existem algumas informações que são encontradas na Wikipédia. Porém, como seu conteúdo pode ser alterado por qualquer pessoa, sua credibilidade é questionável. Só utilize informações da Wikipédia se você já conhece o assunto e concorda com as definições. </li></ul><ul><li>Estudo de caso, revista Aventura&Ação #154 </li></ul><ul><ul><li>http://www.extremos.com.br/Revista/Aventura-e-Acao/154/regra-dos-tercos/ </li></ul></ul><ul><li>Diagramação – Elementos e Tipos de Grids </li></ul><ul><ul><li>Cristiane Schiavenin </li></ul></ul><ul><ul><li>http://chocoladesign.com/diagramacao-%E2%80%93-elementos-e-tipos-de-grids </li></ul></ul><ul><li>Talmud Project </li></ul><ul><ul><li>Small Design Firm Inc. </li></ul></ul><ul><ul><li>http://www.davidsmall.com/portfolio/talmud-project/ </li></ul></ul><ul><li>Grid: Construção e Desconstrução </li></ul><ul><ul><li>Timothy Samara </li></ul></ul><ul><ul><li>Editora Cosac Naify </li></ul></ul><ul><ul><li>2008 </li></ul></ul>
  34. 34. Grade de diagramação Estruturando a informação Odair Cavichioli Júnior www.odaircavichioli.com.br

×