Una guía completa para el traspaso entre diseñador y desarrollador

Ya sea que sea una startup, un gigante tecnológico establecido o algo intermedio, es prácticamente imposible llevar un producto desde la idea hasta el lanzamiento sin atravesar una serie de traspasos, idas y venidas e iteraciones.

Una fuente clave de fricción es que los diseñadores y desarrolladores tradicionalmente realizan tareas muy diferentes al crear un producto. Por lo tanto, un traspaso que a menudo afecta incluso a los equipos de producto más maduros es el que se produce entre el diseñador y el desarrollador.

Hoy profundizaremos en la transferencia del diseño al desarrollo y explicaremos cómo usar algunas soluciones como:

• Comunicación impecable y mejor entre equipos multifuncionales.
• Uso de herramientas de automatización con kits de interfaz de usuario completos y funciones de desarrollo.
• Aclarar detalles como dónde se encuentran todos los activos de diseño para que los equipos puedan realizar un seguimiento de ellos rápida y fácilmente.

Entonces, si desea aprender todo sobre las formas prácticas de manejar estas transferencias, esta guía es para usted.

¿Qué es el traspaso de desarrollador y dónde se desglosa?

La transferencia del desarrollador es a menudo la etapa más crítica, aunque frustrante, en el proceso de desarrollo de un producto digital: la etapa en la que un diseño o prototipo está listo para que los desarrolladores lo implementen.

Uno de los problemas con el traspaso diseñador-desarrollador podría residir en la terminología misma. “Handoff” sugiere que el diseño se entrega al desarrollador, y ahora es responsabilidad del desarrollador darle vida al producto. Sin embargo, ningún diseño está completo hasta que los usuarios utilizan el producto. Por lo tanto, es imperativo que los diseñadores y desarrolladores se comuniquen durante las fases de diseño y desarrollo.

En el flujo de trabajo tradicional, los diseñadores trabajan en silos, entre la fase de descubrimiento y el desarrollo, para crear maquetas con píxeles perfectos basadas en un resumen. Luego, después de la aprobación del cliente, se los arrojaban por encima de la pared a los desarrolladores. Este proceso está plagado de problemas. Porque aunque los diseñadores hacen todo lo posible para crear soluciones digitales que estén perfectamente medidas y elaboradas de manera consistente, los diseños y los sistemas de diseño no se traducen con fluidez en sistemas de desarrollo.

Parte del problema es que cuanto más hace el diseñador con una interfaz de usuario, más debe comunicarse con el desarrollador. Por lo tanto, no basta con entregar un archivo de diseño Sketch, por ejemplo, y dejar que el desarrollador lo ejecute. Los diseñadores deben proporcionar especificaciones de diseño que expliquen cómo se deben distribuir, espaciar, diseñar, colorear, conectar todas las piezas móviles, etc. Ha sido la única manera de garantizar que una aplicación termine con píxeles perfectos al final. Incluso entonces, todavía requiere mucha implementación por parte del desarrollador una vez que está dentro de su IDE.

Los desarrolladores no suelen tener la costumbre de codificar con HTML y CSS, lo cual es un trabajo tedioso y solo representa la interfaz de usuario. Hay mucho más código detrás de escena que hace que una aplicación web funcione y no todos los desarrolladores son expertos o están interesados en aprender a escribir el marcado de la interfaz de usuario. Cuando se ven obligados a asumir esta posición, la pronunciada curva de aprendizaje agrega más tiempo a los proyectos y las reelaboraciones y depuraciones resultantes hacen que los costos se salgan de control.

Mejorar la comunicación entre diseñador y desarrollador

A lo largo de los años, hemos observado de cerca la división entre diseñadores y desarrolladores y hemos identificado áreas donde las mejoras podrían crear una transferencia más rápida, menos polémica y más ágil. La buena comunicación es clave en prácticamente cualquier relación, por lo que tiene sentido que sea un requisito para una transferencia fluida del diseño al desarrollo. Las fallas en la comunicación pueden resultar en todo tipo de problemas y malentendidos, incluso en diferentes interpretaciones de los mismos objetivos, lo que puede llevar a una experiencia de usuario confusa o francamente mala. Y ningún equipo de producto tiene tiempo para eso.

Los problemas comunes causados por una mala comunicación entre diseñador y desarrollador son:

• Múltiples ciclos de retroalimentación innecesarios entre diseñadores y desarrolladores.
• Problemas inesperados de control de calidad o problemas de control de calidad que requieren más tiempo de lo previsto
• Incapacidad para aprovechar habilidades superpuestas
• No aprovechar adecuadamente las nuevas herramientas que probablemente facilitarían la colaboración.

Utilice un sistema de diseño

“Los sistemas de diseño son una inversión. Muchas empresas no emplean personas para centrarse en los sistemas de diseño hasta que las ineficiencias de no tener uno se vuelven demasiado dolorosas de soportar”.

–Diana Mounter, GitHub

Un sistema de diseño, en términos simples, representa un inventario deliberado de patrones de UX y guías de estilo de marca que luego se implementan como componentes de software coincidentes que pueden reutilizarse o contextualizarse para crear aplicaciones de software. Un sistema de diseño también se puede ampliar para incluir guías de voz y tonos para escribir contenido, plantillas de páginas e incluso flujos de usuarios. Está diseñado a mano para el dominio de aplicación y el contexto de uso específicos de cada organización. Por encima de todo, sirve como una fuente única de información para los equipos de productos al crear aplicaciones y representa un contrato de colaboración entre diseño y desarrollo.

Sin un sistema de diseño, los diseñadores no tienen parámetros claros que limiten su trabajo. Es posible que se vuelvan demasiado creativos y creen inconsistencias que generen malas experiencias de usuario y frustración para los desarrolladores. Todo esto dificulta el proceso de transferencia.

Involucrar a los desarrolladores desde el principio

Como se mencionó anteriormente, un error común que cometen los equipos es esperar a que los diseñadores hagan su trabajo primero y luego pasar el diseño del producto a los desarrolladores. Esto no sólo puede resultar confuso, sino que también puede resultar un poco condescendiente (“¡Aquí tienes, ya terminé, adiós!”).

Para que la transferencia sea más exitosa, una práctica recomendada es involucrar a los desarrolladores con anticipación con estos pasos:

• Incluir al desarrollador principal del proyecto (o al desarrollador de la interfaz de usuario como mínimo) en la discusión inicial sobre la idea.
• Incluir desarrollo en cada reunión donde se discuta el diseño de pantalla y el diseño de interacción.
• Si estás en una agencia, incluye el desarrollo en las conferencias telefónicas con los clientes.
• Buscar información de los desarrolladores sobre cómo los elementos de diseño probablemente se traducirían en una aplicación web o una aplicación móvil frente a una aplicación de escritorio.
• Ejecutar las ideas de diseño iniciales ante los desarrolladores, de modo que cualquier problema potencial con el código pueda identificarse cuando sea más fácil de ajustar.

Haga el almuerzo o reuniones remotas

En lugar de dejar que todos trabajen en silos, reúnalos al menos ocasionalmente. Animar a todo el equipo a almorzar juntos es un paso importante hacia el intercambio espontáneo de ideas. Además, si es físicamente posible, considere reunir a los miembros del equipo que trabajan en la misma función en la misma sala.

Si tiene diseñadores y desarrolladores trabajando en diferentes ubicaciones, organice reuniones virtuales de vez en cuando y permítales discutir el progreso de su trabajo. Es sorprendente lo que un poco de interacción humana puede hacer por su entorno de trabajo y los resultados de sus productos.

También discutiremos en breve cómo involucrar a los diseñadores y desarrolladores en las primeras etapas del proceso se puede mejorar dramáticamente con un sistema completo de diseño a código.

Proporcionar archivos de diseño y todos los activos necesarios

Una parte de la responsabilidad de cada diseñador es preparar a los desarrolladores para el éxito.

Una de las primeras cosas que puede ayudarle a lograrlo es proporcionar a los desarrolladores todos los archivos y recursos de diseño necesarios. Vuelve a tus planes: ¿aceptaste hacerlo todo a través de Dropbox, Google Drive o alguna otra herramienta? Comunique dónde se encuentran esos activos y mantenga abiertas las líneas de comunicación para abordar cualquier pieza faltante, pregunta o inquietud.

Tener una reunión de traspaso

Tener una reunión de traspaso es una de las formas más efectivas de ejecutar un traspaso adecuado entre los equipos de diseño y desarrollo. Es una excelente manera de sacar todo a la luz, abordar preguntas candentes y hacer que todo el equipo se entusiasme y motive para el trabajo que tiene por delante. Analice las peculiaridades y preguntas de ambas partes y prepárese para lo que vendrá en las fases de desarrollo, control de calidad y lanzamiento. Establezca cronogramas y expectativas claras, nombrando a las personas específicas encargadas de garantizar que cada fase llegue a la meta.

Considere fomentar una comprensión mutua de las habilidades y conceptos básicos proporcionando nuevos recursos para aprender. Por ejemplo, alienta a los diseñadores a aprender los conceptos básicos de codificación para comprender mejor por qué algunos diseños no se pueden traducir a código funcional. Al mismo tiempo, ayuda a los desarrolladores a aprender más sobre el diseño y cómo se utilizan los diferentes elementos de diseño.

Traspaso del desarrollador Figma

Si bien herramientas como Figma prometen una transferencia simplificada a los desarrolladores, en realidad no es así. El problema con la transferencia de desarrollador Figma o la transferencia de desarrollador Sketch es que están haciendo la parte menos compleja de lo que realmente les importa a los desarrolladores. En una herramienta de transferencia de desarrolladores, el objetivo del desarrollador es minimizar el tiempo de desarrollo, reducir el tiempo de codificación de UI complejas y acelerar la productividad del equipo. La mayoría de estos esquemas de transferencia de desarrolladores en Figma o Sketch son simplemente copiar y pegar HTML o CSS (o "Marcado") para un elemento de interfaz de usuario específico en una pantalla. El desarrollador aún necesita escribir el código de pantalla complejo, incluido el diseño, la ubicación de los elementos de la interfaz de usuario y garantizar que el código del elemento de la interfaz de usuario "transmitido" desde la herramienta de diseño sea correcto.

Ejemplo típico de cómo se ve una transferencia de desarrollador en Figma o Sketch

Con App Builder ™ de código bajo, obtienes el mismo concepto de transferencia de desarrollador Figma o transferencia de desarrollador Sketch, pero si sigues leyendo, verás que nuestra herramienta lleva esta transferencia de desarrollador a otro nivel.

Ejemplo de cómo se ve una herramienta de marcado de código/línea roja en App Builder.

Traspaso del desarrollador App Builder

Como se mencionó brevemente anteriormente, una parte clave para mejorar la transferencia del diseño al desarrollo es convertir de manera eficiente los diseños en código HTML. Muchas plataformas de diseño se centran casi exclusivamente en la parte de diseño y luego utilizan complementos y otras soluciones para preparar archivos de diseño para el desarrollador.

Pero, ¿qué pasaría si tuviera una plataforma completa centrada en el diseño a código: una única plataforma de desarrollo digital que permite el diseño y la creación de prototipos, pero que también genera código Angular completo y con píxeles perfectos con un solo clic?

¿Cómo se vería esto usando Sketch como ejemplo?

Con App Builder y nuestro kit de interfaz de usuario para Sketch, todo lo que creas en Sketch (también disponible para Figma) utiliza un sistema de diseño, por lo que todas las especificaciones de estilo y temas coinciden con los componentes reales Angular. Con solo hacer clic en un botón, puede generar código HTML, CSS y Angular de alta calidad, directamente desde su diseño.

App Builder te ofrece 2 opciones para pasar del diseño al código:

1. Utilice el complemento Visual Studio Code para seleccionar componentes o pantallas y permita que el servicio basado en la nube genere código e inyectelo en su aplicación Angular existente.
2. Arrastre su archivo Sketch directamente a su espacio de trabajo en App Builder y use el diseñador WYSIWYG para continuar editando su diseño o simplemente obtenga su código con 1 clic.

Lo que un desarrollador realmente quiere: código listo para producción que pueda usarse inmediatamente en su aplicación.

Aquí hay partes de una exportación de código Sketch:

• Todos los recursos Sketch se importan desde un archivo de proyecto
• No todos los diseños tienen capas estructuradas para la salida HTML, por lo que es importante utilizar una herramienta que analice y reestructure los elementos de diseño según sea necesario para una salida HTML de alta calidad.
• Puede convertir elementos de diseño en elementos HTML como botón, entrada o seleccionar según sea necesario, y editar elementos visualmente, agruparlos y organizarlos manualmente.
• Puede publicar su diseño y compartirlo con otros, permitiendo que todos descarguen el resultado HTML/CSS.
• Se basa únicamente en HTML y CSS, no utiliza ni asume ningún Javascript en la salida. Un desarrollador puede utilizar el HTML de salida con Angular, React, VueJS o cualquier otra biblioteca frontend.

App Builder destaca por la calidad de nuestro código. Infragistics no es un recién llegado al desafío de producir componentes de interfaz de usuario de la mejor calidad; Llevamos más de 30 años en esto. Hemos creado componentes para empresas Fortune 500 que dependen de nuestras cuadrículas y gráficos todos los días para manejar transacciones financieras en tiempo real, conversión de energía para infraestructura a gran escala o transmisión de datos de IoT.

Generamos código limpio, listo para producción, que es utilizable, depurable y que puede resistir el paso del tiempo. Y obtienes el paquete completo, compatibilidad con herramientas de diseño, sistemas de diseño, kits de interfaz de usuario, creación de prototipos, pruebas de usuario y generación de código 100% listo para producción.

Derribando las barreras

Se está produciendo mucha actividad a medida que las empresas reconocen que lanzar mejores aplicaciones más rápido significa reducir las barreras de transferencia. Los nuevos enfoques deberían centrarse en desterrar la idea del “traspaso” y hacer que los diseñadores y desarrolladores comiencen a trabajar juntos antes y con más frecuencia. Celebre reuniones en persona o remotas, comuníquese más, resuelvan problemas juntos y utilice herramientas como sistemas de diseño y software de diseño a código que reducen drásticamente el tiempo de envío. El software de diseño a código, en particular, ayuda a reducir la falta de comunicación, los errores y los niveles de frustración al proporcionar un lugar de referencia para diseñadores y desarrolladores. Y permite que todos los involucrados en el proceso de diseño de productos digitales, incluidas las partes interesadas, los evaluadores y los usuarios, contribuyan de manera más fácil y efectiva a un producto final con el que todos puedan estar satisfechos.

Para ver cómo nuestro WYSIWYG App Builder ayuda a acelerar el diseño a código y cumple la promesa de un diseño real al traspaso del desarrollador, mire este video rápido y regístrese para una prueba, o puede ver esta descripción general completa del producto App Builder y el tutorial a continuación para obtener más información. todo sobre sus características y capacidades y comience a utilizarlo.

Si tiene alguna pregunta, envíeme un correo electrónico a jasonb@infragistics.com y hablemos.