Todo lo que necesitas saber para emprender un Sistema de Diseño

El poder de la escalabilidad

Recuerdo la primera vez que compré un Lego para mi hijo, era un sistema básico para construir un pequeño bote. Mi hijo se mostró muy curioso mientras seguíamos las instrucciones y en poco menos de una hora ya teníamos listo el bote.

Conforme mi hijo crecía, yo compraba sets de Legos más complejos. Era muy excitante el reto de construir diseños más retadores siguiendo las instrucciones. Pero después de la primera vez, mi hijo perdía el interés por construir lo mismo y prefería inventar su propio diseño. En menos de un par de años ya teníamos una enorme cantidad de piezas entremezcladas, lo que se tornó frustrante porque no todas calzan adecuadamente para construir el diseño original y no siempre teníamos las piezas necesarias para ponernos muy creativos.

En el diseño de interfaces digitales, la analogía del Lego nos puede ayudar para comprender la importancia de los Sistemas de Diseño como el único recurso de la verdad (Single Source of Truth) para su empresa, evitando el desperdicio y horas de trabajo en construir algo que puede parecer un mal diseño de muchas piezas incongruentes de Lego.

¿Qué es un Sistema de Diseño?

Quizás usted haya escuchado acerca del término y me gustaría empezar explicando lo que no es. Un libro de marca de su empresa no es un Sistema de Diseño, ni lo es solo una guía de estilos de UI, aun cuando es una buena parte de ello. Tampoco lo es un framework de CSS como Bootstrap o Foundation. Entonces ¿Qué es si es un Sistema de Diseño?

Un sistema de diseño es una colección de componentes reutilizables, guiados por ciertas reglas y principios, que se pueden ensamblar para crear aplicaciones móviles o web. Los sistemas de diseño proporcionan un lenguaje común y crean coherencia y consistencia de la marca de una organización de una manera conveniente y centralizada que además facilita la exploración y administración de nuevos diseños.

Los grandes cambios impulsan nuevos retos. — Leonardo Hernández

¿Cuáles son los beneficios de un Sistema de Diseño para una empresa?

Si alguna vez ha notado que su sitio web utiliza una cantidad de pequeñas variables en la tonalidad de color para un mismo botón, o bien, al contratar un nuevo diseñador, éste utiliza espacios en blanco muy diferentes al diseñador anterior, entonces, su producto está sufriendo de inconsistencia. Volviendo al ejemplo del Lego, intercambiar piezas para construir un nuevo bote, aún siendo de la misma marca Lego, puede terminar en un diseño muy diferente al esperado.

Entre los beneficios más importantes podemos destacar:

Mantiene la consistencia

El principal beneficio de un Sistema de Diseño, es que permite mantener la consistencia visual y la experiencia de su producto, aún cuando existan múltiples equipos trabajando en partes diferentes de éste, reduciendo la fricción en todo el proceso de diseño.

Ahorra tiempo

Uno de los puntos más críticos para una empresa es el adecuado aprovechamiento de sus recursos. La confusión y la frustración llevan al tiempo perdido. El desarrollo de un adecuado Sistema de Diseño permitirá en el largo plazo evitar el desperdicio ese importante recurso.

Mayor creatividad

Los detractores de los Sistemas de Diseño aseguran que poner límites al diseño reduce la libertad creativa, pero esto es un mito y se ha comprobado que los lineamientos y principios en el diseño reducen el desperdicio ofreciendo mayor tiempo para explorar y empoderar la creatividad.

Mejor trabajo colaborativo

La creación de un Sistema de Diseño no es un trabajo de un solo recurso, ni de un solo departamento, es un trabajo multidisciplinario que permite una mayor cohesión de grupo y mejor enganche de todos con la marca de su empresa.

¿Cómo puedo empezar el Sistema de Diseño de mi empresa?

No importa si su producto ya tiene una larga vida o aún no ha visto la luz del día, el proceso para comenzar a crear un sistema de diseño es el mismo.

Conforme un equipo multidisciplinario

El primer paso es formar un equipo de trabajo apropiado en el cual deberá incluir al menos los siguientes roles:

• Diseñador UX. Para velar por la usabilidad y accesibilidad de todos los componentes del sistema.
• Diseñador UI. Quién diseñará todos las piezas del sistema y el lenguaje de diseño.
• Desarrollador Frontend. Encargado de la ingeniería de todo el sistema de manera modular y reusable.
• Experto en Marketing. Para velar por que el sistema esté alineado con la marca de la empresa y ayudará a generar el tono y voz del sistema.
• Product Manager. Dirige el proyecto abogando por las necesidades del usuario y alcanzando los objetivos de negocio.

Ejecute una auditoría del contenido visual

Una vez definido el equipo, su segundo paso es hacer una planificación con objetivos medibles y alcanzables en plazos determinados. Lo más recomendable es realizar una auditoría de toda su estrategia visual. Analice la estructura de CSS y planifique que es reutilizable, que se debe desechar, considere los posibles nuevos elementos a diseñar y la mejor arquitectura pensando en la escalabilidad.

Cree un lenguaje de diseño visual de su marca

El lenguaje de diseño visual es el núcleo de todo Sistema de Diseño. Son las pautas de cada componente en nuestro sistema.

Considere cuatro categorías necesarias en todo lenguaje de diseño para productos digitales:

• Color
  Categorice el uso de los colores de la siguiente manera: Primarios, son los colores predominantes, según su marca; Secundarios, para ofrecer contraste y mayor armonía; Grises, considere una gama de grises incluyendo el negro y el blanco; Utilitarios, para alertas por ejemplo; y Gradientes (opcional)
• Tipografías
  Definitivamente la regla es el uso limitado de fuentes tipográficas, se recomienda una combinación de dos estilos, una para los titulares y otra complementaria para textos en general. Utilizar más de dos tipografías no solo puede crear ambigüedad y caos (a menos que sea intencional) si no que también problemas de performance de su producto digital.
• Espacios
  Dos principios del diseño gráfico son el ritmo y el balance. Una retícula versátil pero controlada permite la colocación de elementos con criterios de diseño lógicos y más placenteros para la vista. Considere también el contexto de su producto, por ejemplo iOS y Android tienen un sistema de medidas muy estandarizado.
• Imágenes
  Defina el estilo y lineamientos de todas sus imágenes, incluidos iconos o ilustraciones.

Dependiendo de su producto, puede incluir otras categorías como: Animación y Sonido.

Una vez definido el lenguaje de diseño, es tiempo de generar las instrucciones de uso, para ello puede usar un simple esquema de Reglas, Límites y Principios.

Por ejemplo:

Regla: El color debe cumplir una relación de contraste de 4.5: 1

Límite: cantidad de colores por pantalla

Principio: el color se debe usar en un contexto significativo

Del diseño visual a la implementación

Una fase interesante del proceso es la arquitectura de todo el sistema, desde la perspectiva de ingeniería. Este proceso es donde se desarrollan los llamados Design Tokens. Son los nombres y valores que almacenan las propiedades del diseño, como: colores, espaciado, tamaño, duraciones de animación, etc.

Un ejemplo:

$border_radius_medium: 0.25em

Crear la biblioteca de interfaz de usuario

Ya está listo para iniciar a crear los componentes de su sistema de diseño. Como si fuera un Lego, tome todas las piezas individuales, y basado en las reglas, límites y principios definidos comience a diseñar y desarrollar de manera modular. Empiece por pequeños objetos que luego en conjunto van a componer un ambiente completo.

Comúnmente, esta metodología es conocida como el Diseño Atómico, gracias a Brad Frost quien acuñó el término desde 2013 y lo explica así:

Átomos: estos son piezas pequeñas e independientes, como botones, inputs e iconos

Moléculas: estos son generalmente un conjunto de átomos, como un formulario de búsqueda (que incluye un formulario de entrada, un botón y potencialmente incluso un icono de búsqueda)

Organismos: estas son un área de la IU como una navegación.

Plantillas: esquemas de organización de los componentes.

Páginas: cada una de las pantallas en el flujo de un producto.

No está demás indicar que todo el trabajo anterior debe estar probado y validado con los usuarios de su producto y en el contexto de uso para garantizar el éxito del Sistema de Diseño.

Documente para seguir innovando

Finalmente, asegúrese de que todo el proceso esté documentado apropiadamente no sólo para su utilización si no también para su fácil administración.

Lo más recomendable es hacer uso de las herramientas disponibles en el mercado para gestionar de manera eficiente los Sistemas de Diseño. Una buena recomendación es DSM de Invision.

Conclusión

Crear un Sistema de Diseño ayudará a la cohesión de equipo en la creación de un producto con experiencias de usuario más consistentes. Reduce la brecha entre Diseño y Desarrollo con un lenguaje visual común codificado a través de tokens de diseño y un conjunto de componentes y patrones catalogados en una biblioteca UI. También tendrá un control preciso de la interfaz de usuario de una manera manejable, escalable y robusta.

No olvide compartir si le gustó el contenido de este artículo.