Trabajo colaborativo entre diseñadores y desarrolladores

La colaboración entre diseñadores y desarrolladores es fundamental para el éxito de un proyecto. Un flujo de trabajo bien organizado nos permite cumplir con las expectativas del cliente, realizar cambios y mantener una buena comunicación entre los distintos equipos.

En este artículo vamos a hablar, desde la perspectiva de un desarrollador, las herramientas que utilizamos y la metodología que adoptamos para tener un  flujo de trabajo colaborativo entre los equipos de diseño y desarrollo en 1xINTERNET.

Empezar a desarrollar un proyecto desde cero puede ser complicado, especialmente si no tenemos un buen flujo de trabajo entre los equipos de diseño y desarrollo. A veces, como desarrolladores, no entendemos el diseño UX propuesto, o malinterpretamos estilos o comportamientos al implementar estructuras de diseño.

A menudo, tenemos que volver a revisar el diseño, analizando cada componente de forma individual para garantizar la coherencia. A veces, tenemos que adivinar el comportamiento de ciertos elementos (como el comportamiento de los enlaces al pasar el ratón por encima) porque en el diseño no se especifica nada sobre el comportamiento de ciertos elementos.

Es muy importante definir una buena base y estructura para los proyectos. Esto facilita el desarrollo, ya que sabemos exactamente dónde dirigirnos para consultar cierta información. Siempre utilizamos la misma estructura, por lo que podemos cambiar fácilmente de un proyecto a otro. Independientemente del proyecto en el que estemos trabajando, sabemos dónde dirigirnos para encontrar la información de estilos que necesitamos. ¿Cómo definimos el proceso más adecuado para alinear nuestro flujo de trabajo entre diseño y desarrollo?

Reuniones de validación: alineación entre diseñadores, desarrolladores y clientes

Es importante que haya una buena comunicación entre los equipos. Por eso organizamos reuniones periódicas de validación para asegurarnos de que los diseñadores y desarrolladores se ajusten a los requisitos del cliente. Se trata de una parte fundamental del proceso en la que podemos levantar la mano cuando algo no está claro, o comprobar los últimos cambios para asegurarnos de que estén bien implementados (sobre todo cuando el proyecto está en fase intermedia o se acerca a una fase final).

Estructura coherente para agilizar cambios entre proyectos

Siempre utilizamos la misma estructura para las plantillas. Esto agiliza los cambios entre proyectos, ya que sabemos dónde encontrar los elementos principales. La plantilla funciona como un puente entre el diseñador y el desarrollador.

Mejoras continuas para obtener el máximo rendimiento

Seguimos un proceso de revisión y control de calidad. Los desarrolladores participan en los proyectos desde el principio hasta el final. Esto significa que si encontramos una nueva característica que podemos utilizar en otros proyectos, la implementamos en el tema base y luego podemos añadirla en el resto de proyectos.

Para el equipo de diseño:

Los diseños se documentan en Figma, la herramienta que utilizamos para gestionar el flujo de trabajo entre diseñadores y desarrolladores. Una vez que tenemos un proyecto configurado, es fácil aplicarlo y adaptarlo gracias a la creación de tokens de diseño (foundations), patterns y componentes.

Para el equipo de desarrollo:

• Lit para el diseño atómico basado en web components.
• Storybook para visualizar los cambios, diseño y funcionalidad de los web components.
• Tailwind para los estilos.
• Drupal y Twig para integrar los componentes con datos reales.

Lo primero que hacemos para cada nuevo proyecto es configurar un tema base y un sistema de diseño. 

En el sistema de diseño, tenemos un diseño atómico, lo que significa crear un sistema compuesto de componentes individuales que se pueden unir para crear elementos y plantillas. Podemos utilizarlos para crear sistemas de diseño de interfaces eficaces y reutilizables.

Con esta metodología, tenemos una lista básica de los elementos que los diseñadores deben estilizar. Podemos hacer actualizaciones basadas en la plantilla, reduciendo los esfuerzos iniciales lo que resulta en una mayor coherencia para todo el proyecto. Más información sobre los principios básicos del diseño atómico.

Una vez actualizado el sistema de diseño con los estilos para el nuevo proyecto (colores de marca, estilo de fuente, espaciado, etc...), pasamos a la siguiente fase: aplicar las soluciones e integrarlas en Drupal para poder utilizarlas con los datos reales.

Al principio del proyecto, necesitamos saber cuáles son los requisitos del cliente, para después adaptar el diseño, actualizar los componentes y, por último, integrarlo todo en Drupal.  

Este es un ejemplo de cómo aplicamos esta solución y cómo la integramos:

Por ejemplo, si tenemos una card (molécula de web component) que queremos integrar en Drupal, tenemos que averiguar qué información queremos mostrar. Imaginemos que queremos mostrar alguna información breve sobre un contenido tipo blog. 

Podemos tener diferentes "tipos" de cards, por ejemplo, con una imagen, un enlace, una fecha, y/o con todos los datos que queramos mostrar. En este caso, queremos utilizar una card donde tenemos un título, un autor, y un enlace para leer todo el contenido. En el contenido tipo blog, usaremos estos "campos" para integrarlos dentro de la card, así en el caso del título, usaremos por ejemplo, la "label", y la llamaremos dentro de la plantilla. Y así, con toda la información que queramos mostrar.

Así es como se muestra finalmente:

En 1xINTERNET hemos desarrollado esta metodología de trabajo colaborativo para permitir un flujo de colaboración dentro de nuestro equipo construyendo proyectos de la manera más eficaz. Adoptamos un proceso de diseño colaborativo y fomentamos la comunicación y la colaboración entre diseñadores y desarrolladores durante todo el ciclo de vida del proyecto. Con esta metodología probada y eficaz, conseguimos:

• Buena comunicación: tener un buen trabajo en equipo es la clave para tener un proyecto ejecutado con éxito.
• Estabilidad: diseñador y desarrollador trabajan de forma sincronizada. 
• Estructura: con una buena estructura basada en plantillas, podemos cambiar, actualizar y encontrar lo que necesitamos. Esto significa que nuestro código es mantenible y reutilizable.