Photoshop? Meh

5a90a67fa1a92e6a4b605cfd8da5e375?s=47 Lucas Mazza
August 09, 2014

Photoshop? Meh

O processo de desenvolvimento e design para a web não precisa se basear em algumas layers de um arquivo .psd e pode ser algo muito mais colaborativo e iterativo - igual ao softwares que construímos. Vamos falar sobre os problemas dessa abordagem tradicional de design e de métodos mais colaborativos que podem ajudar você a prototipar, desenhar e entregar interfaces melhores nos seus projetos.

Apresentado no TDC SP 2014

5a90a67fa1a92e6a4b605cfd8da5e375?s=128

Lucas Mazza

August 09, 2014
Tweet

Transcript

  1. Photoshop? Meh Repensando o processo de design para a web

  2. @lucasmazza

  3. None
  4. (›°□°ʣ›ớ ᵲᴸᵲ

  5. None
  6. None
  7. XP Scrum Kanban Lean

  8. Orientação a Objetos Git, Mercurial, etc Integração Contínua Testes e

    TDD Responsive Web Design
  9. ? ? ?

  10. None
  11. None
  12. Design Front end Back end

  13. Designers Desenvolvedores

  14. None
  15. 1. Design das páginas

  16. 1. Design das páginas 2. Aprovação de pixels

  17. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas
  18. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels
  19. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. …
  20. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. …
  21. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. … 7. Desenvolvimento!
  22. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. … 7. Desenvolvimento! 8.
  23. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. … 7. Desenvolvimento! 8. 1. Design das páginas
  24. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. … 7. Desenvolvimento! 8. 1. Design das páginas 2. Aprovação de pixels
  25. 1. Design das páginas 2. Aprovação de pixels 3. Design

    das páginas 4. Aprovação de pixels 5. … 6. … 7. Desenvolvimento! 8. 1. Design das páginas 2. Aprovação de pixels 3. …
  26. None
  27. None
  28. None
  29. múltiplos devices

  30. múltiplos devices animações, interações e estados

  31. múltiplos devices animações, interações e estados acessibilidade

  32. conteúdo do mundo real múltiplos devices animações, interações e estados

    acessibilidade
  33. conteúdo do mundo real múltiplos devices animações, interações e estados

    Browsers ¯\_(π)_/¯ acessibilidade
  34. None
  35. None
  36. Paternalismo de design

  37. Paternalismo de design Falta de foco

  38. Paternalismo de design Feedback tardio Falta de foco

  39. None
  40. ? ? ?

  41. “[…] I’ve come to the conclusion that a website’s design

    should begin where it’s going to live: in the browser.” Meagan Fisher - Make Your Mockup in Markup http://24ways.org/2009/make-your-mockup-in-markup/
  42. None
  43. ✗ ✗

  44. CSS 3 ! JavaScript ! HTML 5 !

  45. None
  46. None
  47. None
  48. None
  49. Iterações mais rápidas & Iterações mais baratas

  50. Comunicação & Colaboração

  51. Protótipos Páginas funcionais Melhorias Melhorias :shipit:

  52. Versionamento 15M Jun 31 19:46 home_v1.psd 54M Jul 18 16:23

    home_v2.psd 54M Jul 21 19:00 home_v2.bkp.psd 54M Jul 21 19:27 home_v2.bkp2.psd ✗ ✗
  53. Git & GitHub

  54. ❤ Pull Requests ❤

  55. Código Contexto Discussão

  56. Código Contexto Discussão Markdown Screenshots GIFs

  57. https://github.com/jekyll/jekyll/pull/583

  58. None
  59. None
  60. None
  61. None
  62. https://github.com/github/swordfish/pull/93

  63. in the wild

  64. “[…] HTML/CSS affords us the best iterative and creative experience.

    HTML/CSS is real in a way Photoshop will never be.” Jason Fried - Why we skip Photoshop https://signalvnoise.com/posts/1061-why-we-skip-photoshop
  65. “[…] when you demonstrate a design as a static image

    you are reinforcing a mistaken notion that a web page will be a facsimile of a frozen image.” Andy Clark - Time to stop showing clients static design visuals http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/
  66. Julie Ann Horvath: Because F$%k Photoshop https://www.youtube.com/watch?v=e7-ZnHMDZto

  67. http://markdotto.com/2014/08/04/shipping-the-new-github-issues/

  68. Mais só isso é o suficiente?

  69. Talvez não.

  70. como gerenciar expectativas?

  71. como gerenciar expectativas? como escalar o seu time?

  72. Faça promessas menores

  73. Iterações mais rápidas & feedback contínuo

  74. Protótipos descartáveis

  75. Tech Biz

  76. Design deve ser consistente

  77. Design deve ser documentado

  78. Styleguides & Pattern libraries

  79. Style tiles

  80. Ferramentas alternativas não faltam Webflow Macaw Layervault Invison Adobe Edge

    Reflow Sketch
  81. Tente mudar a cultura primeiro

  82. None
  83. None
  84. Obrigado! https://twitter.com/lucasmazza https://speakerdeck.com/lucas