¿Para qué sirve un Design System?
Diferentes definiciones, un repaso por las partes que los componen y los beneficios que aporta la incorporación de un design system en una organización.
Una organización, pequeña o grande, intenta siempre mantener una cierta consistencia y homogeneidad en sus formas comunicacionales: cómo se expresa, qué términos usa, que colores aplica. Y desde siempre existieron herramientas generadas por los equipos de diseño, comunicación y branding para que esa consistencia se mantenga en el tiempo y a través de los diferentes medios usados por la empresa, sin perder su voz característica. Hace años existen manuales de marca, brand books, guías de estilo y glosarios internos.
Pero, en los últimos años, con la llegada de los medios digitales, estas piezas empezaron a quedarse cortas en su función. Las interfaces exigen una velocidad de actualización que no era necesaria antes, y también exige una coherencia total entre el diseño visual de las piezas y el código que finalmente las hace funcionar. Desde guías internas de elementos, pasando por librerías de UI, un design system — por novedoso y disruptivo que suene — no es más que otro eslabón en esta cadena histórica de esfuerzos de los diseñadores, los comunicadores y las empresas por lograr que el mensaje que llega al usuario final sea bien entendido.
Los ideas detrás de un design system no son para nada nuevas en el mundo del diseño. El trabajo con piezas reusables, el uso de grillas para organizar contenido, el cuidado por las jerarquías visuales, son conceptos básicos que pueden rastrearse desde las primeras definiciones de Diseño (de todo tipo de Diseño, porque son ideas tan fundamentales que se encuentran de diferentes formas en todas las especializaciones del Diseño).
Buscando una definición
A grandes rasgos podemos decir que un design system es una serie de componentes modulares, reusables y combinables de diferentes modos, con los que se puede crear cualquier interfaz. Además, contiene las reglas que rigen el uso de esos elementos y las motivaciones que los originaron. Permite que todos los miembros de un equipo que trabajan en y para una organización usen una misma fuente de verdad y puedan brindar la mejor experiencia a sus usuarios.
Will Fanguy (IBM, Invision) lo define como “una colección de componentes reutilizables, guiados por estándares claros, que pueden ser ensamblados para construir cualquier tipo de aplicaciones”. Suele incluir no sólo una librería de componentes visuales y patrones de interface, sino también una guía de estilo, mejores prácticas, lineamientos de uso, código funcional y todas las demás elementos que el equipo necesite. Es una base firme para construir.
Como cada sistema transparenta aspectos de la idiosincracia, los valores y la forma de trabajo de los diseñadores y de la empresa que lo genera, no todos los design systems tienen las mismas partes, los mismos componentes, ni usan la misma nomenclatura. Es reflejo del equipo que lo hace y lo usa.
Romina Kavcic agrega que un design system “trae orden al caos del diseño y la UX, y te permite enfocarte en el trabajo que importa”. Esto es porque, como si fueran los planos de un edificio, un design system se convierte en la fuente única de verdad para todos los equipos que participan en la creación de productos, ayudando a mantener la consistencia entre ellos. Debe asistir a los diseñadores para que puedan crear nuevas pantallas, flows y prototipos de forma más rápida y eficiente, y ayudar a los desarrolladores a entender las lógicas detrás de las decisiones de diseño. Bien construido y documentado, elimina tiempos mal utilizados en las etapas de diseño, desarrollo y test de un producto digital. Es orden y eficiencia.
En cierta manera, un design system establece las reglas de la narración y de toda interacción con nuestros usuarios. Estas no se limitan sólo al aspecto visual de los componentes, sino que también abarcan aspectos como la animación, el movimiento y los distintos comportamientos esperados. Se produce consistencia y homogeneidad en las interfaces y su funcionamiento, que se traduce en confianza, certeza y seguridad para nuestros usuarios. Es comunicación clara con el usuario.
Un design system es una suerte de contrato explícito entre diferentes áreas. Es un compromiso que asumen los implicados y, cuando se respeta, todos pueden trabajar de forma más segura, decidida y confiada. Debe exhibir la intención de cada decisión de diseño, lo que transparenta y democratiza el conocimiento, evitando silos y personalismos. Esto generalmente se traduce en normas claras sobre qué componentes y patrones usar o no en determinada situación y por qué. Es comunicación fluida dentro del equipo.
Un design system es una entidad viva y en constante evolución. Siempre surgen nuevas necesidades, productos, patrones de diseño y tipos de usuarios. Al mismo tiempo, los elementos y reglas ya establecidos pueden ser refutados, iterados y modificados. Por lo tanto, el sistema debe ser maleable, flexible y escalable. Chris Messina (Uber), dice que “un design system provee un conveniente mapa, centralizado y en evolución, de los productos conocidos de una marca, con indicadores direccionales que ayudan a explorar nuevas regiones”. Un design system no debe coartar la libertad de buscar mejores soluciones, sino ser una base firme para explorarlas. Es guía para el futuro y la experimentación.
Las partes de un design system
Un design system utiliza diferentes artefactos para responder a las preguntas ¿Qué?, ¿Dónde?, ¿Cuándo?, ¿Cómo? y ¿Por qué? de un producto digital. De acuerdo a la empresa que lo haya generado o el autor que consultemos, los nombres y alcances de cada una de sus partes varía, pero en general cubren los mismos aspectos. Las principales secciones que solemos encontrar son:
Fundamentos
(Fundamentals, Guidelines, Style guide, Design basics, Visuals, Design foundations, Pillars, Bases… diferentes nombres con que podemos encontrarlos de acuerdo al autor o fuente que consultemos)
Establece los parámetros visuales generales con los que se construirán las elementos de las interfaces. Define logotipos, colores, tipografías, espaciados, grillas, alineación, ordenamiento, iconos y uso de ilustraciones entre otros. Puede abarcar, dependiendo del tipo de empresa para la que se trabaje, información relacionada a sonidos, animaciones, movimiento y comportamientos esperados en diferentes dispositivos. También, define los principios y reglas generales que deben ser respetadas en todas las instancias. Estas normas generales deben siempre estar alineadas a los valores y principios de marca establecidos por la empresa. Generalmente, este set de bases es bastante estático y no varía demasiado a lo largo de la vida del sistema. Pensemos por ejemplo, en el logotipo de una marca o su color primario para interfaces; no deberían cambiar repetidamente.
Componentes
(Components, UI kit, UI components, UI library, Component library, Atoms, Molecules & Organisms)
Incluye todos los elementos de interfaz que fueron diseñados y programados, y pueden ser reutilizados en diferentes instancias de la aplicación o sitio. Son estructuras cerradas, desarrolladas en la o las tecnologías seleccionadas, y disponibles para ser consumidas por otros equipos de forma rápida y sencilla. Esto incluye los archivos o librerías que necesita el equipo de diseño (Sketch, Figma, XD) y el de desarrollo (CSS, JS, Angular, React, Vue, aplicaciones mobile nativas).
Abarca desde componentes de baja complejidad como pueden ser botones, campos de texto o estilos de texto, hasta construcciones más complejas como ventanas modales, barras de navegación, menús o páginas completas.
En general se organizan siguiendo los lineamientos de la metodología Atomic Design, en la que los componentes más simples (átomos) se pueden recombinar para formar otros mas complejos (moléculas y organismos). Estos elementos suelen tener un proceso de creación iterativo y bastante activo, hasta llegar a un estado “definitivo” del componente que no varía demasiado a lo largo del tiempo; generalmente, lo que se hace es extenderlo o incorporar variaciones cuando se presenta la necesidad. Tomemos como ejemplo un botón; tendrá varias rondas de definición hasta que se decida su forma, color, tamaños, estados, variaciones e interacciones posibles. Una vez establecido, es poco probable que cambie, pero sí pueden presentarse nuevas necesidades, como agregar un tamaño que no estuvo contemplado en la versión existente.
Patterns
(Design patterns, Flows, Templates, Features, Pages)
Podemos definir patterns como una combinación preestablecida de componentes y secuencias de pasos. Se utilizan para diseñar y estandarizar momentos en un flow o procesos que el usuario realiza repetidas veces, en diversos momentos de su interacción con la interfaz, y en los que queremos generar consistencia. Ejemplos típicos son las pantallas de final de flujo, un detalle de operaciones realizadas, una secuencia de login, un checkout de compra o un nuevo registro. No se manejan como componentes cerrados porque habitualmente presentan infinidad de variaciones y es más útil proporcionar un template general a seguir. Además de mapear los componentes visuales que se utilizan en cada paso, define otros comportamientos de la interfaz, como las transiciones entre pantallas y el manejo de errores, tanto del usuario como del sistema.
En mi experiencia, son la forma más eficiente de mantener la consistencia entre diferentes equipos de personas trabajando por separado. Un sistema puede tener mil componentes estandarizados, pero sin patterns que ejemplifiquen cómo se espera que se usen, es muy complicado que diferentes esfuerzos lleguen a un resultado homogéneo.
Documentación
(Reference, Documentation, Reference site, Demo site, Living style guide)
Documenta de manera organizada todos los elementos que componen el design system, e incorpora mejores prácticas recomendadas, la información necesaria para poder utilizarlos y las reglas de construcción, uso y combinación que afectan a cada uno de los diferentes componentes. Se busca siempre poder mostrar los componentes reales que fueron desarrollados, tal cual los usaría alguien en su aplicación o página. Un plus es darle al desarrollador la posibilidad de probar y editar en vivo los contenidos y el comportamiento del elemento.
Otras secciones que usualmente podemos encontrar en un design system son:
Procesos: Establece los flujos de trabajo y documenta los diferentes procesos que se llevan a cabo tanto para mantener el design system, como para que las personas y equipos lo utilicen.
Prácticas de desarrollo: (Development standards) Definen la manera en la que llevarán a cabo las tareas de desarrollo dentro del equipo. Pueden establecer políticas de revisión de código, manejo de la comunicación, mejores prácticas, rutinas de test, protocolo de actualizaciones, normas de uso de herramientas y repositorios, etc.
Guías de accesibilidad: (Accessibility guidelines) Establece los requerimientos y tests a cumplimentar para mantener las aplicaciones accesibles a todo el púbico, así como consideraciones específicas de diseño.
Voz y tono: (Voice and tone) Son los aspectos verbales, visuales y de actitud que una marca expresa en su discurso. La voz se define como la personalidad de la misma y no cambia con el paso del tiempo. El tono es la forma en la que se expresa, es decir, cómo se adapta su comunicación dependiendo de una situación particular.
Estrategia de contenidos: (Content strategy) Se enfoca en la planeación, creación y regulación de los contenidos de una marca. Incluye no solo los contenidos textuales, sino también otros formatos multimedia como imágenes y video.
Roadmap: El equipo que coordina el design system muestra públicamente los avances del mismo, las prioridades a las que se les está poniendo foco y los próximos pasos, para mantener al resto de los equipos y stakeholders siempre informados.
Principios de diseño: (Design principles) Son conceptos ampliamente aplicables que pueden ser usadas como guía para la creación de los demás elementos de un sistema. Definen y comunican las características clave de un producto de manera tal que un abanico amplio de personas puedan comprenderlo. Mantienen las piezas del proyecto unidas como un todo.
Material de entrenamiento: Explicaciones y ejemplos que sirven para el onboarding y entrenamiento de los nuevos contribuyentes y usuarios del design system. Suele incluir documentación escrita o en video y repositorios de código con casos de ejemplo y proyectos para utilizar como base en nuevos desarrollos.
Design assets: Biblioteca multimedia de elementos a utilizar en los diseños, como imágenes, ilustraciones, fotografías, sonidos, música, animaciones, etc.
Brand book: Es el manual de identidad corporativa, que ayuda a definir los elementos de la identidad de una marca de manera concisa. Suele ir más allá del uso de la misma en plataformas digitales.
Los beneficios de un design system
El desarrollo y uso de un design system trae muchos beneficios tanto para el equipo de diseño de productos, como para los cliente y usuarios finales que utilizan dichos productos.
Alinea al equipo: Es esencial tener al equipo en la misma página. El design system se convierte de esa manera en un lugar seguro de referencia a donde todo el equipo puede recurrir cuando necesita guía o dirección. Si no hay un componente específico para lo que necesita, siempre puede encontrar en el mismo lugar los principios y fundamentos guía para poder llegar a una solución propia.
Asegura la consistencia: Cuando todos los miembros de un equipo siguen el mismo set de reglas y componentes, nos aseguramos que la experiencia a lo largo de diferentes plataformas y productos sea también la misma. En las empresas en las que se diseña y desarrolla para múltiples canales y situaciones de consumo, es crucial poder ofrecer una experiencia omnicanal unificada.
Aumenta la eficiencia y optimiza de tiempos: Quita fricciones y hace mas fácil la toma de decisiones, quitando incertidumbre en todas las etapas del proceso de desarrollo de un producto digital. Permite que tanto diseñadores como desarrolladores dejen de malgastar su tiempo en decisiones triviales (o que ya fueron discutidas previamente) y puedan disponer de ese tiempo para utilizarlo en tareas que aporten mayor valor. Y como tiempo es dinero, podemos fácilmente traducir los ahorros de tiempo en ahorros de dinero.
Permite iteraciones más rápidas: El tener disponible un set de componentes ya pensados, diseñados, desarrollados y probados, hace que los distintos equipos puedan realizar pruebas y modificaciones de una forma mas rápida y ordenada.
Simplifica los problemas de escalabilidad: Cada vez que se lanza un nuevo producto o se modifica la oferta de un servicio, es necesario desarrollar nuevas interfaces de la forma mas rápida posible. Con un design system aplicado, esto se puede hacer sin comprometer la calidad general de la experiencia y manteniendo la consistencia con el resto de las pantallas.
Da la posibilidad de tener mas libertad creativa: Una de las quejas habituales de los detractores de los design systems es que estos coartan la libertad creativa de los diseñadores. Al contrario, al quitar del medio tareas repetitivas y que no aportan valor real al producto, hace que los diseñadores tengan horas disponibles para invertir en investigación, en mejorar la experiencia de sus productos y en proponer soluciones más disruptivas. La tarea del design system no es ponerle un techo al nivel visual del equipo, sino elevar su piso de manera consistente.
Incentiva la colaboración y elimina los silos de conocimiento: Cuando el conocimiento acerca del funcionamiento de las interfaces de una empresa está en la cabeza de una o dos personas, esto se convierte en extremadamente estresante para esas personas, y potencialmente peligroso para la empresa. El tener todo el proceso de diseño y sus resultados documentados y reglamentados, hace que el conocimiento se democratice. Por otro lado, la construcción grupal del sistema incentiva a los demás a colaborar, lo cual a su vez refuerza su confianza en el sistema que volverán a usar y recomendar. Sirve además como fuente de consulta permanente para las personas de la empresa en roles ajenos al diseño, para que puedan aprender y tomar decisiones informados.
Facilita el onboarding de nuevos miembros: Permite que una persona nueva incorporada al equipo entienda de inmediato cuáles son los valores y principios que la empresa defiende y cuáles son las herramientas con las cuales debe trabajar. Darle a alguien la posibilidad de leer y entender por sus propios medios, genera en esa persona confianza y lo hace sentir útil y empoderado.
Permite al equipo enfocarse en los puntos de dolor claves: Al resolver el design system cuestiones de bajo impacto, el equipo puede enfocar su tiempo en la resolución aquellas tareas en las que es realmente necesario que se concentre y a donde aporta valor. El objetivo final de un design system no es que los diseñadores trabajen menos (eso tampoco está nada mal 😉), sino que trabajen mejor, y esto es, enfocados en donde más valor pueden aportar al negocio.
Permite alinear el trabajo de colaboradores externos: En empresas con muchos frentes de desarrollo en paralelo, en las que se trabaja con agencias, contractors o equipos externos colaborando en productos o desarrollando otros independientes, se hace imperioso poder brindarles una fuente única de verdad que puedan consultar en caso de dudas.
Genera consciencia de diseño: Sobre todo en empresas tradicionales o que no pertenecen al mundo digital, tener un corpus documentado de procedimientos, elementos y reglas de uso, ayuda a darle mayor visibilidad a la disciplina del diseño frente a los demás equipos y directivos. Además, proyecta una imagen de equipo organizado.
Facilita las tareas de testeo y resolución de problemas: Utilizar un mismo componente en distintas interfaces, hace más fácil las pruebas del mismo. Asumimos que, salvo problemas de uso puntuales, si funciona bien en uno de esos escenarios, también lo hace en los otros. Si por algún motivo se encuentra un problema en una de sus implementaciones, puede corregirse a nivel sistema, es decir, solucionarlo en todos lados al mismo tiempo. Esto hace que el desarrollo con un sistema de componentes sea altamente resiliente, fortaleciéndose más cada vez que se lo utiliza.
Aumenta la confianza del usuario: El desarrollo de interfaces consistentes, con navegaciones fluidas y una experiencia omnicanal unificada, reduce las potenciales fricciones que un usuario pueda tener al usar nuestro producto, generando mayor confianza en el mismo. Además, la predictibilidad reduce considerablemente la curva de aprendizaje cuando se incorporan características o se trata de nuevos clientes.
Referencias
Algunos de los design system a los que siempre vuelvo porque me sirven de inspiración y ejemplo:
Atomic design
Brad Frost creó la metodología Atomic Design, y fue la base del surgimiento de los design systems. Divide los componentes de un sistema en átomos, moléculas, organismos, templates y páginas. Siguiendo la analogía con el mundo real, los elementos de bajo nivel pueden combinarse para formar estructuras más complejas (los átomos se combinan para generar moléculas, las moléculas para darnos organismos, y así).
EightShapes
Nathan Curtis y la consultora EightShapes trabajan desde hacer años en la creación de design systems para marcas de primer nivel. Todos los aprendizajes de sus años de experiencia, están plasmados en las notas que publican en su blog.
Material Design
Google generó un framework funcional, abierto, multiplataforma al que le incorpora cada año nuevas funcionalidades y puede servir como base y referencia para la creación de un design system.
Atlassian Design System
Atlassian, una empresa de software con múltiples productos digitales, tiene su design system publicado y se puede consultar abiertamente.
Polaris
El design system de Shopify, un gigante del e-commerce.
Carbon
Design system desarrollado por IBM, con múltiples variaciones que cubren un gran abanico de aplicaciones.
Lightning
Salesforce desarrolló un design system gigante para sus aplicaciones.
Andes
Mercado Libre es uno de los gigantes tecnológicos de Latinoamérica y tienen desarrollado su propio design system, sobre el que suelen publicar información y detalles del proceso de construcción.
Adele
Un sitio que recopila cientos de design systems de empresas de todo el mundo.
