Design System: cómo elaborarlo
Un sistema de diseño contiene unas guías de estilo, librería de componentes y las buenas prácticas para su uso.
El Design System o sistema de diseño es un conjunto de componentes reutilizables que se reúnen bajo una serie de directrices para llevar a cabo cualquier producto digital. Entre los objetivos del sistema de diseño, se incluyen mejorar la consistencia y la calidad de la interfaz de usuario, hacer que el proceso de diseño y desarrollo sea más eficiente y enfocado, establecer un vocabulario compartido entre el diseñador y el desarrollador y proporcionar una guía clara y reconocible sobre las mejores prácticas de diseño y desarrollo.
Un Sistema de diseño bien implementado aporta muchos beneficios a un producto digital:
La mayoría de Design System contiene unas guías de estilo, librería de componentes y las buenas prácticas para su uso.
Contienen documentación específica, referencias visuales y principios de diseño para crear interfaces. En un Design System habitualmente encontramos guías de estilo centradas en el branding o identidad de marca (colores, tipografías, logos…) pero para estar realmente completas se recomienda incluir el tono del lenguaje que utiliza el producto en la comunicación con el usuario, además de los estándares visuales y de interacción.
Nos ayuda a conseguir esa eficiencia a través del ahorro de tiempo y recursos. Además de ejemplos visuales de componentes, incluyen:
Muestran combinaciones reutilizables de componentes y plantillas que abordan objetivos comunes con secuencias y flujos.
Cada día más empresas apuestan por utilizar Design System para sus productos y facilitan librerías y recursos para diseñadores y desarrolladores:
IBM Carbon Design System – Es el Sistema de diseño de IBM, uno de los más completos y detallados actualmente.
Apple Human Interface Guidelines – Apple tiene su propio Design System para asegurarse de que todas las interfaces de sus productos y aplicaciones que utilizan su sistema operativo (iOS) cumplen la imagen de marca.
Polaris. – Design System de Shopify, muy orientado a ecommerce
Atlassian Design System – Herramientas como Trello están basadas en este Design System. Además, utiliza ejemplos de interacciones con micro-animaciones en sus componentes.
Google Material Design System – Es el sistema de diseño de Google, al igual que los anteriores, fija estándares de su marca para la aplicación en sus productos, sobre las guías de componentes, especificaciones y documentación para desarrolladores.