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

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

6c137ee3013821b517c4b9beed0145df?s=128

Fernando Perales

October 29, 2016
Tweet

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