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] 14 - grids

1,436 views

Published on

Published in: Design
  • Be the first to comment

[cv - 2011.2] 14 - grids

  1. 1. Grids Comunicação Visual - 10.11quinta-feira, 13 de outubro de 11
  2. 2. Vamos começar?quinta-feira, 13 de outubro de 11
  3. 3. O que diacho é um grid?quinta-feira, 13 de outubro de 11
  4. 4. Uma das melhores formas de se organizar os elementos em uma página ou tela é usar grades de alinhamento, também chamadas de grids.quinta-feira, 13 de outubro de 11
  5. 5. Essas ferramentas dividem o espaço visível em áreas e dão maior consistência a um layout. São o terror de quem está começando a fazer design e a salvação de quem já tem alguma prática.quinta-feira, 13 de outubro de 11
  6. 6. Grid é a base sobre a qual um design é construído. Ele pode permite que um designer organize de modo eficiente diversos elementos de uma página.quinta-feira, 13 de outubro de 11
  7. 7. Grid é o esqueleto de um trabalho de design.quinta-feira, 13 de outubro de 11
  8. 8. Ele força o designer a pensar construtivamente, de forma estruturada, para que o visitante não tenha que descobrir, a cada instante, o que foi projetado.quinta-feira, 13 de outubro de 11
  9. 9. Se ele é assim tão bom, porque apavora quem está começando? Exatamente por falta de prática.quinta-feira, 13 de outubro de 11
  10. 10. 1. Como lemos uma página?quinta-feira, 13 de outubro de 11
  11. 11. Antes de começarmos a utilizar Grids, precisamos nos acostumar com alguns conceitos. A forma de leitura de uma página é um dos conceitos mais importantes que devemos observar.quinta-feira, 13 de outubro de 11
  12. 12. Qualquer página tem elementos ativos e passivos devido à natureza do conteúdo e à maneira como enxergamos a página - o modo como o olho varre a página para localizar a informação.quinta-feira, 13 de outubro de 11
  13. 13. 1.1. Áreas ativas e passivas do designquinta-feira, 13 de outubro de 11
  14. 14. Em uma página existem áreas centrais e periféricas e os designers podem usar esse conhecimento para direcionar a localização dos principais elementos de design - tornando-os mais ou menos visíveis.quinta-feira, 13 de outubro de 11
  15. 15. Diante de uma nova página de informação, o olho humano habitualmente procura uma entrada no lado superior esquerdo, varrendo a página na diagonal para baixo até o canto inferior direito.quinta-feira, 13 de outubro de 11
  16. 16. quinta-feira, 13 de outubro de 11
  17. 17. quinta-feira, 13 de outubro de 11
  18. 18. quinta-feira, 13 de outubro de 11
  19. 19. quinta-feira, 13 de outubro de 11
  20. 20. quinta-feira, 13 de outubro de 11
  21. 21. quinta-feira, 13 de outubro de 11
  22. 22. 1.2. E como vemos uma tela de monitor?quinta-feira, 13 de outubro de 11
  23. 23. As pessoas examinam páginas web da mesma forma que analisam uma página impressa em busca de palavras-chave ou pontos de interesse.quinta-feira, 13 de outubro de 11
  24. 24. O designer pode interferir nesse processo destacando palavras ou adicionando marcadores a fim de garantir que sessões de informação mais importantes saltem aos olhos.quinta-feira, 13 de outubro de 11
  25. 25. 1.3. Padrão F de leitura de conteúdo Webquinta-feira, 13 de outubro de 11
  26. 26. Usuários não têm tempo ou atenção para ler calmamente o conteúdo de uma página, por isso seus olhos “varrem” a tela em busca de informação relevante, em duas linhas horizontais e uma vertical à esquerda, movimento que lembra a letra F.quinta-feira, 13 de outubro de 11
  27. 27. Os pesquisadores descobriram que, embora os padrões de leitura variem conforme o usuário e á página, a varredura à esquerda raramente muda. Às vezes o padrão de leitura parece um E, às vezes um L invertido.quinta-feira, 13 de outubro de 11
  28. 28. Nos exemplos acima página de about de uma empresa; página de produto em e-commerce; e página de resultados do Google)quinta-feira, 13 de outubro de 11
  29. 29. Isso significa que as principais informações e pontos de entrada devem localizar-se no âmbito do Padrão F para aumentar as chances de capturar a atenção do leitor.quinta-feira, 13 de outubro de 11
  30. 30. Essa é uma regra geral que serve apenas como guia. Na prática, os padrões variam de acordo com o design. Um elemento colocando em uma área inativa provocará uma varredura diferente.quinta-feira, 13 de outubro de 11
  31. 31. 1.4. Análisequinta-feira, 13 de outubro de 11
  32. 32. quinta-feira, 13 de outubro de 11
  33. 33. quinta-feira, 13 de outubro de 11
  34. 34. 1.5. Por fim...quinta-feira, 13 de outubro de 11
  35. 35. Embora o designer precise levar em consideração as limitações físicas e as exigências da mídia ou do formato usados, a forma de um design deve complementar a sua função. A forma de um projeto varia de acordo com o público-alvo a que se destina.quinta-feira, 13 de outubro de 11
  36. 36. É essencial enxergar o grid como algo adaptável e flexível, e não como algo prescritivo e inviolável.quinta-feira, 13 de outubro de 11
  37. 37. 2. Fundamentosquinta-feira, 13 de outubro de 11
  38. 38. Falamos sobre como o usuário “vê” uma página. A partir de agora, vamos discutir sobre características dessa tal página.quinta-feira, 13 de outubro de 11
  39. 39. 2.1. ISO e formatos de papelquinta-feira, 13 de outubro de 11
  40. 40. O Curso de Sistemas e Mídias Digitais da UFC normalmente não possui trabalhos voltados a impressão em papel. Ainda assim, é importante saber algo sobre papéis.quinta-feira, 13 de outubro de 11
  41. 41. O sistema de tamanho de papéis é padronizado pela Organização Internacional para Padronização - ISO - e baseia-se na relação altura x largura. (1:1,4142)quinta-feira, 13 de outubro de 11
  42. 42. A linha de formato A é a mais conhecida. A série B é composta de formatos intermediários, e os da série C destinam-se a envelopes para artigos de papelaria.quinta-feira, 13 de outubro de 11
  43. 43. quinta-feira, 13 de outubro de 11
  44. 44. 2.2. Anatomia da páginaquinta-feira, 13 de outubro de 11
  45. 45. A página é composta a de várias partes distintas, e cada seção tem uma finalidade e uma função importantes no design como um todo.quinta-feira, 13 de outubro de 11
  46. 46. quinta-feira, 13 de outubro de 11
  47. 47. quinta-feira, 13 de outubro de 11
  48. 48. 2.3. Medidasquinta-feira, 13 de outubro de 11
  49. 49. Quase 90% dos usuários poderão ver todo o conteúdo em uma página com 500px de altura. (fonte: Fold Spy)quinta-feira, 13 de outubro de 11
  50. 50. Mais de 80% serão bem servidos com largura 1000px, 28% dos usuários tendem a navegar com 1250px largura da tela.quinta-feira, 13 de outubro de 11
  51. 51. E o que eu faço, então?quinta-feira, 13 de outubro de 11
  52. 52. Segundo a revista digital Smashing Magazine, na maioria dos casos, você pode melhorar a experiência do usuário, mantendo a largura do seu layout em no máximo 1000px e a altura em 581px.quinta-feira, 13 de outubro de 11
  53. 53. 2.3. Formas em uma páginaquinta-feira, 13 de outubro de 11
  54. 54. A composição de um design é construída com tipos e imagens, que resultam em formas de uma página. Dito de outra forma, eles podem ser tratados como formas a fim de produzir um design eficiente e eficaz.quinta-feira, 13 de outubro de 11
  55. 55. Agora que consideramos texto e imagens como formas, vejamos como essas formas podem ser organizadas em uma página.quinta-feira, 13 de outubro de 11
  56. 56. Agrupamento. Funciona pela separação de blocos em zonas distintas da página. Alinhar as bordas dos diferentes elementos de design ajuda a estabelecer conexão entre eles.quinta-feira, 13 de outubro de 11
  57. 57. Perímetro. Os elementos são agrupados com imagens “sangradas”, o que mostraum uso surpreendente do perímetro. É frequentemente evitado no design, mas pode ser usado para agregar dinamismo e movimento ao trabalho.quinta-feira, 13 de outubro de 11
  58. 58. Horizontal. Os elementos da página têm uma ênfase horizontal que atrai o olhar do observador por toda a página.quinta-feira, 13 de outubro de 11
  59. 59. Vertical. Os elementos da página têm uma ênfase vertical que conduz o olhar do observador para cima e para baixo.quinta-feira, 13 de outubro de 11
  60. 60. Deitado. O texto é apresentado de modo que a leitura seja feita na vertical em vez de na horizontal. Esse método é usado para apresentar material tabular que é muito longo para uma página (impresso).quinta-feira, 13 de outubro de 11
  61. 61. Angular. Força o usuário a mudar sua relação com a página. O ideal é usar uma configuração uniforme em função da consistência, como no ângulo de 45º visto acima.quinta-feira, 13 de outubro de 11
  62. 62. Orientados pelo eixo. Os elementos da ágina são concientemente alinhados a um eixo, como o vertical. O alinhamento pode ser em qualquer direção.quinta-feira, 13 de outubro de 11
  63. 63. Passe Layout. Tecnica comum para apresentar fotografias, em que a imagem domina o espaço na página e é marcada por uma borda.quinta-feira, 13 de outubro de 11
  64. 64. As diferentes formas capturam o olhar e estabelecem uma série de relações, que complementam a mensagem do design ou da pintura.quinta-feira, 13 de outubro de 11
  65. 65. 2.4. Exemplos - Formasquinta-feira, 13 de outubro de 11
  66. 66. quinta-feira, 13 de outubro de 11
  67. 67. quinta-feira, 13 de outubro de 11
  68. 68. quinta-feira, 13 de outubro de 11
  69. 69. quinta-feira, 13 de outubro de 11
  70. 70. quinta-feira, 13 de outubro de 11
  71. 71. quinta-feira, 13 de outubro de 11
  72. 72. quinta-feira, 13 de outubro de 11
  73. 73. quinta-feira, 13 de outubro de 11
  74. 74. quinta-feira, 13 de outubro de 11
  75. 75. quinta-feira, 13 de outubro de 11
  76. 76. quinta-feira, 13 de outubro de 11
  77. 77. 2.5. Hierarquiaquinta-feira, 13 de outubro de 11
  78. 78. O conceito de hierarquia serve para identificar e apresentar as informações mais importantes em um design, o que pode ser alcançado por meio de escala e posicionamento.quinta-feira, 13 de outubro de 11
  79. 79. Neutro. Esta figura mostra a página neutra, sem hierarquia alguma entre as duas colunas de texto. Observe que o usuário naturalmente começa a visualizar pelo canto superior esquerdo.quinta-feira, 13 de outubro de 11
  80. 80. Posição. Um posicionamento óbvio de um elemento de design introduz uma hierarquia como esse título sozinho à esquerda.quinta-feira, 13 de outubro de 11
  81. 81. Posição e tamanho. Posicionar um elemento no foco de entrada, alterar seu tamanho e introduzir espaçamento estabelece sua dominância na hierarquia.quinta-feira, 13 de outubro de 11
  82. 82. Posição, tamanho e ênfase. Consiste em adicionar ênfase a um elemento para reforçar sua posição no topo da hierarquia - como visto acima com o uso de cor.quinta-feira, 13 de outubro de 11
  83. 83. Bibliografiaquinta-feira, 13 de outubro de 11
  84. 84. 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, 13 de outubro de 11
  85. 85. 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, 13 de outubro de 11
  86. 86. 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, 13 de outubro de 11
  87. 87. Grids eduardonovais@virtual.ufc.brquinta-feira, 13 de outubro de 11

×