En la medida que el diseño se vuelve más importante para las empresas también es necesario que se vuelva más escalable y flexible. Los Sistemas de Diseño (Design Systems) son una manera de crear soluciones para la gestión y el mantenimiento del diseño de un producto.

El diseño visual e interactivo de un producto digital no es ni un hito en un proyecto ni algo que se hace solo una vez. Conforme el producto madure y evolucione, su diseño debe madurar y evolucionar con él, especialmente si sabemos que el diseño es un componente importante en el retorno de inversión de un producto digital.

Si diseñar algo por primera vez es complejo, darle mantenimiento a ese diseño es todavía más complejo, ya que al agregar nuevas funcionalidades también se agregarán nuevas formas para que el usuario interactúe con el producto, muchas de las cuales seguramente no fueron consideradas en el diseño original. También es necesario considerar las complejidades logísticas en el mantenimiento del diseño, cuando las personas que forman parte del equipo de diseño cambien de rol o dejen la empresa.

Para lidiar con los problemas de la gestión del diseño, las empresas generalmente hacen tres cosas:

  1. Aumentan el número de personas en el equipo de diseño, o
  2. Dividen un equipo de diseño grande en varios equipos pequeños que se especializan en una parte del producto, o
  3. Contratan freelancers o proveedores externos para ayudar con el exceso de trabajo.

Lamentablemente ninguna de las tres escala limpiamente, ya que generan costos y trabajo de gestión adicional. Los equipos muy grandes o descentralizados también tendrán problemas para comunicar prioridades, manejar cambios en el diseño, lo que a la larga producirá inconsistencias en el diseño que afectarán la experiencia de los usuarios finales y crearán una deuda técnica que eventualmente será insostenible.

Inventario de Interfaz de un sitio web, en el que es posible ver la cantidad enorme de estilos para un botón. Esta falta de consistencia hace más lento y costo el mantenimiento del diseño, y compromete la experiencia del usuario final. Crédito: Brad Frost

Guías de Estilo vs Sistemas de Diseño

Entender que es un Sistema de Diseño (y qué no es) es el primer paso para hacer una gestión eficiente del diseño. Lo primero es entender que una guía de estilo no es un sistema de diseño. Las guías de estilo se refieren a una parte visual de la experiencia sobre el uso de tipografías, colores y sobre el tono y la voz de la marca.

Un sistema de diseño puede estar basado en una guía de estilo, pero debe ir más allá, para cubrir además del diseño visual también el diseño interactivo, emocional y los elementos para la implementación del diseño, es decir, el código que vuelve el diseño tangible.

«Un sistema de diseño es una serie de patrones interconectados y prácticas de diseño organizadas de manera coherente para crear productos digitales»

Alla Kholmatova, Design Systems

El sistema de diseño debe ser una referencia y una guía que permita que el trabajo de diseño sea un proceso colaborativo, no de aportaciones individuales, que permita tener un lenguaje unificado y que funcione para documentar desde el principio los estilos y patrones que se utilizarán.

Elementos de un sistema de diseño

En el centro de un sistema de diseño, además de las guías de estilo, encontraremos:

  • Estándares y convenciones de diseño. En un sistema de diseño el por qué es tan importante como el qué y el cómo. La definición de estándares de diseño y desarrollo es crítica para crear entendimiento en los miembros de un equipo y eliminar la ambiguedad y la subjetividad que con generan fricción y confusión en el proceso de diseño.
  • Patrones de estilo, diseño y desarrollo. El uso de patrones ayuda a reutilizar el trabajo y la experiencia en problemas previos para crear soluciones generales que pueden aplicarse a problemas nuevos, en lugar de comenzar desde cero en cada ocasión. Todos los miembros de un equipo de diseño pueden así beneficiarse de la experiencia de los demás.
  • Componentes. La práctica de hacer diseño modular con componentes reutilizables sirve para usar el mejor el tiempo de diseño al hacer las cosas solo una vez (DRYDon’t Repeat Yourself) y para crear componentes más complejos sin aumentar la complejidad del procesos.

Beneficios de un Sistema de Diseño

«Lo difícil no fue hacer que el equipo siguiera las reglas, lo difícil fue que se pusieran de acuerdo en cuáles eran las reglas»

Lori Kaplan – ATLASSIAN

Crear un sistema de diseño no es fácil ni es rápido, pero tener uno tiene muchas ventajas para un equipo de diseño y desarrollo de productos digitales:

  1. El diseño se vuelve escalable. Al tener un lenguaje unificado y componentes reutilizables, los diseñadores necesitan pueden hacer más en menos tiempo. Las mejores prácticas de diseño y desarrollo se propagan con más rapidez y se adoptan con menos fricción.
  2. La colaboración se vuelve más sencilla. Un sistema de diseño es un esfuerzo de equipo, y el trabajo de una persona ayuda a los demás a hacer mejor el suyo.
  3. La deuda técnica se reduce. Los cambios en elementos pequeños del sistema de diseño se propagan rápido en todo el sistema, ayudando a reducir la obsolencia del diseño y el trabajo en reparación de inconsistencias y bugs de desarrollo.
  4. El prototipado es vuelve más ágil. El tener reglas y patrones de diseño claro permite crear prototipos de alta fidelidad con mayor rapidez y hacer experimentos y pruebas con usuarios en menos tiempo para probar nuevas ideas.
  5. Las iteraciones son más rápidas. El uso de componentes reutilizables y las abstracciones de diseño y código hacen que las salidas de producto sean más rápidas al gestionar la calidad de los componentes desde el principio del proceso de diseño.
  6. Se mejora la usabilidad y la accesibilidad del producto. La usabilidad y la accesibilidad se pueden evaluar y mejorar desde la creación de los componentes, asegurando una mejor usabilidad y accesibilidad en sistemas grandes, evitando los conflictos en librerías de componentes no estandarizados y en pruebas unitarias.
  7. Es más fácil crear nuevos productos. Un sistema de diseño es reutilizable, y asegura la calidad y la consistencia del diseño en familias de productos al tener una base de componentes de código y diseño compartida.

Sistemas de diseño comerciales

Al hablar de sistemas de diseño, no es necesario comenzar a crear uno desde cero. Empresas como Google, Apple y Microsoft tienen sistemas de diseño para sus sistemas operativos, plataformas y herramientas. Si el producto a diseñar se entregará como aplicación para Windows, Mac, iOS, Android o Web, si sus usuarios ya conocen estas plataformas, es más simple utilizarlas como punto de partida.

Incluso metodologías como Atomic Design sirven para crear sistemas de diseño a la medida sin tener que comenzar desde cero.

Los Sistemas de Diseño, lejos de ser una moda o una idea conceptual en la creación de productos digitales, son una herramienta tangible y útil que ayuda a que el proceso de diseño escale de una manera limpia y ordenada.

Publicado por Mauricio Angulo S.

Mauricio es diseñador de experiencia de usuario desde el año 2004. Es front-end developer, sprintmaster y entusiasta de AI. Es mentor en el programa Google for Startups y parte de la iniciativa de Microsoft Regional Director como mentor para corporativos y startups en diseño de experiencia de usuario, usabilidad y desarrollo de software. Es co-fundador de UX Nights. También es escritor, ponente internacional y profesor.