Un sistema de diseño, o Design System, es un conjunto definido y estructurado de estándares, que busca mantener un diseño escalable, fácil de mantener y reutilizable, basado en componentes y patrones que deciden como construir un sitio, aplicación, módulo, interfaz, entre otros.
Si estas interesado en saber más sobre por qué deberías usar un sistema de diseño, te invitamos a continuar leyendo...
¿Por qué usar un Sistema de Diseño?
Cuando hablamos de un sistema de diseño, este abarca toda la aplicación, involucrando inclusive la etapa de planeación. Para cuidar la experiencia de usuario es indispensable tener un sistema de diseño que sea fácil de mantener y que mejore progresivamente con el tiempo, permitiéndote cambiar o mejorar funcionalidades.
A continuación mencionaremos algunas de las ventajas que puede traerte incorporar un sistema de diseño a tu proyecto:
1) Tu aplicación puede ser desarrollada mas rápido
Un sistema de diseño te brinda la versatilidad de reutilizar componentes ya previamente creados, y posicionarlos cada vez que necesites alguna interacción parecida a lo largo de tu aplicación. De esta manera puedes garantizar una usabilidad intuitiva y generarle emociones positivas a tu usuario, debido a que reconoce elementos que ya sabía usar.
Si quieres saber más sobre la relación entre emociones y design, te invitamos a leer el artículo de Emotional Design (o Diseño Emocional) que escribimos previamente sobre el tema.
Continuando con el tema, cuando tienes bien definido cómo puedes construir el UI reutilizando patrones de tu sistema, pierdes menos tiempo arreglando el diseño y puedes dedicar un mayor esfuerzos a crear features (o características) nuevas en tu aplicación, o a solucionar algún otro problemas que necesite de tu atención o la del equipo.
2) Crea un lenguaje unificado entre tus productos
Con un sistema de diseño consigues que cada uno de tus productos mantenga un lenguaje en común que permita identificarlos como parte de un todo y de tu marca. Un buen ejemplo de esto puede ser Google, Microsoft o Apple. Reconoces que usas un producto de ellos solamente por su lenguaje visual.
3) Crea un lenguaje unificado entre los equipos desarrolladores
Un lenguaje común evita pérdidas de tiempo; no hay necesidad de reinventar la rueda. Si existe un lenguaje común, todos sabremos de qué estamos hablando, seguiremos el mismo camino y evitaremos incoherencias y malos entendidos. Incluso si partes del equipo tienen diferencias geográficas.
4) Funciona como documentación para nuevos integrantes del equipo
Al tener un sistema de diseño, las nuevas personas que puedan entrar a futuro en el proyecto y retomen el desarrollo de la aplicación, tendrán un lugar de donde sacar referencias y entender cómo se supone que debería ser el lenguaje usado al momento de construir la aplicación.
Cuando NO usar un Sistema de Diseño
Existen algunas ocasiones en las que no es necesario tener un sistema de diseño. Crear y mantener uno es una tarea que lleva tiempo, dedicación y mejora constante. Cuando el proyecto es muy pequeño o no se tiene la intención de escalar su complejidad, crear un sistema de diseño puede ser poco prioritario.
Ahora, si tu intención es escalar o mantener coherencia entre aplicaciones; si tu objetivo es aumentar la complejidad, un sistema de diseño podría tener mucho sentido para ti.
Repositorio de diseño
Un sistema de diseño consta de varias partes, y el conjunto de estas forman un repositorio de diseño:
Guías de Estilo
Estas especifican cómo implementar los componentes del sistema; tienen referencias visuales y principios al momento de crear las interfaces. Normalmente, estas guías también vienen con fragmentos ya construidos, usando varios componentes para ponerlas en contexto y ayudar a explicarlas mejor.
Las guías de estilo pueden contener incluso, tonos de voz al momento de escribir, estándares de interacción, recomendaciones, etc.
Librería de Componentes
Contiene una serie de componentes pre-construidos, listos para ser reutilizados, que sirven en conjunto con las guías de estilo. Son la base para comenzar a crear una interfaz, ahorrando tiempo significativo al momento de diseñala.
Un componente de una librería normalmente viene documentado con las siguientes partes:
- Nombre: manera única de llamar al componente para identificarlo de entre los demás. De esta manera se evita confusión;
- Descripción: explicación clara sobre qué es y para qué funciona el componente, normalmente acompañado con una breve guía de cómo cuándo usarlo o no;
- Atributos: variables de configuración del componente, que permiten alterar su funcionamiento para diversos escenarios que precise la aplicación. Estos pueden ser color, tamaño, texto, contenido, etc;
- Estado: valores predeterminados recomendados y cambios posteriores en la apariencia;
- Fragmentos de código: son los fragmentos del código real del componente. Algunos sistemas de diseño van tan lejos como para compartir múltiples ejemplos y ofrecer un entorno de "caja de arena" o "sandbox", para probar diferentes personalizaciones de componentes;
- Front-end y backend frameworks: algunos sistemas de diseño también especifican cuáles son los frameworks de front y backend a utilizar, tanto porque los componentes están construidos en él, como también para evitar problemas de desarrollo y agilizar el proceso.
Librería de Patrones
Se suele pensar que una librería de patrones y una librería de componentes es la misma cosa. Sin embargo tiene sus diferencias. Mientras una librería de componentes contiene una serie de elementos específicos para una interfaz, una librería de patrones contiene elementos mayores, construidos de varios componentes.
Se suelen usar los términos "átomos y organismos" para referirse a esto. Los átomos serían los componentes específicos, los organismos por su parte, al estar construidos de varios átomos, serian los patrones. Un ejemplo de esto puede ser la cabecera (o header) de una página web, un menú, un logo, una caja de búsqueda y un botón.
Conclusión
Ahora podemos entender la importancia de tener un sistema de diseño en nuestros proyectos. Las guías, patrones y elementos reutilizables pueden ayudarte muchísimo a optimizar tu flujo de trabajo a la vez que aseguras una buena experiencia de usuario a lo largo de la aplicación. Todo esto requiere tiempo, esfuerzo e investigación.
Un sistema de diseño mal hecho o mal ejecutado, puede ocasionar resultados contrarios a los esperados, además de robarte tiempo que puedes estar dedicando a resolver otras prioridades. Es recomendable crear este tipo de sistema con un equipo capacitado y dedicado específicamente para esta tarea.
