Un Design System o Sistema de Diseño es un catálogo de principios, patrones de interacción y componentes que forman la base del diseño de un producto digital. Es una colección de piezas y elementos con dos objetivos:
- Conseguir consistencia en el diseño del producto, independientemente del soporte digital o del modo de interacción.
- Facilitar el trabajo al equipo de diseño, ya que cada componente se ha de diseñar una sola vez.
Hasta hace relativamente poco, en un Design System se solían incluir sólo elementos visuales y de código. A una pregunta en LinkedIn de Jonathon Colman, Senior Design Manager en Intercom, sobre por qué tan pocas empresas incluían el lenguaje como elemento de diseño, la mayor parte de las respuestas incidían en dos aspectos:
- La dificultad de convertir textos en patrones reutilizables.
- La percepción del lenguaje como una capa adicional que se añade al diseño.
Por qué el contenido ha de ser parte del Design System
Y, sin embargo, el contenido no es un elemento aparte del diseño, sino una herramienta más que debemos utilizar para diseñar productos digitales que cumplan con los objetivos de negocio y resuelvan las necesidades de los usuarios. La separación entre diseño y contenido es artificial. Como ya apuntó Jeffrey Zeldman en 2008, el diseño sin contenido es decoración.
Para Kate Kenyon, Content Delivery Lead en JP Morgan Chase, separar diseño y contenido tiene consecuencias negativas para ambos:
- Los componentes de diseño no están alineados con los tipos de contenido, y se rompen al usarse en formas diferentes a las planteadas inicialmente.
- Los patrones y componentes necesitan ser revisados frecuentemente y se genera bastante trabajo adicional de diseño.
- Reduce la adopción del Design System, ya que no responde a las necesidades de contenido.
- El contenido del producto es inconsistente, provocando frustración en el usuario.
Esto no quiere decir que el contenido pueda incluirse sin más en un Design System. El lenguaje y el contenido tienen sus propios principios, patrones, elementos moleculares y componentes, que se aproximan bastante a los componentes de diseño.
Diferencias entre un Content Design System y una guía de estilo
Muchas veces, las decisiones sobre el contenido que buscan estandarizar el uso del lenguaje y el contenido en una aplicación se centralizan en una guía de estilo. Estas guías son útiles para ofrecer consistencia en formatos de fechas, accesibilidad y lenguaje inclusivo o listas de léxico preferido.
Pero una guía de estilo no acelera el proceso de diseño de la misma manera en que lo hace un Design System, ni mejora la consistencia de los patrones de contenido. En un Design System lo que se busca es sistematizar componentes en casos de uso específicos.
Para reducir la fricción a la hora de tomar decisiones para diseñar, estos componentes de contenido han de estar integrados en las herramientas de diseño, en vez de en un documento.
Elementos clave del contenido en el sistema de diseño
Entonces, ¿qué debemos incluir en nuestro Design System para tener en cuenta el contenido?
Lo primero de todo, es definir unos principios de contenido. Estos principios guían no solo la creación, sino el diseño del contenido mismo. Por ejemplo, tener en cuenta las necesidades del usuario, evitar duplicidades o evaluar las necesidades de mantenimiento del contenido una vez publicado son algunos de los principios de diseño de contenido de la web del Servicio Digital del Gobierno del Reino Unido.
Las guías de voz y tono son una parte fundamental de la identidad de marca o de producto, y son un elemento tan básico en un Design System como una paleta de colores o una selección de tipografías.
La aplicación de estos principios de diseño de contenido y guías de voz y tono de forma sistemática y escalable se hace dentro de los componentes y los patrones de diseño.
Dentro de cada componente de diseño que incluye contenido, se deben de indicar especificaciones de lenguaje que ayuden a crear el contenido de una manera consistente y efectiva. Por ejemplo, el Design System de Shopify, Polaris, dentro de las especificaciones de la etiqueta del campo de texto de un formulario, incluye una serie de recomendaciones sobre:
- La función de esa etiqueta, lo que ha de comunicar.
- El tipo de lenguaje que se ha de utilizar.
- Notas de estilo, como el uso de mayúsculas y minúsculas.
- Especificaciones de la longitud en palabras o caracteres.
- El comportamiento del elemento con interacción.
El mismo componente en Material Design de Google, sin embargo, carece de todos esos detalles.
La clave, como dice Ryan Cordell, Lead Content Designer / UX Writer de Deliveroo, es el contexto, que te permite aplicar la flexibilidad de un componente específico a la situación o el flujo concreto donde lo quieres usar. En el ejemplo de Ryan Cordell del Design System de Deliveroo, el componente de título de página tiene un elemento opcional de subtítulo. El contexto del Design System permite al diseñador saber en qué casos hay que añadir el subtítulo y en qué casos no.
Los componentes se pueden convertir de manera escalable en patrones de diseño cuando su uso es frecuente. Por ejemplo, un campo de texto que solicite nombre o apellido es una aplicación específica de un componente de diseño que se repite habitualmente. Se puede convertir por tanto en un patrón, como un subtipo del componente genérico. Por cada patrón se puede crear una versión por defecto que se puede replicar rápidamente, creando consistencia y coherencia en su aplicación en diferentes instancias.
Incluir el contenido en un Design System aumenta la consistencia y la velocidad de desarrollo
Contenido y diseño están íntimamente ligados. El contenido es una herramienta más de diseño, con sus patrones y componentes que hay que sistematizar para poder usarlos de manera efectiva.
Integrar el contenido en un Design System permite a los equipos de diseño ser más ágiles y eficientes en sus entregas. Pero también facilita el trabajo a los equipos de traducción y permite una mayor consistencia en el uso del lenguaje dentro del producto digital.
Los Design Systems han pasado de ser un proyecto paralelo de los diseñadores a una herramienta ampliamente utilizada por su eficacia a la hora de agilizar el proceso de diseño y facilitar la creación de una experiencia de usuario consistente a lo largo del ciclo de vida del cliente. Para seguir cumpliendo con estas expectativas, un Design System ha de integrar el contenido en su proceso de catalogación y sistematización.
