Agilidad con UX Lean y los sistemas de diseño

La metodología UX Lean se basa en crear productos y servicios en un tiempo óptimo poniendo siempre el foco en la experiencia de usuario. Las fase en las que se centra son 3 construir, probar y aprender, estas fases coinciden con las fases que conocemos de design thinking. Uno de los principales principios de Lean es optimizar el tiempo y evitar el desperdicio, para ello debemos automatizar todo el trabajo que podamos para evitar retrabajos y ahorrar tiempo. Si esto lo traducimos a la hora de prototipar tenemos herramientas fabulosas que nos ayudan a optimizar el tiempo a la hora de pintar prototipos.

 

Diseño atómico 

El diseño atómico o atomic design consiste en organizar y trocear los elementos de diseño visual de nuestra marca. Los elementos que encontramos dentro de está composición de diseño atómico de menor a mayor complejidad son los siguientes; átomos, moléculas, organismos, templates y  por último las páginas completas.

Los ‘átomos’ son las piezas más pequeñas que podemos encontrar por ejemplo; un texto, un radiobutton, un chek, un icono.

Las ‘moléculas’ están compuestas de dos o más átomos, son elementos de poca complejidad por ejemplo; un botón que está compuesto de un texto y una forma geométrica.

Los ‘organismos’ están compuestos de átomos y moléculas son elementos complejos por ejemplo; una tabla con filtros y selectores.

Las ‘plantillas o templates’ son estructuras donde se colocan los componentes y módulos ‘los organismos’. Por último las ‘pantallas’ que son la composición final de todos los elementos y lo que forman la interfaz final.  

 

Design System 

Un sistema de diseño o design system es nuestro mapa de carreteras como diseñadores donde se describirá el lenguaje de comunicación lenguaje visual de la marca. En este se plasman los colores, fuentes, iconografía, interacción de los componentes, escritura… todo esto ayuda a que todo lo que se produzca tenga una coherencia y consistencia con la marca.

Teniendo un sistema sólido conseguimos que los usuario perciban la solidez de la marca, les ayude a identificarla y recordarla de forma más óptima. Por otro lado ayuda a los equipos de diseño a estandarizar los procesos de diseño y ahorrar tiempo. Los sistemas de diseños son piezas vivas y de crecimiento orgánico, es decir que se van ampliando y alimentando bajo las necesidades de la marca.

 

Estructura

Hay excelentes sistemas de diseño de múltiples marcas que podemos consultar. Los sistemas de diseño suelen tener un nombre propio diferenciado de la marca por ejemplo; El sistema de diseño de Google se llama Material design, IBM – Carbon Design, SAP – Fiori, Trello – Nachos…  

Ingredientes principales

Cada sistema de diseño suele tener su organización propia pero todas ellas coinciden en tener 3 bloques principales; Descripción de la filosofía de lo que quiere transmitir la empresa, bloques de construcción básico, librería de patrones e interacción y reglas.

• Principios de la visión de la empresa; Marca, branding, filosofía…
• Bloques de construcción visuales; Ilustraciones, iconografía, color.
• Librería de patrones; Componentes, módulos, templates, páginas.
• Reglas; Accesibilidad, UX writing, fotografía, espaciado (escritura para experiencia de usuario).

Os dejo una selección de ejemplos de sistemas de diseño;

• IBM https://www.carbondesignsystem.com/
• SAP https://experience.sap.com/fiori-design-web/
• Altassian https://www.atlassian.design/
• Orbit https://orbit.kiwi/
• Shopify https://polaris.shopify.com/
• Adobe https://spectrum.adobe.com/
• Thumprint https://thumbprint.design/  

 

Programas de prototipado para automatizar

Una vez creado el sistema de diseño es cuando viene el verdadero rendimiento, cuando traspasamos estos componentes, módulos, átomos a nuestro programa de prototipado, compartiendo a todo el equipo los recursos y automatizando los procesos. Los programas más conocidos en el mercado para prototipar son Sketch, Figma, Axure y Adobe XD.

Todos ellos te permiten trabajar de forma colaborativa y compartir las galerías del sistema de diseño en el que estáis trabajando. Actualmente en el mercado hay 2 abanderados el todopoderoso Sketch que tiene la cuota de mercado más amplia y Figma que poco a poco le está comiendo mercado a Sketch. Los cantidad de plugins, la versatilidad y compatibilidad en diferentes sistemas operativos de Figma está haciendo que empiece a ser uno de los favoritos de los diseñadores.

Recordad cuando más trabajo podamos automatizar más tiempo tendremos para poder innovar y construir nuevos elementos para el producto o servicio. Seguid el consejo de Lean; 0 desperdicio.