Webdesigners para não Webdesigners

Boas práticas de layout web.

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

Transcript

1. WEB DESIGN PARA NÃO WEB DESIGNERS Hugo L. Pizaia Zeh Fernandes
2. @hpizaia
3. @zehf
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
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
41. http://www.decathlon.com.br/
42. MindMap ou Mindmis- ter http://www.revistacliche.com.br/
43. NAVEGAçÃO ORGANIZAçÃO DISPOSIção
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É?
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É!
59. WINS!
60. WINS! FATALITY
69. GRID TIPOGRAFIA FORMA COR UX PADRÃO
70. http://960.gs/
71. http://cssgrid.net/
72. http://www.importzehdesign.com/linksdobrother/
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
78. FONTE SISTEMA FONTE FACE PHOTOSHOP http://www.fontsquirrel.com/
80. GRID FORMA COR UX PADRÃO TIPOGRAFIA
81. http://kuler.adobe.com/
82. http://kuler.adobe.com/
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/
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
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