[cv - 2011.2] 16 - grids (cont)

1,279 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,279
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
70
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

[cv - 2011.2] 16 - grids (cont)

  1. 1. Grids Comunicação Visual - 10.11quinta-feira, 3 de novembro de 11
  2. 2. Vamos re-começar?quinta-feira, 3 de novembro de 11
  3. 3. A proporção áurea é dada pela razão: 8:13quinta-feira, 3 de novembro de 11
  4. 4. Colocando isso em valores, chegamos ao número: 0,618quinta-feira, 3 de novembro de 11
  5. 5. Essa é a razão para chegarmos à proporção áurea.quinta-feira, 3 de novembro de 11
  6. 6. Fiz em proporção de 2:3 e está em Fibonacci. Estou certo?quinta-feira, 3 de novembro de 11
  7. 7. Apesar de SIM, você utilizar Fibonacci a proporção está errada. Entre 0,667 e 0,618 existe uma margem grande de erro.quinta-feira, 3 de novembro de 11
  8. 8. O número φ é conseguido à medida que se avança mais e mais ao longo da seqüência.quinta-feira, 3 de novembro de 11
  9. 9. 1/1 1,000 1/2 0,500 2/3 0,667 3/5 0,600 5/8 0,625 8/13 0,615 13/21 0,619 21/34 0,618 34/55 0,618 55/89 0,618 89/144 0,618 144/233 0,618quinta-feira, 3 de novembro de 11
  10. 10. E como fica isso visualmente falando?quinta-feira, 3 de novembro de 11
  11. 11. Proporção 2:3quinta-feira, 3 de novembro de 11
  12. 12. Proporção 8:13quinta-feira, 3 de novembro de 11
  13. 13. quinta-feira, 3 de novembro de 11
  14. 14. Como era, então a solução do exercício?quinta-feira, 3 de novembro de 11
  15. 15. Se a margem máxima foi dada, bastava multiplicar esse valor por 0,618. Assim, teríamos: 950 x 0,618 = 587,1 ou 960 x 0,618 = 593,28quinta-feira, 3 de novembro de 11
  16. 16. Com esse valor geraríamos a primeira - e principal - coluna. No valor de 587 ou 591 píxels.quinta-feira, 3 de novembro de 11
  17. 17. 587 ou 593 px 950 ou 960 pxquinta-feira, 3 de novembro de 11
  18. 18. Com o valor resultante, construiríamos as colunas secundárias. Para essa fase, era facultativo usar a proporção áurea. Assim, poderia ser simplesmente utilizado a divisão do espaço por 2 ou o número áureo.quinta-feira, 3 de novembro de 11
  19. 19. Quem fez a divisão chegou a valores próximos aos valores abaixo: 950 - 587 = 363 363 / 2 = 181 px ou 960 - 593 = 367 367 / 2 = 183 pxquinta-feira, 3 de novembro de 11
  20. 20. 587 ou 593 px 181 ou 183 950 ou 960 pxquinta-feira, 3 de novembro de 11
  21. 21. quinta-feira, 3 de novembro de 11
  22. 22. quinta-feira, 3 de novembro de 11
  23. 23. quinta-feira, 3 de novembro de 11
  24. 24. Quem utilizou a proporção áurea novamente chegou a valores próximos aos de abaixo: 363 x 0,618 = 224 363 - 224 = 139 367 x 0,618 = 226 367 - 226 = 141quinta-feira, 3 de novembro de 11
  25. 25. quinta-feira, 3 de novembro de 11
  26. 26. quinta-feira, 3 de novembro de 11
  27. 27. quinta-feira, 3 de novembro de 11
  28. 28. quinta-feira, 3 de novembro de 11
  29. 29. quinta-feira, 3 de novembro de 11
  30. 30. quinta-feira, 3 de novembro de 11
  31. 31. Por fim, vale a pena revisar alguns conceitos importantes:quinta-feira, 3 de novembro de 11
  32. 32. quinta-feira, 3 de novembro de 11
  33. 33. Isso é uma colunaquinta-feira, 3 de novembro de 11
  34. 34. Isso é uma linhaquinta-feira, 3 de novembro de 11
  35. 35. Isso é uma célulaquinta-feira, 3 de novembro de 11
  36. 36. Grid para webquinta-feira, 3 de novembro de 11
  37. 37. O formato ou o grid de uma página pode ser criado a partir de relações proporcionais. Os diferentes elementos são produtos das dimensões da página.quinta-feira, 3 de novembro de 11
  38. 38. Um dos maiores problemas em trabalhar com grades em páginas web é que você muitas vezes não pode fazer muito sobre proporções vertical. Assim, o foco é geralmente na disposição horizontal, o que geralmente significa colunas.quinta-feira, 3 de novembro de 11
  39. 39. 1 Colunaquinta-feira, 3 de novembro de 11
  40. 40. quinta-feira, 3 de novembro de 11
  41. 41. Esse layout começou a ser utilizado logo no início da internet, aproximadamente em 1994.quinta-feira, 3 de novembro de 11
  42. 42. Yahoo! (1994)quinta-feira, 3 de novembro de 11
  43. 43. Storelicious vCard Theme (Storelicious Themes, 2010)quinta-feira, 3 de novembro de 11
  44. 44. 2 Colunasquinta-feira, 3 de novembro de 11
  45. 45. quinta-feira, 3 de novembro de 11
  46. 46. Duas colunas são utilizadas e perfeitas para a apresentação de conteúdo com navegação more / archives / whatever ao lado. Variações populares incluem o sidebar fixo ou área de setup.quinta-feira, 3 de novembro de 11
  47. 47. quinta-feira, 3 de novembro de 11
  48. 48. Layouts com duas colunas leva a uma decisão que não existia no exemplo anterior: Colunas iguais ou não?quinta-feira, 3 de novembro de 11
  49. 49. Normalmente é difícil dar errado com larguras em 1:1. É um pouco difícil escolher dimensionamento diferenciados pelas várias regras possíveis. Poderíamos escolher o já falado 8:13, 3:4 e assim em diante.quinta-feira, 3 de novembro de 11
  50. 50. Stuff & Nonsense (2011)quinta-feira, 3 de novembro de 11
  51. 51. Proporção em 8:13quinta-feira, 3 de novembro de 11
  52. 52. WeightShift (2011)quinta-feira, 3 de novembro de 11
  53. 53. Proporção em 3:2quinta-feira, 3 de novembro de 11
  54. 54. 3 Colunasquinta-feira, 3 de novembro de 11
  55. 55. quinta-feira, 3 de novembro de 11
  56. 56. Aumenta o número de colunas, aumenta a quantidade de opções.quinta-feira, 3 de novembro de 11
  57. 57. StopDesign (2011)quinta-feira, 3 de novembro de 11
  58. 58. 4 Colunasquinta-feira, 3 de novembro de 11
  59. 59. Em layouts com 4 colunas as restrições de tamanho de tela começa a ficar mais evidentes. Com apenas alguns pixels por coluna, raramente faz sentido confiar em 4 colunas iguais, lado a lado em um site.quinta-feira, 3 de novembro de 11
  60. 60. quinta-feira, 3 de novembro de 11
  61. 61. quinta-feira, 3 de novembro de 11
  62. 62. Mais e mais colunas...quinta-feira, 3 de novembro de 11
  63. 63. Atualmente os sistemas de grids mais utilizados para a criação de páginas web é o de 12 ou 16 colunas.quinta-feira, 3 de novembro de 11
  64. 64. Calma! Com isso não significa 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. 65. Tapbots (12 colunas)quinta-feira, 3 de novembro de 11
  66. 66. Tapbots (12 colunas)quinta-feira, 3 de novembro de 11
  67. 67. Sony Music (16 colunas)quinta-feira, 3 de novembro de 11
  68. 68. Sony Music (16 colunas)quinta-feira, 3 de novembro de 11
  69. 69. Para facilitar a vida, existem serviços como o 360.gs que fornece modelos prontos para você montar seu grid com mais facilidade.quinta-feira, 3 de novembro de 11
  70. 70. 360 Grid System (2011)quinta-feira, 3 de novembro de 11
  71. 71. 360 Grid System (2011)quinta-feira, 3 de novembro de 11
  72. 72. Dicas para criar seu Gridquinta-feira, 3 de novembro de 11
  73. 73. O Canvasquinta-feira, 3 de novembro de 11
  74. 74. O tamanho da tela web para o projeto de um grid fixo é normalmente determinado pelo tamanho da janela do navegador, que por sua vez é determinado por resolução da tela do usuário.quinta-feira, 3 de novembro de 11
  75. 75. Como já havíamos falado, o tamanho recomendado do Canvas - da tela - é de 1000 x 581 px.quinta-feira, 3 de novembro de 11
  76. 76. Ok, começar a moldarquinta-feira, 3 de novembro de 11
  77. 77. Utilizaremos o exemplo dado por Mark Boulton, ele utiliza o canvas em 800x600 px, mas tudo pode ser facilmente adaptado para nosso padrão.quinta-feira, 3 de novembro de 11
  78. 78. Ele começa aplicando índices a razão para o Canvas. No exemplo, utiliza-se a largura de 760px.quinta-feira, 3 de novembro de 11
  79. 79. quinta-feira, 3 de novembro de 11
  80. 80. A grade foi projetada inicialmente para uma área de conteúdo e navegação baseada na Regra dos Terços.quinta-feira, 3 de novembro de 11
  81. 81. Estamos até o momento falando em medidas horizontais. A medida vertical também é importante, mas este é o lugar onde nós podemos ter problemas com a concepção de grids fixos na web.quinta-feira, 3 de novembro de 11
  82. 82. Guttersquinta-feira, 3 de novembro de 11
  83. 83. Gutters, como já vimos, são as lacunas entre as colunas. Eles são usados para que os textos, imagens, etc. não fiquem colados ou sobrepostos.quinta-feira, 3 de novembro de 11
  84. 84. Geralmente as colunas que criamos, utilizando Web Standards, são "divs", que são dadas larguras e posicionado usando CSS. Lidamos com o gutter como parte de colunas e os implementamos usando padding, ou então utilizando margins.quinta-feira, 3 de novembro de 11
  85. 85. quinta-feira, 3 de novembro de 11
  86. 86. Criando o layoutquinta-feira, 3 de novembro de 11
  87. 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. 88. quinta-feira, 3 de novembro de 11
  89. 89. A maior parte do trabalho de design, se você excluir esboçar com um lápis, é feito em Photoshop ou Illustrator. tenha muito cuidado na elaboração de um grid preciso e com a sobreposição de elementos de conteúdo, garantindo o alinhamento.quinta-feira, 3 de novembro de 11
  90. 90. Tarefaquinta-feira, 3 de novembro de 11
  91. 91. A tarefa de você é (re)criar o portfólio realizado para a disciplina da Autoração Web agora utilizando os conceitos de Grid.quinta-feira, 3 de novembro de 11
  92. 92. Para isso no documento criado deverá constar inicialmente o layout entregue na disciplina de Autoração Web.quinta-feira, 3 de novembro de 11
  93. 93. Após isso, deverá ser criada uma grade para as proporções indicas como padrão para a web (1000x581px). O sistema de colunas e seus gutters deverá ser criado para a proporção escolhida (regra de ouro, regra dos terços ou sistema utilizando 12 ou 16 colunas). A imagem do sistema de grid deverá ser incluída no documento.quinta-feira, 3 de novembro de 11
  94. 94. Após isso, os elementos do seu layout deverão ser reposicionados e alinhados de forma a criar um trabalho harmônico. Leve em consideração que já falamos também sobre hierarquias e orientação de leitura. Explicações sobre a disposição dos elementos deverão também ser feitas.quinta-feira, 3 de novembro de 11
  95. 95. Entrega: Data de entrega: 12/11 Enviar para: comvisual20112@gmail.com Título do E-mail: Trabalho 09 - Turma <XX> - <Nome> Formato: Word (nome_do_aluno.doc) PS: E-mails enviados fora do formato perderão automaticamente 1,0 ponto.quinta-feira, 3 de novembro de 11
  96. 96. Bibliografiaquinta-feira, 3 de novembro de 11
  97. 97. 960 Grid System. Disponível em: http://960.gs/ Ambrose, Garvin. Grids. Porto Alegre: Bookman, 2009. Ambrose, Garvin. Layout. Porto Alegre: Bookman, 2009. Avellar e Duarte. Tamanho e resolução da página. Disponível em: http:// www.avellareduarte.com.br/projeto/interface/interface2/interface2c.htm Boulton, Mark. Five simple steps to designing grid systems. Disponível em: http://www.markboulton.co.uk/journal/comments/five-simple-steps- to-designing-grid-systems-part-1 CROWDCTRL. Grids make eyes happy: How to use grid. Disponível: http://www.gunsbycomputer.com/2006/11/09/grids-make-eyes-happyquinta-feira, 3 de novembro de 11
  98. 98. CSS4Design. Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web. Disponível em: http://css4design.com/nombre- d-or-suite-de-fibonacci-et-autres-grilles-de-mise-en-page-pour-le- design-web Desenhantes. O livro perfeito. Disponível em: http:// desenhantes.wordpress.com/2011/02/25/o-livro-perfeito/ Lupton, Ellen. Novos Fundamentos do Design. São Paulo: Caosac Naify, 2008. Nilsen, Jakob. F-Shaped Pattern For Reading Web Content. Disponível em: http://www.useit.com/alertbox/reading_pattern.htmlquinta-feira, 3 de novembro de 11
  99. 99. Radfahrer, Luli. Para você que (ainda) acredita em banners. Disponível em: http://www.luli.com.br/2007/05/04/para-voce-que-ainda-acredita- em-banners/ Smashing Magazine. Applying Mathematics To Web Design. Disponível em: http://www.smashingmagazine.com/2010/02/09/applying- mathematics-to-web-design/ Smashing Magazine. Designing with grid based approach. Disponível em: http://www.smashingmagazine.com/2007/04/14/designing-with-grid- based-approach/quinta-feira, 3 de novembro de 11
  100. 100. Grids eduardonovais@virtual.ufc.brquinta-feira, 3 de novembro de 11

×