Cuando se habla de producto digital, tenemos que hablar de design system, pero más allá del término de moda, creo que merece la pena entender qué es realmente, por qué es tan importante y cómo puede cambiar nuestra forma de diseñar y de entender el diseño y el desarrollo.

Hay que tener en cuenta que el diseño de páginas web no siempre ha sido “fácil”; de hecho, era bastante caótico, ya que los componentes podían parecer iguales, pero no lo eran; los botones cambiaban de tamaño o su interacción; las tipografías tampoco eran iguales… Todo dependía del diseñador/a o desarrollador/a que estuviese detrás del proyecto. En este momento, la inconsistencia era habitual en el diseño web.

En ese contexto empezó a tomar fuerza una forma más estructurada de trabajar.

Uno de los puntos de inflexión que hizo que surgiera una nueva forma más estructurada de trabajar fue la propuesta de Brad Frost con su metodología, que plasma en el libro Atomic Design. Aquí defiende la idea de la construcción de interfaces a partir de piezas, pensando en ellas como sistemas modulares.

Para ello emplea una metáfora: parte de los átomos, que es lo más básico; esto es un color, una tipografía, un icono, un espaciado. Estos elementos por sí solos ya tienen una función, pero cuando se combinan entonces forman moléculas, que son botones, campos de formulario… Entonces se pasa a los organismos, que son bloques más complejos, como ya puede ser una cabecera, una card o un formulario completo. Y de aquí ya se pasa a las retículas, que estructuran el contenido, y a las páginas, que son esas retículas o plantillas con todo el contenido.

Pero un sistema de diseño no debe ser solo juntar piezas; no puede quedarse en una colección de componentes bonitos, puede quedarse corto. Lo que debe construirse es un sistema con reglas, principios y decisiones. El código y el diseño de la web deben seguir un mismo lenguaje, así como la línea de negocio que esté siguiendo.

Un sistema de diseño es un conjunto de componentes reutilizables, que se guían por estándares claros, que construyen de forma coherente. Es un acuerdo interno.

¿Es lo mismo un sistema de diseño que una guía de estilo?

Pues no es lo mismo exactamente. Una guía de estilo es un documento cerrado y, en ocasiones, estático, centrado en lo visual, en la identidad de marca en sí. Un sistema de diseño es algo vivo y dinámico. Puede ir evolucionando con el producto, los usuarios y con el contexto. Se incluyen componentes, pero también documentación, criterios de uso, principios, accesibilidad y, sobre todo, implementación real en código. Es en sí misma una infraestructura.

Implementar un sistema de diseño impacta directamente en tres frentes clave, que son puramente estratégicos:

Consistencia

El usuario vive una experiencia reconocible y predecible. Si un botón se comporta de una manera en una parte de la página, sabe que lo hará en el resto de botones, generando confianza y reduciendo la fricción

Eficiencia

Se optimizan los recursos. Rediseñar lo mismo una y otra vez puede resultar agotador; por eso, reutilizar componentes acelera los tiempos y reduce errores que puedan haber, ayuda a trabajar bajo control. Además, esto también ayuda a la incorporación de nuevos perfiles al equipo, que pueden guiarse de la documentación que ya tiene la empresa.

Escalabilidad

Cuando el producto crezca, el sistema puede sostenerlo, permitiendo lanzar nuevas funcionalidades sin rehacer la base cada vez. Se puede invertir menos tiempo en repetir procesos y más tiempo en mejorar. El sistema de diseño ayuda a ordenar el caos, convirtiéndolo en una metodología. Pero no significa que sea menos complejo, aunque sí que hace que la complejidad sea más manejable. Y aquí es cuando un diseño deja de ser moda y pasa a ser algo valioso y duradero

Construir un sistema de diseño lleva tiempo, requiere visión y mantenimiento constante. Pero cuando todo esto se hace bien, se genera una cultura de equipo que mantiene todo alineado. Esto es muy positivo, tanto para el diseñador/a como para el cliente o usuario final.