Click here to load reader

[cv - 2011.2] 14 - grids

  • View
    1.064

  • Download
    4

Embed Size (px)

Text of [cv - 2011.2] 14 - grids

  • 1. Grids Comunicao Visual - 10.11quinta-feira, 13 de outubro de 11

2. Vamos comear?quinta-feira, 13 de outubro de 11 3. O que diacho um grid?quinta-feira, 13 de outubro de 11 4. Uma das melhores formas de se organizar os elementos em uma pgina ou tela usar grades de alinhamento, tambm chamadas de grids.quinta-feira, 13 de outubro de 11 5. Essas ferramentas dividem o espao visvel em reas e do maior consistncia a um layout. So o terror de quem est comeando a fazer design e a salvao de quem j tem alguma prtica.quinta-feira, 13 de outubro de 11 6. Grid a base sobre a qual um design construdo. Ele pode permite que um designer organize de modo eciente diversos elementos de uma pgina.quinta-feira, 13 de outubro de 11 7. Grid o esqueleto de um trabalho de design.quinta-feira, 13 de outubro de 11 8. Ele fora o designer a pensar construtivamente, de forma estruturada, para que o visitante no tenha que descobrir, a cada instante, o que foi projetado.quinta-feira, 13 de outubro de 11 9. Se ele assim to bom, porque apavora quem est comeando? Exatamente por falta de prtica.quinta-feira, 13 de outubro de 11 10. 1. Como lemos uma pgina?quinta-feira, 13 de outubro de 11 11. Antes de comearmos a utilizar Grids, precisamos nos acostumar com alguns conceitos. A forma de leitura de uma pgina um dos conceitos mais importantes que devemos observar.quinta-feira, 13 de outubro de 11 12. Qualquer pgina tem elementos ativos e passivos devido natureza do contedo e maneira como enxergamos a pgina - o modo como o olho varre a pgina para localizar a informao.quinta-feira, 13 de outubro de 11 13. 1.1. reas ativas e passivas do designquinta-feira, 13 de outubro de 11 14. Em uma pgina existem reas centrais e perifricas e os designers podem usar esse conhecimento para direcionar a localizao dos principais elementos de design - tornando-os mais ou menos visveis.quinta-feira, 13 de outubro de 11 15. Diante de uma nova pgina de informao, o olho humano habitualmente procura uma entrada no lado superior esquerdo, varrendo a pgina na diagonal para baixo at o canto inferior direito.quinta-feira, 13 de outubro de 11 16. quinta-feira, 13 de outubro de 11 17. quinta-feira, 13 de outubro de 11 18. quinta-feira, 13 de outubro de 11 19. quinta-feira, 13 de outubro de 11 20. quinta-feira, 13 de outubro de 11 21. quinta-feira, 13 de outubro de 11 22. 1.2. E como vemos uma tela de monitor?quinta-feira, 13 de outubro de 11 23. As pessoas examinam pginas web da mesma forma que analisam uma pgina impressa em busca de palavras-chave ou pontos de interesse.quinta-feira, 13 de outubro de 11 24. O designer pode interferir nesse processo destacando palavras ou adicionando marcadores a m de garantir que sesses de informao mais importantes saltem aos olhos.quinta-feira, 13 de outubro de 11 25. 1.3. Padro F de leitura de contedo Webquinta-feira, 13 de outubro de 11 26. Usurios no tm tempo ou ateno para ler calmamente o contedo de uma pgina, por isso seus olhos varrem a tela em busca de informao relevante, em duas linhas horizontais e uma vertical esquerda, movimento que lembra a letra F.quinta-feira, 13 de outubro de 11 27. Os pesquisadores descobriram que, embora os padres de leitura variem conforme o usurio e pgina, a varredura esquerda raramente muda. s vezes o padro de leitura parece um E, s vezes um L invertido.quinta-feira, 13 de outubro de 11 28. Nos exemplos acima pgina de about de umaempresa; pgina de produto em e-commerce; epgina de resultados do Google)quinta-feira, 13 de outubro de 11 29. Isso signica que as principais informaes e pontos de entrada devem localizar-se no mbito do Padro F para aumentar as chances de capturar a ateno do leitor.quinta-feira, 13 de outubro de 11 30. Essa uma regra geral que serve apenas como guia. Na prtica, os padres 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. 1.4. Anlisequinta-feira, 13 de outubro de 11 32. quinta-feira, 13 de outubro de 11 33. quinta-feira, 13 de outubro de 11 34. 1.5. Por m...quinta-feira, 13 de outubro de 11 35. Embora o designer precise levar em considerao as limitaes fsicas e as exigncias da mdia ou do formato usados, a forma de um design deve complementar a sua funo. A forma de um projeto varia de acordo com o pblico-alvo a que se destina.quinta-feira, 13 de outubro de 11 36. essencial enxergar o grid como algo adaptvel e exvel, e no como algo prescritivo e inviolvel.quinta-feira, 13 de outubro de 11 37. 2. Fundamentosquinta-feira, 13 de outubro de 11 38. Falamos sobre como o usurio v uma pgina. A partir de agora, vamos discutir sobre caractersticas dessa tal pgina.quinta-feira, 13 de outubro de 11 39. 2.1. ISO e formatos de papelquinta-feira, 13 de outubro de 11 40. O Curso de Sistemas e Mdias Digitais da UFC normalmente no possui trabalhos voltados a impresso em papel. Ainda assim, importante saber algo sobre papis.quinta-feira, 13 de outubro de 11 41. O sistema de tamanho de papis padronizado pela Organizao Internacional para Padronizao - ISO - e baseia-se na relao altura x largura. (1:1,4142)quinta-feira, 13 de outubro de 11 42. A linha de formato A a mais conhecida. A srie B composta de formatos intermedirios, e os da srie C destinam-se a envelopes para artigos de papelaria.quinta-feira, 13 de outubro de 11 43. quinta-feira, 13 de outubro de 11 44. 2.2. Anatomia da pginaquinta-feira, 13 de outubro de 11 45. A pgina composta a de vrias partes distintas, e cada seo tem uma nalidade e uma funo importantes no design como um todo.quinta-feira, 13 de outubro de 11 46. quinta-feira, 13 de outubro de 11 47. quinta-feira, 13 de outubro de 11 48. 2.3. Medidasquinta-feira, 13 de outubro de 11 49. Quase 90% dos usurios podero ver todo o contedo em uma pgina com 500px de altura. (fonte: Fold Spy)quinta-feira, 13 de outubro de 11 50. Mais de 80% sero bem servidos com largura 1000px, 28% dos usurios tendem a navegar com 1250px largura da tela.quinta-feira, 13 de outubro de 11 51. E o que eu fao, ento?quinta-feira, 13 de outubro de 11 52. Segundo a revista digital Smashing Magazine, na maioria dos casos, voc pode melhorar a experincia do usurio, mantendo a largura do seu layout em no mximo 1000px e a altura em 581px.quinta-feira, 13 de outubro de 11 53. 2.3. Formas em uma pginaquinta-feira, 13 de outubro de 11 54. A composio de um design construda com tipos e imagens, que resultam em formas de uma pgina. Dito de outra forma, eles podem ser tratados como formas a m de produzir um design eciente e ecaz.quinta-feira, 13 de outubro de 11 55. Agora que consideramos texto e imagens como formas, vejamos como essas formas podem ser organizadas em uma pgina.quinta-feira, 13 de outubro de 11 56. Agrupamento. Funciona pela separao de blocos em zonas distintas da pgina. Alinhar as bordas dos diferentes elementos de design ajuda a estabelecer conexo entre eles.quinta-feira, 13 de outubro de 11 57. Permetro. Os elementos so agrupados com imagens sangradas, o que mostraum uso surpreendente do permetro. frequentemente evitado no design, mas pode ser usado para agregar dinamismo e movimento ao trabalho.quinta-feira, 13 de outubro de 11 58. Horizontal. Os elementos da pgina tm uma nfase horizontal que atrai o olhar do observador por toda a pgina.quinta-feira, 13 de outubro de 11 59. Vertical. Os elementos da pgina tm uma nfase vertical que conduz o olhar do observador para cima e para baixo.quinta-feira, 13 de outubro de 11 60. Deitado. O texto apresentado de modo que a leitura seja feita na vertical em vez de na horizontal. Esse mtodo usado para apresentar material tabular que muito longo para uma pgina (impresso).quinta-feira, 13 de outubro de 11 61. Angular. Fora o usurio a mudar sua relao com a pgina. O ideal usar uma congurao uniforme em funo da consistncia, como no ngulo de 45 visto acima.quinta-feira, 13 de outubro de 11 62. Orientados pelo eixo. Os elementos da gina so concientemente alinhados a um eixo, como o vertical. O alinhamento pode ser em qualquer direo.quinta-feira, 13 de outubro de 11 63. Passe Layout. Tecnica comum para apresentar fotograas, em que a imagem domina o espao na pgina e marcada por uma borda.quinta-feira, 13 de outubro de 11 64. As diferentes formas capturam o olhar e estabelecem uma srie de relaes, que complementam a mensagem do design ou da pintura.quinta-feira, 13 de outubro de 11 65. 2.4. Exemplos - Formasquinta-feira, 13 de outubro de 11 66. quinta-feira, 13 de outubro de 11 67. quinta-feira, 13 de outubro de 11 68. quinta-feira, 13 de outubro de 11 69. quinta-feira, 13 de outubro de 11 70. quinta-feira, 13 de outubro de 11 71. quinta-feira, 13 de outubro de 11 72. quinta-feira, 13 de outubro de 11 73. quinta-feira, 13 de outubro de 11 74. quinta-feira, 13 de outubro de 11 75. quinta-feira, 13 de outubro de 11 76. quinta-feira, 13 de outubro de 11 77. 2.5. Hierarquiaquinta-feira, 13 de outubro de 11 78. O conceito de hierarquia serve para identicar e apresentar as informaes mais importantes em um design, o que pode ser alcanado por meio de escala e posicionamento.quinta-feira, 13 de outubro de 11 79. Neutro. Esta gura mostra a pgina neutra, sem hierarquia alguma entre as duas colunas de texto. Observe que o usurio naturalmente comea a visualizar pelo canto superior esquerdo.quinta-feira, 13 de outubro de 11 80. Posio. Um posicionamento bvio de um elemento de design introduz uma hierarquia como esse ttulo sozinho esquerda.quinta-feira, 13 de outubro de 11 81. Posio e tamanho. Posicionar um elemento no foco de entrada, alterar seu tamanho e introduzir espaamento estabelece sua dominncia na hierarquia.quinta-feira, 13 de outubro de 11 82. Posio, tamanho e nfase. Consiste em adicionar nfase a um elemento para reforar