Click here to load reader

[cv - 2011.2] 16 - grids (cont)

  • View
    1.047

  • Download
    2

Embed Size (px)

Text of [cv - 2011.2] 16 - grids (cont)

  • 1. Grids Comunicao Visual - 10.11quinta-feira, 3 de novembro de 11

2. Vamos re-comear?quinta-feira, 3 de novembro de 11 3. A proporo urea dada pela razo: 8:13quinta-feira, 3 de novembro de 11 4. Colocando isso em valores, chegamos ao nmero: 0,618quinta-feira, 3 de novembro de 11 5. Essa a razo para chegarmos proporo urea.quinta-feira, 3 de novembro de 11 6. Fiz em proporo de 2:3 e est em Fibonacci. Estou certo?quinta-feira, 3 de novembro de 11 7. Apesar de SIM, voc utilizar Fibonacci a proporo est errada. Entre 0,667 e 0,618 existe uma margem grande de erro.quinta-feira, 3 de novembro de 11 8. O nmero conseguido medida que se avana mais e mais ao longo da seqncia.quinta-feira, 3 de novembro de 11 9. 1/1 1,0001/2 0,5002/3 0,6673/5 0,6005/8 0,625 8/13 0,615 13/210,619 21/340,618 34/550,618 55/890,61889/1440,618144/233 0,618quinta-feira, 3 de novembro de 11 10. E como ca isso visualmente falando?quinta-feira, 3 de novembro de 11 11. Proporo 2:3quinta-feira, 3 de novembro de 11 12. Proporo 8:13quinta-feira, 3 de novembro de 11 13. quinta-feira, 3 de novembro de 11 14. Como era, ento a soluo do exerccio?quinta-feira, 3 de novembro de 11 15. Se a margem mxima foi dada, bastava multiplicar esse valor por 0,618. Assim, teramos: 950 x 0,618 = 587,1 ou 960 x 0,618 = 593,28quinta-feira, 3 de novembro de 11 16. Com esse valor geraramos a primeira - e principal - coluna. No valor de 587 ou 591 pxels.quinta-feira, 3 de novembro de 11 17. 587 ou 593 px950 ou 960 pxquinta-feira, 3 de novembro de 11 18. Com o valor resultante, construiramos as colunas secundrias. Para essa fase, era facultativo usar a proporo urea. Assim, poderia ser simplesmente utilizado a diviso do espao por 2 ou o nmero ureo.quinta-feira, 3 de novembro de 11 19. Quem fez a diviso chegou a valores prximos aos valores abaixo: 950 - 587 = 363363 / 2 = 181 px ou 960 - 593 = 367367 / 2 = 183 pxquinta-feira, 3 de novembro de 11 20. 587 ou 593 px181 ou 183950 ou 960 pxquinta-feira, 3 de novembro de 11 21. quinta-feira, 3 de novembro de 11 22. quinta-feira, 3 de novembro de 11 23. quinta-feira, 3 de novembro de 11 24. Quem utilizou a proporo urea novamente chegou a valores prximos aos de abaixo: 363 x 0,618 = 224363 - 224 = 139 367 x 0,618 = 226367 - 226 = 141quinta-feira, 3 de novembro de 11 25. quinta-feira, 3 de novembro de 11 26. quinta-feira, 3 de novembro de 11 27. quinta-feira, 3 de novembro de 11 28. quinta-feira, 3 de novembro de 11 29. quinta-feira, 3 de novembro de 11 30. quinta-feira, 3 de novembro de 11 31. Por m, vale a pena revisar alguns conceitos importantes:quinta-feira, 3 de novembro de 11 32. quinta-feira, 3 de novembro de 11 33. Isso uma colunaquinta-feira, 3 de novembro de 11 34. Isso uma linhaquinta-feira, 3 de novembro de 11 35. Isso uma clulaquinta-feira, 3 de novembro de 11 36. Grid para webquinta-feira, 3 de novembro de 11 37. O formato ou o grid de uma pgina pode ser criado a partir de relaes proporcionais. Os diferentes elementos so produtos das dimenses da pgina.quinta-feira, 3 de novembro de 11 38. Um dos maiores problemas em trabalhar com grades em pginas web que voc muitas vezes no pode fazer muito sobre propores vertical. Assim, o foco geralmente na disposio horizontal, o que geralmente signica colunas.quinta-feira, 3 de novembro de 11 39. 1 Colunaquinta-feira, 3 de novembro de 11 40. quinta-feira, 3 de novembro de 11 41. Esse layout comeou a ser utilizado logo no incio da internet, aproximadamente em 1994.quinta-feira, 3 de novembro de 11 42. Yahoo!(1994)quinta-feira, 3 de novembro de 11 43. Storelicious vCard Theme(Storelicious Themes, 2010)quinta-feira, 3 de novembro de 11 44. 2 Colunasquinta-feira, 3 de novembro de 11 45. quinta-feira, 3 de novembro de 11 46. Duas colunas so utilizadas e perfeitas para a apresentao de contedo com navegao more / archives / whatever ao lado. Variaes populares incluem o sidebar xo ou rea de setup.quinta-feira, 3 de novembro de 11 47. quinta-feira, 3 de novembro de 11 48. Layouts com duas colunas leva a uma deciso que no existia no exemplo anterior: Colunas iguais ou no?quinta-feira, 3 de novembro de 11 49. Normalmente difcil dar errado com larguras em 1:1. um pouco difcil escolher dimensionamento diferenciados pelas vrias regras possveis. Poderamos escolher o j falado 8:13, 3:4 e assim em diante.quinta-feira, 3 de novembro de 11 50. Stuff & Nonsense(2011)quinta-feira, 3 de novembro de 11 51. Proporo em 8:13quinta-feira, 3 de novembro de 11 52. WeightShift(2011)quinta-feira, 3 de novembro de 11 53. Proporo em 3:2quinta-feira, 3 de novembro de 11 54. 3 Colunasquinta-feira, 3 de novembro de 11 55. quinta-feira, 3 de novembro de 11 56. Aumenta o nmero de colunas, aumenta a quantidade de opes.quinta-feira, 3 de novembro de 11 57. StopDesign(2011)quinta-feira, 3 de novembro de 11 58. 4 Colunasquinta-feira, 3 de novembro de 11 59. Em layouts com 4 colunas as restries de tamanho de tela comea a car mais evidentes. Com apenas alguns pixels por coluna, raramente faz sentido conar em 4 colunas iguais, lado a lado em um site.quinta-feira, 3 de novembro de 11 60. quinta-feira, 3 de novembro de 11 61. quinta-feira, 3 de novembro de 11 62. Mais e mais colunas...quinta-feira, 3 de novembro de 11 63. Atualmente os sistemas de grids mais utilizados para a criao de pginas web o de 12 ou 16 colunas.quinta-feira, 3 de novembro de 11 64. Calma! Com isso no signica dizer que voc tem que colocar tudo no seu projeto dividido em 12, ou 16. Esse sistema usado como base para gerar o tamanho das colunas reais.quinta-feira, 3 de novembro de 11 65. Tapbots(12 colunas)quinta-feira, 3 de novembro de 11 66. Tapbots(12 colunas)quinta-feira, 3 de novembro de 11 67. Sony Music(16 colunas)quinta-feira, 3 de novembro de 11 68. Sony Music(16 colunas)quinta-feira, 3 de novembro de 11 69. Para facilitar a vida, existem servios como o 360.gs que fornece modelos prontos para voc montar seu grid com mais facilidade.quinta-feira, 3 de novembro de 11 70. 360 Grid System (2011)quinta-feira, 3 de novembro de 11 71. 360 Grid System (2011)quinta-feira, 3 de novembro de 11 72. Dicas para criar seu Gridquinta-feira, 3 de novembro de 11 73. O Canvasquinta-feira, 3 de novembro de 11 74. O tamanho da tela web para o projeto de um grid xo normalmente determinado pelo tamanho da janela do navegador, que por sua vez determinado por resoluo da tela do usurio.quinta-feira, 3 de novembro de 11 75. Como j havamos falado, o tamanho recomendado do Canvas - da tela - de 1000 x 581 px.quinta-feira, 3 de novembro de 11 76. Ok, comear a moldarquinta-feira, 3 de novembro de 11 77. Utilizaremos o exemplo dado por Mark Boulton, ele utiliza o canvas em 800x600 px, mas tudo pode ser facilmente adaptado para nosso padro.quinta-feira, 3 de novembro de 11 78. Ele comea aplicando ndices a razo para o Canvas. No exemplo, utiliza-se a largura de 760px.quinta-feira, 3 de novembro de 11 79. quinta-feira, 3 de novembro de 11 80. A grade foi projetada inicialmente para uma rea de contedo e navegao baseada na Regra dos Teros.quinta-feira, 3 de novembro de 11 81. Estamos at o momento falando em medidas horizontais. A medida vertical tambm importante, mas este o lugar onde ns podemos ter problemas com a concepo de grids xos na web.quinta-feira, 3 de novembro de 11 82. Guttersquinta-feira, 3 de novembro de 11 83. Gutters, como j vimos, so as lacunas entre as colunas. Eles so usados para que os textos, imagens, etc. no quem colados ou sobrepostos.quinta-feira, 3 de novembro de 11 84. Geralmente as colunas que criamos, utilizando Web Standards, so "divs", que so dadas larguras e posicionado usando CSS. Lidamos com o gutter como parte de colunas e os implementamos usando padding, ou ento utilizando margins.quinta-feira, 3 de novembro de 11 85. quinta-feira, 3 de novembro de 11 86. Criando o layoutquinta-feira, 3 de novembro de 11 87. O mais importante sobre grids que voc deve alinhar os itens constantemente sobre as linhas de grade.quinta-feira, 3 de novembro de 11 88. quinta-feira, 3 de novembro de 11 89. A maior parte do trabalho de design, se voc excluir esboar com um lpis, feito em Photoshop ou Illustrator. tenha muito cuidado na elaborao de um grid preciso e com a sobreposio de elementos de contedo, garantindo o alinhamento.quinta-feira, 3 de novembro de 11 90. Tarefaquinta-feira, 3 de novembro de 11 91. A tarefa de voc (re)criar o portflio realizado para a disciplina da Autorao Web agora utilizando os conceitos de Grid.quinta-feira, 3 de novembro de 11 92. Para isso no documento criado dever constar inicialmente o layout entregue na disciplina de Autorao Web.quinta-feira, 3 de novembro de 11 93. Aps isso, dever ser criada uma grade para as propores indicas como padro para a web (1000x581px). O sistema de colunas e seus gutters dever ser criado para a proporo escolhida (regra de ouro, regra dos teros ou sistema utilizando 12 ou 16 colunas). A imagem do sistema de grid dever ser includa no documento.quinta-feira, 3 de novembro de 11 94. Aps isso, os elementos do seu layout devero ser reposicionados e alinhados de forma a criar um trabalho harmnico. Leve em considerao que j falamos tambm sobre hierarquias e orientao de leitura. Explicaes sobre a disposio dos elementos devero tambm ser feitas.quinta-feira, 3 de novembro de 11 95. Entrega: Data de entrega: 12/11 Enviar para: [email protected] Ttulo do E-mail: Trabalho 09 - Turma - Formato: Word (nome_do_aluno.doc) PS: E-mails enviados fora do formato perdero automaticamente 1,0 ponto.quinta-feira, 3 de novembro de 11 96. Bibliograaquinta-feira, 3 de novembro de 11 97. 960 Grid System. Disponvel em: http://960.gs/ Ambrose, Garvin. Grids. Porto Alegre: Bookman, 2009. Ambrose, Garvin. Layout. Por