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

En nuestro último {ida Workshop conversamos sobre el valor estratégico y alcance de los sistemas de diseño. Luciano Cimino y Rodrigo Vera, nos enseñaron a construir y entender su funcionalidad. Si no pudiste participar o te quedaste con dudas, aquí te contamos cómo se componen y cuál es el rol del diseño en función del contenido.

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).

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.

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.

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

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.

Originally published at https://blog.ida.cl on June 12, 2020.

Written by

Diseñador @eadpucv y @madapuc , Director UX en @idachile , co-leader de @ixdasantiago , co-chair de @IxDAEducationLA , y músico como @moralesaranguiz .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store