Webdesigners para não Webdesigners

2bf65079a1d9d186ce41955f3152df5f?s=47 zehfernandes
October 17, 2012

Webdesigners para não Webdesigners

Boas práticas de layout web.

» Material de apoio da palestra http://revistacliche.com.br/webdesignerslinks/

2bf65079a1d9d186ce41955f3152df5f?s=128

zehfernandes

October 17, 2012
Tweet

Transcript

  1. WEB DESIGN PARA NÃO WEB DESIGNERS Hugo L. Pizaia Zeh

    Fernandes
  2. @hpizaia

  3. @zehf

  4. None
  5. TÓPICOS VEJAM SE VALE A PENA FICAR

  6. CONTEÚDO A.I LINHA VISUAL

  7. A.I LINHA VISUAL CONTEÚDO

  8. CONTEÚDO LINHA VISUAL A.I

  9. ANTES, UM POUCO DE HISTÓRIA... O CRIADOR AINDA VIVE, E

    TEM LÍNGUA PRESA!
  10. http://pt.wikipedia.org/wiki/Tim _ Berners-Lee

  11. ESTRUTURA ESTILO COMPORTAMENTO

  12. ESTRUTURA ESTILO COMPORTAMENTO

  13. ESTILO

  14. COMPORTAMENTO COMPORTAMENTO

  15. @zenorocha

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. “A web é dinamica, adaptável e sistemática“ PAUL LYOD

  25. CONTEÚDO FIRST THINGS FIRST!

  26. O QUE PERGUTAR NO BRIEFING?

  27. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?
  28. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?
  29. http://www.dontclick.it/

  30. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?
  31. http://www.zeldman.com/

  32. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?
  33. O QUE VOCÊ PRECISA DEFINIR?

  34. http://g1.globo.com/

  35. http://logobr.org/

  36. http://www.hotpocket.com.br/

  37. ARQUITETURA DA INFORMAÇÃO ONDE ESTÃO MEUS TALHERES?

  38. ORGANIZAçÃO NAVEGAçÃO DISPOSIção

  39. None
  40. None
  41. http://www.decathlon.com.br/

  42. MindMap ou Mindmis- ter http://www.revistacliche.com.br/

  43. NAVEGAçÃO ORGANIZAçÃO DISPOSIção

  44. None
  45. http://www.revistacliche.com.br/

  46. http://experienciascompartilhadas.com.br/

  47. DISPOSIção NAVEGAçÃO ORGANIZAçÃO

  48. http://grafofilia.wordpress.com/

  49. http://wikipedia.org/

  50. http://2012.dconstruct.org

  51. CADE O ENDEREÇO NO RODAPÉ?

  52. None
  53. http://www.mockflow.com/

  54. AXURE MOXFLOW http://www.axure.com/

  55. http://www.revistacliche.com.br/

  56. LINHA VISUAL AGORA ENTRA O FILÉ!

  57. None
  58. None
  59. WINS!

  60. WINS! FATALITY

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. GRID TIPOGRAFIA FORMA COR UX PADRÃO

  70. http://960.gs/

  71. http://cssgrid.net/

  72. http://www.importzehdesign.com/linksdobrother/

  73. None
  74. None
  75. GRID FORMA COR UX PADRÃO TIPOGRAFIA

  76. “95% da informação na web é a linguagem escrita. É

    lógico dizer que um web designer deve ter uma boa formação na disciplina de moldar informações por escrito, em outras palavras: Tipografia “ by Oliver Reichenstein
  77. None
  78. FONTE SISTEMA FONTE FACE PHOTOSHOP http://www.fontsquirrel.com/

  79. None
  80. GRID FORMA COR UX PADRÃO TIPOGRAFIA

  81. http://kuler.adobe.com/

  82. http://kuler.adobe.com/

  83. None
  84. None
  85. None
  86. None
  87. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  88. http://static.bbci.co.uk/gel/0.2.10/downloads/GEL _ web _ styleguide.pdf

  89. https://www.dropbox.com/

  90. None
  91. Blocagem http://www.mozilla.org/pt-BR/firefox/new/?from=getfirefox

  92. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  93. Tentativa e erro

  94. Curva de aprendizado

  95. Escaneia

  96. None
  97. None
  98. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  99. http://photoshopetiquette.com/

  100. http://twitter.github.com/bootstrap/

  101. @ sobrinhoweb

  102. CONTEÚDO A.I LINHA VISUAL RESUMÃO http://www.felipex.com.br/

  103. http://revistacliche.com.br/webdesignerslinks/

  104. WEB DESIGN PARA NÃO WEB DESIGNERS PERGUNTAS

  105. OBRIGADO CONTATO@REVISTACLICHE.COM.BR