Design Systems para el desarrollo de aplicaciones

design systems, notus, solution design

Por Pablo Vergara, diseñador UI/UX en Notus

Durante la etapa de diseño en los proyectos de desarrollo de software nos podemos encontrar con desafíos similares en casi todos los proyectos. Diseño de componentes, mantener una línea estética y facilitar una rápida iteración de prototipos son algunas cosas esenciales a considerar en el diseño de interfaces.

En la mayoría de los casos las decisiones y el trabajo de diseño se hace proyecto a proyecto partiendo desde cero. Esto nos obliga a repetir mucho trabajo pesado de diseño que podríamos estandarizar para poder facilitar las iteraciones y armar prototipos más robustos en menos tiempo. Para esto nació el concepto del Design System, un set de herramientas de diseño que buscan poder facilitar y mejorar la experiencia de trabajo de los diseñadores y desarrolladores.

¿Para qué sirven los Design Systems?

Los pasos esenciales de proyectos de software se ven beneficiados con el desarrollo de un Design System, el tener un marco de trabajo nos permite mejorar el proceso de levantamiento de información, aterrizar las conversaciones respecto a funcionalidades y facilitar el entendimiento entre el equipo de desarrollo y lo que necesita el cliente. Por otro lado, en el desarrollo podemos crear plantillas o componentes que sabemos que necesitamos para los proyectos que usualmente desarrollamos, si usualmente necesitamos cosas como un módulo para ejecutar modelos de optimización y ver sus resultados podemos tener componentes diseñados y desarrollados listos para implementarlos en proyectos.

Muchas empresas y equipos ocupan Design Systems desarrollados internamente para poder facilitar múltiples procesos de diseño de software. Existe la idea de que este tipo de herramientas son solo para ser usadas a gran escala en grandes proyectos o para empresas grandes que pueden dedicar recursos para este tipo de herramientas. Pero, las ventajas que trae un Design System son muchas y vale la pena evaluar si es algo que puede mejorar el flujo de trabajo en los proyectos de desarrollo.

¿Qué son los Design Systems?

Un Design System consiste en un conjunto de herramientas y de reglas, un marco de trabajo para poder diseñar y construir aplicaciones de manera rápida y eficiente. Reglas como paletas de colores y tipográficas, componentes de diseño como botones, etiquetas y contenedores; todo es parte de un Design System. La idea detrás de estas herramientas es hacer gran parte del trabajo pesado de diseño antes de comenzar los proyectos de desarrollo para luego usar esa ventaja para facilitar el proceso de diseño de UI/UX y desarrollo de frontend. Los beneficios que se obtienen al ocupar una herramienta como esta son varios pero algunos de los principales son los siguientes.

Facilitar el proceso de diseño

Permitir a los diseñadores de UI/UX crear diseño de aplicaciones que sirvan como herramientas de comunicación entre el equipo y con los usuarios y clientes de forma rápida y eficiente, iterar sobre distintas ideas con Design Systems robustos es mucho más sencillo para el equipo.

Incrementar la cohesión del equipo

En equipos con distintas disciplinas a veces la comunicación puede ser difícil. Los diseñadores y desarrolladores tendrán una mejor idea de cuales son las características de lo que se debe construir al tener un Design System como intermediario. Al estandarizar las herramientas todos saben las características de los componentes a desarrollar.

Aumentar la consistencia de los productos

Al crear muchos proyectos de software distintos es fácil obtener resultados que varían entre distintos equipos. No todos los diseñadores y desarrolladores son iguales y por lo mismo entre productos desarrollados por una misma empresa a veces se obtiene un look & feel completamente diferente. La idea de los Design Systems es tener componentes generales que sean fácilmente adaptables a distintos proyectos y aumentar la consistencia.

Reducir los costos y optimizar procesos desarrollo

Al reducir la cantidad de tiempo necesario para diseñar y desarrollar optimizamos los costos y el tiempo. Crear un mismo componente muchas veces es mucho menos costoso cuando ocupamos un sistema estandarizado.

Facilitar la escalabilidad de los proyectos

Querer agregar características a un proyecto puede ser difícil para equipos nuevos o incluso para el mismo equipo si se retoma el proyecto después de una cierta cantidad de tiempo. La escalabilidad de los proyectos se hace mucho más fácil con componentes de diseño estandarizados y bien documentados. Esto le permite a equipos comenzar con un mejor conocimiento de los sistemas antes de mejorarlos.

Todas las ventajas que nos entregan los Design Systems se logran a través de la definición de este lenguaje común de diseño que consiste en patrones creados para comunicar de forma efectiva el diseño que creamos, cómo escribimos, qué colores usamos, qué formas, cómo organizamos contenido, la diagramación de las páginas y componentes, qué formatos de imágenes usamos, cómo mostramos video o cómo implementamos audio. Muchos otros factores son los que gobierna un Design System, no solo implica crear componentes reutilizables, sino crear este lenguaje común entre el equipo de diseño y desarrolladores con el cual se comunicarán para poder hacer el mejor trabajo posible.

Implementando Design Systems

Los Design Systems tienen muchas ventajas, entonces ¿Por qué no son un estándar en los equipos de desarrollo? La realidad es que crear e implementar un Design System en el proceso de desarrollo conlleva mucho trabajo que muchos equipos no están dispuestos o son capaces de hacer. Una vez decidimos que queremos implementar un Design System en el equipo entonces comienza el proceso de definir primero cuáles son los objetivos que queremos lograr con este proyecto.

Objetivos

Establecer un marco de trabajo para el desarrollo y diseño de aplicaciones desarrolladas por la empresa
Estandarizar un proceso de diseño y desarrollo de frontend para los proyectos de desarrollo que impliquen interfaces gráficas
Alcanzar una mayor consistencia de diseño

Permitir más iteraciones durante el proceso de diseño permitiendo prototipar y obtener feedback de los equipos, clientes y usuarios de forma más eficaz
Mejorar la comunicación y el flujo de trabajo entre los desarrolladores y diseñadores

Buscando inspiración

Crear un Design system parte siempre con la investigación. Distintos Design System para distintos usos poseen diversas piezas y buscar inspiración en el trabajo de otras empresas y equipos nos puede guiar acerca de cómo podemos definir exactamente qué es lo que necesitamos. Algunas referencias que podemos estudiar por ejemplo son las siguientes:

Apple Human Interface Guidelines – Link
Google Material Design – Link
Attlasian Design System – Link
Github Primer – Link
Heroku Design System – Link
IBM Design Language – Link
Mailchimp Pattern Library – Link
Mozilla Protocol – Link

Material Design – Design System de Google

Definiendo el proceso

Una vez que tengamos ideas acerca de qué podemos hacer tenemos que definir cómo lo lograremos, para esto internamente definimos un proceso iterativo del cual obtendremos una primera versión de nuestro Design System.

Proceso que definimos para la creación de un Design System

Durante este proceso deberemos primero partir definiendo nuestro inventario de diseño, con esto me refiero a que componentes necesitamos para el Design System, patrones, colores, tipografías, íconos, variables y componentes. Cada elemento reutilizable del sistema debe estar considerado dentro del inventario.

Luego debemos establecer quienes desarrollarán el Design System, este debe ser un equipo interdisciplinario de diseñadores y desarrolladores que elaborarán las tareas de construcción del proyecto.

Antes de poder comenzar el proyecto debemos establecer las reglas que seguiremos, tenemos que definir cómo usaremos el Design System, cómo lo vamos a distribuir y mantener, con qué stack de tecnología lo construiremos y otras reglas de uso.

Las primeras tareas relacionadas a diseño son las de definir las variables que usaremos para todo el Design System y configurarlas en los proyectos de diseño, archivos de configuración y guías de estilos, variables de color, tipografía y espaciado.

Con lo anterior ya definido podemos comenzar a diseñar los componentes y construirlos. Al terminar la primera versión del sistema es necesario invitar al equipo a realizar una retrospectiva para poder aprender del proceso y obtener feedback acerca de posibles mejoras que podremos implementar en el futuro.

Por último, antes de avanzar en una segunda iteración, tenemos que documentar el Design System, las herramientas son tan buenas como la capacidad de las personas de utilizarlas a su máximo potencial y la documentación e instrucciones de uso, mantención y análisis del Design System son esenciales para poder mejorar esta herramienta de desarrollo.

Construyendo un Design System

Una vez definido los procesos, variables, reglas y equipo podemos empezar la construcción del Design System, para esto es necesario usar herramientas modernas de diseño de interfaz. Figma es el software más usado por diseñadores de UI/UX y es bastante robusto con muchas características para el trabajo en conjunto. No me detendré mucho en el software en particular ya que es un tema bastante profundo en sí mismo, pero si quiero hacer hincapié en un par de características de las herramientas de prototipado y diseño de UI/UX que creo son esenciales para el desarrollo de un proyecto como un Design System.

La creación de componentes dentro de estas herramientas como Figma, Adobe XD o Penpot es super robusta, cada componente puede poseer distintas características como tamaño, color, contenido, etc. Aparte, los componentes pueden tener distintas variantes, estas consisten en versiones distintas del mismo componente con distintos elementos, colores o, que incluso, implementen distintos subcomponentes. Todo lo anterior se puede hacer implementando variables predefinidas de colores, tipografías, espaciado, etc; lo que hace de los componentes de diseño una herramienta eficiente. Luego, los componentes que diseñamos se pueden publicar para todos los miembros del equipo en librerías de componentes, con una sola acción el equipo de diseño puede habilitar y actualizar para todos los miembros el uso de todos los componentes que estén listos para ser implementados.

Ventajas de la construcción de Design Systems

El trabajo de crear componentes no solo es fácil gracias a los software de diseño de interacción modernos sino también por la capacidad de colaborar activamente entre múltiples miembros del equipo de diseño. Todos los miembros habilitados para editar el proyecto pueden trabajar simultáneamente y el proyecto mantiene un registro de historial de cambios para facilitar con el cual podemos crear distintas ramas de trabajo. Otras ventajas son las flexibles herramientas de prototipado y diseño de interacción, la gran cantidad de plugins creados por los distintos diseñadores y la posibilidad de generar código a partir de los componentes para acelerar el paso de diseño a desarrollo. Es por esto, que una herramienta de diseño es esencial para desarrollar un Design System e implementarlo en los proyectos.

Conclusiones

Los Design Systems pueden necesitar recursos por parte de los equipos de diseño y desarrollo. Las facilidades que nos entregan son muchas en comparación con un proceso de diseño de componentes mucho más personalizado, esto tampoco implica que sean la única forma de diseñar y crear componentes de frontend para aplicaciones.

Una de las desventajas es tener menos flexibilidad de diseño al tener que pasar la creación de componentes nuevos por el proceso del Design System o si es que se quiere probar cosas nuevas no se pueden implementar rápidamente dentro del sistema ya que requiere revisión e implementación. Aún considerando las desventajas, la posibilidad de agilizar el desarrollo y de mejorar la experiencia de trabajo entre diseñadores y desarrolladores es un gran recurso.

Cuando veamos que menos detalles se pierden entre medio del desarrollo y que el flujo de trabajo es más eficiente empezaremos a ver el tiempo ganado. Y no sólo se trata de ser más eficiente en el desarrollo; los diseñadores y desarrolladores del equipo pueden aprovechar la oportunidad de implementar un Design System para probar cosas distintas, poner su trabajo a prueba desarrollando un sistema desafiante que será usado por sus colegas obteniendo feedback valioso acerca de su labor y como mejorar.

Design Systems en Notus

En Notus nos pusimos la meta de implementar un Design System para nuestros proyectos de desarrollo. En una primera etapa creamos una base de Design System que nos permitió probar el concepto y sus posibilidades. El prototipo Design System fue usado exitosamente en dos proyectos de desarrollo inmediatamente obtuvimos mucho feedback por parte de los equipos de desarrollo respecto a falencias del diseño y desarrollo de componentes. El feedback fue increíblemente valioso para la propuesta de desarrollo del Design System que estamos desarrollando ahora para Notus y el cual esperamos sea la base de todos los proyectos de desarrollo en el futuro.

Como diseñador el desafío de crear un Design System es grande pero satisfactorio y en lo personal creo que tanto empresas grandes como pequeñas pueden verse beneficiadas de crear sus propios sistemas pero siempre considerando sus necesidades y probando para obtener feedback constantemente, lo más importante y que se debe recordar al intentar desarrollar un Design System es no perder el norte ni olvidar que problemas son los que queremos resolver.