$30 off During Our Annual Pro Sale. View Details »

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

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

Fernando Perales

April 09, 2016
Tweet

More Decks by Fernando Perales

Other Decks in Programming

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!
    [email protected]

    View Slide