Red light, green light: the do's and don'ts of a successful dev-design workflow

Imagine this: a highly-rotational developer team and an small-and-overworked design team working together for the first time with a tight schedule and several deliveries in a month: what could go wrong?

This talk is about a war story and my learnings on how, even when chaos seems to reign, you have sometimes to stop everything (turn the red light on) in order to continue and success (turn the green light on).

Talk given at FSLVallarta 2016
http://fsl.mx

Transcript

1. #FSL2016 ! @FerPeralesM QUÉ HACER Y QUÉ NO HACER PARA UN FLUJO DE TRABAJO EXITOSO ENTRE PROGRAMADORES Y DISEÑADORES LUZ ROJA, LUZ VERDE:
2. #FSL2016 ! @FerPeralesM <me>
3. #FSL2016 ! @FerPeralesM Senior Consultant MagmaLabs
4. #FSL2016 ! @FerPeralesM Senior Consultant MagmaLabs ¡Psst! Estamos contratando careers.magmalabs.io
5. #FSL2016 ! @FerPeralesM " Promotor del FLOSS # Apasionado del desarrollo web Conferencista en formación Estudiante de Bajo Eléctrico Fan: Heavy metal, cerveza, Twitter, Gregory Sallust, Ruby
6. #FSL2016 ! @FerPeralesM </me>
7. #FSL2016 ! @FerPeralesM Programadores vs. Diseñadores
8. ! @FerPeralesM #FSL2016 Programadores vs. Diseñadores http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
9. ! @FerPeralesM #FSL2016 “NADIE NOS ENSEÑA A TRABAJAR JUNTOS”
10. ! @FerPeralesM #FSL2016 Fer Perales “NADIE NOS ENSEÑA A TRABAJAR JUNTOS”
11. #FSL2016 ! @FerPeralesM El proyecto
12. ! @FerPeralesM #FSL2016 EL PROYECTO ▸ 6 temas para una plataforma de e-commerce ▸ Cada tema con 6 páginas: About Us, Cart, Categories, Contact Us, Home y PDP ▸ Sólo proporcionar el HTML y CSS necesario: un sitio estático ▸ Un mes ▸ 4 programadores y 4 diseñadores
13. GOPRO.COM
14. ABOUT US
15. CART
16. CATEGORIES
17. CONTACT US
18. HOME
19. PDP
20. ! @FerPeralesM #FSL2016
21. #FSL2016 ! @FerPeralesM Los problemas
22. ! @FerPeralesM #FSL2016 REPARTICIÓN DEL TRABAJO
23. ! @FerPeralesM #FSL2016
24. ! @FerPeralesM #FSL2016 POR VISTA
25. ! @FerPeralesM #FSL2016 POR RESOLUCIÓN
26. ! @FerPeralesM #FSL2016 POR COMPONENTE
27. ! @FerPeralesM #FSL2016
28. ! @FerPeralesM #FSL2016 RESOLUCIONES A CONSIDERAR
29. ! @FerPeralesM #FSL2016
30. ! @FerPeralesM #FSL2016
31. ! @FerPeralesM #FSL2016 ELECCIÓN DE LAS HERRAMIENTAS
32. ! @FerPeralesM #FSL2016 ROTACIÓN DE DESARROLLADORES
33. ! @FerPeralesM #FSL2016 FACTOR AUTOBÚS
34. ! @FerPeralesM #FSL2016 https://adamprescott.files.wordpress.com/2012/12/busfactor1.png
35. ! @FerPeralesM #FSL2016 ¿ORDEN DEL TRABAJO?
36. ! @FerPeralesM #FSL2016 PRIMERO ERA NECESARIO EL DISEÑO ANTES DE LA IMPLEMENTACIÓN
37. ! @FerPeralesM #FSL2016 NO PODEMOS HACER QUE LOS DISEÑADORES TRABAJEN MÁS RÁPIDO
38. ! @FerPeralesM #FSL2016 PERO…
39. ! @FerPeralesM #FSL2016 PODEMOS HACER QUE PIERDAN MENOS TIEMPO
40. ! @FerPeralesM #FSL2016 GUIDELINES
41. ! @FerPeralesM #FSL2016
42. ! @FerPeralesM #FSL2016 ¿SCRUM/AGILE NECESARIO?
43. ! @FerPeralesM #FSL2016 ¿SCRUM/AGILE NECESARIO? R: NO
44. ! @FerPeralesM #FSL2016 COMPONENTES COMUNES PARA TODOS LOS TEMAS
45. ! @FerPeralesM #FSL2016 ¡REUTILIZAR!
46. ! @FerPeralesM #FSL2016 PARCIALES + SMACSS
47. ! @FerPeralesM #FSL2016
48. ! @FerPeralesM #FSL2016 “SCALABLE AND MODULAR ARCHITECTURE FOR CSS (SMACSS) ES EL LIBRO QUE LE DA SENTIDO A HACER CSS”
49. ! @FerPeralesM #FSL2016 “SCALABLE AND MODULAR ARCHITECTURE FOR CSS (SMACSS) ES EL LIBRO QUE LE DA SENTIDO A HACER CSS” Fer Perales
50. ! @FerPeralesM #FSL2016 ASUNCIONES
51. ! @FerPeralesM #FSL2016 SISTEMA DE GRID VS. PIXEL PERFECT
52. ! @FerPeralesM #FSL2016 DISEÑADORES HACIAN PIXEL PERFECT
53. ! @FerPeralesM #FSL2016 PROGRAMADORES USABAN SISTEMA DE GRID
54. ! @FerPeralesM #FSL2016
55. ! @FerPeralesM #FSL2016 ¡TODOS USAMOS SISTEMA DE GRID!
56. ! @FerPeralesM #FSL2016
57. ! @FerPeralesM #FSL2016 ¿O NO?
58. ! @FerPeralesM #FSL2016 GUTTER
59. ! @FerPeralesM #FSL2016 ¿GUTTER?
60. ! @FerPeralesM #FSL2016
61. ! @FerPeralesM #FSL2016 BEFORE, AFTER, SPLIT, INSIDE, INSIDE-STATIC
62. ! @FerPeralesM #FSL2016 DISEÑADORES USABAN BEFORE
63. ! @FerPeralesM #FSL2016 PROGRAMADORES USABAN AFTER
64. ! @FerPeralesM #FSL2016
65. ! @FerPeralesM #FSL2016 …
66. ! @FerPeralesM #FSL2016 TODOS USAMOS BEFORE
67. ! @FerPeralesM #FSL2016 ENTREGAS
68. ! @FerPeralesM #FSL2016
69. ! @FerPeralesM #FSL2016 FACTOR AUTOBUS ATACA DE NUEVO
70. ! @FerPeralesM #FSL2016 http://img07.deviantart.net/15bb/i/2009/102/f/5/killer_bus_by_wendieee.jpg
71. ! @FerPeralesM #FSL2016
72. ! @FerPeralesM #FSL2016
73. #FSL2016 ! @FerPeralesM Las lecciones aprendidas
74. #FSL2016 ! @FerPeralesM DETENERTE PARA PONER ORDEN ESTÁ BIEN
75. #FSL2016 ! @FerPeralesM TOMARTE EL TIEMPO NECESARIO PARA ELEGIR TUS HERRAMIENTAS
76. #FSL2016 ! @FerPeralesM EN PROCESOS REPETITIVOS, ELABORA UNA METODOLOGÍA Y DOCUMÉNTALA
77. #FSL2016 ! @FerPeralesM REUTILIZA TODO LO QUE PUEDAS
78. #FSL2016 ! @FerPeralesM COMUNICACIÓN
79. #FSL2016 ! @FerPeralesM EMPATÍA Y RESPETO
80. #FSL2016 ! @FerPeralesM CONFIANZA
81. #FSL2016 ! @FerPeralesM PRÓXIMIDAD
82. #FSL2016 ! @FerPeralesM DESHAZTE DE TODO LO INNECESARIO
83. #FSL2016 ! @FerPeralesM EDUQUEN A SUS PROGRAMADORES DISEÑADORES:
84. #FSL2016 ! @FerPeralesM http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg
85. #FSL2016 ! @FerPeralesM EDUQUEN A SUS DISEÑADORES PROGRAMADORES:
86. #FSL2016 ! @FerPeralesM http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg
87. ! @FerPeralesM #FSL2016 AMBOS QUEREMOS HACER DE LA WEB UN LUGAR MEJOR http://designmodo.com/wp-content/uploads/2013/10/designervdeveloper.jpg
88. ! @FerPeralesM #FSL2016 ¿PREGUNTAS?
89. #FSL2016 ! @FerPeralesM ¡GRACIAS! hola@ferperales.net