Un Sistema de Diseño o Design System es una librería o colección de componentes y códigos e información que componen un producto digital.
Los sistemas de diseño permiten desarrollar y prototipar rápidamente productos digitales manteniendo una coherencia con el resto de partes.
En un Design System no solo se agrupan elementos y componentes gráficos, en esta guía de estilo se pueden y deben incorporar también patrones y partes de la cultura de empresa y valores que se pretendan transmitir a través de los productos y servicios que se ofrecen.
Objetivo y Finalidad de un Sistema de Diseño
El objetivo de crear un design system es poder crear un producto que sea Escalable, Consistente e Intuitivo.
Tener nuestro propio sistema de diseño permite crear una UI de producto que sea escalable en etapas futuras de crecimiento.
Como dice Nathan Curtis , un “Sistema de diseño no es un proyecto, es un producto al servicio de productos”.
Qué incluye un Design System
Un sistema de diseño completo incluye:
- Un nombre
- Style Guide, como base de la interfaz.
- Design Principles, definen conceptos y valores del producto.
- Grid Sizes, espacios y retículas que se utilizan.
- Design Tokens.
- Componentes de la UI y elementos con funciones claras.
- Patrones y pasos a repetirse en cada proyecto.
- Repositorio de elementos actualizados.
- Documentación.
- Voz y Tono de los textos.
- Transiciones, efectos y micro-interacciones
- Accesibilidad
¿Por donde empezar un Sistema de Diseño?
Una pregunta común es ¿Cuándo se crea el design system de un producto?
Tanto si el equipo está compuesto por pocos integrantes o incluso por una única persona, empezar a definir un sistema de diseño se agradecerá cuando el producto crezca.
Contar con un design system UX desde el principio del diseño de la UI facilitará mucho el correcto crecimiento del proyecto.
Una buena manera de empezar a crear tu sistema de diseño es mediante el diseño atómico.
El design system crece paralelamente junto al proyecto o producto.
Pasos para crear un Sistema de Diseño
1. Crea el inventario de la interfaz de usuario
Enumera y describe los patrones y elementos que componen una interfaz y detecta las diferencias entre ellos.
2. Obtén el apoyo del equipo
Presenta tus descubrimientos a los stakeholders y explica la utilidad de homogeneizar el diseño. Explica el ahorro futuro en tiempo y dinero gracias a disponer de un design system.
3. Establece principios de diseño
Empieza la guía de estilo para el sistema de diseño.
4. Crea la paleta de colores
Agrupa colores y crea una paleta donde se definan exactamente los colores a utilizar en la UI.
5. Crea la escala tipográfica
Define la tipografía a utilizar así como los tamaños y pesos correspondientes. Definir este aspecto tipográfico ayudará a jerarquizar y facilitar la lectura dentro del producto.
6. Implementa la biblioteca de íconos y otros estilos
Decide que iconos y símbolos aparecerán en la interfaz, guárdalos y estandariza su uso en el diseño de producto.
7. Comienza a construir los primeros patrones de diseño
Esta será una tarea infinita. Los patrones deben ir modificándose y adaptándose a las necesidades del producto, pero deben quedar reflejados en el design system.
¿Quién crea el Design System?
Un design system lo crean varias partes de una empresa o producto. Los principales creadores del sistema de diseño son:
- Área de diseño y producto
- Corporativo
- Marketing
¿A quién le sirve el Design System?
El sistema de diseño le es útil a los departamentos de Diseño UI (Design), Desarrollo (Devs), Markerting, Recursos Humanos (RRHH) y Negocio (Bussiness).
Ventajas de tener un Design System
- Claridad y comprensión por parte del equipo.
- Procesos de diseño y desarrollo más ágiles.
- Productos más intuitivos y consistentes.
- Mayor escalabilidad en diseño y código.
- Facilita el onboarding.
- Reducción de costes en tiempo y dinero.
- Facilita los design Sprints.
- Genera foco en la resolución de problemas.
- Intercambio más fácil de conocimiento dentro de los equipos.
Un Design System crece poco a poco ¡Empiézalo!
Ejemplos de Sistemas de Diseño
Algunos de los mejores ejemplos y más completos son:
Material Design de Google
Human Interface de Apple
Recibe todos las semanas contenido de calidad sobre Diseño UX y UI en tu mail.👇🏼👇🏼
Óscar López
Diseñador gráfico digital
Me llamo Óscar y vivo diseñando y creando cosas, me encanta descubrir, aprender y compartir lo que aprendo. Me flipan los entornos digitales y siempre estoy abierto a un bombardeo de ideas y posibles proyectos.
Cualquier duda o o comentario relacionado con diseño digital y UX es bien recibido y agradecido.