Agilidad con UX Lean y los sistemas de diseño

La metodología UX Lean se basa en crear pro­duc­tos y ser­vi­cios en un tiem­po ópti­mo ponien­do siem­pre el foco en la expe­ri­en­cia de usuario. Las fase en las que se cen­tra son 3 con­stru­ir, pro­bar y apren­der, estas fas­es coin­ci­den con las fas­es que cono­ce­mos de design think­ing. Uno de los prin­ci­pales prin­ci­p­ios de Lean es opti­mizar el tiem­po y evi­tar el des­perdi­cio, para ello debe­mos autom­a­ti­zar todo el tra­ba­jo que podamos para evi­tar retra­ba­jos y ahor­rar tiem­po. Si esto lo tra­duci­mos a la hora de pro­toti­par ten­emos her­ramien­tas fab­u­losas que nos ayu­dan a opti­mizar el tiem­po a la hora de pin­tar pro­toti­pos.

 

Diseño atómico 

El dis­eño atómi­co o atom­ic design con­siste en orga­ni­zar y tro­cear los ele­men­tos de dis­eño visu­al de nues­tra mar­ca. Los ele­men­tos que encon­tramos den­tro de está com­posi­ción de dis­eño atómi­co de menor a may­or com­ple­ji­dad son los sigu­ientes; áto­mos, molécu­las, organ­is­mos, tem­plates y  por últi­mo las pági­nas com­ple­tas.

Los ‘áto­mos’ son las piezas más pequeñas que podemos encon­trar por ejem­p­lo; un tex­to, un radiobut­ton, un chek, un icono.

Las ‘molécu­las’ están com­pues­tas de dos o más áto­mos, son ele­men­tos de poca com­ple­ji­dad por ejem­p­lo; un botón que está com­puesto de un tex­to y una for­ma geométri­ca.

Los ‘organ­is­mos’ están com­puestos de áto­mos y molécu­las son ele­men­tos com­ple­jos por ejem­p­lo; una tabla con fil­tros y selec­tores.

Las ‘plan­til­las o tem­plates’ son estruc­turas donde se colo­can los com­po­nentes y módu­los ‘los organ­is­mos’. Por últi­mo las ‘pan­tallas’ que son la com­posi­ción final de todos los ele­men­tos y lo que for­man la inter­faz final.  

 

Design System 

Un sis­tema de dis­eño o design sys­tem es nue­stro mapa de car­reteras como dis­eñadores donde se describirá el lengua­je de comu­ni­cación lengua­je visu­al de la mar­ca. En este se plas­man los col­ores, fuentes, icono­grafía, inter­ac­ción de los com­po­nentes, escrit­u­ra… todo esto ayu­da a que todo lo que se pro­duz­ca ten­ga una coheren­cia y con­sis­ten­cia con la mar­ca.

Tenien­do un sis­tema sóli­do con­seguimos que los usuario perciban la solidez de la mar­ca, les ayude a iden­ti­fi­car­la y recor­dar­la de for­ma más ópti­ma. Por otro lado ayu­da a los equipos de dis­eño a estandarizar los pro­ce­sos de dis­eño y ahor­rar tiem­po. Los sis­temas de dis­eños son piezas vivas y de crec­imien­to orgáni­co, es decir que se van amplian­do y ali­men­tan­do bajo las necesi­dades de la mar­ca.

 

Estructura

Hay exce­lentes sis­temas de dis­eño de múlti­ples mar­cas que podemos con­sul­tar. Los sis­temas de dis­eño sue­len ten­er un nom­bre pro­pio difer­en­ci­a­do de la mar­ca por ejem­p­lo; El sis­tema de dis­eño de Google se lla­ma Mate­r­i­al design, IBM — Car­bon Design, SAP — Fiori, Trel­lo — Nachos…  

Ingredientes principales

Cada sis­tema de dis­eño suele ten­er su orga­ni­zación propia pero todas ellas coin­ci­den en ten­er 3 blo­ques prin­ci­pales; Descrip­ción de la filosofía de lo que quiere trans­mi­tir la empre­sa, blo­ques de con­struc­ción bási­co, libr­ería de patrones e inter­ac­ción y reglas.

• Prin­ci­p­ios de la visión de la empre­sa; Mar­ca, brand­ing, filosofía…
• Blo­ques de con­struc­ción visuales; Ilus­tra­ciones, icono­grafía, col­or.
• Libr­ería de patrones; Com­po­nentes, módu­los, tem­plates, pági­nas.
• Reglas; Acce­si­bil­i­dad, UX writ­ing, fotografía, espa­ci­a­do (escrit­u­ra para expe­ri­en­cia de usuario).

Os dejo una selec­ción de ejem­p­los de sis­temas de dis­eño;

• IBM https://www.carbondesignsystem.com/
• SAP https://experience.sap.com/fiori-design-web/
• Altass­ian https://www.atlassian.design/
• Orbit https://orbit.kiwi/
• Shopi­fy https://polaris.shopify.com/
• Adobe https://spectrum.adobe.com/
• Thumprint https://thumbprint.design/  

 

Programas de prototipado para automatizar

Una vez crea­do el sis­tema de dis­eño es cuan­do viene el ver­dadero rendimien­to, cuan­do traspasamos estos com­po­nentes, módu­los, áto­mos a nue­stro pro­gra­ma de pro­toti­pa­do, com­par­tien­do a todo el equipo los recur­sos y autom­a­ti­zan­do los pro­ce­sos. Los pro­gra­mas más cono­ci­dos en el mer­ca­do para pro­toti­par son Sketch, Fig­ma, Axure y Adobe XD.

Todos ellos te per­miten tra­ba­jar de for­ma colab­o­ra­ti­va y com­par­tir las galerías del sis­tema de dis­eño en el que estáis tra­ba­jan­do. Actual­mente en el mer­ca­do hay 2 aban­der­a­dos el todopoderoso Sketch que tiene la cuo­ta de mer­ca­do más amplia y Fig­ma que poco a poco le está comien­do mer­ca­do a Sketch. Los can­ti­dad de plu­g­ins, la ver­sa­til­i­dad y com­pat­i­bil­i­dad en difer­entes sis­temas oper­a­tivos de Fig­ma está hacien­do que empiece a ser uno de los favoritos de los dis­eñadores.

Recor­dad cuan­do más tra­ba­jo podamos autom­a­ti­zar más tiem­po ten­dremos para poder inno­var y con­stru­ir nuevos ele­men­tos para el pro­duc­to o ser­vi­cio. Seguid el con­se­jo de Lean; 0 des­perdi­cio.  

 

[ssba-but­tons]