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

Transcript

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

   View Slide

2. @lucasmazza
   

   View Slide

3. View Slide

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

   View Slide

5. View Slide

6. View Slide

7. XP
   Scrum
   Kanban
   Lean
   

   View Slide

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

   View Slide

9. ?
   ? ?
   

   View Slide

10. View Slide

11. View Slide

12. Design
    Front end
    Back end
    

    View Slide

13. Designers Desenvolvedores
    

    View Slide

14. View Slide

15. 1. Design das páginas
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. múltiplos
    devices
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. conteúdo do
    mundo real
    múltiplos
    devices
    animações,
    interações e
    estados
    Browsers ¯\_(π)_/¯
    acessibilidade
    

    View Slide

34. View Slide

35. View Slide

36. Paternalismo de design
    

    View Slide

37. Paternalismo de design
    Falta de foco
    

    View Slide

38. Paternalismo de design
    Feedback tardio
    Falta de foco
    

    View Slide

39. View Slide

40. ?
    ? ?
    

    View Slide

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/
    

    View Slide

42. View Slide

43. ✗
    ✗
    

    View Slide

44. CSS 3 !
    JavaScript !
    HTML 5 !
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. Iterações mais rápidas
    &
    Iterações mais baratas
    

    View Slide

50. Comunicação
    &
    Colaboração
    

    View Slide

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

    View Slide

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

    View Slide

53. Git & GitHub
    

    View Slide

54. ❤ Pull Requests ❤
    

    View Slide

55. Código
    Contexto
    Discussão
    

    View Slide

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

    View Slide

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

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. https://github.com/github/swordfish/pull/93
    

    View Slide

63. in the wild
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

66. Julie Ann Horvath: Because F$%k Photoshop
    https://www.youtube.com/watch?v=e7-ZnHMDZto
    

    View Slide

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

    View Slide

68. Mais só isso é o suficiente?
    

    View Slide

69. Talvez não.
    

    View Slide

70. como gerenciar expectativas?
    

    View Slide

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

    View Slide

72. Faça promessas
    menores
    

    View Slide

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

    View Slide

74. Protótipos descartáveis
    

    View Slide

75. Tech
    Biz
    

    View Slide

76. Design deve ser
    consistente
    

    View Slide

77. Design deve ser
    documentado
    

    View Slide

78. Styleguides & Pattern libraries
    

    View Slide

79. Style tiles
    

    View Slide

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

    View Slide

81. Tente mudar a cultura
    primeiro
    

    View Slide

82. View Slide

83. View Slide

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

    View Slide