Design efetivo para desenvolvedores

Transcript

1. D!"#$% !f!&#v' para desenvolvedores

2. @lucasmazza

3. None

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.

18. None

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?

28. None
29. None

30. ✔

31. None

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

40. None

41. #1 Foto

42. #1 Foto #2 Comentários

43. None

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.
52. None
53. None
54. None
55. None

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. ✗

77. None

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

86. None

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!

97. None

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
119. None
120. None

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...

125. None

126. Estamos contratando! http://plataformatec.com.br

127. Obrigado!