Web design para não web designers

Dicas de boas práticas de layout para web com a Revista Cliche

» Todos os links da palestra http://revistacliche.com.br/webdesignerslinks/
» Mais sobre a Revista Cliche http://www.revistacliche.com.br/

Transcript

1. WEB DESIGN PARA NÃO WEB DESIGNERS Hugo Pizaia Zeh Fernandes
2. Como foram preparados para palestras, os slides contarão com apoio textual de post-its. Vamos lá ;D
3. WEB DESIGN PARA NÃO WEB DESIGNERS Boas práticas de layout web com a Revista Cliche
4. @hpizaia
5. @zehf
7. www.revistacliche.com.br
8. TÓPICOS VEJAM PORQUÊ VALE A PENA FICAR
9. CONTEÚDO A.I LINHA VISUAL
10. A.I LINHA VISUAL CONTEÚDO
11. A.I LINHA VISUAL CONTEÚDO Arquitetura de informação
12. CONTEÚDO LINHA VISUAL A.I
13. ANTES, UM POUCO DE HISTÓRIA... O CRIADOR DA INTERNET AINDA VIVE
14. http://pt.wikipedia.org/wiki/Tim _ Berners-Lee
16. Um dos primeiro navegadores criados, repare que mudou pouca coisa hehe...
18. http://migre.me/fqtGQ
19. O MITO DO CÓDIGO NÃO SE PREOCUPE ELE NÃO MORDE
21. ESTRUTURA ESTILO COMPORTAMENTO
22. ESTRUTURA ESTILO COMPORTAMENTO HTML CSS JavaScript
23. “A web é dinamica, adaptável e sistemática“ PAUL LYOD
24. http://bradfrostweb.com/
25. http://bradfrostweb.com/
26. CONTEÚDO FIRST THINGS FIRST!
27. CONTEÚDO FIRST THINGS FIRST!
28. CONTEÚDO FIRST THINGS FIRST!
29. CONTEÚDO FIRST THINGS FIRST!
30. http://www.youtube.com/watch?v=nE0CRMm59BY
31. “Design sem conteúdo é decoração, é realmente muito difícil projetar sem conteúdo.” L. Jeffrey Zeldman
32. O QUE PERGUTAR NO BRIEFING?
33. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO DO SITE? 4.JÁ possui domínio ou servidor?
34. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO DO SITE? 4.JÁ possui domínio ou servidor?
35. http://www.dontclick.it/
36. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO DO SITE? 4.JÁ possui domínio ou servidor?
37. http://www.zeldman.com/
38. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO DO SITE? 4.JÁ possui domínio ou servidor?
39. ARQUITETURA DA INFORMAÇÃO ONDE ESTÃO MEUS TALHERES?
40. ORGANIZAçÃO NAVEGAçÃO DISPOSIção
42. Após pegar cuidadosamente o conteúdo organize ele rabiscando!
43. http://www.decathlon.com.br/
44. http://www.decathlon.com.br/ http://www.decathlon.com.br/ Cuidado para não procurar calçados no setor de tênis.
45. MindMap ou Mindmis- ter http://www.revistacliche.com.br/
46. NAVEGAçÃO ORGANIZAçÃO DISPOSIção
48. http://www.revistacliche.com.br/
49. http://experienciascompartilhadas.com.br/
50. DISPOSIção NAVEGAçÃO ORGANIZAçÃO
52. http://grafofilia.wordpress.com/ Fixa
54. http://wikipedia.org/ Fluida
56. http://2012.dconstruct.org Adaptativa
57. http://www.mockflow.com/
58. http://www.revistacliche.com.br/
59. LINHA VISUAL AGORA VAI!
61. http://webdesign.tutsplus.com/
62. http://webdesign.tutsplus.com/ Photoshop possui actions muito boas que mantém a integridade dos pixels
64. - Web Zap - Kuler - CSS hat - Guide Guide
65. WINS!
66. WINS! FATALITY
70. - Sketch - Adobe Edge Reflow
76. Certifique-se que as unidades estão em pixel!
82. Sério salvem para “web and devices” diminiu demais o tamanho do arquivo!
83. GRID TIPOGRAFIA FORMA COR UX PADRÃO
84. http://960.gs/
85. http://cssgrid.net/
88. GRID FORMA COR UX PADRÃO TIPOGRAFIA
89. “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
98. FONTE SISTEMA FONTE FACE PHOTOSHOP http://www.fontsquirrel.com/
99. GRID FORMA COR UX PADRÃO TIPOGRAFIA
100. http://kuler.adobe.com/
101. http://0to255.com/
103. Acessibilidade, teste seu site com actions para daltônicos, aproveite para ver seu site com outros olhos!
107. GRID FORMA UX PADRÃO TIPOGRAFIA COR
109. https://www.dropbox.com/
110. Blocagem http://www.mozilla.org/pt-BR/firefox/new/?from=getfirefox
111. GRID FORMA UX PADRÃO TIPOGRAFIA COR
113. Tentativa e erro
114. Curva de aprendizado
115. Escaneia
116. GRID FORMA UX PADRÃO TIPOGRAFIA COR
117. http://photoshopetiquette.com/
118. http://photoshopetiquette.com/ Como entregar o .psd para o programador?
119. http://photoshopetiquette.com/ Deixando seu photoshop assim você pode entregar ele até para sua mãe!
120. http://twitter.github.com/bootstrap/
121. http://twitter.github.com/bootstrap/ Padrões
122. @ sobrinhoweb
123. @ sobrinhoweb Não seja esse cara.
124. CONTEÚDO A.I LINHA VISUAL RESUMÃO http://www.felipex.com.br/
125. CONTEÚDO A.I LINHA VISUAL RESUMÃO http://www.felipex.com.br/ Nem esse.
126. OBRIGADO
127. Esperamos seu feedback http://revistacliche.com.br/webdesignerslinks/