Seguro que a estas alturas has oído hablar sobre los sistemas de diseño, pero ¿entendemos exactamente a qué nos referimos? Si te dedicas al desarrollo de productos digitales, te resultará muy útil conocer qué son, qué ventajas nos aportan en el diseño y desarrollo de nuestros proyectos y cómo hemos de aplicarlos en nuestro día a día. ¡Vamos con ello!
¿Qué es un sistema de diseño?
Es un concepto difícil de acotar y, sobre todo, de definir en una sola idea. Por ello existen infinidad de definiciones al respecto. Desde las que lo entienden casi como una filosofía de empresa hasta aquellas que ponen el foco en su lado más práctico. A continuación te mostramos una breve recopilación de aquellas que, desde el equipo de Usabilidad, Diseño y Multimedia de hiberus, consideramos más relevantes y que mejor reflejan su identidad.
“Un sistema de diseño es una colección de componentes reusables, dirigidos por reglas claras, que pueden combinarse para construir un número amplio de aplicaciones.”
Marco Suarez – A freelance designer specializing in scaling design for digital products.
“Un sistema de diseño es la historia de cómo tu organización construye productos.”
Brad Frost – Make great web experiences and help others do the same.
“Los sistemas de diseño no son únicamente guías de estilos, librerías de componentes, UI kits, etc. Un buen sistema de diseño empodera el cambio en la cultura de tu empresa.”
Jina Anne – Design Systems Advocate.
“Un sistema de diseño en lo más fundamental es un conjunto de reglas.”
Mina Markham – She’s actively involved in the tech community, teaching for Black Girls Code and founding the Dallas chapter of Girl Develop It.
Como ves, la diversidad es notable. Todas ellas son válidas, aportando cada una un aspecto distinto que, al juntarlas, crean un todo de enorme valor a implementar en cualquier proceso de creación y desarrollo de productos digitales.
Desde hiberus hemos creado nuestra propia definición tomando como base la idea de Mina Markham, entendiendo un sistema de diseño como un conjunto de reglas.
Así pues, un sistema de diseño es un conjunto de reglas vivo, consensuado y compartido por todas las partes implicadas (diseño, desarrollo, cliente y negocio), facilitando entre ellas un flujo de trabajo optimizado, coherente y coordinado, en pro de mejorar la consistencia de nuestros productos y de su crecimiento de forma controlada y coherente.
Fuente: Nate Baldwin – https://natebaldw.in/#/articles
Guía de estilos vs sistema de diseño
Ahora que vamos descubriendo más sobre este concepto, surge la irremediable comparación con una guía de estilos. ¿Son lo mismo? La respuesta es no. Son muchas las diferencias entre ambos términos pero, sobre todo, difieren en dos puntos: su campo de acción y su naturaleza.
En cuanto al primero, lo más habitual es que una guía de estilos se centre en la correcta representación visual de la identidad de un producto o marca en los diferentes puntos de contacto con el cliente; por contra, un sistema de diseño va un paso más allá, entendiendo el producto digital como un todo, abarcando todas las facetas que componen la identidad y desarrollo de un producto digital.
En cuanto al segundo punto de distinción (naturaleza), una guía de estilos nace como un documento estanco y, normalmente, poco flexible a actualizaciones; sin embargo, un sistema de diseño es todo lo contrario, se trata de un lenguaje sustentado por unas bases sólidas pero dinámico y flexible, en pro de mejorar la escalabilidad del producto y la adaptabilidad a nuevas necesidades.
Por qué es necesario
Llegados a este punto son evidentes las razones por las que resulta de vital importancia la implantación de un sistema de diseño en la producción y desarrollo de un producto digital. Enumeremos algunas de las más relevantes:
- Ayuda a gestionar el caos y crea de forma más rápida y optimizada el producto digital.
- Mejora la experiencia de usuario del producto.
- Genera experiencias digitales escalables y sincronizadas en diferentes plataformas.
- Mantiene la consistencia en el producto.
- Reduce el tiempo dedicado a producir para aumentar el tiempo dedicado a pensar.
- Optimiza el tiempo de lanzamiento Time To Market.
- Reduce costes de producción.
- Decrece el mantenimiento del producto.
En definitiva, ahorra tiempo y dinero. Nos permite hacer mejores productos a un coste menor. Facilita la comunicación, a través de un lenguaje común, entre los equipos de diseño y desarrollo; y fomenta, al mismo tiempo, su autonomía.
Fuente: Alfonso Moncuerde – https://www.alfonsomorcuende.com/es/archive/
Cómo se aplican los sistemas de diseño
Crear un buen sistema de diseño no es tarea fácil. Sin embargo hemos de pensar que todo el tiempo y esfuerzo invertido en su creación nos reportará importantes ventajas como las citadas anteriormente, simplificando nuestro trabajo y evitando muchos quebraderos de cabeza.
A la hora de empezar a generar un nuevo sistema de diseño hemos de tener presentes, entre otros muchos aspectos, estos 4 puntos:
- La misión y visión de la empresa o proyecto.
- La Arquitectura de Información y la Persona.
- Los puntos claves de investigaciones UX con usuarios.
- Conocimiento de los principios básicos del diseño y las reglas actuales (en caso de haberlas).
Resulta de vital importancia tener muy presentes estos 4 puntos puesto que, de este modo, cualquier diseñador o persona que participe en el desarrollo del producto tendrá las bases para trabajar con el sistema y evolucionarlo.
¿Quiénes son los responsables de orquestar la implantación de los sistemas de diseño? Existen dos equipos:
- Equipo constructor
- Equipos consumidores
Dentro de los equipos de construcción existen diferentes modelos. Con un equipo mínimo de dos (diseño y desarrollo) se puede dar el pistoletazo de salida de proyecto.
Lo primero de todo, necesitamos conocer lo que ya existe y documentarlo. Podemos ver qué se usa, cómo, se usa y si existe una forma más eficiente de poder trabajar. Es un trabajo grande y tedioso pero es la base de nuestro siguiente paso: definición de reglas.
Una vez auditado, el equipo ya puede proyectar, presentar y documentar las reglas fundacionales. Una vez aprobadas ya es posible la implementación de consumibles para la organización.
Fuente: Audrey Hacq – https://audreyhacq.medium.com/
A medida que el sistema sea consumido, tanto por diseño como por desarrollo, y este se afiance dentro de la organización, entramos en el siguiente paso, momento en el que, los equipos de distribución, suficientemente familiarizados con el sistema, podrán ampliarlo y evolucionarlo de manera autónoma, sin tener que depender del conocimiento o memoria del equipo constructor.
Consumibles básicos a incorporar en los sistemas de diseño:
- Color: podemos distinguir entre primarios, secundarios y tipográficos
- Tipografías a utilizar (jerarquías, interlineados, interletraje, tamaños y pesos)
- Retícula
- Botones (tipologías y estados)
- Sombreados
- Bordes
- Espacios entre elementos
- Estilos de formularios
- Iconografía: definidas por sus propiedades formales y agrupados en función de su tamaño
- Por último, es imprescindible generar una documentación que ayude a la correcta comprensión e implementación de cada uno de ellos por los diferentes equipos consumibles
Fuente: Nate Baldwin – https://natebaldw.in/#/articles
Visualización global de los elementos de un sistema de diseño (Product Design Handbook)
Evidentemente, esta lista se puede (y se ha de) incrementar en base a las necesidades y evolución del proyecto. Pero, ya sabes, con unas bases fundacionales bien trabajadas, el sistema podrá crecer y adaptarse sin problema, facilitando y optimizando la labor de los diferentes equipos de trabajo.
¿Quieres conocer más sobre sistemas de diseño? ¿Necesitas implantarlo en tu compañía? En hiberus tenemos un área de expertos en usabilidad y experiencia de usuario. Nuestro equipo analizará tus necesidades y te asesorará en los pasos a realizar para conseguirlo, mejorando la usabilidad y conversión de tu proyecto digital. No dudes en contactarnos, ¡estaremos encantados de ayudarte!
¿Quieres más información sobre nuestros servicios de UX/UI?
Contacta con nuestro equipo de User Research, User Experience y User Interface
