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:
   

   View Slide

2. #FSL2016
   ! @FerPeralesM
   
   

   View Slide

3. #FSL2016
   ! @FerPeralesM
   Senior Consultant
   MagmaLabs
   

   View Slide

4. #FSL2016
   ! @FerPeralesM
   Senior Consultant
   MagmaLabs
   ¡Psst! Estamos contratando
   careers.magmalabs.io
   

   View Slide

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
   

   View Slide

6. #FSL2016
   ! @FerPeralesM
   
   

   View Slide

7. #FSL2016
   ! @FerPeralesM
   Programadores
   vs.
   Diseñadores
   

   View Slide

8. ! @FerPeralesM #FSL2016
   Programadores
   vs.
   Diseñadores
   http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
   

   View Slide

9. ! @FerPeralesM #FSL2016
   “NADIE NOS ENSEÑA A
   TRABAJAR JUNTOS”
   

   View Slide

10. ! @FerPeralesM #FSL2016
    Fer Perales
    “NADIE NOS ENSEÑA A
    TRABAJAR JUNTOS”
    

    View Slide

11. #FSL2016
    ! @FerPeralesM
    El proyecto
    

    View Slide

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
    

    View Slide

13. GOPRO.COM
    

    View Slide

14. ABOUT US
    

    View Slide

15. CART
    

    View Slide

16. CATEGORIES
    

    View Slide

17. CONTACT US
    

    View Slide

18. HOME
    

    View Slide

19. PDP
    

    View Slide

20. ! @FerPeralesM #FSL2016
    

    View Slide

21. #FSL2016
    ! @FerPeralesM
    Los problemas
    

    View Slide

22. ! @FerPeralesM #FSL2016
    REPARTICIÓN DEL TRABAJO
    

    View Slide

23. ! @FerPeralesM #FSL2016
    

    View Slide

24. ! @FerPeralesM #FSL2016
    POR VISTA
    

    View Slide

25. ! @FerPeralesM #FSL2016
    POR RESOLUCIÓN
    

    View Slide

26. ! @FerPeralesM #FSL2016
    POR COMPONENTE
    

    View Slide

27. ! @FerPeralesM #FSL2016
    

    View Slide

28. ! @FerPeralesM #FSL2016
    RESOLUCIONES A
    CONSIDERAR
    

    View Slide

29. ! @FerPeralesM #FSL2016
    

    View Slide

30. ! @FerPeralesM #FSL2016
    

    View Slide

31. ! @FerPeralesM #FSL2016
    ELECCIÓN DE LAS
    HERRAMIENTAS
    

    View Slide

32. ! @FerPeralesM #FSL2016
    ROTACIÓN DE
    DESARROLLADORES
    

    View Slide

33. ! @FerPeralesM #FSL2016
    FACTOR AUTOBÚS
    

    View Slide

34. ! @FerPeralesM #FSL2016
    https://adamprescott.files.wordpress.com/2012/12/busfactor1.png
    

    View Slide

35. ! @FerPeralesM #FSL2016
    ¿ORDEN DEL TRABAJO?
    

    View Slide

36. ! @FerPeralesM #FSL2016
    PRIMERO ERA NECESARIO EL DISEÑO
    ANTES DE LA IMPLEMENTACIÓN
    

    View Slide

37. ! @FerPeralesM #FSL2016
    NO PODEMOS HACER QUE LOS
    DISEÑADORES TRABAJEN MÁS RÁPIDO
    

    View Slide

38. ! @FerPeralesM #FSL2016
    PERO…
    

    View Slide

39. ! @FerPeralesM #FSL2016
    PODEMOS HACER QUE
    PIERDAN MENOS TIEMPO
    

    View Slide

40. ! @FerPeralesM #FSL2016
    GUIDELINES
    

    View Slide

41. ! @FerPeralesM #FSL2016
    

    View Slide

42. ! @FerPeralesM #FSL2016
    ¿SCRUM/AGILE NECESARIO?
    

    View Slide

43. ! @FerPeralesM #FSL2016
    ¿SCRUM/AGILE NECESARIO?
    R: NO
    

    View Slide

44. ! @FerPeralesM #FSL2016
    COMPONENTES COMUNES
    PARA TODOS LOS TEMAS
    

    View Slide

45. ! @FerPeralesM #FSL2016
    ¡REUTILIZAR!
    

    View Slide

46. ! @FerPeralesM #FSL2016
    PARCIALES + SMACSS
    

    View Slide

47. ! @FerPeralesM #FSL2016
    

    View Slide

48. ! @FerPeralesM #FSL2016
    “SCALABLE AND MODULAR
    ARCHITECTURE FOR CSS (SMACSS)
    ES EL LIBRO QUE LE DA SENTIDO A
    HACER CSS”
    

    View Slide

49. ! @FerPeralesM #FSL2016
    “SCALABLE AND MODULAR
    ARCHITECTURE FOR CSS (SMACSS)
    ES EL LIBRO QUE LE DA SENTIDO A
    HACER CSS”
    Fer Perales
    

    View Slide

50. ! @FerPeralesM #FSL2016
    ASUNCIONES
    

    View Slide

51. ! @FerPeralesM #FSL2016
    SISTEMA DE GRID VS.
    PIXEL PERFECT
    

    View Slide

52. ! @FerPeralesM #FSL2016
    DISEÑADORES HACIAN PIXEL
    PERFECT
    

    View Slide

53. ! @FerPeralesM #FSL2016
    PROGRAMADORES USABAN
    SISTEMA DE GRID
    

    View Slide

54. ! @FerPeralesM #FSL2016
    

    View Slide

55. ! @FerPeralesM #FSL2016
    ¡TODOS USAMOS SISTEMA DE
    GRID!
    

    View Slide

56. ! @FerPeralesM #FSL2016
    

    View Slide

57. ! @FerPeralesM #FSL2016
    ¿O NO?
    

    View Slide

58. ! @FerPeralesM #FSL2016
    GUTTER
    

    View Slide

59. ! @FerPeralesM #FSL2016
    ¿GUTTER?
    

    View Slide

60. ! @FerPeralesM #FSL2016
    

    View Slide

61. ! @FerPeralesM #FSL2016
    BEFORE, AFTER, SPLIT, INSIDE,
    INSIDE-STATIC
    

    View Slide

62. ! @FerPeralesM #FSL2016
    DISEÑADORES USABAN
    BEFORE
    

    View Slide

63. ! @FerPeralesM #FSL2016
    PROGRAMADORES USABAN
    AFTER
    

    View Slide

64. ! @FerPeralesM #FSL2016
    

    View Slide

65. ! @FerPeralesM #FSL2016
    …
    

    View Slide

66. ! @FerPeralesM #FSL2016
    TODOS USAMOS BEFORE
    

    View Slide

67. ! @FerPeralesM #FSL2016
    ENTREGAS
    

    View Slide

68. ! @FerPeralesM #FSL2016
    

    View Slide

69. ! @FerPeralesM #FSL2016
    FACTOR AUTOBUS ATACA DE
    NUEVO
    

    View Slide

70. ! @FerPeralesM #FSL2016
    http://img07.deviantart.net/15bb/i/2009/102/f/5/killer_bus_by_wendieee.jpg
    

    View Slide

71. ! @FerPeralesM #FSL2016
    

    View Slide

72. ! @FerPeralesM #FSL2016
    

    View Slide

73. #FSL2016
    ! @FerPeralesM
    Las lecciones
    aprendidas
    

    View Slide

74. #FSL2016
    ! @FerPeralesM
    DETENERTE PARA PONER
    ORDEN ESTÁ BIEN
    

    View Slide

75. #FSL2016
    ! @FerPeralesM
    TOMARTE EL TIEMPO NECESARIO
    PARA ELEGIR TUS HERRAMIENTAS
    

    View Slide

76. #FSL2016
    ! @FerPeralesM
    EN PROCESOS REPETITIVOS, ELABORA
    UNA METODOLOGÍA Y DOCUMÉNTALA
    

    View Slide

77. #FSL2016
    ! @FerPeralesM
    REUTILIZA TODO LO QUE
    PUEDAS
    

    View Slide

78. #FSL2016
    ! @FerPeralesM
    COMUNICACIÓN
    

    View Slide

79. #FSL2016
    ! @FerPeralesM
    EMPATÍA Y RESPETO
    

    View Slide

80. #FSL2016
    ! @FerPeralesM
    CONFIANZA
    

    View Slide

81. #FSL2016
    ! @FerPeralesM
    PRÓXIMIDAD
    

    View Slide

82. #FSL2016
    ! @FerPeralesM
    DESHAZTE DE TODO LO
    INNECESARIO
    

    View Slide

83. #FSL2016
    ! @FerPeralesM
    EDUQUEN A SUS
    PROGRAMADORES
    DISEÑADORES:
    

    View Slide

84. #FSL2016
    ! @FerPeralesM
    http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg
    

    View Slide

85. #FSL2016
    ! @FerPeralesM
    EDUQUEN A SUS
    DISEÑADORES
    PROGRAMADORES:
    

    View Slide

86. #FSL2016
    ! @FerPeralesM
    http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg
    

    View Slide

87. ! @FerPeralesM #FSL2016
    AMBOS QUEREMOS
    HACER DE LA WEB
    UN LUGAR MEJOR
    http://designmodo.com/wp-content/uploads/2013/10/designervdeveloper.jpg
    

    View Slide

88. ! @FerPeralesM #FSL2016
    ¿PREGUNTAS?
    

    View Slide

89. #FSL2016
    ! @FerPeralesM
    ¡GRACIAS!
    hola@ferperales.net
    

    View Slide