El panorama digital de hoy en día cambia con más rapidez que nunca y las tendencias de diseño son muy diferentes a lo que eran hace tan solo unos años. Por eso, desarrollar una estrategia de diseño integral se ha convertido en una necesidad, y en este contexto, el término "sistema de diseño" se refiere a un conjunto de procesos optimizados para crear una experiencia de usuario coherente y unificada.
Si no sabes qué elementos componen un sistema de diseño, o si no tienes claro por qué es necesario implementar uno, no te preocupes: hay tantas bibliotecas de componentes y guías de estilo que es muy fácil confundirse.
En este artículo, veremos qué es un sistema de diseño y qué elementos lo componen, de forma que puedas crear un plan de desarrollo de producto específico para tu empresa.
Qué es un sistema de diseño
Un sistema de diseño es un repositorio de componentes reutilizables y de estándares que definen cómo usar esos componentes para diseñar y desarrollar productos. Al usar recursos globales prediseñados, distintos equipos pueden desarrollar productos que proporcionen una mejor experiencia del usuario en menos tiempo.
Algunos de los componentes de un sistema de diseño son las guías de estilo y las bibliotecas de patrones, pero este concepto es mucho más amplio. Un sistema de diseño también incluye documentación y directrices que explican los métodos y los motivos de los diseños específicos de una marca.
Este artículo se refiere a muchos de los aspectos que componen la imagen de una marca, pero si lo que buscas es información específica sobre el diseño web, puedes consultar esta página.
Por ejemplo, el sistema de diseño de Atlassian incluye una biblioteca de componentes, una biblioteca de patrones, directrices de marca, una biblioteca de logotipos, una biblioteca de ilustraciones, un kit de presentaciones, elementos visuales (como colores, iconografía y tipografía), y directrices de contenido sobre el lenguaje, la gramática, el vocabulario y el estilo de redacción que debe usarse en los textos.
Cada parte de este sistema de diseño contiene directrices sobre cómo y por qué usar un componente específico. Además, Atlassian no solo proporciona elementos concretos, como paletas de colores, sino que explica en detalle cómo usar el color para diferenciar a su marca y para crear experiencias coherentes y accesibles en distintos productos. Por ejemplo, esta es la explicación sobre su paleta de colores principal:
Así, un sistema de diseño no solo incluye elementos concretos, sino también documentación sobre cómo y por qué usarlos, y sin estas directrices, estos sistemas no serían más que bibliotecas de componentes y de fragmentos de código. Gracias a este tipo de documentación, un sistema de diseño puede ser adoptado por distintos equipos de varios departamentos de tu organización, como el de diseño gráfico, el de ingeniería o el de la experiencia del cliente.
Ahora que tenemos más información sobre lo que es un sistema de diseño, veremos de qué se compone.
Pero antes, si quieres ver una descripción rápida sobre lo que es un sistema de diseño y sobre qué ventajas puede suponer para las empresas, echa un vistazo a este video:
Componentes de un sistema de diseño
- Una biblioteca de componentes
- Una biblioteca de patrones
- Una guía de estilo de la marca
- Una guía sobre los valores de la marca
- Una serie de principios de diseño
- Una biblioteca de iconos
- Directrices de contenido
- Directrices de accesibilidad
- Tokens de diseño
Los componentes de los que hablaremos en este artículo son algunos de los más comunes en un sistema de diseño, pero no son obligatorios. Los componentes específicos que incluyas en el sistema de diseño concreto de tu organización dependerán de tus necesidades, equipos y productos concretos.
1. Biblioteca de componentes
Una biblioteca de componentes, también denominada "kit de IU", contiene elementos reutilizables para la interfaz de usuario. Cada componente de un sistema de diseño está pensado para cubrir interacciones o necesidades específicas relacionadas con la interfaz, y se ha desarrollado para que funcione de forma integrada con el resto y para proporcionar la experiencia de usuario más intuitiva posible. Algunos ejemplos de los componentes de un sistema de diseño son los avatares, las insignias, los menús desplegables, los iconos, los logotipos, los diseños de página, los iconos giratorios y las etiquetas.
Esta es una captura de pantalla de Base Web, el sistema de diseño de Uber:
2. Biblioteca de patrones
Los componentes de los sistemas de diseño pueden usarse en determinadas combinaciones para proporcionar experiencias de usuario intuitivas y coherentes, y estas combinaciones se denominan "patrones". Por ejemplo, un menú vertical es un patrón de diseño web que permite incluir varias secciones en una sola página sin sobrecargarla, por lo que es una solución ideal para los sitios web complejos con un gran número de secciones. Si buscas información sobre las herramientas de diseño web que puedes utilizar, consulta este artículo.
Por lo general, estos patrones se reúnen en una biblioteca independiente de la biblioteca de componentes. Por ejemplo, echa un vistazo a la biblioteca de patrones de Evergreen, el sistema de diseño de Segment:
3. Guía de estilo de la marca
La guía de estilo de una marca regula todos los aspectos de la apariencia de la marca de una organización, y especifica qué colores, fuentes, tamaños de fuente, variaciones de logotipos y tipos de imagen utilizar.
Por ejemplo, la guía de estilo de la Universidad de Oviedo explica cómo usar, y cómo no usar, los recursos de marca de la institución para gestionar y proteger sus valores y la imagen que representa. Este es un ejemplo de una sección que explica cómo usar determinados elementos de identidad audiovisual:
4. Valores de marca
Los valores de marca son fundamentales para coordinar a los distintos equipos de una empresa y a sus diseños en torno a una identidad de marca unificada. De esta forma, todo el mundo puede tenerlos como referencia para tomar decisiones sobre el diseño y el contenido, por lo que ayudan a distintos equipos a transmitir una imagen coherente. Los valores de marca no solo definen cómo crear productos y contenido, sino cómo deberían sentirse los usuarios al interactuar con la marca.
Según los valores de marca de The Body Shop, los diseños y sus componentes deben ser humanos, orgánicos y naturales, y transmitir promover el empoderamiento y la sostenibilidad. Como estos valores guían todos los productos de The Body Shop, desde los que comercializan en sus tiendas hasta su página web y sus iniciativas de marca, los equipos de la empresa deben familiarizarse con estos valores antes de explorar otros componentes del sistema de diseño y de desarrollar nuevas líneas de productos.
5. Principios de diseño
La mayoría de los sistemas de diseño incluyen una serie de principios para coordinar a los distintos equipos de una organización en torno a objetivos comunes, de forma que puedan tomar decisiones bien fundamentadas con independencia de la técnica que utilicen. Mientras que los valores de marca se centran en la marca en general, los principios de diseño están orientados a productos específicos y a cómo debería ser su apariencia.
Por ejemplo, la guía para el diseño de interfaces web institucionales de Gobierno Digital, en Chile, tiene varios principios de diseño. Uno de ellos es el de ganarse la confianza del usuario, e incluye consideraciones fundamentales para los distintos equipos y recomendaciones prácticas que pueden tenerse en cuenta para cumplir o superar las expectativas de los usuarios con el objetivo de ganarse su confianza.
Algunas de las acciones que estos principios recomiendan son identificar claramente su sitio web como un sitio gubernamental oficial, usar los dominios gubernamentales adecuados y corregir todos los posibles enlaces rotos.
6. Biblioteca de iconos
Una biblioteca de iconos contiene los símbolos visuales de un sistema de diseño. Estos símbolos se usan para representar ideas, objetos o acciones, para guiar al usuario de forma que realice acciones específicas o para dirigir su atención a información importante de la página.
Carbon, el sistema de diseño de IBM, contiene una biblioteca de iconos y directrices sobre cómo usarlos, que incluyen información sobre qué tamaños, colores y pautas de alineación usar al trabajar con iconos.
7. Pautas de uso del contenido
El objetivo de los sistemas de diseño no solo es conseguir que todos los productos tengan una apariencia y un comportamiento coherente, sino que también comuniquen el mismo mensaje.
Por lo menos este es el objetivo de Spectrum, el sistema de diseño de Adobe, cuyas pautas sobre el contenido incluyen directrices de todo tipo, desde el tono hasta la gramática o el lenguaje inclusivo, que son componentes comunes de la mayoría de los sistemas de diseño.
En Spectrum también se especifica qué palabras usar en las experiencias de producto de Adobe y cuándo usarlas, cómo redactar mensajes de error y cómo diseñar experiencias de incorporación de usuarios.
8. Directrices de accesibilidad
Muchos sistemas de diseño actuales incluyen directrices de accesibilidad que destacan la importancia de crear diseños accesibles, y que definen lo que significa la accesibilidad de un producto. Por ejemplo, en este artículo se explican las principales pautas de accesibilidad web.
Según el sistema de diseño de Gobierno Abierto de Gipuzkoa, la accesibilidad "consiste en el acceso a la información sin limitación alguna por deficiencia, discapacidad o minusvalía". También se consideran distintos grupos de usuarios con discapacidades específicas, y se explica qué deberían tener en cuenta los diseñadores al desarrollar productos accesibles para usuarios de todo tipo.
9. Tokens de diseño
Los tokens de diseño son nombres que se usan para representar valores de código que definen el espaciado, el color, la tipografía y otras partes de un sistema de diseño. Por ejemplo, un token de diseño podría ser un color, un tipo de fuente, un nivel de opacidad, el radio de los bordes o un efecto de animación.
Estos tokens pueden transformarse y formatearse para adaptarlos a las características de cualquier plataforma, tanto para Android como para iOS o para la Web. Los tokens de diseño representan valores absolutos, como códigos hexadecimales, valores RGB y coordenadas Bezier, para que los recursos y productos de una marca sean coherentes, con la flexibilidad que los distintos equipos necesitan.
En algunos sistemas de diseño, como Spectrum, estos tokens están directamente integrados en la biblioteca de componentes, mientras que en otros sistemas se recogen en una biblioteca separada.
Estos son algunos de los tokens del sistema de diseño fluido de ENGIE:
Cómo crear un sistema de diseño para tu empresa
Los sistemas de diseño se componen de muchas bibliotecas, guías de estilo y directrices, y todas ellas se han desarrollado para optimizar la estrategia de marca de una empresa.
Aunque los sistemas de diseño pueden ser difíciles de mantener, y no siempre es fácil conseguir que todos los equipos sigan sus directrices, pueden ayudarte a crear productos con los que proporcionar mejores experiencias de usuario a los clientes, por lo que te recomendamos que desarrolles un plan a la medida de las necesidades de tu empresa.
