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:
- Nombre del sistema de diseño: El sistema de diseño debe tener un nombre distintivo que refleje su propósito y valor dentro de la organización.
- Guía de estilo (Style Guide): La guía de estilo sirve como la base de la interfaz, estableciendo los principios de diseño, la identidad visual y las pautas específicas para el sistema de diseño. Incluye información sobre la paleta de colores, la tipografía, los iconos, los estilos de botones y otros elementos visuales.
- Principios de diseño (Design Principles): Los principios de diseño definen los conceptos y valores del producto, estableciendo las directrices que guían el proceso de diseño y desarrollo.
- Tamaños de rejilla (Grid Sizes): Los tamaños de rejilla determinan los espacios y las retículas que se utilizan en la interfaz, asegurando una alineación y consistencia visual en todo el sistema.
- Design Tokens: Los design tokens son variables que representan atributos de diseño, como colores, tipografía, espaciado y sombras. Estos tokens permiten una fácil personalización y consistencia en todo el sistema.
- Componentes de la interfaz de usuario (UI Components): Los componentes son elementos reutilizables que componen la interfaz de usuario. Incluyen botones, formularios, tarjetas, barras de navegación y otros elementos con funciones claras y definidas.
- Patrones y pasos a repetirse en cada proyecto: Los patrones son soluciones probadas y documentadas para problemas de diseño comunes. Estos patrones establecen los pasos a seguir en cada proyecto para garantizar una implementación coherente y eficiente del sistema de diseño.
- Repositorio de elementos actualizados: Un repositorio centralizado donde se almacenan y actualizan los elementos del sistema de diseño, como archivos de diseño, archivos de código y bibliotecas de iconos.
- Documentación: La documentación es esencial para explicar cómo utilizar el sistema de diseño y garantizar su correcta implementación. Incluye manuales, tutoriales, ejemplos de uso y otros recursos que ayudan a los diseñadores y desarrolladores a comprender y utilizar el sistema de diseño de manera efectiva.
- Voz y tono de los textos: Define la personalidad y el estilo de los textos en la interfaz, estableciendo pautas para la redacción y la comunicación coherente con la marca.
- Transiciones, efectos y micro-interacciones: Define las transiciones de página, efectos visuales y micro-interacciones que mejoran la experiencia del usuario y agregan dinamismo a la interfaz.
- Accesibilidad: Consideraciones y pautas de accesibilidad que aseguran que el sistema de diseño sea usable y accesible para todos los usuarios, incluyendo aquellos con discapacidades.
¿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
Para poder crear e implementar un sistema de diseño de una forma eficiente y lo más natural posible deberás realizara algunos pasos esenciales como los siguientes.
Obtén el respaldo y apoyo del equipo
Presenta tus hallazgos a los stakeholders y explica la importancia de homogeneizar el diseño. Destaca cómo un sistema de diseño puede ahorrar tiempo y dinero a largo plazo. Haz hincapié en los beneficios a futuro que se obtendrán al contar con un design system sólido.
Realiza un inventario exhaustivo de la interfaz de usuario
Crea un inventario completo y detallado de los patrones y elementos que componen la interfaz, identificando claramente las diferencias y variaciones entre ellos.
Establece principios de diseño claros
Comienza a desarrollar una guía de estilo sólida y completa para el sistema de diseño. Establece principios y directrices claras que definan la apariencia visual y la experiencia del usuario deseada.
Define una paleta de colores consistente
Agrupa los colores y crea una paleta que defina exactamente los colores a utilizar en la interfaz de usuario. Asegúrate de mantener la consistencia en toda la plataforma y utiliza colores de manera estratégica para transmitir la identidad de la marca.
Diseña una escala tipográfica efectiva
Define la tipografía a utilizar, así como los tamaños y pesos correspondientes. Establecer una escala tipográfica coherente y legible ayudará a jerarquizar la información y facilitará la experiencia de lectura en el producto.
Implementa una biblioteca de iconos y estilos
Decide qué iconos y símbolos se utilizarán en la interfaz, organízalos en una biblioteca y estandariza su uso en el diseño del producto. Esto garantizará la coherencia visual y mejorará la comprensión del usuario.
Comienza a construir los primeros patrones de diseño
El desarrollo de patrones de diseño es un proceso continuo y en constante evolución. A medida que construyes los primeros patrones, asegúrate de que se reflejen y documenten en el design system. Mantén un enfoque ágil y adaptable, ajustando los patrones según las necesidades cambiantes del producto.
¿Quién crea el Design System?
El design system es un esfuerzo continuo que requiere la participación de todo el equipo de diseño y desarrollo, así como de los usuarios finales, para mantenerlo actualizado y adaptarlo a las necesidades en constante evolución de la organización.
Aunque puede tener acceso prácticamenete toda una organización los roles que se encargan de utilizar y gestionar un design system son:
- Diseñadores de interfaz de usuario (UI Designer)
- Desarrolladores front-end
- Diseñadores de experiencia de usuario (UX expert)
- Stakeholders y líderes de producto
- Equipos de documentación
- Especialista en pruebas de usabilidad
- Diseñadores de contenido
- Especialistas en accesibilidad
¿A quién le sirve el Design System?
Un sistema de diseño (Design system) es extremadamente útil en muchas áreas dentro de una empresa o equipo, incluyendo Diseño UI (Design), Desarrollo (Dev), Marketing, Recursos Humanos (RRHH) y Negocio (Business).
Gracias a contar con un design system diseñadores y desarrolladores se benefician de tener acceso a componentes y pautas coherentes que agilizan y aceleran el proceso de diseño y desarrollo, mejorando la eficiencia y la calidad del producto final. Para los equipos de marketing viene muy bien también ya que pueden crear activaciones y materiales de marketing coherentes con la identidad de marca y mantener una imagen unificada en todas las interacciones y comunicaciones.
Además, RRHH y los equipos de negocio pueden tomar decisiones estratégicas informadas basadas en una visión clara de la imagen de marca y la experiencia del usuario, ya que se genera conocimiento global sobre el producto y se define mucha información útil en los pasos de escalada de un producto digital.
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 de design systems y de los más completos son:
Material Design de Google
Human Interface de Apple
Y ya, si quieres flipar tienes una variedad increíble de sistemas de diseño en esta página de aquí y si te inetresa indagar Design systems en Figma échale un vistazo a esta web. Espero que te sirva esta información sobre lo que son los sistemas de diseño.
Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail.👇🏼👇🏼
Óscar López
Diseñador UX/UI y de producto digital.
Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.