Los ingenieros de software necesitan sistemas de diseño para crear productos con una buena experiencia de usuario

Muchos equipos de productos modernos siguen creando diseños originales de UX y elaborando experiencias digitales desde cero. Al hacerlo, pasan por alto las ventajas de usar patrones de diseño existentes y probados, lo que conduce a una mala usabilidad, a incoherencias visuales y de comportamiento, así como a ciclos de diseño más largos. Para mejorar la calidad general de la UX, los responsables en ingeniería de software deben implementar un sistema de diseño: un conjunto de activos de diseño reutilizables y componentes de código de la capa de presentación que se rigen por estándares claros para construir varios productos digitales.

“Un sistema de diseño es uno de los activos estratégicos más importantes para tu empresa. Es un producto digital vivo que requiere un equipo, un plan y un conjunto de herramientas especializadas”, afirma Brent Stewart, director analista sénior de Gartner.

Descargar ahora: Mejora la calidad del software creando inmunidad digital

¿Qué valor aporta un sistema de diseño?

Un sistema de diseño crea una “versión única de la verdad”: un lenguaje de diseño central para los diseñadores de UX, que les permite crear experiencias de usuario coherentes en diversos equipos, canales y plataformas. La propuesta de valor de un sistema de diseño incluye:

• Velocidad: reduce significativamente el tiempo de diseño y codificación al aprovechar los patrones de diseño de UX probados en lugar de crear todo desde cero.
• Escala: permite a los diseñadores y desarrolladores compartir activos de diseño y componentes de código comunes y aprobados en toda una cartera de productos digitales.
• Cumplimiento de la marca: garantiza que cada activo de diseño se alinee con los atributos de marca de una organización, como el color, el logotipo, la tipografía, la voz, el tono, etc. 
• Reducción de defectos: con el tiempo, los componentes del código de un sistema de diseño se “endurecen”, lo que hace que los defectos de producción sean una rareza en la capa de presentación.

¿Qué es un sistema de diseño?

Un sistema de diseño ideal comprende tokens de diseño, patrones de diseño de UX personalizables, códigos listos para la producción e instrucciones para ofrecer de forma eficiente productos digitales de alto rendimiento. Estos son los cuatro componentes de un sistema de diseño:

Activos de estilo

Los atributos visuales, escritos y de comportamiento como logotipos, paleta de colores, iconografía, tipografía, voz o tono se engloban en los activos de estilo.

Los sistemas de diseño avanzados utilizan tokens de diseño para centralizar la gestión de colores, estilos de texto, iconos y más. Los tokens de diseño son entidades independientes de la plataforma que almacenan variables de diseño y se utilizan en lugar de valores codificados, como píxeles o valores hexadecimales, para mantener la coherencia de la interfaz de usuario (UI) y la experiencia de usuario (UX) cuando los sistemas de diseño se amplían.

Activos estructurales

Los activos estructurales son un conjunto de elementos de diseño de UX (botones específicos, plantillas de página, etc.) para crear diseños de pantalla fáciles de usar con un tiempo de entrega más corto. 

El enfoque de Atomic Design (“diseño atómico” en castellano) es una de las formas más populares de describir la jerarquía de activos estructurales. He aquí un desglose general:

• Átomos: un átomo es la unidad fundamental de una interfaz de usuario. Un solo campo de formulario, un menú desplegable, un botón o un icono son todos átomos. 
• Moléculas: una molécula es un pequeño grupo de elementos de la interfaz de usuario (UI) que funcionan juntos como una unidad (un grupo de varios átomos). Una colección de campos de formulario o un botón de envío asociado puede ser un excelente ejemplo de molécula.
• Organismos: un organismo es una entidad más compleja en la jerarquía de diseño de UX (un conjunto de moléculas y átomos). Algunos ejemplos de organismos son la navegación de servicios públicos, la navegación global, el “hero space” y el pie de página.
• Plantillas: una plantilla es una estructura o diseño reutilizable formado por la agregación de átomos, moléculas y organismos. Las plantillas estándar incluyen la página de inicio, la página de lista de productos, la página de detalles del producto y el carrito de la compra.
• Paginas: una página es una versión completamente desarrollada y optimizada de una plantilla. Cuando una plantilla se enriquece con marcadores de posición o contenido real, como texto, imágenes o unidades publicitarias, se convierte en una página.

Componentes de código

Los componentes de código son un inventario de códigos listos para la producción en la estructura seleccionada. Se organizan utilizando la jerarquía del enfoque de Atomic Design. Cada átomo, molécula, organismo y plantilla de diseño tiene un componente de código asociado que debe coincidir. Los sofisticados sistemas de diseño tokenizan componentes de código para actualizar colores, tipografía, espaciado, etc., de manera centralizada.

Estándares

Deben existir principios rectores, pautas de uso y políticas de gobernanza aplicables para crear sistemas de diseño eficientes.

Los principios rectores garantizan que los activos de diseño y los componentes de código sean modulares, componibles, genéricos, flexibles y accesibles. Las pautas de uso incluyen las reglas relacionadas con la tipografía, la paleta de colores, las dimensiones y el espaciado, la gramática, las proporciones, el estilo de escritura, etc.

Las políticas de gobernanza son necesarias para mantener los estándares correspondientes a lo largo del tiempo. En lugar de implementar el modelo de gobernanza de TI convencional, los responsables en ingeniería de software pueden utilizar un enfoque estilo wiki. Puede dar a los colaboradores la libertad de crear, actualizar y eliminar activos de estilo, activos estructurales y componentes de código “ad hoc”, lo que permite a los equipos de productos mejorar el sistema de diseño sobre la marcha.

Para mantener la credibilidad del sistema de diseño, el equipo de liderazgo puede revisar las adiciones, ediciones y eliminaciones durante un lanzamiento importante, además de sus revisiones trimestrales.

Utilizar los sistemas de diseño UX existentes 

A lo largo de los años, se han lanzado varios sistemas de diseño de código abierto y basados en plataformas para garantizar una experiencia de usuario de alto rendimiento. A fin de crear aplicaciones en una plataforma importante, se recomienda encarecidamente reutilizar estos sistemas de diseño existentes tanto como sea posible. Los activos de diseño y los componentes de código en estos sistemas están respaldados por una extensa investigación sobre UX dentro de categorías de productos como la gestión de relaciones con el cliente (CRM) y la planificación de recursos empresariales (ERP). 

Asignar un equipo para los sistemas de diseño 

Trata tu sistema de diseño como un producto digital estableciendo un liderazgo de producto que consista en un propietario del producto, un responsable de UX y un responsable de desarrollo. 

Los tres responsables pueden mejorar el sistema de diseño con orientación operativa, de diseño y técnica. El equipo también puede tener colaboradores como diseñadores de UX, estrategas de contenido, desarrolladores front-end y especialistas en accesibilidad para encargarse de cada versión del sistema de diseño.