Design Systems: la importancia de los sistemas de diseño en UX

El arranque de un nuevo proyecto parte desde la conceptualización de objetivos e ideas, y alrededor de ellas se despliega la creación de wireframes. Es en este momento crucial donde habrá que tener en cuenta un punto estratégico y decisivo: los sistemas de diseño, o también conocidos como Design Systems (en inglés).

La importancia de los sistemas de diseño en el diseño UX

Los sistemas de diseño son un conjunto robusto, consistente, y centralizado de elementos jerarquizados y reutilizables, que permiten a los equipos de diseño UX, y desarrollo, trabajar de una manera más rápida y eficaz.

Este empuje de efectividad y consistencia se presenta especialmente relevante dentro del ámbito de la experiencia de usuario. Como profesionales del sector UX, mantener una coherencia a lo largo de todo el diseño es vital para garantizar la usabilidad del producto. También la eficacia y rapidez juegan un papel determinante para ser capaces de dar servicio a los clientes de la manera más productiva posible.

Otras ventajas que se pueden obtener al planificar e implementar sistemas de diseño son:

• El acceso directo a archivos editables
• Los desarrolladores pueden obtener el código de cada elemento de manera rápida y eficaz
• Los especialistas en marketing pueden extraer imágenes de estos sistemas
• Los stakeholders u otras personas relacionadas con el proyecto pueden visualizar las diferentes fases del diseño de manera más sencilla
• Creación de patrones UX mucho más fáciles de identificar, documentar, y actualizar

Si quieres aprender más sobre Sistemas de Diseño no te pierdas nuestros Cursos UX Online de UX Learn:

Diseño Atómico

Una de las metodologías más convenientes para desarrollar un sistema de diseño es el Diseño Atómico. El precursor de este método es Brad Frost. Tal y como explica en su libro Atomic Design methodology, esta metodología está basada en patrones anidados reutilizables. Gracias a su tipo de estructura, el Diseño Atómico permite redimensionar los productos digitales a cualquier escala.

Resulta además muy beneficioso porque dentro de los equipos de diseño refuerza:

• La consistencia a lo largo de todos los procesos y resultados.
• La eficiencia en la consecución del diseño.
• La coordinación entre los diferentes miembros de los equipos.
• La rapidez a la hora de desarrollar el producto.

Este video de Matt Hazard explica de manera muy gráfica cómo se organiza un diseño atómico.

Errores a evitar en un sistema de diseño

Stephen Hay describe muy acertadamente la filosofía de los sistemas de diseño: “We’re not designing pages, we’re designing systems of components”.

Por lo tanto, para que estos sistemas funcionen de una manera eficaz y fluida, será importante invertir tiempo en ellos desde el inicio de su creación, revisando en todo momento los siguientes aspectos:

• Evitar la duplicidad de elementos que puedan ser reutilizables. Puede ser fácil caer en este error cuando se manejan grandes cantidades de elementos. Por ello es primordial evitar cualquier duplicidad que sea innecesaria para mantener la estructura original del sistema.
• Jerarquizar y mantener la consistencia en la nomenclatura de cada elemento. La posible tendencia a improvisar nombres deberá desaparecer para ser muy rigurosos en este aspecto, ya que la nomenclatura interrelaciona y da sentido a todos los elementos del sistema.
• Evitar la desvinculación de instancias. De este modo se garantiza que las actualizaciones se aplicarán en todos los elementos de diseño involucrados. 
• Asegurarse de que todos los equipos utilizan el sistema de diseño central y no recurren a sistemas secundarios. En equipos de trabajo más numerosos, hay más posibilidades de que parte de los miembros puedan desviarse del foco central. Por ello es relevante hacer hincapié en este aspecto para mantener el sistema de diseño alineado en todo momento.

Tal y como se puede observar, aplicar método y foco a nuestros procesos de diseño UX puede aportar grandes beneficios. Los sistemas de diseño, y más concretamente el Diseño Atómico, es una metodología tremendamente poderosa, que aunque requiere una considerable inversión de tiempo y recursos, compensa con creces por sus eficientes resultados.

Artículo actualizado en agosto de 2022.