{IDA Workshop

Sistemas de Diseño: ¿Cómo escalamos el diseño para nuestros contenidos?

Cada vez que nos enfrentamos al desarrollo de un proyecto digital nos enfrentamos a coordinar su “totalidad” desde una “multidimensionalidad” que ayuda a planificar un conjunto de actividades que se encuentran interrelacionadas y coordinadas para lograr un objetivo. Los sistemas de diseño nos ayudan a navegar este vasto panorama, de manera que podamos abordar los distintos desafíos y metas más eficientemente.

¿Qué es un sistema de diseño?

Un sistema de diseño es un enfoque sistemático para el desarrollo de productos, con pautas, principios, filosofías, componentes y código. Es el traspaso sistematizado -valga la redundancia- de los elementos que un equipo consideró para diseñar la experiencia digital de un plataforma, sitio web o aplicación (entre otros). 

Esto lo convierte en una herramienta fantástica para escalar la práctica de diseño, reduciendo la necesidad de transferencia de conocimiento y promoviendo una mayor colaboración.

Poder contar con un sistema de diseño coherente, ya sea de creación propia o adaptado a partir de alguno preexistente. Es una buena manera de ordenar los elementos con los que construiremos la experiencia del usuario en nuestra plataforma digital. Al mismo tiempo, es una excelente forma de hacer fácil el “onboarding” de nuevos elementos a nuestro equipo, de manera más rápida y sencilla. 

Un sistema de diseño es evolutivo por definición, ya que debe adaptarse a los avances tecnológicos, pero también a la experiencia de sus usuarios. Además, ayuda a los desarrolladores o diseñadores a hacer productos respetando la línea de los trabajos existentes, logrando crear un ecosistema digital coherente; en el que los equipos se comunican mejor entre ellos, reduciendo brechas del lenguaje en cuanto al significado de las palabras que utilizan y lo que realmente quieren decir.

Para que un sistema sea tal, es importante que cumpla algunas premisas: Que sea escalable, que su unidad mínima se base en una certeza, que sea recursivo en sus formas y proporciones, que regule no sólo la forma y comportamiento de los objetos sino también las relaciones entre ellos, que sea eficiente, predecible y sometedor. Esto es, que una vez definido, obligue a todo contenido o funcionalidad a existir bajo sus propias reglas.

Javier Cañada (2017)

El mayor desafío entonces en un proyecto digital es el de poder encontrar formas en que esa totalidad se acote, no se desborde y se gobierne. Todo esto con el fin de cumplir el objetivo como proyecto y como equipo. 

El diseño hecho por todos

La experiencia de usuario por definición se ha realizado siempre entre equipos multidisciplinarios. Por eso, es de vital importancia trabajar junto a otros para hacer lo menos sesgado posible el producto final. Sin embargo, al estar presentes profesionales de diversas áreas, es común que surjan dudas desde cada expertise. Es por eso que el sistema de diseño es fundamental desde su rol como herramienta, ya que nos permite ordenar y escalar el trabajo multidisciplinario.

Parafraseando a Lautremont con su “la poesía hecha por todos”, en IDA nos gusta hablar de “el diseño hecho por todos”.

Unidades discretas

Anteriormente hemos hablado de unidades discretas y su rol en el desarrollo de plataformas digitales. Esta metáfora es fundamental, ya que nos permite entender lo intrínseco que hace a un único elemento relevante en sí mismo y en la construcción de sistemas.

Las unidades discretas son expresiones mínimas que, al mezclarse en infinitas combinaciones, nos permiten elaborar palabras, conceptos y mensajes.

André Martinet, lingüista francés y representante de la corriente conocida como funcionalismo, las define como aquellas unidades cuyo valor lingüístico no resulta afectado en nada por variaciones de detalle determinadas por el contexto o por circunstancias diversas.

Al entender que un sistema de diseño es una colección de componentes reutilizables, guiados por estándares claros, que se pueden ensamblar para construir cualquier número de interfaces, podemos decir que estamos tratando con un grupo de unidades discretas que serán el motor del trabajo que estamos realizando. 

Los famosos Kit UI son un buen ejemplo de sistemas de diseño. Están compuestos por un número finito de componentes (unidades discretas) de interfaz organizados generalmente en las categorías de: navegación, contenido, notificaciones, formularios y visualizaciones, entre otros.

Componentes de un sistema de diseño

Visión estratégica

Cuando hablamos de visión estratégica, nos referimos al propósito y la cultura de la organización en el que se basen los desarrollos e implementaciones. 

Suele contener:

• Presentación y objetivos
• Misión, visión y valores
• Competencia y entorno (contexto)
• Líneas estratégicas
• Plan de acción

Elementos de marca

Aquí entra la adaptación de la marca a los diferentes formatos donde el producto vaya a estar presente.

Suele contener:

• Definición de marca
• Logotipo, imagotipo, isotipo
• Color corporativo (Pantone, RGB, CMYK)
• Tipografía
• Recursos gráficos
• Adaptación de marca en diferentes contextos (Ej: Oficinas comerciales).

Estrategia de Contenido

El tono, estilo y tipo de textos que se redactarán para el producto.

Contiene:

• Definición estratégica del contenido
• Manual de tono y estilo
• Glosario

Componentes de Diseño

Librería de componentes y otros elementos de diseño pensada para que los desarrolladores y los diseñadores de producto puedan crear nuevos productos coherentes de una manera rápida y fácil.

En diseño solemos incluir:

• UI Kit
• Dirección de arte digital
• Tipografía

Componentes de Desarrollo

Los elementos del UI Kit pueden estar traspasados a código en servicios como GitHub. Esto nos asegura un uso compartido, rápido y con un desarrollo controlado.

En desarrollo solemos incluir:

• Framework
• Api’s
• Entorno de manejo de versiones

Documentación

Son los documentos que explican los elementos nombrados anteriormente. Así como normas de implementación de API’s y webservices, entre otros.

En la documentación podemos incluir:

• Material de la investigación
• Webservices y Api’s
• Entorno de manejo de versiones
• Documentación legal

Gestión de Proyectos

Los sistemas de diseño, en un contexto de gestión de proyectos, son orgánicos y flexibles. Están pensados para anticiparse a escenarios y adaptarse a condiciones variables de ejecución.

En otras palabras, son una manera de comprender cómo trabajamos en equipo. Cuando hablamos de gestión de proyectos desde UX, debemos velar porque el propósito de diseño centrado en el usuario esté presente siempre y se “respire” en el sistema de diseño.

Un proceso hábilmente documentado permitirá tener claridad de cuáles han sido los avances y hallazgos de etapas anteriores y cómo estos impactan o influyen en etapas futuras, viéndose reflejadas en el sistema que utilicemos. En ese sentido, la documentación del research y definición de flujos de interacción impactará en el sistema de diseño.

El contenido antecede a la forma

Al sentarnos a plantear un nuevo proyecto, una de las primeras preguntas que surgen es ¿Tengo el contenido necesario para diseñar una plataforma? 

Cada elemento en una plataforma debe entregar información útil para los usuarios. Cuando un diseño no es guiado por la información (contenido) y se enfoca solo en la estética, pierde significado y se transforma en algo decorativo.

Cuando el contenido antecede a la forma no solo nos aseguramos de que el diseño sea funcional, también mejoramos la efectividad del trabajo, expresamos de forma clara y directa el propósito de un proyecto y podemos ofrecer una mejor experiencia a los usuarios al disminuir la curva de aprendizaje.

Al diseñar experiencia de usuario, tenemos la responsabilidad de entender lo que las personas buscan y poner a disposición una solución.  Esa solución no es un bonito diseño, sino más bien, algo funcional y significativo. 

Consejos para crear tu sistema de diseño

Para finalizar te recomendamos seguir estos pasos, que son los que seguimos en IDA al momento de diseñar un nuevo sistema o trabajar con un sistema existente.

• El contenido es primero
• El kit UI es tan sólo una parte del sistema de diseño.
• Considerar desde los aspectos estratégicos hasta cómo se va a implementar un proyecto
• Buscar las herramientas que sirvan para que la creación, mantención y uso puedan converger de manera precisa para los equipos de trabajo
• Se debe considerar la documentación que pueda complementar a los elementos del sistema de diseño
  
• Un sistema de diseño es evolutivo por definición y debe mutar junto a la organización para la cual lo diseñemos y mantengamos.