¿Qué es un design system? Y si estudias diseño ¿Por qué deberías saberlo?

El manual de identidad es para los estudiantes de diseño la culminación de su carrera, muchos de los proyectos finales en la carrera de diseño gráfico son precisamente el entregar manuales de identidad, sin embargo, existe un nuevo concepto que está ganando popularidad entre los que realizan diseño y es el design system, pero, ¿Qué es un design system y para qué sirve? para responder esta pregunta, primero abordaremos qué es un manual de identidad.

¿Qué es un manual de identidad?

El manual de identidad es un documento en el cuál se señalan las guías de imagen de una marca, compañía o producto; en él, se especifican colores, formas, tamaños, guías, tipografías de acompañamiento, ejemplos de usos gráficos (papelería, medios digitales, envases y empaques, etc.), también, el manual de identidad declara las prohibiciones y los usos incorrectos.

Página del manual de identidad de nuestro branding.

Entre las ventajas que brinda tener (y respetar) un manual de identidad se encuentran (como su nombre lo dice) ayudar a que la marca sea coherente e identificable y por lo tanto, genere en el usuario una afinidad y reconocimiento, un buen manual de identidad, ayudará a que se realicen decisiones que tienen que ver con imagen de una manera más rápida, ayudará a que todos los puntos de contacto con usuario final apoyen a la labor de reconocimiento y por lo tanto ayudarán al posicionamiento de marca.

Entonces: ¿Qué es un design system?

Para entender qué es un sistema de diseño primero, debemos comprender que es un Ecosistema Vivo, es decir: un proceso iterativo, a diferencia de un manual de identidad, el sistema de diseño puede cambiar todos los días,

¿Qué contiene un sistema de diseño?

  • Guías de estilo; son guías acerca de cómo hacer las cosas para generar coherencia entre diferentes productos o dispositivos; colores, fotografías, animaciones, formas, tamaños, tipografías, etc., en resumen, todo lo visual, pero, además, deberá componerse también, de una guía de estilo sobre contenido y tono (comunicación).
  • Pattern libraries (Librerías de patrones); está formada por elementos de diseño de interfaz de usuario; es decir son elementos de diseño que aparecen continuamente en un producto digital como pueden ser: botones, formas, íconos etc.
  • Component libraries (Librerías de componentes); está compuesta por todos los elementos y componentes de un producto digital con su código, estás librerías tienen como objetivo ayudar a los diseñadores y programadores de una manera más eficiente.
Mailchimp es un gran ejemplo de design system, sencillo y efectivo: http://ux.mailchimp.com/patterns/buttons

Se puede entonces, definir el design system como un sistema que ayude a agilizar el proceso de diseño de productos digitales, pero a su vez, ayude a mantener la coherencia gráfica entre diferentes dispositivos.

Extracto de Design system Shopify: https://polaris.shopify.com

Por lo tanto: ¿Es el design system un manual de identidad para productos digitales?

No, el principio de un design system es el de facilitar la colaboración y comunicación entre quienes desarrollan productos digitales, es decir: entre desarrolladores (programadores), y diseñadores, de manera que se establezca un lenguaje y metas comunes.

Además, el design system contiene aquellos elementos que se repiten durante el diseño de un producto para que puedan reutilizarse de manera ágil, y que se pueda eficientizar el desarrollo.

IBM es un gran sitio de inspiración para crear design system: https://www.carbondesignsystem.com

El manual de identidad, debe formar parte del design sistema (en la guía de estilos).

¿Por qué debería saber sobre design system?

La respuesta es sencilla, puesto que cada vez se desarrollan más productos digitales (desde páginas web hasta software y apps), conocer y alimentar sistemas de diseño será una ventaja competitiva para diseñadores y desarrolladores.

Muchas compañías tienen abierto al público sus sistemas de diseño para que conozcas qué puede contener y te inspires a armar el propio, te dejo el link de algunos.

@ChenBrimac
chen@girasolo.com
www.girasolo.com
www.ThinkBigPink.com