¿Qué es un design system?

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

  • Facilita la interacción de los usuarios con el producto
  • Considera la manera en que interactuamos con la pantalla
  • Fácil de implementar una vez diseñado.
  • Facilita la interfaz
  • Ayuda a poder trabajar de manera rápida e inteligente.

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:

  • Assets ( botones, areas de texto, checkbox, etc.)
  • Guías (Restricciones, comentarios, sugerencias para poder crear la mejor experiencia para tus usuarios)
  • Componentes (Elementos ya construidos como formularios, bloques de texto, Llamadas a la acción, listas, bloques de información, etc)
  • y documentación necesaria para el diseño de interacciones.

Dentro de un design system el programador pude encontrar

  • código que facilita la programación de los elementos y su implementación.
  • Librerías frontend para poder implementar.

¿Qué requisitos debe cumplir un design system?

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.

  • Tipo de código en el que está construido
  • Guía de estilo
  • Cantidad de componentes
  • Analizar si el design system se adecua al tipo de software en el que se quiere aplicar.
  • Ver si cuenta con una adecuada documentación.

¿Cómo implementar un design system?

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 ingles)

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 la empresa. Definitivo la verdad no es la palabra ya que siempre habrán mejoras y nuevas versiones según las que avanzar. Aquí te dejo un enlace sobre cómo crear tu propio design system

¿De dónde descargar un 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 impresiono 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 mas se adapte a tus necesidades https://designsystemsrepo.com

¿Cómo crear un design system?

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

¿Cómo utilizar un design system?

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.

¿Cuándo utilizar un design system?

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.

¿Dónde implementar un design system?

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:

  • incongruencias en estilo y tamaños de botones
  • uso desproporcionado de la tipografía
  • errores en la utilización de una paleta de colores
  • errores en el tipo de mensajes o alertas
  • utilización de diferentes tipos de lenguajes
  • diferentes componentes con la misma funcionalidad
  • etc.

En resumen

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 porque 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.

Sometimes it is not easy start.

Simplify it, Get a free consultation.