Los design system son un conjunto de pautas, restricciones y principios implementados en diseño y código que sirve para poder acelerar los procesos de desarrollo de software.
Un design system tiene varias ventajas
Cuando estamos frente a un design system, como por ejemplo el de IBM Carbon nos encontramos con una serie de elementos que nos ayudarán a diseñadores y programadores a contar con una serie de recursos como estilo, código y guías de interfaz.
Dentro de un design system el diseñador puede encontrar:
Dentro de un design system el programador pude encontrar:
Lo mejor es ponerse de acuerdo y al menos recopilar información de 2 o 3 design systems y discutir entre todo el equipo cuál de ellos cumple con todos los requisitos.
Ahora para poder implementar por el lado de los diseñadores es bueno saber si cuenta con algún documento descargable en sketch o adobe XD. Es un punto la verdad favorable, ya que podemos vincular este documento dentro de una librería y así poder llamar cada componente a nuestro nuevo diseño, un copy paste con muchas funcionalidades.
Sobre cómo trabajar con librerías de sketch existe mucha información y tutoriales en YouTube. Aquí te dejo un enlace Sketch library de un tutorial bastante interesante (en inglés).
¡Importante saber que un design system no remplaza a un wireframe! Nunca debemos pensar en diseñar directamente con un design system sin antes saber realmente los requerimientos y contar con los bocetos (wireframes) necesarios para el diseño de cada interactividad.
Por otro lado, también existe la posibilidad de crearlo, pero esto es una tarea grande en la que se debe contemplar un tiempo para el desarrollo. En definitiva tomará más tiempo desarrollar un design system, pero una vez listo con algunos elementos y guías de estilo básicas se puede ir avanzando hasta lograr uno definitivo que se ajuste la empresa. Definitivo la verdad no es la palabra, ya que siempre habrá mejoras y nuevas versiones según las que avanzar. Aquí te dejo un enlace sobre cómo crear tu propio design system
La mayoría de design systems está construida en Sketch o Adobe XD así que solo tienes que descargarlos y empezar a diseñar.
Aquí te dejo el enlace del design system de IBM con el que trabajamos actualmente
Esto nos impresionó bastante, el saber que el gobierno de Australia cuenta con su propio design system https://designsystem.gov.au
Este sitio me lo recomiendo un amigo y aquí podrás encontrar el design system que más se adapte a tus necesidades https://designsystemsrepo.com
La verdad es que esto merece un post aparte, así que solo te daré algunos links para que tebanas haciendo una idea de cómo construir el tuyo propio.
Curso de design system para diseñar el tuyo propio https://designcode.io/design-system-figma
Primero que nada leer toda la documentación porque estás serán las directrices que deberemos seguir para hacer un diseño centrado al usuario.
Las guías de estilo nos darán las normas que debemos respetar para el diseño de todos los elementos que vamos a implementar.
En algunos encontrarás que ya cuentan con conjuntos de elementos como formularios, menus, bloques de texto ya diseñados, lo que te ayudará a ahorrar un montón de tiempo.
En el caso de ser freelance es bueno siempre consultar si la empresa cuenta con un design system y también es bueno hablar con los desarrolladores si entra dentro de sus planes, poder implementar alguno de los que ya existen o crear uno propio.
En la mayoría de los casos se utiliza cuando necesitamos avanzar más rápido en el diseño y programación de un producto. Suele suceder en la mayoría de los casos que hay mucha carga de trabajo y varios proyectos a la vez y se necesita poder generar un orden y directrices para poder avanzar de manera rápida y segura.
Aquí te dejo como ejemplo el design system que utiliza airbnb
En otro caso, como en el de las compañías grandes que ofrecen un servicio, lo suelen utilizar para poder tener unas guías de estilo definidas y un conjunto de componentes que les ayuden a transmitir y crear una mejor relación entre el usuario, la marca y la interfaz. Con esto quiero decir que la gente que visita una aplicación se tiene que ver inmersa dentro de la cultura y de los valores que la empresa quiere transmitir.
Se suele implementar en casos en que queramos implementar un sistema visual, claro y efectivo y que ayude a transmitir los valores de la empresa.
El mejor caso es implementarlo donde existen errores en la interfaz. Por ejemplo:
La finalidad de poder aplicar un design system supone la mejora absoluta en tiempo de implementación, en mejorar de la interacción, en mejora del lenguaje, comunicación y la opción de poder hacer una mejora continua según avance la aplicación.
Te invito abiertamente a que pruebes un design system o construyas el tuyo propio y así podrás saber de primera mano el porqué tantas empresas lo utilizan en el proceso de desarrollo de sus productos.
Espero que te haya gustado y nos vemos en una próxima entrega.
