Red light, green light: the do's and don'ts of a successful dev-design workflow (Luz roja, luz verde: qué hacer y qué no hacer para un flujo de trabajo exitoso entre programadores y diseñadores

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 DrupalCamp GDL.

Event page: www.drupalcampgdl.com

Talk info: www.drupalcampgdl.com/es/charlas/luz-roja-luz-verde-que-hacer-y-que-no-hacer-para-un-flujo-de-trabajo-exitoso-entre

Transcript

1. #DrupalCampMX
   @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. #DrupalCampMX
   @FerPeralesM
   
   

   View Slide

3. #DrupalCampMX
   @FerPeralesM
   Ingeniero de Software
   MagmaLabs
   

   View Slide

4. #DrupalCampMX
   @FerPeralesM
   Ingeniero de Software
   MagmaLabs
   ¡Psst! Estamos contratando
   careers.magmalabs.io
   

   View Slide

5. #DrupalCampMX
   @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. #DrupalCampMX
   @FerPeralesM
   
   

   View Slide

7. #DrupalCampMX
   @FerPeralesM
   Programadores
   vs.
   Diseñadores
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. #DrupalCampMX
    @FerPeralesM
    El proyecto
    

    View Slide

12. #DrupalCampMX
    @FerPeralesM
    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. #DrupalCampMX
    @FerPeralesM
    

    View Slide

21. #DrupalCampMX
    @FerPeralesM
    Los problemas
    

    View Slide

22. #DrupalCampMX
    @FerPeralesM
    REPARTICIÓN DEL TRABAJO
    

    View Slide

23. #DrupalCampMX
    @FerPeralesM
    

    View Slide

24. #DrupalCampMX
    @FerPeralesM
    POR VISTA
    

    View Slide

25. #DrupalCampMX
    @FerPeralesM
    POR RESOLUCIÓN
    

    View Slide

26. #DrupalCampMX
    @FerPeralesM
    POR COMPONENTE
    

    View Slide

27. #DrupalCampMX
    @FerPeralesM
    

    View Slide

28. #DrupalCampMX
    @FerPeralesM
    RESOLUCIONES A
    CONSIDERAR
    

    View Slide

29. #DrupalCampMX
    @FerPeralesM
    

    View Slide

30. #DrupalCampMX
    @FerPeralesM
    

    View Slide

31. #DrupalCampMX
    @FerPeralesM
    ELECCIÓN DE LAS
    HERRAMIENTAS
    

    View Slide

32. #DrupalCampMX
    @FerPeralesM
    ROTACIÓN DE
    DESARROLLADORES
    

    View Slide

33. #DrupalCampMX
    @FerPeralesM
    FACTOR AUTOBÚS
    

    View Slide

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

    View Slide

35. #DrupalCampMX
    @FerPeralesM
    ¿ORDEN DEL TRABAJO?
    

    View Slide

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

    View Slide

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

    View Slide

38. #DrupalCampMX
    @FerPeralesM
    PERO…
    

    View Slide

39. #DrupalCampMX
    @FerPeralesM
    PODEMOS HACER QUE
    PIERDAN MENOS TIEMPO
    

    View Slide

40. #DrupalCampMX
    @FerPeralesM
    GUIDELINES
    

    View Slide

41. #DrupalCampMX
    @FerPeralesM
    

    View Slide

42. #DrupalCampMX
    @FerPeralesM
    ¿SCRUM/AGILE NECESARIO?
    

    View Slide

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

    View Slide

44. #DrupalCampMX
    @FerPeralesM
    COMPONENTES COMUNES
    PARA TODOS LOS TEMAS
    

    View Slide

45. #DrupalCampMX
    @FerPeralesM
    ¡REUTILIZAR!
    

    View Slide

46. #DrupalCampMX
    @FerPeralesM
    PARCIALES + SMACCS
    

    View Slide

47. #DrupalCampMX
    @FerPeralesM
    

    View Slide

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

    View Slide

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

    View Slide

50. #DrupalCampMX
    @FerPeralesM
    ASUNCIONES
    

    View Slide

51. #DrupalCampMX
    @FerPeralesM
    SISTEMA DE GRID VS.
    PIXEL PERFECT
    

    View Slide

52. #DrupalCampMX
    @FerPeralesM
    DISEÑADORES HACIAN PIXEL
    PERFECT
    

    View Slide

53. #DrupalCampMX
    @FerPeralesM
    PROGRAMADORES USABAN
    SISTEMA DE GRID
    

    View Slide

54. #DrupalCampMX
    @FerPeralesM
    

    View Slide

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

    View Slide

56. #DrupalCampMX
    @FerPeralesM
    

    View Slide

57. #DrupalCampMX
    @FerPeralesM
    ¿O NO?
    

    View Slide

58. #DrupalCampMX
    @FerPeralesM
    GUTTER
    

    View Slide

59. #DrupalCampMX
    @FerPeralesM
    ¿GUTTER?
    

    View Slide

60. #DrupalCampMX
    @FerPeralesM
    

    View Slide

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

    View Slide

62. #DrupalCampMX
    @FerPeralesM
    DISEÑADORES USABAN
    BEFORE
    

    View Slide

63. #DrupalCampMX
    @FerPeralesM
    PROGRAMADORES USABAN
    AFTER
    

    View Slide

64. #DrupalCampMX
    @FerPeralesM
    

    View Slide

65. #DrupalCampMX
    @FerPeralesM
    …
    

    View Slide

66. #DrupalCampMX
    @FerPeralesM
    TODOS USAMOS BEFORE
    

    View Slide

67. #DrupalCampMX
    @FerPeralesM
    ENTREGAS
    

    View Slide

68. #DrupalCampMX
    @FerPeralesM
    

    View Slide

69. #DrupalCampMX
    @FerPeralesM
    FACTOR AUTOBUS ATACA DE
    NUEVO
    

    View Slide

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

    View Slide

71. #DrupalCampMX
    @FerPeralesM
    

    View Slide

72. #DrupalCampMX
    @FerPeralesM
    

    View Slide

73. #DrupalCampMX
    @FerPeralesM
    Las lecciones
    aprendidas
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. #DrupalCampMX
    @FerPeralesM
    REUTILIZA TODO LO QUE
    PUEDAS
    

    View Slide

78. #DrupalCampMX
    @FerPeralesM
    COMUNICACIÓN
    

    View Slide

79. #DrupalCampMX
    @FerPeralesM
    EMPATÍA Y RESPETO
    

    View Slide

80. #DrupalCampMX
    @FerPeralesM
    CONFIANZA
    

    View Slide

81. #DrupalCampMX
    @FerPeralesM
    PRÓXIMIDAD
    

    View Slide

82. #DrupalCampMX
    @FerPeralesM
    DESASTE DE TODO LO
    INNECESARIO
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

88. #DrupalCampMX
    @FerPeralesM
    ¿PREGUNTAS?
    

    View Slide

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

    View Slide