Introducción al Design system

mayo 5, 2021

Esta es una introducción a los design systems, para qué sirven y por dónde puedes empezar.

¿Qué es un design system?

Es una herramienta para desarrollar productos más rápido, la metáfora que se usa mucho es que el design system son los bloques de lego con los que creamos nuestros producto.

En general el design system se manifiesta como una guía de estilos, galería de componentes y un manual de creación.

El design system tiene que estar adaptado al tamaño del equipo y las necesidades del producto.

Si no, te arrestará la policía del UX

Es ante todo una herramienta de comunicación entre departamentos para crear de manera eficientemente un producto complejo.

¿Para qué sirve un design system?

Si alguna vez haz trabajado en un producto complejo (por ejemplo una app) te darás cuenta que hay componentes que usarás en varias partes del producto.

Por ejemplo: un botón, lo usarás en la web del producto, en distintas pantallas de la app y en los banners de marketing ¿Por qué no usar el mismo diseño de botón en todos los sitios?

La idea del design system es no tener que reinventar la rueda cada vez que tienes que crear una nueva página, sino crear un sistema que ahorre tiempo a desarrolladores, diseñadores, product owners y goblins de marketing.

Esto ahorra tiempo y hace el producto más consistente: mejoramos la experiencia de usuario y al mismo tiempo desarrollamos más rápido.

¿Por dónde es recomendable empezar mi design system?

1Convencer a los stakeholders de que hacer un design system vale mucho la pena

El primer paso y el más fundamental es entender por qué es importante el design system y convencer a los stakeholders que invertir tiempo en esto es buena idea.

Si no logras esto el resto de tus esfuerzos serán inútiles y te verás forzado a llorar por las noches y tomar pastillas para consolar el sueño durante la duración del proyecto.

2Inventario

Este inventario es hacer un listado de TODOS los componentes de las apps y páginas webs del producto. Ponerle un nombre y agruparlos en grupos lógicos (Por ejemplo apple los agrupa en bars, views, controls ).

Una vez convenzas a tu jefe y colegas que hacer un design system es una buena idea, el siguiente paso es involucrarlos en la creación del design system y una excelente manera de hacer esto es hacer un Interface inventory en conjunto.

Pro-tip: Organiza un workshop con todos los departamentos (DEV, QA, Ventas, Marketing, Producto, etc.) y cada equipo tendrá la tarea de encontrar y nombrar los componentes en conjunto con el objetivo de eliminar duplicados y ponerse de acuerdo para nombrar los componentes y evitar que cada departamento lo llame de manera distinta.

Por último: documenta este inventario y ponerlo en un lugar visible para todos los equipos (En confluence, en el blog de la empresa, etc).

3Crea un piloto rápido

Así como las series de televisión hacen un piloto para ver si va a funcionar un concepto. Tú también empieza por un piloto para poner a prueba tus suposiciones.

  • Empieza por los componentes que más se usan.
  • Empieza por los componentes más valiosos (por ejemplo si hiciera el design system de google, definitivamente haría el componente del buscador).
  • Habla con ingeniería y empieza por las cosas que sean más fáciles de implementar.
  • Que sea algo rápido que no tome más de dos meses.
  • Que tenga potencial que le guste a todos (los componentes de la funcionalidad esta maravillosa que el CEO siempre presume del producto)

Pequeña introducción sobre los design systems, basado fuertemente en el mini-curso de Invision de expert advice design system. También escribí las referencias de design systems que me parecieron útiles.

Si quieres leer un artículo más avanzado, hice esta azotadez centrado en Tokens y cómo nombrarlos.

Lectura recomendada: https://www.uxpin.com/create-design-system-guide

Crédito de la foto de portada: Conor Hennessy

Etiquetas: , ,

1 comentario

  • […] Este es un artículo más avanzado sobre design systems, pero, también escribí una introducción a los design systems. […]