Grids       Comunicação Visual - 10.11quinta-feira, 13 de outubro de 11
Vamos começar?quinta-feira, 13 de outubro de 11
O que diacho é um grid?quinta-feira, 13 de outubro de 11
Uma das melhores formas de se organizar os elementos em uma página       ou tela é usar grades de alinhamento, também cham...
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...
Grid é a base sobre a qual um design é construído. Ele pode permite que       um designer organize de modo eficiente divers...
Grid é o esqueleto de um trabalho de design.quinta-feira, 13 de outubro de 11
Ele força o designer a pensar construtivamente, de forma estruturada,       para que o visitante não tenha que descobrir, ...
Se ele é assim tão bom, porque apavora quem está começando?       Exatamente por falta de prática.quinta-feira, 13 de outu...
1. Como lemos uma página?quinta-feira, 13 de outubro de 11
Antes de começarmos a utilizar Grids, precisamos nos acostumar com       alguns conceitos. A forma de leitura de uma págin...
Qualquer página tem elementos ativos e passivos devido à natureza do       conteúdo e à maneira como enxergamos a página -...
1.1. Áreas ativas e passivas do designquinta-feira, 13 de outubro de 11
Em uma página existem áreas centrais e periféricas e os designers       podem usar esse conhecimento para direcionar a loc...
Diante de uma nova página de informação, o olho humano habitualmente procura     uma entrada no lado superior esquerdo, va...
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
1.2. E como vemos uma tela de monitor?quinta-feira, 13 de outubro de 11
As pessoas examinam páginas web da mesma forma que analisam uma       página impressa em busca de palavras-chave ou pontos...
O designer pode interferir nesse processo destacando palavras ou       adicionando marcadores a fim de garantir que sessões...
1.3. Padrão F de leitura de conteúdo Webquinta-feira, 13 de outubro de 11
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 ...
Os pesquisadores descobriram que, embora os padrões de leitura variem       conforme o usuário e á página, a varredura à e...
Nos exemplos acima página de about de uma                                    empresa; página de produto em e-commerce; e  ...
Isso significa que as principais informações e pontos de entrada       devem localizar-se no âmbito do Padrão F para aument...
Essa é uma regra geral que serve apenas como guia. Na prática, os padrões     variam de acordo com o design. Um elemento c...
1.4. Análisequinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
1.5. Por fim...quinta-feira, 13 de outubro de 11
Embora o designer precise levar em consideração as limitações físicas e       as exigências da mídia ou do formato usados,...
É essencial enxergar o grid como algo adaptável e flexível, e não como       algo prescritivo e inviolável.quinta-feira, 13...
2. Fundamentosquinta-feira, 13 de outubro de 11
Falamos sobre como o usuário “vê” uma página. A partir de agora,       vamos discutir sobre características dessa tal pági...
2.1. ISO e formatos de papelquinta-feira, 13 de outubro de 11
O Curso de Sistemas e Mídias Digitais da UFC normalmente não possui       trabalhos voltados a impressão em papel. Ainda a...
O sistema de tamanho de papéis é padronizado pela Organização       Internacional para Padronização - ISO - e baseia-se na...
A linha de formato A é a mais conhecida. A série B é composta de       formatos intermediários, e os da série C destinam-s...
quinta-feira, 13 de outubro de 11
2.2. Anatomia da páginaquinta-feira, 13 de outubro de 11
A página é composta a de várias partes distintas, e cada seção tem uma       finalidade e uma função importantes no design ...
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
2.3. Medidasquinta-feira, 13 de outubro de 11
Quase 90% dos usuários poderão ver todo o         conteúdo em uma página com 500px de altura.         (fonte: Fold Spy)qui...
Mais de 80% serão bem servidos com largura         1000px, 28% dos usuários tendem a navegar         com 1250px largura da...
E o que eu faço, então?quinta-feira, 13 de outubro de 11
Segundo a revista digital Smashing Magazine, na maioria dos casos,       você pode melhorar a experiência do usuário, mant...
2.3. Formas em uma páginaquinta-feira, 13 de outubro de 11
A composição de um design é construída com tipos e imagens, que       resultam em formas de uma página.       Dito de outr...
Agora que consideramos texto e imagens como formas, vejamos como       essas formas podem ser organizadas em uma página.qu...
Agrupamento. Funciona pela separação de blocos em zonas distintas da página.     Alinhar as bordas dos diferentes elemento...
Perímetro. Os elementos são agrupados com imagens “sangradas”, o que     mostraum uso surpreendente do perímetro. É freque...
Horizontal. Os elementos da página têm uma ênfase horizontal que atrai o olhar do     observador por toda a página.quinta-...
Vertical. Os elementos da página têm uma ênfase vertical que conduz o olhar do     observador para cima e para baixo.quint...
Deitado. O texto é apresentado de modo que a leitura seja feita na vertical em vez     de na horizontal. Esse método é usa...
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 consis...
Orientados pelo eixo. Os elementos da ágina são concientemente alinhados a um     eixo, como o vertical. O alinhamento pod...
Passe Layout. Tecnica comum para apresentar fotografias, em que a imagem     domina o espaço na página e é marcada por uma ...
As diferentes formas capturam o olhar e estabelecem uma série de       relações, que complementam a mensagem do design ou ...
2.4. Exemplos - Formasquinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
quinta-feira, 13 de outubro de 11
2.5. Hierarquiaquinta-feira, 13 de outubro de 11
O conceito de hierarquia serve para identificar e apresentar as       informações mais importantes em um design, o que pode...
Neutro. Esta figura mostra a página neutra, sem hierarquia alguma entre as duas     colunas de texto. Observe que o usuário...
Posição. Um posicionamento óbvio de um elemento de design introduz uma     hierarquia como esse título sozinho à esquerda....
Posição e tamanho. Posicionar um elemento no foco de entrada, alterar seu     tamanho e introduzir espaçamento estabelece ...
Posição, tamanho e ênfase. Consiste em adicionar ênfase a um elemento para     reforçar sua posição no topo da hierarquia ...
Bibliografiaquinta-feira, 13 de outubro de 11
960 Grid System. Disponível em: http://960.gs/       Ambrose, Garvin. Grids. Porto Alegre: Bookman, 2009.       Ambrose, G...
CSS4Design. Nombre d’or, suite de Fibonacci et autres grilles de mise en       page pour le design web. Disponível em: htt...
Radfahrer, Luli. Para você que (ainda) acredita em banners. Disponível       em: http://www.luli.com.br/2007/05/04/para-vo...
Grids       eduardonovais@virtual.ufc.brquinta-feira, 13 de outubro de 11
Upcoming SlideShare
Loading in …5
×

[cv - 2011.2] 14 - grids

1,313 views
1,227 views

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

[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

×