Los Sistemas de Diseño (Design System) son herramientas colaborativas formadas por un conjunto de componentes guiados por estándares. Un sistema de diseño bien estructurado es un lenguaje de comunicación común para todos los integrantes del equipo de desarrollo. No son una guía de estilo o un manual de marca, van más allá, y abarcan todos los elementos necesarios de un producto digital.
Las ventajas de disponer de un sistema de diseño en nuestro proyecto son múltiples, las más destacables son:
- Ganamos consistencia en el diseño al utilizar los patrones definidos en el sistema de diseño, lo que redunda en una mejor experiencia de usuario.
- Mayor velocidad de desarrollo, ya que los elementos de interacción ya están predefinidos.
- Mayor escalabilidad porque un sistema de diseño es un elemento vivo, pensado para crecer constantemente.
Para desarrollar un sistema de diseño nos basaremos en la metodología de 5 niveles de Atomic Design:
- Nivel 1 - Átomos: Se refiere a las unidades mínimas como la paleta de colores, los elementos de texto, iconos y los componentes más sencillos.
- Nivel 2 - Moléculas: Son los componentes básicos, basados en los átomos.
- Nivel 3 - Organismos: Se trata de componentes de mayor complejidad, que incorporan varios elementos diferentes.
- Nivel 4 - Plantillas: Se corresponden con los prototipo de cada página de la web o aplicación.
- Nivel 5 - Páginas: Hacen referencia el diseño final del producto, con datos reales.
Con esta misma filosofía en un sistema de diseño deben estar recogidos los tokens, es decir todos los elementos base que nos servirán para definir componentes complejos: tipografías, paleta de color, iconos, espaciados… También existirá una biblioteca de componentes que respondan a las necesidades del proyecto y que sigan las reglas definidas anteriormente. Esta biblioteca debe ir acompañada de documentación para definir el uso de cada componente dentro del proyecto. Con esto habremos creado un lenguaje común para que diseñadores y desarrolladores trabajen juntos eficientemente.
Ejemplos de Sistemas de Diseño
Thema Claro para Drupal
Material Desing
MailChimp
Atlassian
Más ejemplos en: Design Systems Repo
