Los sistemas de diseño como lenguaje de marca

Los sistemas de diseño son actualmente uno de los temas que más conversación generan en el sector. Seguro que si en algún momento te has interesado por ellos o has leído algún artículo, puede que hasta hayas pensado que de diseño tienen poco. Y es más probable que veas palabras como componentes, guías, herramientas, documentación… así como grandes empresas que muestran sus logros con ellos. 

Pero, ¿por qué todas esas empresas invierten esas cantidades de recursos en sistemas de diseño? ¿Qué son realmente? ¿Cómo es un sistema de diseño? ¿Cuál es su impacto final? Y muy importante, ¿qué beneficios económicos aportan los sistemas de diseño? Te lo trato de explicar aquí:

Te recomendamos

Qué es la identidad visual y cuáles son sus elementos clave

¿Cómo diseñar correctamente un logo monocromático?

Repasamos la historia de los logos de los Juegos Olímpicos

¿Cómo registrar una marca en España? Guía práctica

¿Qué necesidades cubren los sistemas de diseño? ¿Por qué surgen?

Es innegable cómo las empresas están cada vez más presentes en el terreno digital. Muchas compañías crean su negocio totalmente desde una web, aplicación o ambas y, por supuesto, el diseño juega un papel decisivo en ellas. Conseguir una buena usabilidad e interfaz que refleje los valores de la marca es cada vez más importante.

Como diseñadores, nos gusta prestar atención a los pequeños detalles. Revisamos todos nuestros diseños al píxel para conseguir esa perfección que tanto buscamos. Un ajuste visual por aquí, un cambio de contraste de color por allá para que se vea mejor, una animación que le va a flipar a los usuarios. Sin embargo, ¿qué pasa cuando hay que diseñar 300 pantallas complejas, para varios dispositivos y encima ese diseño se tiene que desarrollar en 15 países? Además, todo en tiempo récord.

Aquí comienza el caos con el que se encontraban los equipos de diseño, que mantenían una mentalidad centrada al corto plazo, de dar soluciones a medida para problemas concretos. ¿Qué podían hacer? ¿Contratar más diseñadores? ¿Diseñar más rápido (y peor)?

Es entonces cuando empieza a surgir la preocupación a largo plazo. Nace la necesidad de una visión que velase por la correcta escalabilidad y optimización de estos procesos, manteniendo la calidad del diseño. Aparecen los sistemas de diseño como herramienta para cubrir estas necesidades clave:

– Buscar soluciones reutilizables

– Escalar los productos de una forma organizada

– Agilizar los procesos de desarrollo

– Mejorar la calidad de los productos

Y a partir de ahí, llegamos a la siguiente cuestión: 

¿Cómo es un sistema de diseño?

Una de las definiciones más comunes de qué es un sistema de diseño es: «una librería de componentes y elementos reusables que, a medida que se va desarrollando, se apoya de documentación que facilita su aplicación, entendimiento, construcción, uso y características.»

Sí, los sistemas de diseño tienen una serie de herramientas como los tokens de diseño, que parametrizan ciertos valores en estilos reutilizables. A través de la metodología de Atomic Design de Brand Frost, estos tokens de diseño o elementos fundacionales, se empiezan a combinar para construir otros de mayor envergadura, como los componentes. 

Como si fuesen piezas de Lego, los componentes se combinarán para solucionar las necesidades del producto y generar la interfaz, y a partir de ahí crear patrones y guías de uso.

Esta definición aporta un valor enorme a los equipos de diseño y desarrollo, que empiezan a trabajar con un mismo lenguaje bajo estas decisiones pactadas. Pero cada vez van más allá. Estos sistemas siguen evolucionando hasta ser el eje fundamental sobre el que se desarrolla la marca.

Comienzan a generar un lenguaje transversal, tratan de consolidar normas sobre esas decisiones y conocimientos. Empiezan a involucrar a otros perfiles en este modelo a escala, crean cultura y se tratan como auténticos productos internos, aplicando branding en ellos. 

Con estos aspectos claros, seguimos avanzando. 

¿Cómo se ejecutan estos sistemas de diseño?

Es muy interesante ver cómo en la práctica, las marcas usan esta definición con diferentes propuestas, todas válidas para sus problemáticas de escalado. A continuación, hacemos un repaso sobre algunos casos que además, son compartidos de forma abierta y puedes entrar a verlos:

Material Design (Google)

Al pensar en sistemas de diseño, probablemente el primero que nos venga a la cabeza sea Material Design de Google.

Aquí Google plantea un sistema desde la perspectiva de lenguaje global. Pretende sentar unas bases para el diseño y desarrollo de cualquier producto, con una documentación al alcance de todos y herramientas para su uso, que servirán de referencia para cualquier caso.

En este documento, Google habla de diseño, desarrollo, animación, iconografía, accesibilidad… Con una exposición tan global, que pretende que cualquier marca pueda usar esas guías y adaptarlas a su identidad de forma fácil.

Human Interface Guidelines (Apple)

En el otro extremo de Google se encuentra Apple con su Human Interface Guidelines.

La guía de Apple plantea un sistema diferente en el que ofrece una documentación más específica de su interfaz y cómo debería ser usada. Ayudará a aquellos equipos que trabajen en entornos Apple, a entender mejor los recursos que tienen disponibles.

Base (Uber)

Otro caso es el Sistema de Diseño de Uber que con más de 10 aplicaciones distintas, pretende mantener una consistencia de marca entre todas ellas.

Su sistema de diseño se configura bajo el paraguas de la marca Base. Es capaz de otorgar esa consistencia transversal en todos sus productos, incluso generar otros sistemas a raíz del principal como Base Money para los pagos y transacciones**.** Así, estos sistemas más concretos tratarán problemas de una forma más específica, dando soluciones más concretas para Uber.

SUI (Adevinta)

La empresa Adevinta, que engloba webs como Fotocasa, Milanuncios, Infojobs, Coches.net, entre otras, trabaja con un único sistema de diseño que da soporte a todas de forma global.

Cada una de sus verticales utilizará SUI para customizar los elementos disponibles y aplicar sus propiedades de marca, pero con unas guías base transversales entre ellas.

Como ves cada uno se plantea de una forma totalmente diferente, pero ¿hay alguno mejor? Seguramente, cada uno sea el resultado más valioso para la problemática de la empresa.

Si algo tienen en común es el trasfondo que los crea. Todos parten hacia unas soluciones de escalabilidad y consistencia, que pretenden evangelizar a los equipos que los usan.

¿Cuál es su impacto final? ¿Qué beneficios económicos aportan los sistemas de diseño? 

Los beneficios más destacados de los sistemas de diseño, que se hacen comunes entre estas empresas que los aplican son:

– Ahorro de tiempo en los equipos de diseño y desarrollo

– Economizar recursos

– Consistencia e identidad de marca

– Facilitar el escalado y evolución del producto

– Mejorar la accesibilidad

Por otro lado, los equipos con sistemas de diseño muy maduros, son capaces de medir su valor y aportar datos más concretos sobre su impacto. Aquí una selección para juzgar por ti mismo:

IBM: Carbon

El equipo de IBM calculó que su sistema de diseño Carbon, y su metodología de Design Thinking, tuvo un retorno de inversión de un 301%, con un valor de 36,4 millones de dólares.

Lloyd’s Bank: Constellation

La aplicación de su sistema de diseño supuso una reducción de salida de los proyectos de la mitad de tiempo, con un ahorro de £190.000.

TechMagic: Adele

La compañía estima un ahorro de 21,25% de tiempo en el desarrollo de producto en empresas que cuentan con un sistema de diseño, que supone una media de 1.5 millones de dólares.

Conclusiones

Al final, el pensamiento en escala se convierte en una de las aptitudes clave de los diseñadores digitales. Con o sin sistema de diseño, va a ser de ayuda en el desarrollo de estos productos.

A las empresas, sobre todo las que se encuentran con productos en crecimiento, seguramente les sonarán algunos de los problemas que comentábamos. Encontrar el valor de estos sistemas puede crear una gran estrategia de negocio.

Ahora, el reto de estos sistemas de diseño no es fácil. Mantenerlos requiere tener recursos y perfiles dedicados a ellos. Deben plantearse con una estructura consistente, así como mantenerlos, evangelizar su uso y madurarlos. 

Y sobre todo, esos elementos del sistema de diseño deben desarrollarse acordes a la marca. Cada vez con más perfiles que ayuden en su cometido, no solo serán fieles a la identidad en su aspecto visual, sino que deberán ser considerados en todos los aspectos que engloba el branding.

Si te interesa profundizar y quieres ver más ejemplos, te recomiendo que visites la web Adele, donde encontrarás un repositorio con más sistemas de diseño.