6 pasos para construir un gran Design System

"Un sistema de diseño es uno de los activos estratégicos más importantes para su empresa. Es un producto digital vivo que requiere un equipo, un plan y un conjunto de herramientas especializadas".

— Brent Stewart, Senior Director Analyst, Gartner

En Infragistics también creemos firmemente en el valor de un sistema de diseño. Cambia la forma en que las empresas innovan y acelera el ritmo de creación de aplicaciones. También nos gustaría añadir que los sistemas de diseño están evolucionando y son una inversión que da sus frutos en el futuro. Sin embargo, muchas empresas todavía pasan por alto los beneficios de un sistema de diseño, lo que desafortunadamente resulta en interrupciones visuales y de comportamiento, discrepancias de marca, mala usabilidad, estándares de diseño mal comunicados y otras inconsistencias en el proceso de diseño. Otras veces, está el momento de fracaso que surge en algún lugar entre el momento de construir un sistema de diseño y su implementación adecuada. Lo que nuevamente conduce a los mismos contratiempos mencionados anteriormente.

Para ayudarlo a lidiar con estos desafíos, profundizaremos en el cómo y el qué de la arquitectura de un sistema de diseño efectivo y también le mostraremos lo que implica y por qué debería usar uno.

Si ya está familiarizado con los sistemas de diseño, puede saltar a los 6 pasos para construir una Design System de inmediato.  Si no es así, sigue leyendo.

¿Qué es un Design System?

Existe la definición popular de que un sistema de diseño es una colección de activos de diseño que se utilizan para crear interfaces de usuario. Pero en realidad es mucho más que una biblioteca de componentes de interfaz de usuario reutilizables. Los sistemas de diseño son "empoderamientos de diseño" hechos a mano que:

• Servir como una única fuente de información para los equipos de producto.
• Sintonice un contexto de uso y un dominio de aplicación específicos.
• Funciona como un inventario de patrones de diseño de UX y orientación de estilo de marca.
• Acelere el proceso de diseño y mejore significativamente la coherencia.

Para nosotros, en Infragistics, la coherencia significa mantener la coherencia del estilo y el comportamiento en cualquier programa de diseño, IDE de desarrollo y todo lo que sucede en el medio. Llevando la consistencia a un nivel completamente diferente, nuestro objetivo es proporcionar herramientas consistentes no solo para los diseñadores que usan diferentes programas de diseño con kits de interfaz de usuario para Sketch, Adobe y muy pronto Figma, sino también para los desarrolladores, sin importar qué marco prefieran, como Angular, Blazor o algo más. De esta manera, el proceso de desarrollo del producto culmina en una experiencia consistente para los usuarios de la aplicación al final.

El tipo de proceso simplificado y la consistencia de la que hablamos se pueden lograr a través de automatizaciones y complementos que, por ejemplo, te permiten aplicar un tema general a tu biblioteca de diseño de una sola vez. También significa permitir enfoques innovadores y mucho más eficientes para manejar el traspaso de diseñador-desarrollador, ahorrándose el tiempo y la energía de tratar de explicar ideas o justificar animaciones y microinteracciones que generalmente no están en los archivos Sketch, Adobe XD y Figma.

¿Por qué usar un Design System– ¿Cuáles son sus beneficios y su valor?

No es de extrañar que empresas como IBM, Atlassian, Salesforce.com, la NASA y otras hayan implementado un paradigma de sistema de diseño para gestionar su proceso de diseño hasta el desarrollo. La creación, el uso y el mantenimiento de un sistema de diseño conducen a experiencias más coherentes porque no es necesario reconstruir componentes o patrones. En cambio, los diseñadores y desarrolladores se benefician de un inventario unificado que:

• Fomenta la reutilización y ofrece activos de diseño flexibles, lo que le ahorra tiempo y esfuerzos al diseñarlos desde cero.
• Gobierna estándares claros y cumplimiento de la marca a través de una tipografía, colores, voz y tono consistentes.
• Reduce los defectos de producción, ya que los controles de la interfaz de usuario se utilizan a escala en equipos y diferentes proyectos.

Ya hemos explorado todos los beneficios de usar un sistema de diseño en nuestra Guía completa. Así que, si quieres conocer sus ventajas, el valor que aporta, su anatomía y algunos ejemplos de sistemas de diseño, allí lo encontrarás todo.

¿Cómo construir un buen Design System en 6 pasos?

Lo que constituye un buen sistema de diseño entonces, bueno, para decirlo simplemente algo que no es una caja negra para el diseño, sino que permite diferentes integraciones, viene en una forma que es flexible para que el diseñador la integre en sus procesos y DesignOps, mientras que al mismo tiempo asegura, diseñan pensando en el usuario final, lo que permite varias formas de recopilar comentarios de las partes interesadas y facilita la ejecución de pruebas con usuarios reales. Y, por supuesto, un buen sistema de diseño no es costoso de mantener, es fácil de evolucionar y tiene una arquitectura de sistema de diseño limpia y transparente.

Step 1 – Run an inventory

Si está comenzando con la construcción o el uso de un sistema de diseño de terceros, el primer paso es realizar un inventario de sus productos o wireframes. Esto te ayudará a reducir los componentes que son críticos para tu proyecto, ya que aparecerán una y otra vez de una pantalla a otra mientras exploras el producto. Con el inventario a mano, puede comprender más fácilmente cómo se producen estas piezas a partir de elementos más pequeños: un botón viene con una forma determinada, una combinación de colores y, no lo olvidemos, el tipo de letra de su etiqueta. Lo que también comprenderá a medida que profundice es que un botón por sí solo no está ni cerca de lo que necesita en última instancia y tiene su papel especial en un menú de navegación o un formulario que los usuarios deben completar.

Paso 2 – Definir las piezas subatómicas

Esto nos lleva al segundo paso, que es definir las piezas subatómicas o la base subyacente de cómo se verán las cosas para que puedan dar forma a un producto que sea consistente y agradable a la vista.  Nuestra experiencia con Indigo.Design nos ha llevado a pensar que los elementos que encajan en esta categoría y que deben ser visibles para el diseñador que utiliza el sistema son:

• Colores
• Tipografía
• Oscuridad
• Iconos
• Gráficos visuales, como ilustraciones

Sin embargo, podría haber cosas igualmente cruciales pero más sutilmente visibles, como el tamaño de la cuadrícula de diseño, que generalmente determina los tamaños de relleno, y el radio del borde para el redondeo de los componentes. Por ejemplo, si usamos una cuadrícula de 4px, es probable que nuestros rellenos en los componentes sean de 4px, 8px, 16px o combinaciones de ellos, digamos 8px + 16 px = 24 px. Como resultado, esto definirá un redondeo de 8px de un botón, por ejemplo, y un margen de 24px entre dos botones adyacentes.

Paso 3: Reducir los componentes reales de la interfaz de usuario

El tercer paso incluye los componentes reales que ha identificado al hacer un inventario. Comience siempre con los que se pueden ver con más frecuencia en la interfaz de usuario de su producto. Por lo general, se trata de botones, iconos, campos de entrada, así como párrafos de texto e imágenes que generalmente no tienen forma de componentes, sino que existen como elementos nativos. Es importante pensar en los diferentes tipos de componentes, por ejemplo, si se utilizará un campo de entrada para la entrada de texto, la introducción de un número o incluso la selección de una fecha. Es posible que desee considerar diferentes estilos, es decir, puede tener 10 botones en una página, pero generalmente hay uno que es más prominente que los demás: el CTA.

Step 4 – Design validation states

Puede pensar que el cuarto paso es crear los patrones y diseños de la interfaz de usuario con estos componentes, lo que nos acercaría un paso más al diseño de las pantallas de productos. Pero no. Antes de eso, debemos volver a los componentes nuevamente.

Una cosa que hay que recordar es que una interfaz de usuario nunca es estática. Fluye para el usuario en respuesta a las interacciones que realiza. Un componente que no define un estado de desplazamiento, enfoque o desactivado es tan bueno como un martillo de cristal. Sin embargo, tampoco podemos esperar que nuestros usuarios estén siempre en el camino correcto. Por lo tanto, el diseño de estados de validación y mensajes de error es importante en esta etapa intermedia de la arquitectura del sistema de diseño.

Además, a medida que crea las intrincadas plantillas de contenido del diseño de un componente, no olvide asegurarse de que sea:

• Fluid
• Behaving as expected when resized
• Responder correctamente a los elementos que componen que se mueven y se eliminan

Las tres herramientas de diseño para las que creamos Indigo.Design (Sketch, Adobe XD y Figma) ofrecen un grado más que decente de diseños inteligentes/automáticos. Una vez que se complete su conquista de componentes inteligentes, obtendrá todos los beneficios aplicando la misma estrategia al diseño de sus patrones.

Step 5 – Build design patterns

Ahora, el quinto paso es construir esos patrones. Dado que este es un proceso bastante sencillo, me gustaría darte algunos ejemplos de los patrones de interfaz de usuario que hemos hecho en Indigo.Design. Si está creando un producto que reproduce contenido multimedia, puede resultarle útil tener un reproductor multimedia prediseñado y diseños de control de volumen. Si está creando interfaces de usuario conversacionales, los patrones de chat y alimentación social serán útiles. Avanzando hacia un contexto más formal, es posible que necesite una variedad de formularios para un producto en la industria de seguros y cumplimiento. Y, por último, casi cualquier empresa acabará necesitando páginas de detalles de productos, tablas comparativas de precios, un onboarding o un perfil de usuario.

Lo mejor de los patrones es que puedes construirlos sobre la marcha. Un cierto tipo de formulario puede existir inicialmente en el diseño, ya que se usa solo en un solo contexto. Pero a medida que crezca su uso en el producto, se convertirá naturalmente en un patrón que será la única fuente de verdad para todas las instancias de ese diseño en la variedad de contextos en los que se está utilizando.

Step 6 – Prepare design documentation

El último paso es documentar su sistema de diseño. El objetivo aquí es tener que reducir el esfuerzo en esto tanto como sea posible. Si la arquitectura de su sistema de diseño es lo suficientemente estable y flexible, el número de cosas que tendrá que documentar será mínimo. Por lo tanto, podemos decir en broma que el objetivo de la arquitectura es escribir la menor cantidad de documentación posible una vez que el sistema de diseño esté completo. Sin embargo, eso no excluye tener una sección con notas de la versión en el archivo del kit de interfaz de usuario. O tener una sección con ejemplos de incorporación e incluso documentación en línea que proporcione ejemplos de sistemas de diseño con lo que se debe y no se debe hacer cuando se trata de usar y configurar componentes o cambiar la marca del sistema de diseño. Para simplificar un poco las cosas, todo esto también se puede manejar aprovechando un administrador de sistemas de diseño.

Otro objetivo de la arquitectura del sistema de diseño es tener que hacer el menor mantenimiento posible y ampliar los escenarios que puede cubrir un sistema de diseño añadiendo nuevos componentes y patrones sin romper los existentes. Y dado que muchos consideran que tres es un número de la suerte, agregaré un tercer objetivo para una arquitectura de sistema de diseño exitosa. Es entonces cuando el nuevo Jefe de Marketing o Diseño decide que la marca de una determinada empresa necesita una renovación completa. Pues bien, el sistema de diseño puede agilizar el rediseño, adaptándose a él en cuestión de minutos, en lugar de semanas.

Seguir estos pasos y pensar en el sistema de diseño de forma agnóstica desde la marca, el caso de uso y el producto a medida que lo construye, lo ayudará a reducir los desafíos de diseño y desarrollo de productos en el futuro. Una vez que la base esté estable, puedes volver y aplicar todos estos detalles encima.

Sin embargo, es natural entender que siempre hay ciertos desafíos al implementar nuevos procesos. Pero no pasa nada. Es por eso que queremos compartir la nuestra mientras nos ponemos en marcha para crear Indigo.Design. Muchos de ellos estaban relacionados con ciertos cambios de paradigma en los programas de diseño que queríamos apoyar. Luego, estaba el desafío continuo de asegurarnos de que los componentes que usamos en tiempo de diseño y los componentes que los desarrolladores usan para codificar estén sincronizados todo el tiempo. Para asegurarnos de que todo esto funcione sin problemas, hemos establecido ciertos procesos y hacemos revisiones periódicas porque es algo en lo que vale la pena dedicar tiempo, sabiendo que mejora la calidad, el flujo de trabajo y la consistencia.

Con tantos riesgos potenciales, es posible que comience a preguntarse si desea estar en el negocio del mantenimiento de sistemas de diseño o si prefiere concentrarse en su producto y dejarlo a alguien como nosotros y Indigo.Design.

Why Choose Indigo.Design For Your Design System?

Para poner en marcha una arquitectura sólida y preparada para el futuro de un sistema de diseño, por supuesto, te aconsejo que descargues y explores Indigo.Design por dentro y por fuera. Le ahorra tiempo y esfuerzos, y le permite concentrarse en el diseño real.

Algunas cosas rápidas a tener en cuenta:

1. Indigo.Design es una biblioteca nativa para Sketch y Figma en un futuro próximo en lugar de un lienzo lleno de elementos para copiar y pegar.
2. Indigo.Design no solo tiene componentes con estados, sino también plantillas y variantes que se ajustan automáticamente a medida que el usuario del sistema de diseño cambia la configuración de un componente.
3. Indigo.Design también trabaja con App Builder WYSIWYG para crear componentes reales en la web.

4. Indigo.Design cuenta con potentes mecanismos de tematización para que puedas aplicar los colores y tipografías de tu marca y hacerla tuya.
5. Indigo.Design implementará distintas variantes para Material, Bootstrap y Fluent que se ven y se sienten como lo hacen esos marcos.

Sources:

[1] Gartner, Cree mejores productos más rápido con sistemas de diseño, Brent Stewart, Van Baker, 2 de marzo de 2021