Ya en 2017 vimos los primeros artículos en la web sobre algo denominado Design Systems, –Sistemas de Diseño UI en lo poco que había publicado en castellano–, entonces sin diferenciarlo muy bien de las ya conocidas guías de estilo o de las librerías de componentes UI.
Un Sistema de Diseño es una colección de componentes reutilizables, guiados por estándares claros, que se pueden ensamblar juntos para construir cualquier número de aplicaciones.
—Design Systems Handbook, Design Better
A fecha de hoy abundan tanto la información como las empresas que lo han implantado, así que podemos ya tener una visión clara de qué es, para que sirve y cómo implementarlo en nuestros proyectos.
Los equipos actuales compuestos por personas con distintas especialidades (diseñadores y desarrolladores, básicamente) necesitan una fuente única de sistemas y componentes compartidos y reutilizables. No sólo una librería de componentes, sino algo más.
Un Design System o Sistema de Diseño se podría definir como una fuente única y en evolución que agrupa elementos no tangibles –branding, principios, valores, objetivos y buenas prácticas de la marca– y tangibles, traducidos en componentes reutilizables, patrones y documentación funcional y técnica.
Estos elementos permiten a un equipo diseñar y desarrollar productos digitales (y no digitales) de forma coherente, ágil y flexible.
Un poco de Historia (muy poco, realmente)
Ya en 1960 existían soluciones modulares para desarrollo de software, aunque muy alejadas de las necesidades actuales. Durante mucho tiempo los productos digitales eran considerados secundarios y su diseño se basaba vagamente en la guía de estilo de la marca. El Design System es la evolución y prolongación de la identidad gráfica tradicional en el mundo digital.
Con el advenimiento de la Era Digital se empezaron a utilizar librerías de patrones compartidas por diseñadores y desarrolladores como punto de partida para un diseño coherente, pero fue con la democratización de los smartphones cuando se hace imperiosa la necesidad de diseñar websites adaptables (responsive).
Una respuesta a este nuevo reto la dio Brad Frost, en 2013, con su Diseño Atómico.
El Diseño Atómico es una metodología que basa el diseño de componentes en lo que Brad Frost llama átomos (colores, tipografía,…), moléculas (formularios, menús), organismos, (footers, sidebars…) plantillas (rejillas, patrones…) y páginas (resultado final: secciones de una web, pantallas de una aplicación, etc) y marca los principios de los Design Systems actuales.
Aunque la metodología originalmente estaba enfocada en el desarrollo web de forma casi exclusiva, su uso se extendió rápidamente al diseño y desarrollo de aplicaciones tanto móviles, como de escritorio o web.
En 2014 Google lanza su propio Design System, Material Design, basándose en las premisas de Brad Frost y en las librerías de patrones.
Además de una colección de elementos gráficos, también elabora una serie de principios dirigidos a racionalizar el diseño digital.
Desde entonces, se ha ido implementando y haciéndose más compatible con todas las plataformas y es un buen punto de partida para la creación de Design Systems personalizados.
Algunas recopilaciones de ejemplos de implementación de Sistemas de Diseño los podemos encontrar en estos enlaces:
https://designsystemsrepo.com/design-systems/
Un ejemplo: AUDI
https://www.audi.com/ci/en/renewed-brand.html
Buen ejemplo en el que la marca ha reunido sus elementos digitales y no digitales en un sistema unificado de diseño, partiendo del elemento más básico y reconocible (el átomo o partícula elemental) de la marca: los anillos.
¿Es lo mismo un Design System que un Manual de Identidad?
La guía de estilo, manual de identidad o brandbook tradicional es un elemento más del Design System.
Primero, los principios y objetivos: el diseño y desarrollo del sistema debe alinearse con los valores de la marca y del equipo.
El Manual de identidad siempre ha estado más enfocado a productos impresos que digitales y con una duración en el tiempo determinada.
El Design System es una ampliación y actualización de la guía de estilo o brandbook (que explica, por ejemplo, cómo cambia un botón con el color corporativo al pasar el cursor por encima) y es además una fuente o librería elaborada por un equipo, compartida y en constante revisión.
Otra diferencia es la usabilidad: los elementos son accesibles desde herramientas que usan tanto diseñadores como desarrolladores: repositorios como GitHub o plataformas tipo InVision, Gallery o Sympli.
Un Sistema de Diseño no coarta la libertad del diseñador: le da unas pautas precisas con las que puede construir creativamente, como si se trataran de piezas de Lego.
Genieri
¿Necesito un Sistema?
Tener una manual de identidad o guía de estilo de la marca es un buen comienzo. Si su empresa lo tiene, ya cuenta con muchos de los elementos básicos (átomos) del sistema.
Pero, probablemente los productos digitales de su marca (su web, aplicaciones en su caso…) no tendrán una coherencia óptima, ya que los diseñadores y desarrolladores carecen de la documentación y herramientas necesarias para conseguirla.
Si su empresa no tiene presencia digital o si los proyectos de este tipo los realiza una sola persona quizás no necesite un Sistema de Diseño, pero en cualquier otro caso es aconsejable pensar sobre ello.
El tiempo empleado en desarrollarlo (y mantenerlo, ya que es algo vivo y sin caducidad) y la inversión necesaria, se verán compensados enormemente con cada nuevo producto digital que lance la empresa.
