Comunicación diseño y desarrollo web

Comunicación efectiva: diseño y desarrollo web en sintonía

La comunicación

Lo primero que me viene a la mente cuando surge el tema de la comunicación dentro de un equipo multidisciplinar es el título del libro de John Gray, “Los Hombres son de Marte, las Mujeres son de Venus.” pero adaptándola al contexto: Los desarrolladores son de Marte, los diseñadores de Venus y Negocio de Mercurio, por lo que la primera clave de todo es la comunicación.

En Doowebs tenemos la facilidad trabajar unos juntos a otros, lo que facilita en gran medida la comunicación por partes de las tres disciplinas: Desarrollo, Diseño y Negocio. Por lo que a la hora de tomar decisiones nos implicamos todos para centrar la solución y los esfuerzos de cada proyecto. 

Al tener proyectos tan dispares entre sí, como puede ser una web corporativa de un banco o un e-commerce de productos artesanales, no todos priman por el mismo objetivo. Por lo que a la hora de tomar decisiones debatimos cuál sería la más óptima para conseguir el objetivo marcado por el cliente, y como bien decía Aristóteles: “En el término medio está la virtud.”, por lo que con los requisitos del cliente y las limitaciones de cada vertiente decidimos en qué puntos damos más tiempo o prioridad al código o al diseño. En este punto nos ha sido de gran ayuda empatizar y conocer las necesidades de las otras vertientes. Desde diseño, por ejemplo, nos hemos formado en la lógica básica de la programación y en alguno de sus lenguajes.

Cuando llegamos a una conclusión ya queda validada por los tres pilares del proyecto y a su vez hemos comunicado la decisión a todo el equipo para seguir trabajando todos en la misma línea.

Otro punto clave de la comunicación es hablar el mismo idioma, a la hora de nombrar los elementos utilizamos una nomenclatura en el mismo idioma (En nuestro caso escogimos el inglés) así como el mismo nombre del elemento.

También es importante que una vez que se ha creado el prototipo, las interacciones ideadas por el diseñador se notifiquen y sean justificadas al equipo de Desarrollo. Esto facilita que tanto el desarrollador como el diseñador centren los esfuerzos a la hora de crear el proyecto y no pierdan tiempo en desarrollar o diseñar elementos o animaciones que, como se definió en el objetivo, no aportan un valor significativo al usuario. 

El diseño

El segundo punto es el entregable de diseño, este es un conjunto de wireframes y/o prototipos donde se ve lo más realista posible el diseño final (disposición de elementos, colores, animaciones…) Una vez que Desarrollo tiene el entregable de diseño, si lo hemos hecho correctamente, el desarrollador no tiene que tener duda alguna sobre el diseño y podrá reproducirlo en código.

Para ello, en el departamento de Diseño de Doowebs hemos creado varios Sistemas de Diseño en Figma y lo hemos documentado. También hacemos prototipos con las animaciones correspondientes. Por lo que al final el desarrollador tiene el documento de Figma, con el conjunto de elementos y el prototipo, y un documento donde se especifica cada elemento por separado.

Al contar en el departamento con conocimientos de programación hemos añadido un plus de valor: Cómo trabajamos bajo el diseño atómico, hemos añadido en la documentación los estilos en el lenguaje CSS de cada átomo del Sistema de diseño (títulos, textos, botones, elementos de formularios …). Con esto también ayudamos a reforzar el primer punto sobre la comunicación y tener un lenguaje común, ya que las clases de los átomos de diseño están nombradas acorde al elemento de diseño de Figma.

Conclusión

Aquí tienes algunos puntos clave sobre la importancia de la comunicación y cómo lo implementamos en nuestro equipo:

  1. Comunicación interdisciplinaria: Reconoces la diversidad de roles y habilidades en tu equipo y cómo cada uno aporta desde su perspectiva. La comunicación efectiva permite alinear los objetivos y esfuerzos de todos hacia un objetivo común.
  2. Toma de decisiones colaborativa: La toma de decisiones conjunta entre Desarrollo, Diseño y Negocio asegura que se consideren todas las perspectivas y se optimicen los recursos para alcanzar los objetivos del cliente.
  3. Empatía y formación cruzada: El hecho de que los miembros del equipo se formen en las habilidades básicas de otras disciplinas muestra un compromiso con entender las necesidades y limitaciones de cada parte. Esto fomenta un ambiente de colaboración y comprensión mutua.
  4. Validación y comunicación de decisiones: Al validar las decisiones por los tres pilares del proyecto y comunicarlas a todo el equipo, se asegura que todos estén en la misma página y se evita la fragmentación.
  5. Estándares de comunicación: La elección de un idioma común, en este caso, el inglés, para nombrar elementos y conceptos, es esencial para evitar malentendidos y confusiones. La estandarización de la terminología facilita la colaboración.
  6. Entregables de diseño claros: Los wireframes, prototipos y sistemas de diseño en Figma brindan a los desarrolladores una base sólida para trabajar. La documentación detallada también asegura que no haya ambigüedades en la implementación.
  7. Valor añadido a través de la documentación: El hecho de que el departamento de Diseño proporcione estilos en CSS para cada elemento de diseño es una excelente práctica. Esto no solo ayuda a los desarrolladores a implementar el diseño, sino que también mantiene la coherencia visual y la eficiencia en el desarrollo.

En resumen, la comunicación efectiva y la colaboración son esenciales en equipos multidisciplinarios, y en Doowebs abordamos estos aspectos para lograr un trabajo conjunto exitoso en proyectos diversos.