Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design efetivo para desenvolvedores

7c12adb8b5521c060ab4630360a4fa27?s=47 Plataformatec
September 15, 2012

Design efetivo para desenvolvedores

Por Lucas Mazza, no RS on Rails 2012.

7c12adb8b5521c060ab4630360a4fa27?s=128

Plataformatec

September 15, 2012
Tweet

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. None
  31. Grids ‣ 960.gs ‣ Twitter Bootstrap ‣ Ou monte o

    seu!
  32. #3 Hierarquia

  33. Eu sou mais importante do que essa outra linha e

    do que essa e do que essa aqui também
  34. Agrupe elementos relacionados

  35. E destaque o que for mais IMPORTANTE

  36. http://web.stagram.com

  37. http://web.stagram.com #1 Foto

  38. http://web.stagram.com #1 Foto #2 Comentários

  39. None
  40. #1 Foto

  41. #1 Foto #2 Comentários

  42. None
  43. #1 Nome

  44. #1 Nome #2 Data

  45. #1 Nome #3 Inscrições #2 Data

  46. #1 Nome #4 Ingresso #3 Inscrições #2 Data

  47. #1 Nome #4 Ingresso #3 Inscrições #2 Data #5 wtf?

  48. http://dabblet.com/gist/3431644

  49. #4 Escrita

  50. Não deixe de se dedicar aos seus textos Sim, as

    pessoas leêm o que você escreve na Internet.
  51. None
  52. None
  53. None
  54. None
  55. http://copywritingforgeeks.com/

  56. #5 Tipografia

  57. ‣Legibilidade em primeiro lugar

  58. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar

  59. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em

    primeiro lugar
  60. ‣Legibilidade em primeiro lugar ‣Legibilidade em primeiro lugar ‣Legibilidade em

    primeiro lugar ‣Entenderam?
  61. Aumente o tamanho da fonte na dúvida

  62. Aumente o tamanho da fonte

  63. Web Fonts são legais mas você pode acabar gastanto muito

    tempo escolhendo uma
  64. Lucida Grande Helvetica Georgia Arial Verdana Tahoma

  65. https://speakerdeck.com/u/fnando/p/design-para-desenvolvedores

  66. #6 Cores

  67. Cores são confusas

  68. Cada cor nova vai afetar as outras cores

  69. Então...

  70. Então... evite abusar de várias cores

  71. Então... evite abusar de várias cores suporte para a sua

    hierarquia
  72. Então... evite abusar de várias cores suporte para a sua

    hierarquia gerencie expectativas comuns
  73. None
  74. http://www.colourlovers.com/

  75. http://kuler.adobe.com/

  76. Branco, cinza e preto primeiro

  77. E depois você adiciona mais cores

  78. versões claras e escuras

  79. ❤ ❤ 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
  80. #7 Comunicação

  81. shi* happens :( http://dribbble.com/shots/135172-4-oh-4

  82. None
  83. Páginas de 404 e 500

  84. Páginas de 404 e 500 Buscas sem resultados

  85. Páginas de 404 e 500 Buscas sem resultados Formulários

  86. Páginas de 404 e 500 Buscas sem resultados Formulários FAQs

    e ajudas
  87. Defensive Design for the Web http://www.amazon.com/Defensive-Design-Web-improve-messages/dp/073571410X

  88. RECAP!

  89. None
  90. Conteúdo

  91. Conteúdo Alinhamento

  92. Conteúdo Alinhamento Hierarquia

  93. Conteúdo Alinhamento Hierarquia Escrita

  94. Conteúdo Alinhamento Hierarquia Escrita Tipografia

  95. Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores

  96. Conteúdo Alinhamento Hierarquia Escrita Tipografia Cores Comunicação

  97. O seu processo ?

  98. Inside-out

  99. http://steallikeanartist.com/

  100. http://bootstrappingdesign.com/

  101. http://bootstrappingdesign.com/

  102. Itere, rabisque e implemente

  103. Itere, rabisque e implemente

  104. Itere, rabisque e implemente

  105. Itere, rabisque e implemente

  106. 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
  107. “Share early, share o!en” compartilhe frequentemente o seu trabalho com

    os seus colegas
  108. “Share early, share o!en” E não deixe de avaliar cada

    sugestão e crítica
  109. “...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/
  110. “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
  111. None
  112. None
  113. Inspire-se com o trabalho dos outros

  114. Acompanhe quem entende do assunto @brad_frost @rjs @leaverou @kneath @fnando

    @lukew @chriscoyier @shiota @zeldman
  115. “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
  116. Só mais duas coisas...

  117. None
  118. Estamos contratando! http://plataformatec.com.br

  119. Obrigado!