Grid

11,721 views

Published on

Grid

  1. 1. Um Grid consiste num conjunto específico derelações de alinhamento que funcionam como guias para a distribuição dos elementos num formato.
  2. 2. O grid é o esqueleto de um trabalho. São esquemas de linhas, colunas e eixos queseparam e organizam os elementos em um layout.
  3. 3. Um breve Histórico
  4. 4. A origem do que chamamos de Grid foi utilizada nos primeiros livros impressos, onde havia uma organizaçãoretangular, herdado dos livros manuscrito.
  5. 5. Com a Revolução Industrial do séc. XVIII, havia a necessidade de atender à demanda de consumo das massas, eposteriormente o design assumiu o papel de tornar os bens materiais desejáveis.
  6. 6. A Bauhaus, escola alemã de design, artes plásticas e arquitetura, também funcionou como eixo para oracionalismo. Ela expandiu a expressão geométrica do modernismo no design gráfico.
  7. 7. Estilo Internacional- A padronização da forma visual através de informações simples, concretas eracionais, eliminando qualquer tipo de interferência visual, com o objetivo de ser compreendida universalmente, eram as características do Estilo Internacional.
  8. 8. As raízes desse estilo se encontram nas obras e idéiasde Le Corbusier e da Bauhaus. De uma forma geral nega referências históricas, pois as considera ornamento, e portanto, desnecessários
  9. 9. Essa racionalidade foi rapidamente absorvida peloDesign, que, seguindo essas influências, passou a utilizar largamente o Grid a partir dos anos 60.
  10. 10. Fundamentos do Grid
  11. 11. Colunas são alinhamentos verticais que criamdivisões horizontais entre as margens. As colunas às vezes tem larguras diferentes, correspondendo a informações específicas.Porém, deve sempre se pensar no equilíbrio.
  12. 12. Flowlines são alinhamentos que quebram os espaço em faixas horizontais. Elas separam ecriam pontos de partida para textos e imagens.
  13. 13. Módulos são unidades individuais de espaço separadas por intervalos regularesque, repetidas no formato da página, criam colunas e faixas hoizontais.
  14. 14. Zonas espaciais- São grupos de módulos que, juntos, formam campos distintos.
  15. 15. Margens são os espaços negativos entre o limite doformato e o conteúdo que ceram e definem a área viva onde ficarão tipos e imagens. O tamanho da margem depende do impresso em questão.
  16. 16. Marcadores são indicadores de localização para textos secundários e constantes.Fólios são os números seqüenciais de página em umapublicação que servem como referência para ajudar os leitores a localizar informações
  17. 17. Tipos de Grid
  18. 18. Retangular- É a estrutura mais simples. Sua estruturabásica é uma grande área retangular que ocupa a maiorparte da página. Sua tarefa é acomodar um longo texto corrido.
  19. 19. Grid de colunas - Organização em colunasverticais, ideal para informações descontínuas. Em sua versão tradicional, as entrecolunas recebem uma medida x, e as margens geralmente recebem o dobro, 2x.
  20. 20. A hangline, ou linha de varal, é a linha traçada no alto do texto principal. No grid de colunas também podemos inserir algumas flowlines, que podem acomodar as quebras de texto ou início e fim de imagens.
  21. 21. Grid Modular- um grid de coluna com muitas guias horizontais que subdividem as colunas em faixashorizontais, criando uma matriz de células chamados módulos.
  22. 22. Juntos, esses módulos definem aszonas espaciais que podem abrigar algo específico. Ou seja, uma imagem por exemplopode ocupar vários módulos, desdeque de maneira coesa.
  23. 23. Um Grid modular também serve para odesenho de informações tabulares como gráficos e diagramas.
  24. 24. Grid Hierárquico – São Grids que se adaptam às exigências da informação, mas se baseiam numadisposição intuitiva dos alinhamentos, posicionados conforme a proporção dos elementos..
  25. 25. Tá, mas...por que usar Grids ?
  26. 26. Ele é uma espécie de fichário visual. Ajuda a determinar a organização, ritmo, unidade, hierarquia ou atéatuar ativamente na peça, como elemento visual ou parte do conceito.
  27. 27. Organização- Pôr ordem na casa. Paraconseguimos comunicar com eficiência eclareza, a organização é imprescindível.
  28. 28. Unidade- A mente humana conseguerapidamente perceber padrões. Às vezes ela até os cria. Esses padrões são bons para ela, que passa a absorver melhor as informações, pois sabe onde buscar aquelas de que mais precisa.
  29. 29. Ritmo- Quando se quer passar informaçõescontínuas, podemos criar um ritmo horizontal.Assim podemos utilizar um grid retangular, oudispor imagens ou símbolos semelhantes, um aolado do outro, na horizontal.
  30. 30. Ou então, se quisermos informaçõesdescontínuas, podemos criar um ritmo vertical.Podemos utilizar um grid de colunas ou blocosespichados.
  31. 31. Hierarquia- O grid nos ajuda a posicionar nosmelhores lugares os elementos mais importantesem um layout. Além disso, com o gridhierárquico, podemos também reservar espaçosmaiores para elementos tão importantes.
  32. 32. Além disso...Economia e facilidade- O grid permite que o designerdiagrame rapidamente uma quantidade enorme deinformações, porque muitas questões de design jáforam respondidas ao construir a estrutura do grid.Eletambém permite vários colaboradores em um sóprojeto sem correr o risco de ficar cagado.
  33. 33. No Grid as coisas fazem sentido. E para osclientes elas precisam fazer sentido. Esse aspectopragmático e com bases na razão ajuda osclientes a entender e confiar nos recursos doPublicitário/Designer.
  34. 34. Alinhamentos
  35. 35. Alinhado à esquerda. Estável, bom para longostextos.Porém criam os famososdentes que, em contraste ao espaçonegativo, acabam se tornando elementos visuais.
  36. 36. Centralizado.Passa uma ideia de formalidade e seriedade. Mas pode passar também a ideia de imponência.
  37. 37. Alinhado à direita – Traz algo ousado à peça, pois émais raro que os outros. Porém é ruim para textos longos, pois causa cansaço visual.
  38. 38. Justificado: Ideal para um grid decolunas, pois a mancha tipográficadefine visualmente os limites da coluna.
  39. 39. Porém pode criar caminhos de ratose não houver espaço para umnúmero confortável de caracteres por linha.Em última instância, você pode tentar ajustar“na mão”, brincando com o kerning e com otracking.
  40. 40. Viúvas- Tome cuidado com as temidasviúvas.Elas são as palavras que sobram, sozinhas, naúltima linha da caixa de texto. Agem comoruído, além de correrem o risco de passaremdespercebidas.
  41. 41. Tipo e largura das colunasO comprimento das linhas está relacionado à largura da coluna de texto, o tamanho do tipo e fonte escolhida.Busque uma medida que inclua de 60 a 75 caracteres.
  42. 42. Fontes condensadas: muitas foram pensadaspara se ajustar a colunas de texto estreitas.
  43. 43. Variação e violação.
  44. 44. Um Grid só funciona realmente se odesigner, depois de resolver todos os problemasliterais, vai além da uniformidade implícita emsua estrutura e o utiliza para criar uma narrativavisual dinâmica capaz de manter o interesse aolongo das páginas.
  45. 45. O Grid tem que ficar sob o layout, não sobre.Uma linha guia de um layout nunca deve serarbitrária.
  46. 46. Em uma publicação maior, precisamos criar umaunidade e ao mesmo tempo manter o interessedo leitor por várias páginas. Por isso, precisamosexplorar as possibilidades que um mesmo Gridnos oferece.
  47. 47. Grid visível:-Algo artesanal, que mostre o processo no produtofinal.-Algo científico e calculado, que queira mostrarracionalidade. Já que o grid modular foi criadojustamente com essa intenção, influencidado pelaBauhaus.-Algo que remeta a projetos arquitetônicos e etc.
  48. 48. Grid visível2: pode ser usado para passar umasensação presente na ideia, interagindo com ovisual.
  49. 49. Como vemos as coisas
  50. 50. Centro ótico e geométrico: O Centro Ótico da peça é oprimeiro local para onde se direcionam os olhos doreceptor. Esse centro é diferente do Centro geométrico(ou matemático) da peça.
  51. 51. O modo como o olho vê uma página faz algumas áreasserem mais ativas do que outras. Podemos criar um gridhierárquico que valorize essas áreas.
  52. 52. Leitura em Z: Nos acostumamos culturalmente afazer a Leitura em Z. Sendo assim, podemossaber quais elementos o receptor lerá primeiro.
  53. 53. Formatos digitais:Padrão F: Na Web, nós tendemos a ver asinformações em um padrão em forma de F.
  54. 54. Primeiro o olhar do usuário percorre horizontalmente aparte superior da página. Depois, repete a ação umpouco mais embaixo. Finalmente, o olho faz umpercurso vertical de cima para baixo.
  55. 55. Os elementos mais importantes no monitordeverão na parte superior do grid, poisdependem do rolamento além do ponto de“dobra”
  56. 56. Explorando os potenciais do Grid
  57. 57. No Grid retangular: Uma estrutura assimétricacria mais espaço em branco onde os olhospodem descansar.Ela também oferece espaçopara notas, ilustrações pontuais. Os gridstambém podem prever capitulares, etc.
  58. 58. Num Grid de Colunas, também podemosvariar bastante. Podemos deslocar a hanglinedo topo da página, bem como utilizar um textoem duas colunas em vez de uma, por exemplo.
  59. 59. No Grid modular, Quanto menores osmódulos, mais preciso o layout ficará. Porém, oexagero pode causar confusão e redundância.
  60. 60. Um grid hierárquico pode criaruma estrutura maisflexível e complexa,contrapondo elementosorgânicos numa únicaaplicação, como umcartaz.
  61. 61. Eixo é uma linha invisível de equilíbrio outensão que atravessa o design. Utiliza-se umadas linhas verticais do Grid como ponto de inícioou fim de vários elementos em um layout.
  62. 62. Quando essa linha está no meio, há uma tensãomaior pois a página fica dividida em dois.
  63. 63. Justaposição é colocar, lado alado, elementos contrastantes, dandodestaque aos dois.
  64. 64. -justaposição de escalas/formas-justaposição de assuntos (exemplo:gelo e fogo, ajuda a construir a narrativa do design)-justaposição de grids (diferentes): tensão e ritmo ao design, corta a monotonia
  65. 65. Evite a fadiga visual
  66. 66. Espaço Negativo- O Espaço Negativo também faz parte da composição. O olho precisa de áreas de escape pra separar os grupos e se relocar na página.
  67. 67. Margens: Quanto menores, maior o incômodovisual.Colunas: Tome cuidado com o equilíbrio comcolunas de diferentes tamanhos.
  68. 68. Nada deve ser posicionado aarbitrariamente na página.Quando colocar os itens na página, éimportante que cada um deles tenhaum alinhamento visual com outro item.
  69. 69. Desconstruindo os Grids
  70. 70. O início do CaosNos anos 50 e 60, conforme a comunidade dedesign mais jovem continuava a se recuperar dasegunda guerra, ela foi se tornando mais críticaem relação ao modo de pensar vigentes.
  71. 71. Em meio à eficiência metódica do EstiloInternacional, a busca de expressão baseada nanarrativa e experiência pessoal foi catalisada peloimpacto visceral do rock’n’roll, da revolução sexuale da cultura pop. O movimento psicodélico, atelevisão e uma redescoberta da art noveaugeraram linguagens e contracorrentes de designque não se encaixavam nas correntes principais.
  72. 72. Revista Oz – Um marco dessageração, representava a liberdade tanto emassuntos quanto na visualidade. Com um estiloorgânico e psicodélico, a diagramação dessarevista desconstruia e destruía o Grid.
  73. 73. Desconstrua.Seja mais emocional, menos racional.
  74. 74. Estúdio de Design Bicicleta Sem Freiohttp://www.youtube.com/watch?v=Nl7hlyny1H4
  75. 75. Grids inclinados. Criam sensação de movimentoe maior dinamismo.
  76. 76. Desconstrução. Referência a movimentos artísticos.Construa primeiro para depois desconstruir.
  77. 77. FIM

×