Your SlideShare is downloading. ×
Grid
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Grid

8,077
views

Published on


0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,077
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
617
Comments
0
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. O grid é o esqueleto de um trabalho. São esquemas de linhas, colunas e eixos queseparam e organizam os elementos em um layout.
  • 3. Um breve Histórico
  • 4. A origem do que chamamos de Grid foi utilizada nos primeiros livros impressos, onde havia uma organizaçãoretangular, herdado dos livros manuscrito.
  • 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. 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. 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. 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. Essa racionalidade foi rapidamente absorvida peloDesign, que, seguindo essas influências, passou a utilizar largamente o Grid a partir dos anos 60.
  • 10. Fundamentos do Grid
  • 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. Flowlines são alinhamentos que quebram os espaço em faixas horizontais. Elas separam ecriam pontos de partida para textos e imagens.
  • 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. Zonas espaciais- São grupos de módulos que, juntos, formam campos distintos.
  • 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. 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. Tipos de Grid
  • 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. 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. 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. 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. 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. Um Grid modular também serve para odesenho de informações tabulares como gráficos e diagramas.
  • 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. Tá, mas...por que usar Grids ?
  • 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. Organização- Pôr ordem na casa. Paraconseguimos comunicar com eficiência eclareza, a organização é imprescindível.
  • 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. 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. Ou então, se quisermos informaçõesdescontínuas, podemos criar um ritmo vertical.Podemos utilizar um grid de colunas ou blocosespichados.
  • 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. 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. 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. Alinhamentos
  • 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. Centralizado.Passa uma ideia de formalidade e seriedade. Mas pode passar também a ideia de imponência.
  • 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. Justificado: Ideal para um grid decolunas, pois a mancha tipográficadefine visualmente os limites da coluna.
  • 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. 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. 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. Fontes condensadas: muitas foram pensadaspara se ajustar a colunas de texto estreitas.
  • 43. Variação e violação.
  • 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. O Grid tem que ficar sob o layout, não sobre.Uma linha guia de um layout nunca deve serarbitrária.
  • 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. 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. Grid visível2: pode ser usado para passar umasensação presente na ideia, interagindo com ovisual.
  • 49. Como vemos as coisas
  • 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. 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. Leitura em Z: Nos acostumamos culturalmente afazer a Leitura em Z. Sendo assim, podemossaber quais elementos o receptor lerá primeiro.
  • 53. Formatos digitais:Padrão F: Na Web, nós tendemos a ver asinformações em um padrão em forma de F.
  • 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. Os elementos mais importantes no monitordeverão na parte superior do grid, poisdependem do rolamento além do ponto de“dobra”
  • 56. Explorando os potenciais do Grid
  • 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. 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. No Grid modular, Quanto menores osmódulos, mais preciso o layout ficará. Porém, oexagero pode causar confusão e redundância.
  • 60. Um grid hierárquico pode criaruma estrutura maisflexível e complexa,contrapondo elementosorgânicos numa únicaaplicação, como umcartaz.
  • 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. Quando essa linha está no meio, há uma tensãomaior pois a página fica dividida em dois.
  • 63. Justaposição é colocar, lado alado, elementos contrastantes, dandodestaque aos dois.
  • 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. Evite a fadiga visual
  • 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. Margens: Quanto menores, maior o incômodovisual.Colunas: Tome cuidado com o equilíbrio comcolunas de diferentes tamanhos.
  • 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. Desconstruindo os Grids
  • 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. 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. 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. Desconstrua.Seja mais emocional, menos racional.
  • 74. Estúdio de Design Bicicleta Sem Freiohttp://www.youtube.com/watch?v=Nl7hlyny1H4
  • 75. Grids inclinados. Criam sensação de movimentoe maior dinamismo.
  • 76. Desconstrução. Referência a movimentos artísticos.Construa primeiro para depois desconstruir.
  • 77. FIM