Los sistemas de diseño se han convertido en herramientas imprescindibles en grandes empresas que necesitan una fuerte comunicación y acuerdo entre todas las personas que trabajan con el producto digital, pero ¿qué son realmente los sistemas de diseño? ¿Son útiles en proyectos más pequeños? Vamos a verlo.
Qué es un sistema de diseño
Cuando hablamos de sistemas de diseño estamos hablando de una herramienta colaborativa y estandarizada, en la que se aglutinan los distintos componentes y guías que forman el producto final.
La idea es tener en un mismo lugar todos los elementos que componen tu diseño de forma que puedan ser reutilizados por cualquier miembro del equipo y con el objetivo de mantener siempre la consistencia y los principios fundamentales. De esta forma el equipo siempre trabajará en la misma dirección.
Pero esto no quiere decir que se trate de un sistema estático, al contrario debe ser un ecosistema vivo, que permita la evolución y mejora del producto final.
“Un sistema de diseño es la historia de cómo tu organización construye productos”
Brad Frost
Las ventajas principales de un sistema de diseño son:
- Permite al equipo establecer patrones.
- Ahorra tiempo.
- Ayuda a hacer el producto escalable.
- Ayuda a crear productos consistentes, incluso cuando hay varios equipos trabajando en ellos.
- Reducen la posibilidad de error.
- Mejora la experiencia de usuario porque unifica los estilos.
Factores a tener en cuenta cuando creamos un sistema de diseño
Cuando creemos un sistema de diseño una de las primeras cosas que debemos tener en cuenta es los propósitos y la cultura de la compañía, para que todo lo que diseñemos esté en línea con ellos. Y claro, en relación con esto, nunca debemos perder de vista la marca. Nuestro sistema de diseño no debe ser independiente del manual de marca y debe basarse en los principios que rigen el branding de la empresa.
Para comenzar nuestro sistema de diseño debemos tener en cuenta cuáles son las necesidades que tenemos, por ejemplo si nuestra herramienta va a tener distintos tipos de perfiles, si se van a poder subir archivos, si habrá comentarios de los usuarios, etc.
Además debe construirse con un lenguaje que todos entiendan, para que cualquier miembro del equipo pueda usarlo y encontrar fácilmente lo que necesita.
De qué se compone un sistema de diseño y cómo organizarlo
Lo primero es que el sistema debe tener unas reglas claras de uso, para que todos los que lo usen lo hagan de la misma manera.
Entre todos los elementos que puede tener un sistema de diseño algunos de los esenciales son:
- La Guía de estilos, que incluye el uso de la marca, el tono del contenido, etc.
- Paleta de colores.
- Tipografías usadas, tanto las distintas fuentes a usar como los distintos tamaños de las mismas, etc.
- Espaciados usados entre los distintos elementos.
- Tipos de sombras.
- Botones.
- Estilos de formularios.
- Tipos de imágenes, iconos e ilustraciones
- Componentes como cards, sliders, etc., que pueden ser reutilizados en diferentes partes del diseño.
Además de estos elementos todo debe estar documentado, dejando claro cómo debe ser usado y cuándo cada elemento del sistema de diseño.
La forma de organizar un sistema de diseño puede ser muy diversa pero una buena manera sería guiarnos por la idea del Atomic Design, creado por Brad Frost en 2013.
En este libro se habla de crear los distintos elementos basándonos en la teoría atómica, empezando por los elementos más básicos que por sí solos no tienen significado, los que llamaremos átomos, como colores, tipografías, un icono, una fotografía, etc.
Después crearemos las moléculas que son uniones de átomos: botones, inputs, selects, que tienen una mayor funcionalidad que los átomos.
Tras las moléculas el siguiente nivel de complejidad son los organismos, formados por moléculas y/o átomos: por ejemplo formularios, headers, llamadas a la acción, etc.
El siguiente nivel son las plantillas, combinaciones de organismos que solucionan una necesidad concreta como la página de detalle de un producto.
Y en lo más alto estarían las páginas, que son instancias de las plantillas con contenido concreto.
Quién debe participar en la creación del sistema
Está claro que los diseñadores son esenciales para la creación de un sistema de diseño, tanto diseñadores UX como UI. El diseñador UI será el que creará visualmente las distintas piezas del sistema mientras el diseñador UX velará por la usabilidad y la accesibilidad de cada una de ellas.
Los desarrolladores front end son también una parte fundamental, ya que convertirán todas esas piezas visuales en código que pueda ser adaptado y reutilizado en cualquier parte del producto
El departamento de marketing deberá velar porque todos los elementos se alineen con la imagen de marca y no se pierda la esencia y el tono de la misma.
El Product Manager será la persona en la cabeza del proyecto, asegurándose de que se cubran tanto las necesidades del negocio como las de los usuarios.
Cuándo es necesario un sistema de diseño
Seguramente si tienes una web pequeña y estás leyendo este artículo estarás pensando que en tu caso todo esto no es necesario. Pero muchas veces un sistema de diseño o al menos una guía básica de los distintos elementos puede solucionar muchos problemas a posteriori.
Recuerda que cada sistema debe marcarse sus propios objetivos y debe ser lo suficientemente flexible para adaptarse a cada proyecto y sus dimensiones.
Pero además es esencial si:
- Tienes un producto digital en el que a lo largo del tiempo van a intervenir distintos profesionales, porque facilitará el intercambio del conocimiento y asegurará que se mantenga la consistencia sin importar quién esté trabajando en él.
- Necesitas que tu producto sea escalable y te planteas que vaya creciendo a lo largo del tiempo. De hecho es muy importante si tienes pensado crear un MPV (Mínimo Producto Viable) y tienes expectativas de que se convierta en algo más complejo en distintas etapas.
- Tu producto está formado por un número alto de pantallas o elementos diferetes. Una web o app de este tipo puede hacer difícil mantener la consistencia, y generalmente generan procesos de diseño largos, en estos casos el sistema de diseño puede reducir el tiempo de creación de cada pantalla.
Y por si todavía no tienes muy claro de qué hablamos te dejo como ejemplo alguno de los sistemas de diseño más conocidos:
Y si quieres saber más sobre el tema te recomiendo que visites:
- Ana Montes (2 de junio de 2021). 7 Claves para crear un Sistema de Diseño (y no morir en el intento).
- Daniel Ortiz (23 de febrero de 2021). Por qué necesitas un sistema de diseño y cómo tus clientes te lo van a agradecer.
- Francisco Aguilera G. (15 de abril de 2020). Vídeo: Curso Diseño UI – 13. Sistemas de Diseño.
- Eugenia Jongewaard (13 de septiembre de 2018).Vídeo: ¿Qué es un Sistema de Diseño? (Design Systems).
- Samuel Gimeno Artigas (10 de mayo de 2017). Construyendo un sistema de diseño.
- Brad Frost (2013). Atomic Design.
- Andrea Hock: The what, how and why of design systems.
Imagen destacada: Foto de Tirza van Dijk en Unsplash
0 comentarios