Design System: la metodología que desarrolladores y diseñadores aman sobre todas las cosas

Seguramente en más de una conversación de barra de bar, como se suele decir, has comentado entre tus amigos o familiares aquello de “cómo de rápido evoluciona la tecnología”. Que si redes sociales, videollamadas, transformación digital, móviles 5G, robots que hacen cosas, apps para todo lo imaginable…

Parece que vivimos en una suerte de “dictadura tecnológica” en la que los consumidores vamos a remolque de los últimos avances informáticos.

Lo cierto es que los que trabajamos creando productos y experiencias digitales, —desde el desarrollo y diseño de software hasta la propia comunicación y publicidad de su lanzamiento— experimentamos esa vorágine tecnológica por partida doble: como consumidores, pero también como trabajadores.

La continua aparición de nuevas formas de trabajar (metodologías, herramientas…) tiene, como todo en esta vida, sus pros y sus contras: no nos engañemos, en ocasiones resulta agotador llevar a cabo este cambio constante de “poner en práctica lo último de lo último”. Obviamente, su gran ventaja es que cambiar y modificar metodologías de manera habitual tiene como resultado el desarrollo y la ejecución experiencias digitales de calidad, que se adaptan a los estándares del mercado y a los consumidores rápidamente.

Para conseguir que toda esta revolución tecnológica se lleve a cabo, los equipos deben trabajar con rapidez. Y esto, a nivel organizativo, de gestión del proyecto, puede ser una auténtica locura, sobre todo para los departamentos que trabajan de manera tan estrecha como son el de desarrollo, diseño y UX.

Estos departamentos, tan diferentes entre sí, tienen la obligación de trabajar en equipo, de hablar el mismo idioma, si lo que se pretende es lanzar trabajos de impacto, claro.

Entonces, ¿cómo nos las arreglamos las agencias creativas de diseño y desarrollo para sacar adelante proyectos que iteran constantemente? ¿Cómo hacemos para organizar todo el caos que supone lanzar una aplicación y que mantenga una cohesión en estilo y funcionalidad en todos los dispositivos?

Aquí es donde entra en juego el Design System, una guía, un repositorio de componentes e instrucciones para que el equipo de producto trabaje unido y de manera ordenada, respetando todas las directrices de diseño y desarrollo.

¿Qué es un Design System?

Como te comentábamos, un Design System es un método, una forma de organización y, sobre todo, un lenguaje común para que el equipo de desarrollo de producto (a grandes rasgos, programación, diseño y UX) trabaje de manera colaborativa y resuelva los problemas de la misma manera.

Se habla del Design System como lenguaje porque funciona como una infraestructura que permite desarrollar y diseñar un producto de forma organizada, garantizando la calidad de cada fase del proceso y todo ello con rapidez.

Para entender mejor qué es un Design System, puedes ver algunos ejemplos de empresas como Atlassian, GitHub, Mailchimp o IBM.

No se debe pensar en el Design System como un documento que se rellena una vez y nunca más se actualiza. Todo lo contrario. Es un conjunto de documentos vivos, que se deben actualizar conforme el producto evoluciona. Eso sí, dado que lo que está indicado en el Design System es la fuente de toda la verdad, todos los elementos, componentes o cambios que se incorporen deben estar previamente validados.

Esta forma de crear productos está basada en la metodología Atomic Design, creada por Brad Frost, que pretende acabar con las inconsistencias que se producen entre desarrolladores y diseñadores y maximizar los recursos a la hora de crear productos.

Bajo esta premisa, el Atomic Design se basa en 5 niveles de estructuras para conseguir su objetivo: átomos, moléculas, organismos, plantillas y páginas.

Con este planteamiento lo que se consigue es definir al máximo cada elemento para poder crear componentes más complejos de manera rápida y consistente en todas las versiones que se puedan crear de una aplicación o una web.

Beneficios de implementar un Design System

Hoy en día, los sistemas de diseño son una metodología presente en muchas agencias y empresas tecnológicas que desarrollan productos digitales porque presentan múltiples ventajas tanto para los equipos como para los productos:

1. Mejora la comunicación entre los equipos de desarrollo y diseño: dado que todos los elementos visuales se definen en el sistema de diseño, todo el equipo sabe cómo enfrentarse a los problemas. Por ejemplo: no existen ocho maneras diferentes de crear un botón. En este documento se definirá qué tamaño tiene que tener la caja, el color, la tipografía y el grosor del borde.
2. Aumenta la velocidad de trabajo: si algo caracteriza al Design System es que los componentes que ahí se definen son replicables rápidamente.
3. Garantiza la consistencia del producto: se pueden corregir fácilmente las librerías y patrones de código.
4. Facilita la escalabilidad del producto: dado que los elementos son replicables y pueden combinarse entre sí, se pueden crear estructuras más complejas de forma rápida, haciendo que el producto sea fácilmente escalable.

Este artículo tan solo es una pequeña introducción al amplio mundo que encontramos dentro de los Design Systems. Porque, aunque el fin último de esta metodología es simplificar el trabajo, llegar a crear un sistema de diseño no es una tarea sencilla.

Esperamos que con este post te hayamos despertado la curiosidad por el apasionante mundo que se encuentra entre el desarrollo y el diseño de productos digitales.