¿Qué son para ti sistemas de diseño?
Javier Cañada, Nacho Gil, Inma Bermejo, Marina Aisa, y Victor Baro al aparato.
Tenemos la cuenta atrás calentita y, es que, este 2 de diciembre tenemos una cita en el Google Campus para hablar sobre sistemas de diseño.
El espacio y el tiempo nos limita, pero, es cierto que, gracias a internet, podemos permitirnos el lujo de tener citas express con otros profesionales invitándolos a hablar sobre qué son para ellos los sistemas de diseño.
Haciendo preguntas y encuestas en Twitter he visto que no tenemos muy claros los conceptos, leer a estos 5 profesionales nos va a dar pistas interesantes ya que tenemos puntos de vista desde la ejecución y la estrategía.
En esta ocasión contamos con:
- Javier Cañada (Director de diseño en Tramontana)
- Nacho Gil (Diseñador de producto en Ontruck)
- Inma Bermejo (Lead designer en Weblogs SL)
- Marina Aisa (UX Engineer en Holaluz)
- Victor Baro (Programador iOS en Jobandtalent)
Javier Cañada
“Un sistema de diseño es un conjunto de reglas que organizan, dan consistencia y armonía a un entorno complejo y variable de contenido y funcionalidad.
Para que un sistema sea tal, es importante que cumpla algunas premisas: que sea escalable, que su unidad mínima se base en una certeza, que sea recursivo en sus formas y proporciones, que regule no sólo la forma y comportamiento de los objetos sino también las relaciones entre ellos, que sea eficiente, predecible y sometedor. Esto es, que una vez definido, obligue a todo contenido o funcionalidad a existir bajo sus propias reglas.”
Nacho Gil
“Desde mi punto de vista, el principal problema de los sistemas de diseño tal y como se están popularizando en el entorno del diseño digital, es que estamos pervirtiendo su concepto y su función. Tendemos a confundir las librerías de diseño basadas en Atom Design, los UI kits, o los frameworks, que son fantásticas herramientas constructivas, con auténticos sistemas de diseño.
Esas librerías de elementos son diccionarios de palabras (átomos), que nos permiten construir de forma consistente y eficiente, frases (moléculas) y párrafos (organismos), y hasta artículos (templates) de forma más o menos armoniosa; pero, para poder considerarse un auténtico sistema de diseño, requieren de una gramática y una narrativa, capaces de construir un lenguaje.
Porque ese es el objetivo de un sistema de diseño: ser un lenguaje que expresa una marca y unos valores.”
Inma Bermejo
“Diría que un sistema de diseño son normas: las que nos dicen qué se puede hacer en un proyecto y cómo. Pero creo que lo más frecuente es llamar sistema a una colección de objetos modelo, y las relaciones entre ellos, expresando esas normas.
A partir de ellos, si está bien preparado, puedes construir componentes más complejos para el mismo proyecto, manteniendo la armonía y compatibilidad. Y es una herramienta muy valiosa para crear un lenguaje común entre los implicados en un proyecto.”
Marina Aisa
“Soy Marina Aisa, “UX Engineer” en Holaluz, mi puesto es una mezcla entre diseño de producto + desarrollo front-end, por lo que es un puente entre dos departamentos que deberían de estar mucho más cerca de lo que están en otras compañías dado su evidente conexión.
Desde mi experiencia, los sistemas de diseño no solo sirven para los diseñadores, quienes tienen que crearlos, sino también para los desarrolladores, quienes tienen que desarrollarlo. Un sistema de diseño debería ser la base para aplicar la misma arquitectura en su posterior desarrollo.
Al utilizar SASS en nuestro desarrollo de Front-end podemos añadir variables a nuestro CSS en las que se declaran las unidades mínimas de producto expuestas previamente en el sistema de diseño; como colores, fuentes, tamaño de las fuentes, incluso espaciados. Pero SASS va mucho más allá y nos da las herramientas necesarias para aplicar metodologías de clases como BEM, la cual está basada en bloques que contienen elementos reutilizables que a su vez pueden contener modificadores, ¿os suena?
Un buen desarrollo tiene que estar basado en un buen diseño.
En Holaluz estamos trabajando en nuestro propio sistema de diseño que sacaremos en unos meses. En mi caso, además de su diseño, también tengo la responsabilidad de pensar en cómo se realizará la estructura de su posterior desarrollo. Porque además de que trabajaré en él, esta estructura de SASS, al ser modular, será común en todos los proyectos de la empresa como lo es el sistema de diseño en sí.”
Victor Baro
“Desde el punto de vista del diseño no tengo los conocimientos necesarios para definir lo que es un sistema de diseño, pero sí desde el punto de vista del desarrollo de software. Y es que la mayor parte de conceptos que aplican a un sistema de diseño son los mismos que aplicamos en software en nuestro día a día, sobretodo los de “reutilización” y composición.
La primera vez que escuché hablar de sistemas de diseño fue en Jobandtalent. Recuerdo cuando el equipo de diseño nos presentó los conceptos de moléculas, átomos y organismos y cómo a partir de la definición de éstos, pretendían crear unas nuevas “guidelines” para que todo el producto tomase mucha más consistencia.
Hasta entonces al equipo de desarrollo se nos presentaban pantallas diseñadas, o flujos de ellas. Era parte de nuestro trabajo intentar descifrar a partir de esos diseños las partes comunes (botones, barras de navegación, etiquetas, etc.). Esto nos servía para reutilizar esos elementos en diversas pantallas no sólo para incrementar la velocidad, sino también para facilitar los posibles futuros cambios.
Con la introducción del nuevo sistema de diseño, conseguimos por primera vez que el el equipo de desarrollo y el de diseño estuvieran totalmente sincronizados. Una vez desarrollados todos los pequeños componentes, crear nuevas pantallas en código era (y sigue siendo) mucho más rápido. Ya no se nos presentan pantallas (o flujos de ellas) como entes únicos, sino que cada pantalla es una combinación de pequeños elementos ya existentes en nuestra base de código.
La introducción de un sistema de diseño no sólo incrementó la velocidad de desarrollo, sino que también se consiguieron mejores resultados y un menor tiempo de reacción a cambios en la UI.
Desde mi punto de vista, un sistema de diseño no es más que un conjunto de piezas y reglas entre ellas. Esa simplicidad hace que pueda traducirse tan fácilmente a código.”
¡Creemos comunidad!
En nuestro estudio los sistemas de diseño están en el día a día, se podría decir que es core y que nuestros productos se diseñan y construyen con esta base. Hablamos mucho con amigos y compañeros sobre el tema, pero hemos decidido que la conversación tiene que ser más amplia y trasladarse a un foro común.
Esto me puso a pensar que hace falta arrojar más luz sobre el tema, así que nos hemos propuesto recopilar una serie de listas con:
- Escuelas
- Workshops
- Proyectos
- Profesionales
- Eventos
- Recursos
Todos ellos con un enfoque centrado en sistemas. El sábado en la charla publicaremos finalmente sobre qué plataforma agruparemos todo esto, cómo colaborar y aportar al proyecto y qué otras cosas vamos a hacer.
¿Te hemos puesto a pensar? Puedes compartir en los comentarios tus dudas, reflexiones o experiencias con los sistemas de diseño.
Gracias :)
Y si tienes algo interesante que aportar, un proyecto o simplemente quieres conocer algo más acerca de nuestro estudio visita:
