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.

[cv - 2011.2] 16 - grids (cont)

1,326 views

Published on

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[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

×