Por qué necesitas un sistema de diseño y cómo tus clientes te lo van a agradecer
Seguro que a estas alturas has oído hablar sobre los sistemas de diseño (o design systems en inglés) que tan en boga han estado desde un tiempo a esta parte, pero si quieres saber más sobre qué son, qué ventajas nos aportan, cómo se construyen y en qué pueden ayudar en el diseño y desarrollo de proyectos y productos digitales, desde Plain Concepts te lo explicamos.
Al principio todo era oscuridad…
Antes de la llegada de los sistemas de diseño, abordar el desarrollo de un producto o un proyecto digital era como estar encerrado en una rueda de hámster en la que, tarde o temprano, surgían siempre algunos de estos problemas:
- El diseño se vuelve inconsistente y nadie recuerda por qué las cosas son como son.
- Los desarrolladores no tienen la certeza de cómo funcionan algunos componentes, por lo que el desarrollo sufre retrasos…
- No hay una documentación clara de qué componentes son necesarios ni cómo se comportan, ni qué reglas los gobiernan a todos (así en plan “El señor de los Anillos”?).
Vamos, que la vorágine del día a día nos tragaba y los productos “parecían” consistentes, aunque siempre aparecían ejemplos para demostrarnos lo contrario.
…Y se hizo la luz
Ese mismo sentimiento de complejidad y de día de la marmota digital debió vivir en su pellejo Brad Frost cuando allá por 2013 lanzó Atomic Design, la solución definitiva contra las manchas ?. En su obra maestra, nuestro amigo Brad desarrolla una metodología que simplifica los procesos de diseño, desarrollo y mantenimiento posterior de productos digitales.
Plantea un sistema modular de componentes equiparándolo con los conceptos más elementales de la química:
- Así, los átomos son la estructura básica mínima con distintas propiedades. Traducido al mundo digital, son los elementos básicos: un color, una tipografía, un icono, una imagen, un link, etc. Son funcionales por sí mismos.
- Al agrupar los átomos formamos moléculas que en nuestro caso serían elementos más complejos como botones, inputs, selects, etc. Empiezan a ser más tangibles y operacionales que los átomos.
- En el siguiente nivel de complejidad se encuentran los organismos que serían los componentes de UI relativamente complejos, compuestos de grupos de moléculas y/o átomos y/u otros organismos. Estos organismos forman distintas partes de la estructura de una interfaz como la cabecera de una web, un formulario, una card, etc.
A partir de aquí, abandonamos la terminología química para subir peldaños en el grado de complejidad:
- Plantillas: son combinaciones de varios organismos que solucionan una necesidad concreta dotando de estructura al contenido. Por ejemplo, la página de detalle de un producto o la página del carrito de una tienda on-line.
- Páginas: son instancias de las plantillas con contenido específico para cada una de ellas.
A pesar de que esta manera de entender el diseño de los productos digitales supuso una mejora sustancial, un sistema de diseño es más que ir uniendo componentes atomizados. Nos faltaría aplicar una serie de reglas que le den sentido como “sistema”. Claro, aquí la cosa se va complicando…
Definición de sistema de diseño
Aunque no hay un consenso claro, he seleccionado algunas de las múltiples definiciones que me parecían interesantes para comprender mejor el concepto de sistema de diseño:
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
Marco Suarez
Design System Lead at Invision
Muy relacionada con la anterior encontramos también esta definición:
“A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.”
Courtney Clark
Forum One Vice President
Ambas nos acercan a la idea de que un sistema de diseño es un conjunto de componentes reutilizables que permiten construir aplicaciones de manera escalable.
Pasemos a la siguiente definición:
“A design system is a collection of rules, constraints, and principles, implemented in design and code.”
Sylvee L
Product Designer
De esta definición nos interesa resaltar aquellas reglas, limitaciones y principios que tienen que estar presentes tanto en diseño como en código. De nada sirve que el sistema sea perfecto estéticamente, si no hay una codificación que lo construya, que lo lleve a la realidad.
¿Qué es un sistema de diseño?
Un sistema de diseño es un conjunto de reglas y normas que el equipo de una organización establece internamente y que les permite trabajar de forma alineada a través de un lenguaje común. Todos los implicados en el producto tienen que entenderse: desde diseño a programación, pasando por negocio (en el caso de un producto) o con el cliente (de un proyecto).
Es también una serie de patrones que describen problemas y los resuelven de manera eficiente a través de una serie de elementos reutilizables tanto en diseño como en código.
Es un modo de construir productos digitales de una manera más eficiente y escalable.
Sistema de diseño VS Guía de estilos
En muchas ocasiones podemos confundir los sistemas de diseño con las guías de estilo o las librerías de componentes, pero hay algunas claves para diferenciarlas:
- Un sistema de diseño es un sistema vivo, evoluciona con las necesidades de los usuarios, el mercado, el diseño…Una guía de estilos es un documento estático, normalmente se entregan en pdf o como mucho, en las versiones más modernas, en html.
- Un sistema de diseño es flexible, escalable y va cubriendo nuevas necesidades, mientras que una guía de estilo, una vez entregada, probablemente quede desactualizada.
- Un sistema de diseño abarca todo el ecosistema de un producto digital (desde el estilo gráfico, hasta el tono) así como los principios y valores de la compañía, mientras que una guía de estilos se centra fundamentalmente en el branding.
Por lo tanto, un sistema de diseño es algo vivo, que evoluciona, que hay que cuidar y acompañar porque representa el eje central de un producto digital visto como un todo unitario hecho por piezas que beben de la misma fuente, de hecho, a los sistemas de diseño también se les conoce como “One source of truth” .
Ventajas sistema de diseño
Ahora que sabemos más sobre qué es un sistema de diseño nos podemos preguntar qué beneficios nos aporta, pues bien, aquí van:
Consistencia
Los sistemas de diseño aseguran que la experiencia usuario con la marca siempre sea la misma. Todos componentes y los elementos tienen la misma estética y se comportan con los mismos patrones para que el usuario sepa cómo funciona un elemento con solo verlo.
Eficiencia
Los sistemas de diseño ahorran tiempo y dinero. En lugar de crear componentes desde cero para cada proyecto o versión de un producto, los diseñadores y desarrolladores pueden reutilizar componentes, por lo que los tiempos se acortan.
También podemos decir que con los sistemas de diseño pasamos a hablar de un flujo de trabajo lineal o a uno más ágil y colaborativo, donde todos los miembros implicados en el desarrollo del producto, tanto en la parte de diseño como en la parte de desarrollo, trabajan conjuntamente en la construcción del mismo.
Para ilustrar lo que vimos más arriba del lenguaje común, os pongo un ejemplo: un nuevo diseñador comienza a trabajar en nuestra compañía y tiene que enfrentarse a un sistema de diseño. En pocos minutos va a saber dónde encontrar un componente o cómo nombrar y colocar uno nuevo gracias a que en un sistema de diseño todo está estandarizado y documentado.
Escalabilidad
Los sistemas de diseño permiten la automatización en el proceso de diseño, lo que significa que las empresas tienen la capacidad de hacer crecer los productos rápidamente con menos recursos. Se dedica menos tiempo a generar diseño y más a pensar en mejoras de procesos.
Un vez que ya sabemos mucho mejor qué es un sistema de diseño y qué ventajas nos aporta, llega el momento de ponerse manos a la obra para construirlo. Pero de esto hablaré en la segunda parte de este artículo.
Si te ha gustado este post y quieres saber más, ¡no te pierdas la segunda parte de cómo crear un sistema de diseño!
