Design Systems: Fluir es el nuevo lema entre diseñadores y desarrolladores GeneXus

Históricamente diseñadores y desarrolladores trabajaron juntos para hacer que la magia sucediera. Sin embargo esta interacción por momentos se podía volver tensa, pues era un campo minado por diferencias de foco, de términos técnicos e intereses. ¿Qué ha sucedido con esta batalla en la era de la Transformación Digital? ¡La respuesta es que ambos mundos se han reconciliado! Y ahora tenemos un camino en común llamado Design Systems.

Desde el mundo digital se ha avanzado a pasos agigantados en el camino de conciliar diseño y desarrollo, y es gracias a esta actitud de comunión que hoy las empresas más innovadoras comienzan a darle forma a su propio Design System. En el momento en que desde GeneXus nos dimos cuenta de que necesitábamos poner la casa en orden descubrimos que varias empresas importantes ya habían empezado a recorrer ese camino. Necesitábamos resolver 3 grandes problemas: agilizar la interacción entre diseñadores y desarrolladores, lograr coherencia entre los diseños de nuestras propias aplicaciones y sistematizar componentes que diseñábamos en repetidas ocasiones.

Creemos que definir nuestro propio Design System nos ayudará a que todo sea más sencillo en lo que refiere a consistencia, coherencia y unificación de estilos, así como también en lo que concierne al flujo de trabajo entre ambas partes: entre quienes ven todo en códigos y funcionalidades, y entre quienes vemos todo en paletas de colores y usabilidad.

En definición de Alla Kholmatova, la autora del libro Design System, un sistema de diseño se trata de:

“Una colección de patrones interconectados y prácticas compartidas, coherentemente organizadas, al servicio del propósito de un producto digital”.

Partiendo de esta definición de Kholmatova, desde GeneXus estamos poniendo el foco en enlazar el código con el diseño de acuerdo a tres pilares: Patrones, Principios y Prácticas.

Queremos hacer un sistema enfocado en la experiencia que tiene un developer GeneXus, estudiando e incluyendo los mejores patrones de marca, aquellos que hacen a la identidad del producto digital GeneXus , o los patrones perceptuales que expresan la marca a través de la interfaz y ayudan a que sea memorable, dan unidad, incluso en diferentes plataformas. También queremos investigar y diseñar los patrones funcionales -los building blocks – con los que interactúan nuestros developers, es decir los componentes específicos para la necesidad de cada negocio, que permiten la interacción del usuario (por ej. el lenguaje visual de AirBnb se constituye por los siguientes componentes: Propiedades, Viajes, Ratings, Editoriales, etc). Trabajar en los patrones funcionales significará un gran avance en la reutilización de componentes puramente visuales  con herramientas que serán familiares tanto a los diseñadores/front-end como a los developers.

Si pensamos en términos del lenguaje visual de mi dominio, levantamos el nivel de semántica en el diseño y damos a nuestro negocio términos mucho más cercanos. En ese sentido, en la versión beta de GeneXus Tero (GeneXus 16) se han incorporado mejoras en lo que es la definición y creación de componentes reutilizables de experiencia.

En nuestro transcurso de investigación nos topamos con otra definición, esta es de Nathan Curtis:

“Un Design System está compuesto por una librería, estilo visual, componentes, etc, documentados y liberados por un individuo, un equipo o una comunidad como código y herramientas de diseño de tal manera que los productos que lo adoptan son más eficientes y cohesivos”.

Nos hemos dado cuenta de que muchas veces diseñamos y desarrollamos los mismos componentes para diferentes aplicaciones y que ahorraríamos mucho tiempo si “componetizamos”, y a la vez lograríamos coherencia en la identidad de marca.

Empecemos por el principio: ¿Cuáles son los principios que debería reflejar nuestro Design System?

En la búsqueda de mejores cross functional teams, nos encontramos investigando y estableciendo las bases de nuestro sistema de diseño.

Luego de una etapa de investigación y lectura (les recomiendo que lean algunos de los links en el recuadro 3) una gran pregunta se instaló en el equipo: ¿Cuáles son los principios que debería reflejar nuestro Design System? Si hablamos de un diseño que se debe alinear con la filosofía de GeneXus,  rápidamente se nos vienen a la mente colectiva conceptos tales como: “Simple”,  “Ágil”, “Multiplataforma”. Pero queremos ir a más e indagar profundamente en nuestros principios, aseguramos que el propósito del producto se exprese con el diseño.

Una vez que nos contestemos esta pregunta sobre los principios, estaremos listos para preguntarnos cómo debe ser nuestro sistema de diseño. Seguramente encontraremos que dentro de ella hay otras preguntas, como por ejemplo: ¿Cuáles son las situaciones con las cuales lidiamos hoy en dia a la hora de diseñar y ver los diseños con el equipo de desarrollo? O ¿Cómo queremos que sea la experiencia GeneXus?

Una pregunta bien hecha lleva a una buena respuesta, que a su vez lleva a otra pregunta. ¡Y así sucesivamente! Nos encantaría que nos acompañen en esta aventura que recién empieza hacia nuestro Design System, que por cierto, pensando justamente en que queremos participación conjunta en este proyecto… ¡ya tiene nombre! 😉 → UNÁNIMO

Pero antes de terminar el post voy a responderme esta pregunta: ¿Qué es lo que explica que algunos proyectos logren más éxito que otros a partir de una UX superior? La respuesta es que en parte el éxito es que los equipos de diseño y desarrollo se compongan por excelentes profesionales que logren una buena interacción. Pero algo esencial para la magia de la aplicación es el método y las herramientas que cada uno utiliza, y cómo estas se integran en un workflow en común.

Sketch, Figma, InVision y Invision Studio, y Adobe XD; son las herramientas más conocidas que representan el quiebre hacia el diseño que incluye código

    • ¿Cómo debe ser un Design System?
      • Consistente- Coherente: Los componentes se hacen siguiendo un patrón predecible.
      • Auto contenido: El design system es tratado como una unidad independiente. No asociado a otro proyecto.
      • Reusable y escalable: Los componentes pueden ser reusados en distintos contextos.
      • Accesible: Las aplicaciones que lo usan son usadas por la mayor cantidad de gente posible, sin importar cómo accedan a la web.
      • Robusto: No importa el producto o la plataforma en el que se aplique, siempre tiene que tener buen rendimiento.

Enlaces de interés para profundizar en Design System

Leave a Reply

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close