Un sistema de diseño es un conjunto integral de estándares, documentación y componentes reutilizables que guían el desarrollo de productos digitales dentro de una organización. Sirve como una única fuente de verdad para diseñadores y desarrolladores, asegurando la coherencia y la eficiencia en todos los proyectos. Un sistema de diseño puede incluir bibliotecas de patrones y componentes; guías de estilo para fuentes, colores, espaciado, dimensiones y ubicación de componentes; lenguajes de diseño , componentes codificados, lenguajes de marca y documentación. Los sistemas de diseño ayudan en el diseño de productos digitales y el desarrollo de productos como aplicaciones móviles [1] o sitios web.
Un sistema de diseño sirve como referencia para establecer un entendimiento común entre los equipos de diseño, ingeniería y producto. Este entendimiento garantiza una comunicación y colaboración fluidas entre los diferentes equipos involucrados en el diseño y la construcción de un producto, y en última instancia da como resultado una experiencia de usuario consistente. [2]
Entre los sistemas de diseño más destacados se incluyen Lightning Design System (de Salesforce), [3] Material Design (de Google), [4] Carbon Design System (de IBM), [5] y Fluent Design System (de Microsoft). [6]
Algunas de las ventajas de un sistema de diseño son:
Los sistemas de diseño se han utilizado durante mucho tiempo bajo diferentes nomenclaturas. Los sistemas de diseño han sido importantes en el campo del diseño desde que se crearon, pero han sufrido muchos cambios y mejoras desde su origen. El uso de sistemas o patrones, como lo llamaban en la década de 1960, fue mencionado por primera vez en la Conferencia de Ingeniería de Software de la OTAN (discusión sobre cómo se debería desarrollar el software) por Christopher Alexander, lo que atrajo la atención de la industria. En la década de 1970, publicó un libro llamado "A Pattern Language" junto con Murray Silverstein y Sara Ishikawa, en el que se analizaban los patrones interconectados en la arquitectura de una manera sencilla y democrática y que dio origen a lo que hoy conocemos como "sistemas de diseño".
El interés por el campo digital resurgió en la segunda mitad de la década de 1980, cuando se empezó a utilizar esta herramienta en el desarrollo de software [8], lo que dio lugar a la noción de Patrón de diseño de software . Como los patrones se conservan mejor en un entorno de edición colaborativa, esto condujo a la invención de la primera wiki , que más tarde condujo a la invención de la propia Wikipedia . Se celebraron conferencias periódicas e incluso en aquel entonces se utilizaban patrones para crear interfaces de usuario. [9] El auge continuó hasta bien entrada la década de 1990, con la investigación de Jennifer Tidwell cerrando la década. [10] El interés científico continuó hasta bien entrada la década de 2000. [11]
El interés generalizado por los lenguajes de patrones para el diseño de interfaz de usuario resurgió con la apertura de la biblioteca de patrones de diseño de Yahoo! en 2006 [12] , junto con la introducción simultánea de la biblioteca de interfaz de usuario de Yahoo! ( abreviada como biblioteca YUI ). La introducción simultánea tenía como objetivo permitir un diseño más sistemático que los simples componentes que proporcionaba la biblioteca de interfaz de usuario.
El Material Design de Google de 2014 fue el primero que la empresa denominó "lenguaje de diseño" (la versión anterior se llamaba "Holo Theme"). Pronto, otros siguieron su ejemplo.
Los desafíos técnicos de los proyectos web a gran escala llevaron a la invención de enfoques sistemáticos en la década de 2010, en particular BEM [13] y Atomic Design. El libro sobre Atomic Design [14] ayudó a popularizar el término "Sistema de diseño" desde 2016. El libro describe un enfoque para diseñar diseños de productos digitales de una manera basada en componentes, lo que lo hace compatible con el futuro y fácil de actualizar.
Un lenguaje de patrones permite que sus patrones existan en muchas formas y formatos diferentes; por ejemplo, un formulario de inicio de sesión, con un campo de entrada para el nombre de usuario, la contraseña y botones para iniciar sesión, registrarse y recuperar la contraseña perdida es un patrón, sin importar si los botones son verdes o morados. Los patrones se denominan patrones exactamente porque su naturaleza exacta puede diferir, pero las similitudes proporcionan la relación entre ellos (llamada configuración) para que siga siendo la misma. Sin embargo, un lenguaje de diseño siempre tiene un conjunto de pautas visuales para contener colores y tipografías específicos . La mayoría de los sistemas de diseño permiten que los elementos de un lenguaje de diseño se configuren (a través de sus patrones) según las necesidades.
Un kit de UI es simplemente un conjunto de componentes de UI, sin reglas explícitas sobre su uso.
Un token de diseño es una variable con nombre que almacena un atributo de diseño específico, como un color, una configuración de tipografía, un valor de espaciado u otra decisión de diseño. Los tokens de diseño sirven como una única fuente de verdad para estos atributos en toda una marca o sistema, y proporcionan una amplia gama de beneficios, como abstracción, flexibilidad, escalabilidad y consistencia para grandes sistemas de diseño. Los tokens de diseño, que son esencialmente decisiones de diseño expresadas en código, también mejoran la colaboración entre diseñadores y desarrolladores. El concepto de tokens de diseño existe en una variedad de sistemas de diseño conocidos, como Material Design de Google, [15] Style Dictionary de Amazon, [16] Spectrum de Adobe [17] y Atlassian Design System [18].
El grupo comunitario de tokens de diseño del W3C está trabajando para proporcionar estándares abiertos para tokens de diseño. [19]
Un sistema de diseño comprende varios componentes, patrones, estilos y pautas que ayudan a optimizar y agilizar los esfuerzos de diseño. Los factores críticos a tener en cuenta al crear un sistema de diseño incluyen el alcance y la capacidad de reproducir sus proyectos y la disponibilidad de recursos y tiempo. Si los sistemas de diseño no se implementan y mantienen adecuadamente, pueden desorganizarse, lo que hace que el proceso de diseño sea menos eficiente. Sin embargo, cuando se implementan bien, pueden simplificar el trabajo, hacer que los productos finales sean más cohesivos y empoderar a los diseñadores para abordar desafíos intrincados de UX. [20]
{{cite book}}: CS1 maint: location missing publisher (link)