Gobernanza digital

Sistemas de diseño en Estados

Hoy existe la errónea idea de que un sistema de diseño es solo una guía de estilo o una biblioteca de componentes y términos que las personas a menudo usan indistintamente. Sin embargo, ambos forman parte de 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. En sí, 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.

Un sistema de diseño podría considerar (entre otras cosas):

• Visión estratégica: El propósito y la cultura de la organización en el que se basen los desarrollos e implementaciones.
• Elementos de marca: Aquí entra la adaptación de la marca a los diferentes formatos donde el producto vaya a estar presente.
• Estrategia de Contenido: El tono, estilo y tipo de textos que se redactarán para el producto.
• UI Kit: Librería de componentes y otros elementos de diseño pensada para que los desarrolladores y los diseñadores de producto, puedan echar mano de ella y crear un nuevo producto coherente de una manera rápida y fácil.
• Tipografía: Muchas veces, dentro de la propuesta tipográfica se considera diseñar una tipografía original que cumpla con los requerimientos de la marca.
• Framework de Desarrollo: Los elementos del UI Kit pueden estar traspasados a código en servicios como GitHub, para un uso compartido, rápido y desarrollo controlado.
• Documentación: Documentos que expliquen los elementos nombrados anteriormente. Así como normas de implementación de API’s y webservices, entre otros.

¿Qué es un sistema de diseño?

Un sistema de diseño es una colección de componentes reutilizables, guiados por ciertas reglas y principios, que se pueden ensamblar para crear aplicaciones móviles o web. Los sistemas de diseño proporcionan un lenguaje común. De esta forma, crean coherencia y consistencia en la marca de una organización, de una manera conveniente y centralizada, que además facilita la exploración y administración de nuevos diseños.

Javier Cañada lo define de la siguiente manera:

“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.”

USWDS 2.0

La U.S Web Design System (USWDS) es una biblioteca de código, herramientas e indicaciones; destinada a orientar a los equipos del gobierno estadounidense en el proceso de diseño y desarrollo de sitios web gubernamentales. Con el objetivo de que sean rápidos, accesibles y amigables para los dispositivos móviles y estén respaldados por la investigación de usuarios y las mejores prácticas modernas.

En abril de 2019 la oficina de Gobierno digital de Estados Unidos lanzó una nueva versión de su Sistema de Diseño, conocido como USWDS 2.0. En esta versión, se incluyen nuevas herramientas y características que facilitan la creación de servicios digitales consistentes y útiles, de forma rápida y sencilla.

Dentro de sus mejoras la USWDS 2.0 considera:

• Adopción incremental más fácil, para que agregar componentes no signifique rediseñar todo un sitio web.
• Fichas de diseño práctico, creando lenguaje común para diseñadores y desarrolladores.
• Un sistema de color accesible, pasando de ser AA a AAA.
• Plantillas expresivas, impulsada por su misión y las necesidades de los usuarios. Cada proyecto es diferente por lo que se generan soluciones adaptadas a cada necesidad.
• Clase de utilidades de gran alcance para prototipar más rápido y poner el diseño frente a usuarios reales.
• Cuadrícula de diseño de 12 columnas simplificada.
• Introduce Public Sans, una tipografía libre y de código abierto. Una adaptación de Libre Franklin, diseñada por USWDS.
• Creado para crecer y diseñado para adaptarse.  USWDS 2.0 está pensado para ser un producto vivo, en constante desarrollo y evolución.

Como se plantea desde su nacimiento, el sistema de diseño sigue creciendo de manera escalable y actualizándose a los nuevos requerimientos del ecosistema digital y sus usuarios.

El panorama chileno

En Chile tuvimos intentos como la guía web del 2003 y su segunda versión del 2008.

La Guía Web 2.0 estaba estructurada en cinco capítulos a través de los cuales se ofrecía información teórica y práctica para que los desarrolladores de Sitios Web de entidades de la Administración Pública pudieran encontrar herramientas para apoyar su trabajo y dar cumplimiento a las normativas correspondientes a esas tareas.

Dentro de lo que aplicaban estas guías web aparecían cosas que hoy son por defecto en cualquier implementación digital:

• Usar los dominio gob.cl y gov.cl
• Se privilegia el uso de programación semántica, donde el contenido está separado del diseño. Con esto se promovía que el lenguaje de marcado debía usar los estándares válidos de HTML,XHTML o XML.
• Así mismo, al estar el contenido separado del diseño, se debía promover el uso de CSS para la presentación de éste.
• Su código debía ser independiente de cualquier navegador, privilegiando los de distribución gratuita, para olvidarse del recurrente en esos tiempos “este sitio está optimizado para Explorer”.

Los gobiernos posteriores y las distintas administraciones que velaban por la identidad digital del gobierno siguieron usando y trabajando en nuevos estándares, creando normativas regulatorias para el gobierno.

Hoy, la División de Gobierno Digital de Chile -como lo plantea en su web- tiene la misión de “coordinar y asesorar intersectorialmente a los órganos de la Administración del Estado en el uso estratégico de las tecnologías digitales, apoyando su uso, datos e información pública para mejorar la gestión y la entrega de servicios cercanos y de calidad a las personas”.

Hoy se sigue esperando un sistema de diseño acorde a los nuevos tiempos, que ayude a construir un Sistema de diseño como el del Gobierno de Estados Unidos; escalable y usable por los distintos organismos del estado y que promueva un trabajo multidisciplinario entre proveedores, gobierno y estado.

En IDA

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 al equipo de diseño y de trabajo, 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 coherentes con el resto de los existentes, logrando crear un ecosistema digital coherente.

Dentro de nuestro quehacer entregamos siempre un UI Kit que se instala como uno de los elementos importantes de un sistema de diseño. En otros casos, también trabajamos con el Sistema de Diseño, y más específicamente con el UI Kit que tienen nuestros clientes desde antes.

Con ellos, trabajamos para construir la interfaz digital en base a las necesidades de usuarios, y también, en base al marco de diseño establecido, aportando en muchas ocasiones con nuevos elementos que se suman a esas librerías.

Fuentes

• Todo lo que necesitas saber para emprender un Sistema de Diseño, por Leonardo Hernández.
• What is a Design System?, Rangle.io Inc.
• Introducing USWDS 2.0, Digital Gov U.S.A.
• United States Web Design System
• Archivos para descargar de la Guía Web – Versión 2.0, Gobierno de Chile.
• Guías de GoDigital.
• Nueva versión de la Guía Web, por Juan Carlos Camus.
• Construyendo un sistema de diseño, Torresburriel Estudio.
• ¿Qué son para ti sistemas de diseño?, Product Design Studio.