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
2. @lucasmazza
4. (›°□°ʣ›ớ ᵲᴸᵲ
7. XP Scrum Kanban Lean
8. Orientação a Objetos Git, Mercurial, etc Integração Contínua Testes e TDD Responsive Web Design
9. ? ? ?
12. Design Front end Back end
13. Designers Desenvolvedores
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. …
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
36. Paternalismo de design
37. Paternalismo de design Falta de foco
38. Paternalismo de design Feedback tardio Falta de foco
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/
43. ✗ ✗
44. CSS 3 ! JavaScript ! HTML 5 !
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
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
84. Obrigado! https://twitter.com/lucasmazza https://speakerdeck.com/lucas