Design efetivo para desenvolvedores

Por Lucas Mazza, no RS on Rails 2012.

Transcript

1. D!"#$% !f!&#v' para desenvolvedores
2. @lucasmazza
4. @casadocodigo
5. e eu não sou um designer
6. Mas o design sempre faz parte do meu trabalho
7. Por que eu devo aprender mais sobre design? ? ? ? ? ?
8. 1Porque é importante
9. “It's not just what it looks like and feels like. Design is how it works.” Steve Jobs, 2003.
10. 2Porque é abrangente
11. Design para a web
12. Design para mobile
13. Design para desktop
14. Design de apresentações
15. 3Porque não é impossível
16. Você só precisa de estudos e prática
17. Disclaimer: O objetivo não é substituir os nossos colegas designers.
19. Avaliar e contribuir http://hoveringartdirectors.tumblr.com/image/5422825332
20. Not designers. Not coders. Just builders. http://blog.studiofellow.com/2012/05/09/not-designers-not-coders-just-builders/ @studiofellow
21. Checklist
22. #1 Conteúdo
23. O conteúdo é Rei O conteúdo conduz o design, não o contrário
24. O design deve ser flexível http://dribbble.com/shots/513389-Surprisingly-Flexible
25. #2 Alinhamento
26. Não é engenharia de foguete apenas bom senso e organização
27. Ninguém gosta de bagunça certo?
30. ✔
32. Grids ‣ 960.gs ‣ Twitter Bootstrap ‣ Ou monte o seu!
33. #3 Hierarquia
34. Eu sou mais importante do que essa outra linha e do que essa e do que essa aqui também
35. Agrupe elementos relacionados
36. E destaque o que for mais IMPORTANTE
37. http://web.stagram.com
38. http://web.stagram.com #1 Foto
39. http://web.stagram.com #1 Foto #2 Comentários
41. #1 Foto
42. #1 Foto #2 Comentários
44. #1 Nome
45. #1 Nome #2 Data
46. #1 Nome #3 Inscrições #2 Data
47. #1 Nome #4 Ingresso #3 Inscrições #2 Data
48. #1 Nome #4 Ingresso #3 Inscrições #2 Data #5 wtf?
49. http://dabblet.com/gist/3431644
50. #4 Escrita
51. Não deixe de se dedicar aos seus textos Sim, as pessoas leêm o que você escreve na Internet.
56. http://copywritingforgeeks.com/
57. #5 Tipografia
58. ‣Legibilidade em primeiro lugar
59. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar
60. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar
61. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Entenderam?
62. Aumente o tamanho da fonte na dúvida
63. Aumente o tamanho da fonte
64. Web Fonts são legais mas você pode acabar gastanto muito tempo escolhendo uma
65. Lucida Grande Helvetica Georgia Arial Verdana Tahoma
66. https://speakerdeck.com/u/fnando/p/design-para-desenvolvedores
67. #6 Cores
68. Cores são confusas
69. Cada cor nova vai afetar as outras cores
70. Então...
71. Então... evite abusar de várias cores
72. Então... evite abusar de várias cores suporte para a sua hierarquia
73. Então... evite abusar de várias cores suporte para a sua hierarquia gerencie expectativas comuns
74. ✔
75. ✔
76. ✗
78. http://www.colourlovers.com/
79. http://kuler.adobe.com/
80. Branco, cinza e preto primeiro
81. E depois você adiciona mais cores
82. versões claras e escuras
83. ❤ ❤ CSS 3 ❤ ❤ box-shadow: 0 0 5px rgba(0,0,0,0.6); background-image: linear-gradient(to bottom, #FFF, #E8E8E8); background-image: linear-gradient(to bottom, #990000 47%, #880000 56%, #660000 80%); text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3); Trabalhar com gradientes e cores nunca foi tão fácil
84. #7 Comunicação
85. shi* happens :( http://dribbble.com/shots/135172-4-oh-4
87. Páginas de 404 e 500
88. Páginas de 404 e 500 Buscas sem resultados
89. Páginas de 404 e 500 Buscas sem resultados Formulários
90. Páginas de 404 e 500 Buscas sem resultados Formulários FAQs e ajudas
91. ✗
92. ✔
93. ✔
94. ✗
95. Defensive Design for the Web http://www.amazon.com/Defensive-Design-Web-improve-messages/dp/073571410X
96. RECAP!
98. Conteúdo
99. Conteúdo Alinhamento
100. Conteúdo Alinhamento Hierarquia
101. Conteúdo Alinhamento Hierarquia Escrita
102. Conteúdo Alinhamento Hierarquia Escrita Tipografia
103. Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores
104. Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores Comunicação
105. O seu processo ?
106. Inside-out
107. http://steallikeanartist.com/
108. http://bootstrappingdesign.com/
109. http://bootstrappingdesign.com/
110. Itere, rabisque e implemente
111. Itere, rabisque e implemente
112. Itere, rabisque e implemente
113. Itere, rabisque e implemente
114. Balsamiq http://www.balsamiq.com/ MockingBird https://gomockingbird.com/ Bambo Paper (iPad) http://itunes.apple.com/us/app/bamboo-paper-notebook/id443131313 Papel e Caneta! http://middaylatte.com/post/1287482721/constructing-a-plan-of-attack
115. “Share early, share o!en” compartilhe frequentemente o seu trabalho com os seus colegas
116. “Share early, share o!en” E não deixe de avaliar cada sugestão e crítica
117. “...And when you get over the embarrassment, you’re more creative.” Ed Catmull http://community.protoshare.com/2011/04/getting-over-embarrassment-and-getting-done/
118. “The importance of anyone and everyone— regardless of their role on a team—doing UX and usability evaluation will never go away.” http://www.alistapart.com/articles/product-management-for-the-web
121. Inspire-se com o trabalho dos outros
122. Acompanhe quem entende do assunto @brad_frost @rjs @leaverou @kneath @fnando @lukew @chriscoyier @shiota @zeldman
123. “When you don't create things, you become defined by your tastes rather than ability. Your tastes only narrow & exclude people. So create.” Why The Lucky Stiff
124. Só mais duas coisas...
126. Estamos contratando! http://plataformatec.com.br
127. Obrigado!