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

6c137ee3013821b517c4b9beed0145df?s=128

Fernando Perales

April 09, 2016
Tweet

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:
  2. #DrupalCampMX @FerPeralesM <me>

  3. #DrupalCampMX @FerPeralesM Ingeniero de Software MagmaLabs

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

  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
  6. #DrupalCampMX @FerPeralesM </me>

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

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

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

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

  11. #DrupalCampMX @FerPeralesM El proyecto

  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
  13. GOPRO.COM

  14. ABOUT US

  15. CART

  16. CATEGORIES

  17. CONTACT US

  18. HOME

  19. PDP

  20. #DrupalCampMX @FerPeralesM

  21. #DrupalCampMX @FerPeralesM Los problemas

  22. #DrupalCampMX @FerPeralesM REPARTICIÓN DEL TRABAJO

  23. #DrupalCampMX @FerPeralesM

  24. #DrupalCampMX @FerPeralesM POR VISTA

  25. #DrupalCampMX @FerPeralesM POR RESOLUCIÓN

  26. #DrupalCampMX @FerPeralesM POR COMPONENTE

  27. #DrupalCampMX @FerPeralesM

  28. #DrupalCampMX @FerPeralesM RESOLUCIONES A CONSIDERAR

  29. #DrupalCampMX @FerPeralesM

  30. #DrupalCampMX @FerPeralesM

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

  32. #DrupalCampMX @FerPeralesM ROTACIÓN DE DESARROLLADORES

  33. #DrupalCampMX @FerPeralesM FACTOR AUTOBÚS

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

  35. #DrupalCampMX @FerPeralesM ¿ORDEN DEL TRABAJO?

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

    IMPLEMENTACIÓN
  37. #DrupalCampMX @FerPeralesM NO PODEMOS HACER QUE LOS DISEÑADORES TRABAJEN MÁS

    RÁPIDO
  38. #DrupalCampMX @FerPeralesM PERO…

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

  40. #DrupalCampMX @FerPeralesM GUIDELINES

  41. #DrupalCampMX @FerPeralesM

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

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

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

  45. #DrupalCampMX @FerPeralesM ¡REUTILIZAR!

  46. #DrupalCampMX @FerPeralesM PARCIALES + SMACCS

  47. #DrupalCampMX @FerPeralesM

  48. #DrupalCampMX @FerPeralesM “SCALABLE AND MODULAR ARCHITECTURE FOR CSS (SMACSS) ES

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

    EL LIBRO QUE LE DA SENTIDO A HACER CSS” Fer Perales
  50. #DrupalCampMX @FerPeralesM ASUNCIONES

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

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

  53. #DrupalCampMX @FerPeralesM PROGRAMADORES USABAN SISTEMA DE GRID

  54. #DrupalCampMX @FerPeralesM

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

  56. #DrupalCampMX @FerPeralesM

  57. #DrupalCampMX @FerPeralesM ¿O NO?

  58. #DrupalCampMX @FerPeralesM GUTTER

  59. #DrupalCampMX @FerPeralesM ¿GUTTER?

  60. #DrupalCampMX @FerPeralesM

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

  62. #DrupalCampMX @FerPeralesM DISEÑADORES USABAN BEFORE

  63. #DrupalCampMX @FerPeralesM PROGRAMADORES USABAN AFTER

  64. #DrupalCampMX @FerPeralesM

  65. #DrupalCampMX @FerPeralesM …

  66. #DrupalCampMX @FerPeralesM TODOS USAMOS BEFORE

  67. #DrupalCampMX @FerPeralesM ENTREGAS

  68. #DrupalCampMX @FerPeralesM

  69. #DrupalCampMX @FerPeralesM FACTOR AUTOBUS ATACA DE NUEVO

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

  71. #DrupalCampMX @FerPeralesM

  72. #DrupalCampMX @FerPeralesM

  73. #DrupalCampMX @FerPeralesM Las lecciones aprendidas

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

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

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

  77. #DrupalCampMX @FerPeralesM REUTILIZA TODO LO QUE PUEDAS

  78. #DrupalCampMX @FerPeralesM COMUNICACIÓN

  79. #DrupalCampMX @FerPeralesM EMPATÍA Y RESPETO

  80. #DrupalCampMX @FerPeralesM CONFIANZA

  81. #DrupalCampMX @FerPeralesM PRÓXIMIDAD

  82. #DrupalCampMX @FerPeralesM DESASTE DE TODO LO INNECESARIO

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

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

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

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

  87. #DrupalCampMX @FerPeralesM AMBOS QUEREMOS HACER DE LA WEB UN LUGAR

    MEJOR http://designmodo.com/wp-content/uploads/2013/10/designervdeveloper.jpg
  88. #DrupalCampMX @FerPeralesM ¿PREGUNTAS?

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