Una guía completa de sistemas de diseño

No es ningún secreto que existe una gran desconexión entre los equipos de diseño y desarrollo, a menudo conocida como "el traspaso", el momento en que se envía un prototipo de aplicación al equipo de desarrollo. Si bien las entregas en los deportes a menudo sugieren un movimiento suave y sin esfuerzo (uno piensa en un mariscal de campo que coloca el balón en las manos de un corredor), las entregas en la creación de aplicaciones son cualquier cosa menos suaves.

Esto se debe a que el diseño y el desarrollo representan disciplinas funcionales básicas dentro de los equipos de productos de software, y cada disciplina ha evolucionado rápidamente por sí sola. Y aunque hay soluciones de herramientas maduras dirigidas exclusivamente a diseñadores o desarrolladores, las soluciones que apuntan a una historia de diseño a código han sido raras. Aunque eso está cambiando, como discutiremos en breve.

En su reciente informe^"​Build Better Products Faster with Design Systems", Gartner destaca 3 hallazgos clave en su análisis de cómo las empresas crean software hoy en día:

• Los productos digitales diseñados desde cero a menudo conducen a una usabilidad inferior, inconsistencias visuales y de comportamiento, y ciclos de diseño más largos.
• Muchos equipos de producto crean sistemas de diseño originales y personalizados, lo que resulta en una complejidad innecesaria que requiere demasiado tiempo y esfuerzo para diseñar, construir y mantener.
• Los sistemas de diseño envejecen rápidamente, erosionando su capacidad para aumentar la usabilidad y la calidad del producto y disminuir el tiempo de comercialización.

Desde el punto de vista del éxito empresarial, las empresas reconocen la necesidad de ofrecer una experiencia de usuario atractiva en las aplicaciones. Sin embargo, ofrecer una experiencia de usuario atractiva requiere un alto grado de colaboración entre el diseño y el desarrollo. Y este nivel de colaboración ha sido un desafío durante años porque es difícil para:

• Los desarrolladores pueden duplicar con precisión lo que los diseñadores han creado o imaginado.
• Diseñadores para comunicar la intención del diseño y para transformar las especificaciones visuales en código.
• Los desarrolladores pueden encontrar incluso los archivos de las características o imágenes que se muestran en las maquetas pero que no se entregaron durante la entrega.

 Un sistema de diseño puede ayudar a superar los silos tradicionales entre diseñadores y desarrolladores.

En los últimos años, los sistemas de diseño han surgido como una solución para mejorar la colaboración entre el diseño y el desarrollo. El enfoque del sistema de diseño ha sido adoptado por organizaciones como Salesforce, IBM, Atlassian y muchas otras y sirve como una indicación de su atractivo.

¿Qué es un Design System?

Un sistema de diseño, en términos simples, representa un inventario deliberado de patrones de UX y guías de estilo de marca que luego se realizan como componentes de software coincidentes que se pueden reutilizar o contextualizar para crear aplicaciones de software. Un sistema de diseño también puede ampliarse para contener orientación de voz y tono para escribir contenido, plantillas de página e incluso flujos de usuario. Está hecho a mano para el dominio de aplicación y el contexto de uso específicos de cada organización. Sobre todo, sirve como una única fuente de verdad para los equipos de producto a la hora de crear aplicaciones y representa un contrato de colaboración entre el diseño y el desarrollo.

Beneficios de usar un Design System

Con un sistema de diseño implementado, los diseñadores y desarrolladores pueden trabajar de forma independiente en sus propias herramientas sin necesidad de comprobaciones de bajo nivel en torno a la implementación del diseño. En su lugar, pueden centrarse en interacciones de alto valor en torno a los resultados.  Los sistemas de diseño acordados incluyen los siguientes beneficios:

• Se ha reducido el tiempo necesario para crear/construir prototipos utilizando controles de interfaz de usuario predefinidos aceptados y aprobados y patrones de interfaz de usuario.
• Coherencia entre aplicaciones y equipos en términos de modelo de interacción, pero también requisitos de accesibilidad como WCAG, ARIA y cumplimiento de la Sección 508.
• Reducción de defectos y pruebas, ya que el sistema de diseño y los controles de la interfaz de usuario se utilizan a escala en varias aplicaciones y equipos durante períodos de tiempo más largos.
• Consistencia de marca, ya que los componentes centrales del sistema de diseño son aceptados y aprobados por el equipo de productos digitales / centro de excelencia de diseño.

Desde el punto de vista del cliente, la coherencia significativa entre las aplicaciones ofrecidas por la misma organización permite a los usuarios reutilizar lo que han aprendido de las interacciones anteriores con las aplicaciones.

Como dice Diana Mounter de GitHub en su charla de YouTube:

• Los sistemas de diseño ponen orden en el caos. Todos se mantienen en la misma página, por lo que todo el producto permanece consistente y pulido en todo momento.
• Los sistemas de diseño mejoran la experiencia del usuario mediante el uso repetido de patrones conocidos y probados. Diseñar cualquier cosa desde cero deja margen de error, así que intenta usar lo que ya funciona.
• Los sistemas de diseño mejoran la eficiencia del flujo de trabajo. Los equipos de producto saben exactamente cómo deben verse los componentes de las nuevas funciones y cómo implementarlos".

Vocabulario compartido entre diseño y desarrollo

Si bien la consistencia es una gran victoria, algo tan simple como un nombre mutuamente acordado para los componentes y patrones puede ser de gran ayuda. Esto es útil para los usuarios actuales del sistema de diseño y también para la incorporación de futuros miembros. Hacer que la convención de nomenclatura sea explícita y compartida facilita que tanto los desarrolladores como los diseñadores encuentren los componentes en sus respectivos entornos de herramientas.

Con el tiempo, los nombres de los patrones de UX comenzarán a aparecer en las conversaciones, sirviendo como sustituto de los requisitos del usuario. Por ejemplo, cuando alguien menciona que debemos usar un componente de cuadro combinado, está claro tanto para los diseñadores como para los desarrolladores qué tipo de comportamiento admite y cómo puede ayudar con la experiencia de tarea del usuario. Dado que un sistema de diseño documenta un componente como un patrón, generalmente explica cuándo usar un componente específico y cómo usarlo de la manera correcta, con ejemplos. Entonces, en ese sentido, un sistema de diseño puede satisfacer la necesidad de una guía de UX accesible, evangelizando así las prácticas de diseño.

Accelerate Design Process and Development

La velocidad de entrega es un beneficio explícito de la reutilización de componentes en un sistema de diseño. Desde el punto de vista del diseño, la eficiencia proviene de no tener que crear nuevos componentes o patrones, ya que ya forman parte de los kits de interfaz de usuario del sistema de diseño. Incluso cuando se enfrentan a la necesidad de crear un nuevo patrón complejo, los diseñadores pueden confiar en las directrices del sistema de diseño y construir algo utilizando los botones, etiquetas o menús desplegables ya disponibles.

Desde el punto de vista de un desarrollador, poder generar el código para este componente o patrón ayuda a evitar incoherencias entre las especificaciones de diseño y el código. La velocidad de aprendizaje es un beneficio no tan obvio de usar un enfoque de sistema de diseño. Ahora que los diseñadores se han liberado de la creación de píxeles, pueden volver al verdadero proceso de diseño, centrándose en diseñar los recorridos o flujos de los usuarios y evaluarlos con los usuarios. El enfoque utilizado para crear entregables de diseño también se puede utilizar para producir prototipos provisionales para pruebas de usabilidad y obtener comentarios de las partes interesadas.

Es importante tener en cuenta que un sistema de diseño no es solo un conjunto de mejores prácticas de UX y kits de UI. También necesita componentes de interfaz de usuario coincidentes en el lado del desarrollo. Si bien el movimiento de los sistemas de diseño ha sido tradicionalmente defendido por los equipos de diseño dentro de las grandes organizaciones, para que realmente tenga éxito, el equipo de desarrollo también debe convertirse en copropietario/colaborador del sistema de diseño.

Aquí es donde los sistemas de diseño suelen fallar: son defendidos por el lado del diseño del equipo de productos digitales; La parte de desarrollo no está incluida. La falta de comunicación y el tiempo perdido en las transferencias mal gestionadas siguen existiendo en estos casos.

¿Por qué utilizar un Design System?

Los sistemas de diseño obligan a los diseñadores a sistematizar su trabajo, a pensar en componentes. Los desarrolladores front-end ya lo están haciendo. Lo han estado haciendo. Cuando los equipos de diseño crean sistemas de diseño, de repente empiezan a pensar como sus compañeros de equipo de desarrolladores y a hablar el mismo idioma.

Si bien puede parecer que un sistema de diseño simplemente agrega otra capa a su trabajo, los sistemas de diseño pueden ayudar a aumentar su eficiencia. Para comprender mejor cómo se aplica esto a usted, considere estas preguntas:

• Escala: ¿está diseñando un producto (o productos) que tiene más de 100 o más pantallas? ¿Crecerá significativamente su(s) producto(s)?
• Consistencia: ¿desea que sus productos tengan una marca, una apariencia y una experiencia coherentes? ¿Su producto tiene actualmente 20 estilos de botones diferentes?
• Eficiencia: ¿desea que sus diseñadores visuales, diseñadores de experiencia de usuario y desarrolladores front-end trabajen más rápido y ahorren tiempo?
• Trabajo en equipo: ¿Tienes proyectos en los que hay mucho traspaso entre diseñadores o muchos diseñadores trabajan en el mismo proyecto a la vez?

Si has respondido "sí" a una de las preguntas anteriores, entonces un sistema de diseño es probablemente el adecuado para ti. Trabajar a escala y aumentar la coherencia y la eficiencia son los mayores beneficios de crear y usar un sistema de diseño.

Anatomía de un Design System

Un sistema de diseño utiliza un enfoque para construir elementos escalables que se pueden ilustrar mejor como átomos, moléculas y organismos. Generalmente se la conoce como la Metodología de Diseño Atómico creada por Brad Frost. Se ha convertido en un enfoque popular para describir la estructura de un sistema de diseño.

Ilustrando el concepto átomo-molécula-organismo con ejemplos.

Volviendo a la metáfora de los átomos, las moléculas y los organismos, se empieza por diseñar el componente más pequeño (por ejemplo, un botón, un avatar, una etiqueta, un encabezado, etc.). Este componente más pequeño se conoce como átomo.

Yendo un nivel más profundo, los átomos consisten en partículas como protones y neutrones. En el caso de un sistema de diseño, esto se puede asignar a la paleta de colores base y a la tipografía, que definen la identidad de marca de la organización.

Subiendo un nivel más allá de los átomos, tienes moléculas, que están compuestas de átomos. Las moléculas se pueden asignar a componentes y representan estructuras más complejas, como un elemento de menú, un elemento de lista y un elemento desplegable.

Luego, mediante la combinación de diseños y múltiples componentes, obtenemos la siguiente unidad jerárquica: los patrones de UX. Si nos ceñimos a nuestra comparación biológica, eso nos lleva a los organismos. Estos encapsulan las mejores prácticas de UX siguiendo los "buenos" principios de diseño y están diseñados para las necesidades específicas de un producto.

El objetivo de ilustrar los sistemas de diseño como átomos, moléculas y organismos es trazar paralelismos con un sistema vivo. Un sistema de diseño no debe ser estático y cambiar nunca, sino que debe reflejar las necesidades de UX del producto y evolucionar constantemente con el producto y las tecnologías utilizadas. Surgen nuevos requisitos debido a los nuevos requisitos de diseño de dispositivos. Las nuevas características del producto y los cambios en la identidad de la marca son inevitables. Debemos asegurarnos de que nuestro sistema de diseño sea flexible y esté listo para cambiar para que podamos adaptarnos a estos cambios.

Cómo construir un Design System

Para empezar, puedes usar un sistema de diseño existente como base para lo que construyes. El beneficio de usar un sistema existente es que podría ahorrarle mucho tiempo, especialmente si está respaldado por controles y componentes de interfaz de usuario del mundo real. En este caso, tiene la definición del sistema de diseño y los controles para respaldarla al realizar la entrega del diseño a los equipos de desarrollo. Este es el traspaso de diseño a código del que siempre hablamos. Cuando comienzas con un sistema de diseño existente como base, no estás sacrificando tus propias necesidades de diseño, puedes personalizar cada aspecto de los kits de interfaz de usuario y la definición del sistema de diseño para tus necesidades corporativas, mientras mantienes los otros beneficios que hemos destacado en este artículo.

To start with the Indigo.Design System, grab the UI Kits and Sync tool from Indigo.Design, and then follow this doc –https://es.infragistics.com/products/indigo-design/help/sync-themes-plugin – to customize to your own needs. 

Ya sea comenzando con un sistema de diseño existente o comenzando desde cero, estos son algunos de los pasos clave para construir un sistema de diseño:

Realizar una auditoría visual

El primer paso para crear un sistema de diseño es hacer una auditoría visual de tu diseño actual, ya sea el diseño de una aplicación, un sitio web o algún otro producto digital. Hacer un inventario del CSS que estás utilizando y de las cualidades visuales de los elementos puede ayudarte a medir el grado de esfuerzo que puede suponer este proceso.

Create a Visual Design Language

El lenguaje de diseño visual es el núcleo de un sistema de diseño. Se compone de componentes discernibles que utilizarás para construir tu producto digital. El lenguaje de diseño visual se compone de cuatro categorías principales, y debes tener en cuenta el papel que desempeña cada uno de estos elementos de diseño en cada componente de la pantalla.

• Color: los colores comunes en un sistema de diseño incluyen de 1 a 3 primarios que representan su marca. Es posible que desee incluir una gama de tintes (un color mezclado con blanco) y tonos (un color mezclado con negro) para darles a sus diseñadores algunas opciones más.
• Tipografía: la mayoría de los sistemas de diseño incluyen solo 2 fuentes: 1 fuente para los encabezados y el cuerpo del texto, y una fuente monoespaciada para el código. Manténgalo simple para evitar sobrecargar y confundir a su usuario. Mantenga el número de fuentes bajo; No solo es una buena práctica de diseño tipográfico, sino que también evita problemas de rendimiento causados por el uso excesivo de fuentes web.
• Tamaño y espaciado: el sistema que utiliza para espaciar y dimensionar se ve mejor cuando tiene ritmo y equilibrio. Una escala basada en 4 está creciendo en popularidad como la escala recomendada debido a su uso en los estándares de iOS y Android, los formatos de tamaño de ICO e incluso el tamaño de fuente estándar del navegador.
• Imágenes: la clave del éxito con las imágenes en su lenguaje de diseño visual es tener un plan y ceñirse a él. Establezca pautas para las ilustraciones y los íconos, y use el mejor formato de imagen para la situación.

Creación de una biblioteca de interfaz de usuario/patrones

A diferencia de la auditoría visual que ya has realizado (que analizó las cualidades visuales de tus elementos de diseño), este paso del proceso analiza los componentes reales de tu interfaz de usuario. Recopila todas las partes y piezas de tu interfaz de usuario que se encuentran actualmente en producción. Es decir, todos los botones, formularios, modales e imágenes. Fusiona y elimina lo que no necesites.

Documente cada componente y utilícelo

Este paso es importante. Asegúrese de documentar qué es cada componente y cuándo usarlo. La documentación y los estándares son lo que separa una biblioteca de patrones de un verdadero sistema de diseño.

Trata a tu Design System como un producto

Al igual que cualquier producto, su sistema de diseño necesita un gerente de producto (generalmente un líder de diseño o un líder de UX en su organización), necesita un backlog, una hoja de ruta y necesita ser mantenido.  Los sistemas de diseño que no se tratan como un producto, en última instancia, terminarán como los productos de su empresa que se ignoran. Se volverán obsoletos, obsoletos, no incluirán las mejores prácticas y patrones más recientes, y no se mantendrán al día con los estándares corporativos. Es fundamental tratar su sistema de diseño como cualquier otro producto, ya que dará confianza a los usuarios de que hay un futuro y que tienen un lugar al que acudir en busca de soporte.

Design System Ejemplos

Sistemas de Diseño Comercial

• Quickbooks Design System
• GEL – Lenguaje de Experiencia Global de la BBC
• Material from Google
• Lightning from Salesforce
• Airbnb’s Visual Language
• Joystick from EA
• Fluent from Microsoft
• Plasma from WeWork
• Polaris from Shopify
• Planeta Solitario
• Enjambre de Meetup
• Lienzo de Hubspot

Sistemas de Diseño Gubernamental

• S. Web Design Standards
• USPTO UI Design Library
• USA Jobs Design System
• Estado de California
• Bristol City Council
• City of Philadelphia
• Australian Government

Design System índigo

El Indigo Design System potencia tu flujo de trabajo de diseño con 60+ componentes de interfaz de usuario que también se asignan a Ignite UI for Angular controles. Cada componente está optimizado para el desarrollo web receptivo y proporciona varias capacidades de creación de plantillas a través de un diseño inteligente y reglas de cambio de tamaño establecidas en la biblioteca. Además, hemos añadido modos claro/oscuro y varios estados de interacción para elegir a la hora de diseñar experiencias dinámicas. Todo esto agiliza el diseño y desarrollo de aplicaciones, permitiendo que cualquier interfaz de usuario creada con la biblioteca en Sketch se construya de Angular con Ignite UI.

La biblioteca Sketch tiene una página Componentes que contiene todos los componentes y símbolos relacionados con ellos. A continuación se muestra una pequeña parte de un sistema de diseño en forma de "lado del diseño": un kit de interfaz de usuario en Sketch, con todas las áreas centrales del sistema de diseño que mencionamos en este artículo.  Esto no solo muestra algunos de los artefactos más simples, como los diversos tipos de botones, grupo de botones y elementos de formulario como casilla de verificación, conmutador y grupo de radio, sino que muestra un control de interfaz de usuario enriquecido como una cuadrícula de datos, que es imprescindible en cualquier sistema de diseño empresarial.

Para encontrar más:

• Iconos de material: una colección de 150+ iconos de material ampliada con 250+ iconos más creados por nosotros de acuerdo con las directrices de diseño de iconos de material, que puede ampliar fácilmente aún más
• Colores: paletas con variantes de color primario, secundario y gris, así como colores especiales y un par de paletas diseñadas específicamente para visualizaciones de datos, incluido un conjunto optimizado para diferentes tipos de daltonismo
• Tipografía: una colección de estilos de texto genéricos y específicos de componentes
• Elevación: el conjunto de 24 sombras con las que estamos familiarizados de Material Design basado en los colores de sombra umbra, penumbra y ambiental.
• Ilustraciones: un conjunto de 17 ilustraciones personalizables y estilizables para que tus diseños sean más divertidos y completos.

Visite Indigo.Design para obtener más información sobre este completo sistema de diseño a código que no solo incluye un sistema de diseño, sino que también integra la creación de prototipos, las pruebas de usuario, la creación de aplicaciones y la generación de código con App Builder.

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