Merge request: Develop branch a Design branch

Desde hace mucho tiempo con los UX/UI Designer comentábamos que debiéramos tener un flujo más avanzado para la implementación de las interfaces propuestas por parte de los Software Engineer, específicamente:

• ¿No sería increíble que los desarrolladores pudieran ver las características específicas de los elementos que diseñamos en forma de CSS?”
• ¿Cómo no va a existir una forma más eficiente de trabajar los tres en un mismo archivo de forma paralela?

Sabíamos que existían herramientas y muchas alternativas, debíamos generar un flujo integrado entre dos áreas que muchas veces no dialogan.

Estas conversaciones nacieron de las problemáticas a las cuales nos enfrentamos los diseñadores en el día a día. Uno de los desafíos más grande que se presentan, desde el punto de vista del diseño, en el desarrollo de software, es que la implementación sea fidedigna al diseño propuesto. Entregar los mockups en forma de imagen muchas veces se queda falto de información y deja los desarrolladores con muchas dudas.

La segunda problemática se origina en los momentos en que más de un diseñador trabaja en un en el mismo proyecto, que suele suceder habitualmente en proyectos de mayor tamaño. Al estar trabajando en un mismo archivo suelen generarse cambios que afectan el trabajo del otro y gestionar adecuadamente la unión de todos estos archivos suele ser problemático, exigiendo de mucha atención al detalle y orden.

Llegamos a esta solución: dos herramientas que no solo han facilitado el trabajo de los diseñadores y desarrolladores, sino que han potenciado enormemente los proyectos en Nursoft.

Zeplin

El primer software que vino a potenciar nuestra metodología es Zeplin. Supe de la existencia de este programa gracias a las frustraciones de un Software Engineer que llevaba poco tiempo en Nursoft.

Las principales dos características que son intransables desde que comencé a utilizarlo son las siguientes.

¡No exporto más assets!

Es un broma recurrente en la oficina que exportar assets es de las tareas más aburridas y repetitivas que se hacen al momento de hacer el traspaso Diseño-Desarrollo. Esto es increíblemente tedioso sobre todo si es un diseño complejo con una cantidad alta de assets, que en ocasiones además tienen que ser exportados en más de un formato. Es evidente que mientras menos tiempo uno gaste en actividades tediosas más tiempo tendrá para hacer cosas que realmente importan.

Zeplin permite que los desarrolladores descarguen los assets directamente desde los mockups en los formatos y tamaños que ellos requieran. Esto además les da la certeza de que el assets que están descargando efectivamente va en esa sección, lo que evita confusión cuando, por ejemplo, hay iconos muy similares en varias vistas.

Distancias, colores y propiedades

Una característica muy beneficiosa de Zeplin es que tiene una versión web. En Nursoft los utilizamos Sketch para crear los mockups (entre otras cosas), programa que tiene la gran limitante de que solo está para MacOS. Esto genera un problema para la mayoría de los desarrolladores de la oficina ya que utilizan alguna distribución de Linux, lo que los aísla del proceso de trabajo de diseño.

Cuando se ven los mockups en Sketch queda clarísimo cuales son las propiedades de los elementos del diseño, pero al verlo en un formato de imágen, muchas cosas quedan a la interpretación o al ojo no especializado de los Software Engineer. Zeplin entrega todas las características de los elementos diseñados en Sketch en forma de CSS, permitiendo ver cosas como los códigos de color, tamaños, porcentajes de opacidad, border-radius, márgenes, paddings y todos los elementos importantes del elemento desde la UX. Todo esto reduce los errores visuales y reduce significativamente los tiempos al momento de desarrollar y posterior revisión por nuestra parte.

Abstract

El otro programa que se unió a esta mejora de nuestro proceso fue Abstract. Si bien lo implementamos hace poco, el impacto a sido altísimo. Para los que están familiarizados con los sistemas de control de versiones/cambios en desarrollo, Abstract funciona de forma similar; en términos simples es un git/Github/Gitlab para diseñadores.

Es una solución óptima para los problemas que se generan cuando más de una diseñador utiliza el mismo archivo de Sketch, cosa que sucede bastante cuando se trabaja en proyectos medianos y grandes. Previamente teníamos que trabajar en archivos diferentes y compartir esos archivos en la nube, lo que generaba muchas versiones de un mismo archivo, para después manualmente comparar los conflictos y borrar todo lo que se haya duplicado. Esto genera desorganización y pérdida de tiempo innecesarias.

Abstract plantea un nuevo paradigma de trabajo, donde múltiples diseñadores puedan gestionar y versionar sus archivos, documentar su proceso y trabajar en cosas en paralelo sin el temor de sobrescribir.

Abstract realiza un seguimiento de todos los cambios realizados en los archivos y guardar cada copia de cada cambio, registrándolo en un historial., permite restaurar de nuevo a cualquier versión anterior si algo sale mal. Este flujo de trabajo es muy utilizado en el desarrollo por programadores (sistemas de control de cambios). Todo esto se hace mediante un interfaz sencilla, sin utilizar comandos lejanos para un diseñador (que son necesarios al utilizar Git).

De esta forma todos los diseñadores pueden trabajar juntos en el mismo archivo, revisar los cambios y diferencias, combinar archivos, colaborar y comentar, y terminar con un archivo Maestro limpio y actualizado.

En fin…

Este artículo no tiene la intención de ser un tutorial o una reseña de Zeplin o Abstract, sino mostrar cómo estos dos programas nos han ayudado a complementar las metodologías de diseño con las de desarrollo.

La incorporación de estos programas a permitido:

• La reducción de los tiempos de los UX/UI Designer en labores mecánicas, enfocándonos en el proceso creativo.
• Nos han ayudado a tener un mayor orden.
• Alineamiento en los procesos entre todo el equipo para los proyectos de nuestros clientes.

Viendo las fortalezas de otras disciplinas e incorporarlas dentro de la propia, es importante destacar, que la mayoría de las veces no es necesario reinventar la rueda.

Es fundamental para los equipos en Nursoft ser más eficiente, gastar menos tiempo en cosas que no valen la pena, enfocándose en la toma de decisiones complejas y soluciones adecuadas a las problemáticas planteadas, todo en pos de que los proyectos resulten exitosos.