¿Tu organización necesita un Design System?

Todo el mundo habla de Design Systems, pero ¿realmente conoces el alcance que puede tener dentro de una organización?

Group 5 Created with Sketch. 5 min
Comparte f in Created with Sketch.
Comparte f in Created with Sketch.

Los Design Systems como Hot topic que son están en boca de todos, pero realmente ¿conoces lo que implican?

Meme “ You Keep using that Word” “I do not think it means what you think it means”

Antes de ofrecer o desarrollar uno para tu compañía, deberías saber que…

“A design system isn’t a project, it’s a product serving products.”

Nathan Curtis

“Is not about designers, is about how an entire organization design products.”

Brad Frost

Los Sistemas de Diseño tienen un carácter holístico y plantean un cambio de paradigma en cómo las organizaciones de productos digitales consiguen alinear a sus diferentes equipos. Contienen el conjunto de principios, marcos metodológicos, y librerías de recursos que se utilizan para la construcción de productos digitales dentro de una organización y por consiguiente son considerados como la única fuente de la verdad dentro de las empresas.

Si aún no sabes si necesitas uno, te recomiendo que te hagas las siguientes preguntas:

¿Cuál es el alcance de tu proyecto?

No es lo mismo que necesites desarrollar un microsite aislado, un Mvp o tengas un producto digital consolidado.

Si estás empezando con tu proyecto y quieres lanzar un Mvp, lo más coherente es empezar por la Guía de estilos y el UI Kit. En un inicio esto te permitirá una inversión menor y una resolución fácil para la implementación del diseño y desarrollo de tu producto. En cambio, una vez tu producto esté testado y consolidado, te recomiendo pasar una segunda fase, y generar tu Design System.

Por otro lado, si tu proyecto es de pequeña envergadura, como un microsite o una landing y de momento no tiene previsto ser nada más que eso, te recomiendo que no hagas una gran despliegue, solventa tus necesidades con tu Guía de estilos y un UI Kit, fácil, simple y eficaz.

¿El producto tiene previsto escalar o evolucionar?

Valora si tu proyecto va a escalar o va a ser algo más bien estanco.

Los Design Systems ayudan a optimizar y reducir costes en nuevas implementaciones y actualizaciones de funcionalidades existentes, pero si tu proyecto no va a tener nada de esto, valora bien si realmente necesitas uno.

Pongamos un ejemplo, tengo una App de comida a domicilio, cada x tiempo incorporo servicios adicionales y replanteo funcionalidades. En este caso, seguramente nuestro Sistema de Diseño nos indique de una manera clara cómo y con qué lógica se han generar estas nuevas funcionalidades, o nos de pautas de cómo ha de ser el lenguaje que ha de guiar a los usuarios. Para casos así, invertir en un Sistema de Diseño sólido, es crucial. Gracias a él, te ahorrarás costes extras de Diseño y Desarrollo, tendrás una App coherente y por lo tanto generarás una mejor Experiencia de Usuario.

¿Tienes capital para invertir en un Design System?

Un Design System de por sí no tiene porqué ser caro, ya que una vez instaurado permitirá agilizar costes de Desarrollo y Diseño (sobretodo). Pero no hay que obviar que inicialmente requiere de una inversión importante en el desarrollo del mismo y los beneficios de dicha inversión los notarás a largo plazo.

Meme What if I told you a good design system can actually make you more money.

En este punto te recomiendo hacer una matriz para visualizar cada elemento de tu Design System —  Impacto Vs Esfuerzo en tu organización. También puede ser una herramienta útil para la priorización.

Imagen ejemplo de Matriz Esfuerzo Vs Impacto

¿Tienes una guía de estilos o manual de marca?

Cuando empiezas a articular tu proyecto es conveniente ir por pasos.

Una vez tienes tu Marca lo recomendable es documentarla en un Manual de marca o Guía de estilos, éste que servirá para el desarrollo del UI Kit y posteriormente ambos serán la semilla para tu Design System.

Por ir poniendo más luz a la oscuridad…

design System

Design System: Documento guía para toda la organización.

¿Qué puede llegar a contener?

Introducción al sistema

Historia de la Organización

Filosofía

Principios de diseño

Manual de Marca o Guide Style

Accesibilidad e inclusión

Voz y tono

Estrategia de contenido

Foundations

  • Tokens
  • Colores
  • Tipografías
  • Grids
  • Spacing
  • Estilos
  • Aspect Ratios
  • Iconografía
  • Ilustraciones
  • etc.

Componentes o UI Kit

  • Botones
  • Alertas
  • Dividers
  • Cards
  • Formularios
  • etc.
  • Codificación de componentes

Patterns

Dos & Don’ts

Apartado de gestión de versiones y actualizaciones

Noticias relacionadas con nuestro sistema

Y sobretodo sobretodo, lo que diferencia a un Design System de cualquier otra cosa es la documentación. Todos estos apartados han de estar debidamente y detalladamente documentados para su fácil y correcta aplicación. Para ello se suele utilizar Zeroheight, pero existen muchas otras compañías que crean sites ad hoc, todo depende una vez más de la inversión que desees hacer.

Dos apuntes más…

#1. Un Design System está vivo, no solo se crea y se cierra, requiere de un mantenimiento y optimización. Igual que nuestro proyecto crece y evoluciona, el Design System también ha de hacerlo. Por eso se recomienda que si tienes un Design System en tu compañía, exista la figura de un perfil que vele por el mismo.

Meme With great Design comes Great Responsability

#2. Un Design System aunque implica a todas las áreas de las organizaciones, beneficia sobretodo al rendimiento y optimización de las áreas Diseño y Desarrollo. Una vez implementado permite una gran agilidad de trabajo en y entre ambos departamentos, en gran parte porqué dejarán de hablar idiomas diferentes, para hablar el idioma definido en tu Design System.

Conclusión

Define el alcance de tu proyecto, visualiza el esfuerzo/coste Vs Impacto de desarrollar un Design System. Ve por pasos, testea, válida necesidades y si tu producto no es mínimamente maduro te recomiendo tener un buen Manual de Marca y un UI Kit potente, todo llega, pero no inviertas en un Design System cuando tu organización no tiene ni cierta madurez, ni esa necesidad.

Piensa en el Design System como en un producto, no como un proyecto paralelo.

Y sobretodo dale el valor que tiene, es una herramienta de un alcance enorme dentro de las organizaciones.

Design System

Si quieres ver buenas prácticas de Design Systems, revisa algunos ejemplos del artículo que publicó hace unos meses mi compañero Ángel García.


Glosario:

Style Guide: Documento en donde se presentan las decisiones visuales que definen la identidad de una Marca.

UIKit: Colección completa de componentes en base a nuestra Guía de estilos. Puede ser estático o puede contener la codificación de todos sus elementos.

Design System: Conjunto de principios, marco metodológico, y librerías de recursos que se utilizan para la construcción de productos digitales dentro de una organización. Garantizan una experiencia consistente y escalable.

Gracias por llegar hasta aquí. La Fotografía de cabecera es de Yana Marudova en unsplash.com

Group 5 Created with Sketch. 5 min
Comparte f in Created with Sketch.
Comparte f in Created with Sketch.