¿Por qué un Sistema de Diseño para tu marca?

En el futuro, cada marca y cada producto utilizarán un Sistema de Diseño o como se refieren en Silicon Valley, Design System Custom.

Antes de entrar en harina, os mostramos esta imagen que visualmente resume muy bien la definición de un Sistema de Diseño.

 

¿Qué es un sistema de diseño?

 

Es una biblioteca de elementos orientados por unos patrones preestablecidas. Esta biblioteca es reutilizable, de modo que cuando se requieran componentes similares, se puedan reutilizar para construir páginas de manera rápida y consistente. Un sistema de diseño siempre está listo para usar, pero nunca está completo, lo que lleva a algunos a llamarlo un documento vivo.

En resumen, es un conjunto de productos entregables. Evolucionará constantemente con el producto, las herramientas y las nuevas tecnologías que vayan apareciendo en la empresa.

El sistema está compuesto de elementos tangibles y no tangibles:

-Tangibles: Herramientas para diseñadores y desarrolladores, patrones, componentes, pautas …

  • Colores
  • Tipografía (tamaño, inicio, tipografías, etc.)
  • Espaciado (márgenes, rellenos, coordenadas de posicionamiento, espaciado de borde)
  • Imágenes (iconos, ilustraciones)

 

-Intangibles: Elementos abstractos como valores de marca, formas de trabajo compartidas, mentalidad, creencias compartidas …

Características principales de un Sistema de diseño

 

  • ¿Para qué? / Ventajas

Porque es recomendable poner en marcha y un sistema de diseño personalizado.

  • Ahorra tiempo.

Haciendo que el proceso sea más eficiente. La planificación, el diseño, las pruebas y la codificación se simplifican para reducir el tiempo perdido.

  • Mejora el diseño de UX y el código entre productos o dentro de éstos.

Facilitan el seguimiento de lo que les gusta y lo que no les gusta

  • Aumenta la consistencia en el diseño, el código y la marca.

Ofrezca calidad constante y facilidad de uso familiar en cada producto mediante el uso de componentes idénticos.

  • Aumenta la comunicación del equipo.

Como documento estandarizado, los sistemas de diseño minimizan la cantidad de falta de comunicación.

 

¿Qué tipo de sistema de diseño se adapta mejor a mi empresa/marca?

 

Para definir un sistema de diseño que se adapte de forma óptima a nuestro equipo debemos tener respuesta de los siguientes puntos:

  • Quiénes y cuantas personas usarán el sistema
  • Cuál es el perfil del equipo y si tienen experiencia en el tema
  • Número de productos y como deben estar alineados
  • Número de plataformas utilizadas(web, redes sociales, offline…)
  • Número tecnologías utilizadas(react, angular…)

Tener clara todas las respuestas anteriores para definir un sistema de diseño que mejor se adapte.

Alla Kholmatova en su libro titulado Design Systems, nos muestra algunos estilos para crear nuestro sistema de diseño.

A continuación te mostramos algunos tipos de sistema de diseño para que te vayas familiarizando visualmente con esta herramienta o forma de trabajo.

¿Estricto o suelto?

Un sistema estricto tendrá una documentación completa y detallada y estará completamente sincronizado entre el diseño y el desarrollo. Para poder introducir un nuevo patron al diseño deberá pasar un proceso estricto y validación posterior.

Un sistema suelto dejará más espacio para la experimentación. El sistema está aquí para proporcionar un marco de trabajo para los equipos y al mismo tiempo preservar cierta libertad. Los diseñadores y desarrolladores son libres de usarlo o no, con respecto a sus necesidades particulares para su producto.

 

 ¿Centralizado o distribuido?

En un modelo centralizado , un equipo está a cargo del sistema y lo hace evolucionar. Este equipo está aquí para facilitar el trabajo de los otros equipos y tiene que estar muy cerca de ellos, para asegurarse de que el Sistema cubra la mayoría de sus necesidades.

En un modelo distribuido , varias personas de varios equipos están a cargo del sistema. La adopción del sistema es más rápida porque todos se sienten involucrados pero también necesita líderes de equipo que mantengan una visión general del mismo.

Ejemplos sistemas de diseño

 

Pinchando en la siguiente imagen os llevará a ver un buen ejemplo de sistema de diseño de la marca Android, esperemos que os sirva de ayuda. https://material.io/components/

Como ya te hemos indicado anteriormente tienes que responder a las preguntar anteriores y también sumar la forma de trabajo de tu equipo así es la mejor forma de encontrar una estructura de sistema de diseño que se adapte. O puedes crear tu un tipo de sistema de diseño combinando las fórmulas que mejor encajen, hay infinidad de opciones.