Tips para mejorar las relaciones entre diseñadores y desarrolladores: handoffs

A menudo y según la madurez de UX de una empresa, los equipos de diseño tras validar sus propuestas de actuación con stakeholders, preparan la entrega de sus diseños a los equipos de desarrollo siguiendo un protocolo habitual de actuación. Esta acción requiere de ciertas consideraciones importantes para lograr una transferencia correcta de los entregables: hemos de ser conscientes que el objetivo final de esto es trasladar la comprensión global del diseño para que pueda ser implementado correctamente y sea igual que lo que hemos validado previamente con usuarios finales o stakeholders.

¿Qué es un Handoff de diseño?    

Es común la creencia (errónea) de que este implica únicamente nuestros diseños en Figma. Si bien podemos entenderlos nosotros como sus creadores, es posible que no sea suficiente para los developers. En este faltan detalles, criterios de aceptación o la comprensión global del funcionamiento de los prototipos. Muchas implicaciones están implícitas más allá de la interfaz de diseño, por lo que caemos en el riesgo de que no acaban implementadas. 

Por eso, nuestro Handoff ideal debería de cumplir con ciertas fases de protocolo más allá de lo que tengamos por entregar:

1. El contexto del diseño

Como ya hemos dicho, debemos agrupar en un documento todos las notas y decisiones de diseño que se han tomado y que expliquen el por qué de cada una de las partes de nuestro diseño. Con esto queremos dar contexto adicional, link directo a recursos que ayuden a comprender ciertos tramos, documentación de producto…

2. Flujo de usuario

Con las pantallas no es suficiente. Un añadido especial dentro de este es trasladar la lógica principal de las decisiones de usuario, así se presenta al desarrollar más información de cómo se conecta todo y qué respuestas tendrán distintos elementos que aparecen en la interfaz.

Ver también: User journey y user flows.

3. Columnas de documentación

Un extra que podemos dar a nuestro diseño es acompañarlo de columnas en las que expliquemos de forma seguida los elementos que aparecen en nuestra interfaz y sus posibles respuestas. Esta columna no solo tiene el propósito de dejar anotado esto: toda la información relativa a las especificaciones técnicas será crucial para ayudar al manejo del prototipo a los desarrolladores. 

Por ejemplo, si nuestro diseño es una actualización o rediseño de pantallas anteriores, podemos señalar las características añadidas o modificadas y destacar los cambios que se han realizado.

Tips para mejorar el traspaso de un diseño

La colaboración efectiva entre diseñadores y desarrolladores es esencial para el éxito de cualquier proyecto digital. A continuación, dejamos algunos tips para mejorar el traspaso de un diseño (y sus añadidos) al equipo de desarrollo:

• La colaboración entre diseñadores y desarrolladores comienza desde el principio:  durante el proceso de selección de propuestas, se pueden corroborar los esfuerzos que pueden llegar a tener una u otra solución, y también llegar a acuerdos respecto a la eficiencia del proyecto.
• Clasificar y separar los diseños de los entregables: nuestro diseño una vez validado, tal y como hemos dicho, no es el diseño final. En pos de conservar el diseño original y no contaminar la información con versiones anteriores o apuntes internos que puedan generar confusión a los developers.
• Los edge cases, siempre: es normal que algunas casuísticas puedan surgir una vez se esté desarrollando nuestras pantallas y toque realizar una iteración. Sin embargo, es primordial tener en cuenta todos los casos extremos que puedan suceder dentro de nuestro flujo, algo que debemos de poder haber sacado en los procesos posteriores a la investigación enfocada en el usuario. 
• Considerar lo primordial: antes de enviar, hemos de comprender cómo va a funcionar la lógica interior de los desarrolladores a la hora de implementar y maquetar nuestros diseños. Considerar entregar en un ordenamiento balanceado entre las lógicas de diseño y el orden de implementación de desarrollo nos ayudará a manejar el proceso de entrega de una forma más eficiente, y con menos roces. 
• Pensar en diseñar pantallas en distintos tamaños: la responsividad es crucial no solo para los desarrolladores, sino también para los diseñadores. Por ello, debemos de considerar los breakpoints y el razonamiento de las capacidades responsivas que queremos desde el diseño para que no existan malentendidos a la hora del comportamiento responsive de nuestro diseño.

Un handoff de diseño efectivo va más allá de entregar archivos; implica comunicar claramente el contexto y la lógica detrás de cada decisión. Siguiendo estos principios y consejos, se facilita una transición fluida entre diseño y desarrollo, garantizando que el producto final refleje la visión original y ofrezca la experiencia de usuario que estamos buscando. 

La clave está en la colaboración y en la atención a los detalles, asegurando una comprensión común del proyecto por todo el equipo.

Foto de portada de krakenimages en Unsplash.