Cómo crear un Design System paso a paso

El diseño determina en buena parte el éxito de un site. Pero en los últimos años el significado del término ‘diseño’ ha cambiado radicalmente, sobre todo en lo que se refiere al sector digital. Hoy en día los productos necesitan añadir nuevas funcionalidades, crecer, a veces reorientarse o incluso convertirse en otra cosa… En definitiva, necesitan cambiar para sobrevivir y —lo más importante— necesitan hacerlo muy rápido. Los plazos se han acortado hasta límites inimaginables: lo que antes podía realizarse en meses ahora es vital poder hacerlo en semanas. Así que el problema no es ya conseguir un diseño bonito y con personalidad (que también es crucial), sino que ese diseño sirva como base sólida para un crecimiento ágil pero sin perder la consistencia del producto. Y aquí es donde entra en juego el Design System.

Okb Interactive Studio

¿Necesitas un Design System para tu producto digital?

¿Pero qué es un Design System exactamente?

El Design System (o sistema de diseño) es básicamente un conjunto de elementos —botones, títulos, formularios, pestañas, carruseles, tooltips…— que sirven para construir un site como si de unas piezas de Lego se tratase. Este Design System reúne además todas las normas de diseño que deben seguirse para utilizar esas ‘piezas’.

Pero no hay que confundir un Design System con una guía de estilo: lo que realmente caracteriza a un Design System es que es más que una herramienta de consulta, sino que sirve como herramienta de trabajo. Algunos ejemplos de Design System son Material Design de Google o Carbon Design de IBM.

¿Qué beneficios aporta un Design System?

Lo que se pretende conseguir con un Design System es básicamente que un site crezca de manera rápida sin perder la consistencia que necesita. Pero además los beneficios del Design System son más:

El equipo de diseño trabaja mejor porque la toma de decisiones se reduce al estar todos los elementos prefijados en el Design System. No hay debates y se reducen las interpretaciones personales que puede hacer cada diseñador.
El equipo de desarrollo trabaja mejor porque puede reutilizar código fácilmente.
La colaboración entre diseñadores, desarrolladores y responsables de contenidos es más efectiva porque todos ellos conocen mejor el producto, utilizar los mismos términos para referirse a cada elemento y entienden bien su finalidad.
Se consigue mayor flexibilidad en la empresa porque si los equipos crecen o cambian, el proceso de aprendizaje de las nuevas incorporaciones es más rápido al estar todo más estandarizado.
Aunque un site tenga cientos de páginas, el producto es más consistente y sobre todo es más fácil de emplear, porque se crean patrones claros y reconocibles por quienes lo usan.
El site es más fácil de mantener, el código está optimizado y se mejora el rendimiento.
Todo lo necesario para el trabajo (plantillas de diseño, documentación, repositorios de código, recursos…) está en un mismo lugar.
Los costes se abaratan.

¿Qué beneficios aporta un Design System?

¿Así que todas las empresas deben tener implementado un Design System? Es el tamaño de la empresa el que suele dar respuesta a esta pregunta. Evidentemente, los Design System son algo obligatorio para las empresas en las que muchas personas trabajan en un mismo producto a la vez, a veces de departamentos distintos que incluso pueden estar ubicados en diferentes partes de un país o hasta del planeta. Pero también resulta interesante para startups o empresas más pequeñas con un equipo más reducido y localizado donde, aunque a priori un Design System puede parecer menos necesario, la agilidad de desarrollo que ofrece resultará beneficiosa en cuando el producto y los equipos crezcan o cambien.

¿Cómo diseñar un Design System?

En este artículo vamos a ver cómo crear un Design System paso a paso. Para ello en primer lugar vamos a necesitar una herramienta de diseño de interfaces de usuario con la que ir dando forma a los distintos elementos. En nuestro caso solemos usar Figma, aunque evidentemente también se pueden usar otras como Adobe XD o Sketch.

Para el proceso de creación generalmente se suele emplear la metodología Atomic Design, enunciada por el diseñador web estadounidense Brad Frost y que se ha convertido en una de las grandes referencias en este campo. Puedes encontrar más información en su blog, aunque básicamente lo que viene a decir es que todos los elementos de una web se estructuran en tres niveles, a los que él llama atoms (átomos), molecules (moléculas) y organisms (organismos): los átomos son las piezas más sencillas, sin valor por sí solos, pero que si se juntan forman moléculas más complejas, que a su vez se combinan para construir organismos. La mayoría de Design Systems sigue este concepto a la hora de diseñar sus elementos, aunque lo habitual es llamarlos foundations, components y patterns.

1. Foundations

También llamados tokens por algunos diseñadores, los foundations (cimientos) son la unidad más pequeña del Design System (siguiendo la metodología Atomic Design de Brad Frost serían lo que él llama ‘atomos’). En nuestro documento en Figma —o en Sketch o en Adobe XD— los foundations toman la forma de estilos que posteriormente se utilizarán en la elaboración de los componentes del Design System. Los foundations más comunes son el patrón, la paleta cromática, la tipografía, la iconografía y las animaciones, aunque también se pueden incluir otros según la naturaleza del site.

El patrón

‘Patrón’, ‘layout’, ‘grid’, ‘retícula’… Todos ellos son diferentes términos para referirse a un mismo concepto: el espacio que ocupa el site y la forma en la que se distribuyen en él los distintos elementos para que los usuarios localicen y comprendan mejor el contenido. El grid debe repetirse en todas y cada una de las páginas del site, ya que esto ayudará a darle una fuerte consistencia. Para generar un grid debemos especificar los siguientes aspectos:

Cómo diseñar el grid de un site en un Design System

Puntos de ruptura: El espacio no es lo mismo en un móvil de 360px de ancho que en un monitor de un Mac de 2500 y, por lo tanto, el patrón cambiará de uno a otro. Así que lo primero que debemos fijar en un Design System son los puntos de ruptura que servirán para fijar las distintas resoluciones con las que tendrán que trabajar diseñadores y desarrolladores. Tendremos así tantos grids como puntos de ruptura establezcamos, generalmente cuatro: uno para dispositivos móviles, otro para tabletas, otro para portátiles y otro para monitores.
Unidad de referencia: Es el número que servirá como base para generar todos los tamaños que se apliquen en el site. Habitualmente se usa un sistema basado en el 8, aunque hay Design Systems que usan sistemas basados en otros números. Dependiendo del que escojamos, todos los elementos del site tendrán unas dimensiones que sean múltiplo de dicho número. Así, si nos decantamos finalmente por el 8, las medidas disponibles serán 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 88px, 96px… Explicaremos esto mejor un poco más adelante, pero —como ejemplo inicial— un botón podrá medir 32px de alto o 40px, pero nunca 36px. Trabajar con el 8 sirve para crear diseños más armónicos, ya que las medidas de referencia son menores. Sin embargo, para algunos diseñadores esto supone un problema porque a partir de determinado momento los saltos son demasiado grandes. Por eso prefieren otras unidades de referencia como el 6 (6px, 12px, 18px, 24px, 30px, 36px, 42px, 48px, 54px, 60px, 66px, 72px, 78px…) o el 5 (5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 55px…)
Contenedor y columnas: El grid de tu site se divide en columnas. Para las resoluciones grandes siempre se suelen emplear doce columnas. El 12 es un número muy versátil porque es divisible entre 2, 3, 4, 6, lo que permite múltiples combinaciones de columnas (12, 6+6, 4+4+4, 3+3+3+3, 8+4, 6+3+3…). Sin embargo, para resoluciones más pequeñas no se suelen usar tantas columnas, ya que estas quedan demasiado estrechas y rara vez se usan individualmente. Lo habitual es hacer una división de ocho columnas para las tabletas y de cuatro para los teléfonos móviles, pero en cada Design System podemos usar las que estimemos apropiado en función del contenido que vayamos a publicar. A la suma de todas las columnas del grid se le suele llamar ‘contenedor’ (o ‘container’).
Márgenes: El contenedor del site (es decir, todas sus columnas juntas) nunca se ajusta a los límites de la pantalla, sino que deja siempre un espacio a ambos lados. Es lo que llamamos ‘márgenes’. En resoluciones pequeñas (como por ejemplo la de un teléfono móvil), los contenedores suelen ser flexibles (se ensanchan según se ensancha la pantalla) y tienen márgenes fijos a cada lado, que suelen ser estrechos para aprovechar mejor el espacio. Mientras, en resoluciones grandes, lo habitual es que estos márgenes se generen a partir del espacio sobrante que deje el contenedor, al que se le suele asignar un ancho máximo, que puede ser de 980, 1080, 1140, 1200 píxeles… El tamaño final depende de la unidad de referencia que se haya escogido, ya que las columnas y las separaciones entre ellas deben tener un ancho que sea múltiplo de este número.
Medianiles: Las columnas están separadas por espacios que se denominan ‘medianiles’, aunque es más habitual referirse a ellos por su nombre en inglés: gutters. El grid puede usar cualquier separación entre columnas, aunque como hemos visto siempre tiene que ser un múltiplo de la unidad de referencia que hayamos fijado previamente. De hecho lo habitual es que el ancho del medianil cambie en función de la resolución: en composiciones grandes se suele usar medianiles anchos para dar más separación entre elementos (por ejemplo de 24px si trabajamos con el 8 como unidad de referencia), pero en composiciones estrechas los medianiles más finos ayudan a aprovechar mejor el espacio (por ejemplo bajándolos a 16px).
Filas: Si las columnas ordenan el contenido horizontalmente, las filas lo hacen verticalmente. Para esto se crean líneas paralelas que deben distar entre sí exactamente el espacio en píxeles de nuestra unidad de referencia, lo que sirve para crear una rejilla en la que deben encajar todos y cada uno de los elementos que se generen en el Design System.
Separaciones: En algunos Design System las separaciones se incluyen como un elemento externo al grid, aunque en nuestra opinión están muy relacionadas con él. Las separaciones es el conjunto de valores que se puede asignar al espacio que se aplique entre los distintos elementos de la interfaz. Una vez más, la unidad de referencia vuelve a ser protagonista, ya que es la que sirve para generar todos estos valores. Normalmente suelen usarse unos 13 valores, resultantes de multiplicar la unidad de referencia por 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12 y 20.

La paleta cromática

Todo Design System debe incluir un listado con los colores que se pueden usar a lo largo del site, así como la función que tiene cada uno de ellos. Este apartado es muy importante, porque sin duda el color es uno de los elementos más representativos de un site y, por tanto, uno de los que más contribuye a la hora de conseguir un aspecto consistente. Además, el color es un lenguaje por sí solo, así que lejos de ser un elemento meramente decorativo hay que considerarlo como una forma más de comunicarse con eficacia con los usuarios.

Todos los colores deben funcionar bien entre ellos, pero sobre todo deben ofrecer un correcto contraste cuando se muestren los unos junto a los otros, especialmente en el caso del color que se vaya a aplicar a los textos y a los fondos sobre los que estos se representan. Lo recomendable es que este contraste sea de tipo AA según las directrices WCAG (Web Content Accessibility Guidelines o ‘Directrices de accesibilidad de los contenidos web’): para comprobarlo existen herramientas online muy útiles como por ejemplo Color Contrast o Colorable.

Cómo hacer la paleta cromática de un Design System

Para mejorar la consistencia en tu site lo recomendable es utilizar la menor cantidad de colores posibles. En nuestro blog ya hemos hablado en alguna ocasión de cómo elegir la paleta cromática para una web, así que aquí vamos a incluir un pequeño resumen:

El color de marca es el color que representa a la empresa y por tanto el dominante dentro del site, es decir, el que más espacio ocupa. También lo podemos llamar color primario, ya que como vamos a ver es el que se toma como referencia para generar el resto de colores de la paleta.
El color de énfasis suele ser un color muy llamativo que ofrece un buen contraste con el color de marca dominante en el site. Su función es la de llamar la atención de los usuarios sobre algunos elementos estratégicos, como botones, enlaces o algunos textos.
Mantener un sitio web solo con colores de marca no es nada fácil. Por eso lo habitual es que el papel del color de marca se reparta entre dos o incluso tres colores más, aunque siempre jerarquizando su uso. A estos los solemos llamar colores secundarios.
A la paleta se deben añadir unos colores adicionales neutros que se emplearán en la arquitectura del site, como fondos, filetes y textos. Estos colores suelen ser el blanco, el negro y algún gris intermedio. Recuerda que en combinación, el negro y el blanco puros (#000000 y #FFFFFF) ofrecen un alto contraste que puede resultar demasiado deslumbrante y causar fatiga visual, así que nuestra recomendación es no recurrir a ellos, sino a versiones más ‘rebajadas’ (#FFFEFC y #212121, por ejemplo). Para generar estos colores neutros acorde con el resto, recomendamos usar herramientas muy útiles como PALX.
Finalmente, un Design System debe incluir colores funcionales que sirvan para representar acciones, como por ejemplo errores (generalmente se suelen representar en rojo), avisos (amarillo), confirmaciones (verde), informaciones (azul) o ayudas (morado). Estos colores también deben estar armonizados con el resto de colores de la paleta cromática.

Una vez tengamos seleccionados todos los colores, no hay que olvidar incluir variaciones de todos ellos modificando su luminosidad. Para esto resultará muy útil trabajar con modelos de color HSL (de hue, saturation y lightness, es decir, ‘matiz, saturación, brillo y transparencia’). Generalmente se suelen incluir cuatro variaciones de cada color (a las que podemos llamar ‘dark’, ‘main’, ‘light’, y ‘faded’, por ejemplo), pero se puede usar las que se necesiten. Estas variaciones son muy útiles por ejemplo a la hora de crear efectos hover, degradados o para indicar que algún elemento está deshabilitado.

La tipografía

Como los colores, la tipografía es uno de los elementos que más contribuyen a definir el aspecto final de una web. Así que es muy importante que se incluyan todas sus características en el Design System: fuente, variantes, tamaño, interlineado, espaciado…

La fuente: Por lo general lo habitual es escoger dos tipografías para un site: una fuente con personalidad que represente bien el carácter de la marca y que se usará en algunos textos seleccionados y otra que destaque por su legibilidad, que se empleará en los textos de alta densidad para ayudar a transmitir mejor el mensaje. Siempre intentamos además que ambas fuentes se diferencien claramente la una de la otra (por ejemplo usando una tipografía serifa y otra sans-serif). Hace tiempo ya dimos algunos consejos para mejorar la legibilidad de tus textos web en este blog, así que te animamos a que los eches un vistazo.
Las variantes: Una vez establecidas todas las tipografías permitidas, debemos proporcionar directrices sobre el uso de los distintos grosores de trazo válidos: thin, light, regular, medium, semibold, bold, extrabold, black… También es importante definir el uso de cursivas.
Tamaño: Los tamaños de las fuentes tienen una función importantísima desde el punto de vista de la usabilidad de un site: dar jerarquía a la información. Usar muchos tamaños de fuente distintos termina por dar un aspecto desordenado, así que lo ideal es usar un número limitado de tamaños y que estos guarden una proporción entre ellos. Es lo que llamamos ‘escala tipográfica’. Aunque el número final de tamaños de una escala tipográfica depende del tipo de web que estemos construyendo, lo ideal es limitarlos a ocho: cinco para textos cortos (como títulos y etiquetas) y tres para textos densos (lo que vienen siendo los párrafos). Todos estos tamaños deben definirse en función de la unidad de referencia, que se va multiplicando por un factor de escala para generar todos los tamaños que se van a emplear en el site. Los factores de escala varían en función del diseño. Uno de los más comunes es fijar el tamaño base de la fuente en 16px (8x2) y multiplicarlo por 0.64, 0.8, 1, 1.25, 1.563, 1.953, 2.441 y 3.052. Así, obtendremos ocho tamaños: 10.24px, 12.80px, 16px, 20px, 25px, 31.25px, 39px y 48.83px. Si se opta por una unidad de referencia de 6, entonces podemos fijar el tamaño base en 18px, con lo que las medidas resultantes serán 11.52px, 14.40px, 18.00px, 22.50px, 28.13px, 35.16px, 43.95px y 54.93px. Existen muchos factores de escala: puedes encontrar más en Type Scale. Estas medidas son las que se aplican para pantallas de escritorio, donde la distancia entre los ojos del usuario y el texto es elevada (unos 50 centímetros aproximadamente). Los dispositivos móviles por su parte se consultan a mucha menos distancia (unos 25 o 30 centímetros) así que debemos reducir el tamaño de la tipografía.

Interlineado: El tamaño de las fuentes y el interlineado deben coincidir con la cuadrícula para permitir un mejor emparejamiento entre el texto y otros elementos de la interfaz de usuario.
Tracking: Es aconsejable optimizar el espaciado de las letras (tracking), especialmente en los tamaños grandes destinados a textos cortos, donde lo ideal es juntar un poco más los caracteres para aprovechar así mejor el espacio, evitar saltos de línea y crear composiciones más armónicas. Por el contrario, lo recomendable es no tocar el tracking en los textos de alta densidad.

Los iconos

La mayoría de sitios web hace uso de iconos, ya que son muy útiles en las interfaces de usuario porque pueden explicar un concepto de un simple vistazo.

Para evitar improvisaciones, es importante proporcionar en el Design System un amplio repertorio de iconos. Todos ellos deben guardar similitudes que les hagan ser percibidos como una familia: el estilo, el ancho de sus trazos, su color, su relleno… Un consejo para facilitar su uso es que estos iconos se nombren en función de lo que representan y no de lo que son. Por ejemplo, el icono de la papelera debería llamarse ‘eliminar’ para que cada vez que se quiera representar esta acción, se emplee el mismo icono —y no por ejemplo el icono de la cruz—. Esto dará más consistencia a la web y hará que la experiencia de uso sea más intuitiva.

Finalmente hay que recordar que los iconos deben integrarse dentro de un cuadro delimitador cuyas dimensiones sean múltiplo de la unidad de referencia para que así se ajusten a la cuadrícula del site. Los iconos generalmente tienen que funcionar a tamaños muy reducidos (si se trabaja con el x8 como unidad de referencia, lo habitual es que los iconos se diseñen a 24x24 píxeles), así que deben estar diseñados para ser reconocibles a ese tamaño. Algunos Design Systems proporcionan un tamaño mínimo para sus iconos para evitar la pérdida de inteligibilidad.

Las animaciones

Las animaciones —o motions— son un punto importante. El modo y velocidad al que se mueven los objetos de un site (ya sea una ventana modal, los elementos de un carrusel o el efecto hover de un botón) ayuda a dar sensación de consistencia. Por eso el Design System debe especificarlas siempre.

Otros elementos

Como decíamos, un Design System puede incluir unos foundations u otros en función de la naturaleza del site. Por ejemplo, algunos incluyen información sobre el uso de sombras (‘elevations’) o degradados (‘gradients’)… Pero si el site no va a hacer uso de sombras o degradados, no es necesario incluirlos.

2. Components

Una vez definidos los foundations empezamos a crear componentes. Los componentes son pequeñas piezas que no pueden dividirse sin perder su significado y que se usan como las principales unidades de construcción de las interfaces de usuario.

Para esta parte generalmente se empieza elaborando un inventario con todas las ‘piezas’ que vamos a necesitar para el site. Según el tipo de web, el Design System incluirá unas u otras piezas, por lo que no es necesario añadir componentes si no se van a utilizar nunca en el site. Por ejemplo, en este artículo vamos a hablar solo de unos cuantos (como enlaces, botones, inputs, checkbox, modales, tablas o pestañas), que por lo general son los componentes que suele haber en casi todos los site. Pero se pueden añadir muchos más, como avatares, globos (badges), gráficos, tags, switches, sliders, lightboxes, spinners, skeleton screens… Como veremos más adelante, los Design System son documentos abiertos en constante evolución.

Una vez listo el inventario iremos dibujando en Figma cada uno de los componentes.

Enlaces

Los enlaces son en esencia solo textos, pero deben tener un aspecto que facilite su identificación por parte de los usuarios. Un enlace puede presentar cuatro estados distintos —link (el estado por defecto de un enlace), visited (la apariencia que debe adoptar un enlace cuando ya ha sido visitado previamente), hover (cuando se coloca el puntero del ratón sobre él) y active (cuando se hace clic sobre él)—, así que en el Design System se deben definir cada uno de ellos.

A veces también un Design System puede diferenciar entre enlaces internos (dentro del site) y externos (a otros sites), para lo que se suele usar un icono junto al enlace.

Botones

Los botones son uno de los elementos que no suelen faltar en un Design System, ya que se han convertido en uno de los principales puntos de interacción de los usuarios con las interfaces.

En un Design System siempre se suelen incluir variantes de los botones. Esto permite utilizan varios juntos sin crear confusión en los usuarios sobre cuál sería mejor hacer clic. Por lo general hay dos tipos de botones: uno para las acciones primarias y otro para las secundarias. Por otro lado, los botones también suelen adoptar distintos tamaños en función del lugar en el que se coloquen. También suelen ser dos los tamaños que se incluyen: estándar y pequeño.

De cada uno de estos botones, en el Design System se deben definir sus diferentes estados: habilitado (el estado por defecto, que indica que un botón está operativo), hover (para reforzar que un botón es interactivo cuando se pasa por encima de él el cursor del ratón), activo (cuando se hace clic sobre él) y deshabilitado (para indicar visualmente que un botón no funciona). También se puede incluir el estado de carga, que es el que se utiliza cuando tras pulsar un botón hay que esperar un tiempo para ver su resultado, como por ejemplo tras enviar un formulario.

Los botones también suelen incluir a veces iconos, ya que sirven para facilitar la comprensión de la finalidad del botón

Inputs

Al igual que los botones, los campos (inputs) son otro de los elementos que más se utilizan para la interacción de los usuarios con un site. Pueden ser de varios tipos —texto, áreas de texto, desplegables (dropdowns)…— pero todos suelen tener un aspecto común que el Design System debe definir, como las etiquetas (labels) o los placeholders (el texto de ejemplo). Etiquetas y placeholders pueden usarse de distinta forma. Lo habitual es que la etiqueta se sitúe sobre el campo mientras que el placeholder vaya dentro del campo cuando todavía no se ha introducido ningún valor real en él. Pero cada vez más se recurre a situar la etiqueta dentro del campo (cuando todavía no se ha introducido ningún valor real) y sobre él (cuando el campo está rellenándose o ya ha sido rellenado), mientras que el placeholder se muestra siempre bajo el campo.

Además, el Design System debe establecer un aspecto para estos campos en función de sus posibles estados:

Estado activo: Es el estado por defecto de un campo. Indica que se puede introducir en él un valor pero que todavía no se ha hecho.
Estado ‘hover’: Define la apariencia que debe tener un campo cuando se coloca sobre él el cursor del ratón.
Estado con foco: Es el estado que se aplica a un campo después de que un usuario haya hecho clic sobre él. Indica que el campo está siendo editado.
Estado cumplimentado: Cuando un campo ya ha sido rellenado y ya no tiene el foco.
Estado desactivado: Impide la interacción con el campo hasta que se cumpla algún requisito que lo active, como por ejemplo rellenar otro campo del formulario primero. Generalmente se muestra en colores más apagados.
Estado de error: Se utiliza para informar que el valor introducido en el campo no es correcto. Lo recomendable es aplicar un cambio de color al campo (el color que previamente hayamos definido para los errores en nuestros colores funcionales, que generalmente se tratará de un tipo de rojo) junto con un mensaje de error que explique el motivo de la invalidación y —a veces— también un icono.
Estado confirmado: No todos los formularios incluyen este tipo de estado, pero si utilizamos la validación de campos en tiempo real (es decir, al abandonar el foco sobre un campo, sin esperar a hacer ‘submit’ en el formulario), este estado se utiliza para informar que el valor introducido por el usuario en el campo se ajusta a los requisitos. Se usa por ejemplo para introducir teléfonos o números de tarjeta de crédito. Lo recomendable es aplicar al campo el color de confirmación del Design System (verde) y un icono.

Checkbox y radio button

Los checkboxes y radio buttons son bastante parecidos. Ambos se usan para seleccionar opciones, aunque la diferencia radica en que mientras que en un checkbox el usuario puede seleccionar más de una opción, los radio buttons, sin embargo funcionan como un grupo, en el que las distintas opciones son mutuamente excluyentes: si se escoge una opción, automáticamente el resto de opciones se deseleccionan.

Para diferenciarlos, tradicionalmente los checkboxes se forman por un texto acompañado de una casilla cuadrada, mientras que en los radio buttons esta casilla es circular, así que lo ideal es no cambiar esta lógica para no dar lugar a confusión entre los usuarios.

En el Design System se debe especificar distintos estados para checkboxes y radio buttons: activo (por defecto e igual que no marcado), hover (con el cursor del ratón por encima), marcado (seleccionado), desactivado (cuando no se puede utilizar) y error (por ejemplo cuando no se ha seleccionado ninguna opción y esto es un requisito necesario para el envío de un formulario).

Modales

Los modales son ventanas que aparecen delante del contenido principal (generalmente en el centro de la pantalla) y que interrumpen la acción, solo pudiéndose recuperar tras darles respuesta. Así que siempre deben incluir un elemento de acción o, como mínimo, un botón de cierre.

Aunque las ventanas modales en realidad pueden entenderse como un simple contenedor vacío en el que se puede colocar cualquier tipo de contenido, necesitan una estructura bien definida en el Design System para proporcionar una experiencia integral. Es decir, todas ellas deben tener la misma apariencia, la misma animación y la misma forma de ‘bloquear’ el site. Además los elementos de acción deben estar ubicados en el mismo sitio.

Avisos (o banners)

Los banners sirven para mostrar mensajes emergentes. Es importante que el Design System diferencie el aspecto de cada banner en función del tipo de mensaje que transmiten, tanto por el color de fondo (lo veíamos cuando hablábamos de los colores funcionales en este mismo artículo: si se trata de un error generalmente se suele usar el color rojo; si es un aviso, el amarillo; si es una confirmación, el verde; y si es un mensaje informativo, el azul) como por los iconos o imágenes de apoyo que los acompañan. Los banners no interrumpen la acción pero deben proporcionar a los usuarios una forma de reaccionar ante ellos, ya sea simplemente cerándolos o mediante acciones más completas representadas con botones.

Tooltips y Toasts

Los tooltips (ayudas) muestran información adicional al pasar el ratón por encima de un elemento. Parecidos a los tooltips, los toasts —también conocidos como snackbars— son pequeños mensajes emergentes de apoyo que se muestran rápidamente (generalmente en la parte inferior de la pantalla) tras realizar alguna acción, por ejemplo cuando se copia un texto a través de un botón. A diferencia de las modales, los toasts no bloquean la pantalla y, a diferencia de los banners, desaparecen solos sin requerir una acción adicional por parte del usuario.

Tarjetas

Las tarjetas se utilizan para agrupar información y son uno de los componentes más utilizados en cualquier site. Pueden ser de muchos tipos, aunque siempre es importante estructurarlas de forma similar para lograr consistencia. Suelen ser elementos interactivos, así que se debe incluir en ellas botones (generalmente en la parte inferior), aunque también en ocasiones es la propia tarjeta la que funciona como un botón.

Carruseles

Cuando se tienen muchas tarjetas, en ocasiones se suelen agrupar en carruseles, en los que una serie de elementos se ordenan permitiendo el desplazamiento horizontal por ellos y aprovechando mejor el espacio al reducir el incómodo scroll. Los carruseles deben tener controladores de navegación para desplazarse por el contenido. Estos controladores en dispositivos táctiles suelen desaparecer para que los usuarios puedan utilizar el desplazamiento nativo.

Tablas

Las tablas permiten organizar datos en filas y columnas de forma que sean más entendibles y accesibles. El Design System debe definir el aspecto y uso de cada tipo de tabla, así como de cada una de sus partes: cabecera, cuerpo, pie…

Listados e índices

Las listas pueden utilizarse en múltiples contextos, desde para la redacción de un texto hasta para la navegación por un contenido (índices). El elemento que las diferencia visualmente es la viñeta (bullet) que precede a cada uno de los elementos de una lista.

Acordeones

Los acordeones son muy útiles cuando se necesita mostrar gran cantidad de contenido estructurada en bloques pero sin que ocupe mucho espacio. De este modo, una parte del contenido (generalmente el epígrafe de cada bloque) se muestra, mientras que el desarrollo se oculta. Son muy frecuentes por ejemplo para las páginas de tipo FAQs (preguntas y respuestas). Su elemento más identificativo es que incluyen un icono junto a cada epígrafe que cambia en función de si el contenido del bloque está o no visible. Por ejemplo se puede utilizar un ‘+’ para que el usuario pueda mostrar más información y un ‘-‘ para ocultarla.

Pestañas

Las pestañas (o tabs) sirven para organizar una página como si fuera un armario clasificador, mostrando uno u otro contenido en función de la pestaña que se tenga activa. Por eso debe haber una clara diferenciación visual entre las pestañas seleccionadas y los no seleccionadas.

Paginaciones

Al igual que las pestañas, las paginaciones sirven para mostrar un contenido u otro en función de el número que seleccione el usuario. Las paginaciones suelen usarse casi exclusivamente en los listados de elementos, por ejemplo con los artículos de un blog o los productos de una tienda online, para evitar largos scrolles.

Breadcrumbs

Los breadcrumbs (migas de pan) son un elemento de navegación que sirve para que los usuarios conozcan su ubicación actual dentro de la estructura del site y que muestran un listado de páginas que va de la página actual a la página de inicio pasando por todas las páginas ‘padre’. Se muestran en la parte superior de la página, normalmente justo debajo de la navegación del site, y son especialmente prácticos en webs en los que los usuarios pueden llegar a un nivel de profundidad elevado. Además, una página muy profunda suele mostrar contenidos muy específicos, por lo que si el usuario llega a ella a través de una búsqueda en Google puede ‘ascender’ mediante estas migas de pan a contenidos más generales.

Lamentablemente, en resoluciones móviles, los problemas de utilizar breadcrumbs superan rápidamente a los beneficios, ya que suelen abarcar varias líneas, ocupando un espacio muy valioso en la parte superior de la pantalla y no ilustrando claramente la estructura de cadena. Lo recomendable en estos casos son breadcrumbs con un solo elemento que apunte al nivel superior.

3. Patterns

Con los distintos componentes del site ya definidos, el siguiente paso es construir patrones (en algunos Design System los llaman patterns o templates), aunque a nosotros en el estudio nos gusta más llamarlos módulos. Estos módulos son pequeños ecosistemas en los que los distintos componentes conviven entre sí para crear una funcionalidad concreta.

Predefiniendo distintos tipos de módulos, la elaboración de páginas web se vuelve mucho más sencilla. Además de encontrarnos siempre partes comunes —como cabeceras y footers— que ayudan a dar integridad al conjunto del site como un todo, la mayoría de las veces recurrimos a las mismas soluciones de diseño a la hora de integrar contenidos. No solo es que el proceso de diseño y desarrollo de nuevas páginas sea más rápido así, sino que además es lo recomendable ya que se consigue más consistencia en el uso del site creando estructuras reconocibles para los usuarios.

¿Cómo publicar un Design System?

Una vez diseñados todos los elementos del Design System, toca publicarlo. Los Design System no son fotos fijas. Crecen y evolucionan constantemente, así que los .PDF —y demás formatos estáticos del estilo— no son los más adecuados para publicar un Design System. Si recurrimos a ellos, cada vez que se realice algún cambio tendremos que publicar una nueva versión y comunicárselo a todo el equipo. Y esto no garantizará que todos los miembros estén alineados, ya que durante un tiempo pueden circular varios documentos distintos, cada uno implantado en un equipo diferente, lo que generará confusión y problemas.

Por eso lo realmente aconsejable es publicar los Design System a modo de web, donde todas las personas dedicadas a gestionar el diseño y desarrollo del site puedan no solo resolver dudas sino acceder directamente a todos los recursos, componentes y patrones, convirtiéndose en un ecosistema de trabajo para los distintos equipos, donde un diseñador podrá prototipar una página rápidamente con ayuda de los componentes ya diseñados en Figma, un programador podrá copiar directamente el código que necesite para su desarrollo, un miembro del equipo de marketing podrá ver cuáles son las normas de estilo para sus creatividades y un copywriter podrá consultar las pautas de redacción.

Este site puede dividirse en tres grandes bloques: branding, librería y recursos.

1. Branding

Como hemos visto, un Design System no es un manual de marca, pero todo Design System debe incluir información de manual de marca. Por eso en este primer punto de tu Design System conviene recopilar toda la información que, a pesar de no estar estrictamente relacionada con el diseño y desarrollo del site —al menos no directamente— sí que tiene un peso importante a la hora de definir otros elementos del Design System. Nosotros incluimos en este apartado el logotipo, los valores de marca, el buyer persona y el contenido. Veamos cada uno de ellos más detenidamente…

El logotipo

El logotipo es quizá el elemento que mejor representa a una marca, así que hay que dedicarle especial atención para que cumpla su función correctamente. Es conveniente que desde el Design System se puedan descargar todas sus versiones aprobadas del logotipo, tanto la ‘canónica’ (la forma en la que debe aparecer siempre por defecto) como las alternativas (por ejemplo la versión monocromática), especificando claramente los casos en los que se debe usar cada una de ellas. No hay que olvidar incluir en estas descargas todas las resoluciones y formatos (JPEG, PNG y .SVG) posibles. De este modo evitaremos que nadie tenga la necesidad de generar su propio logotipo por libre con el riesgo de alterar alguna de sus características.

En el Design System se debe dar solución a cada una de las situaciones que se puedan presentar a la hora de representar el logo para evitar improvisaciones e interpretaciones personales que harán que el logo pierda poco a poco consistencia. Por eso es recomendable que en este apartado se indiquen todos los tamaños a los que puede representarse el logotipo (teniendo siempre en cuenta la unidad de referencia) y consejos tanto sobre su colocación como sobre los márgenes que debe guardar con otros contenidos. El logotipo debe funcionar bien y ser reconocible independientemente del tamaño al que se represente, así que es habitual incluir una versión reajustada para tamaños muy reducidos, como por ejemplo para el favicon.

Los valores

La marca es mucho más que un logo. Es un conjunto de valores que definen la identidad de una empresa y que impulsan cada una de las decisiones que se toma en su seno, desde el lanzamiento de un nuevo producto hasta la realización de una campaña publicitaria pasando por su política laboral o medioambiental.

Incluir un manifiesto en este punto del Design System es importante porque no solo sirve como ayuda para intuir cómo debe ser el diseño del site y sus contenidos, sino que cada vez más usuarios valoran que las marcas compartan su misma visión de la vida. Así que se deben recoger cuáles son los principios de la marca, qué es lo que hace, por qué lo hace y qué es lo que pretende conseguir con ello (lo que tradicionalmente se conoce como ‘misión’ y ‘visión’ empresarial).

El ‘buyer persona’

Conocer a tus clientes es un paso básico para toda empresa, pero ponerlos en el centro de todas las decisiones es esencial para lograr el éxito. Por eso, un Design System es el lugar perfecto para publicar un buyer persona, ya que es un documento que todos los diseñadores tienen que tener muy en cuenta y siempre accesible a la hora de proponer soluciones de navegación adecuadas. Si todavía no tienes un buyer persona (¿a qué estás esperando?) o no sabes qué es, te aconsejamos que eches un vistazo al artículo de nuestro blog con consejos sobre cómo elaborar uno para tu empresa.

El contenido

Por mucho que tu diseño mantenga una consistencia visual, la experiencia de uso de tus visitantes no será perfecta si el contenido no lo es también, tanto el escrito como el visual. Por eso en el Design System se necesita establecer unas pautas de redacción que ayuden a generar un tono de voz uniforme, reconocible, apropiado para la audiencia, alineada con el diseño y que defina bien la personalidad de marca.

También resulta interesante en este punto recoger un glosario con los eslóganes y frases estándar que se deben utilizar, así como normas ortotipográficas que unifiquen el uso de mayúsculas, cursivas, negritas o signos de puntuación. Todos esto resultará de gran ayuda para que los copywriters puedan hacer bien su trabajo.

Pero como decimos, en una web el lenguaje no solo es escrito, también tiene un gran peso el lenguaje visual. Fotos, vídeos, ilustraciones y patrones contribuyen a transmitir mensajes tanto como lo hacen las palabras. Incluir en un Design System los requisitos que debe cumplir todo el material gráfico que se suba a la web —tanto de estilo como técnicos (por ejemplo recomendando el uso de los formatos WebP y AVIF o especificando los filtros que se deben aplicar a las imágenes antes de su publicación)— así como un enlace a un repositorio de imágenes donde los diseñadores podrán acceder a una selección previamente aprobada puede resultar muy útil.

2. La librería

La librería (en realidad una mala traducción del inglés library) es la transformación en código del inventario de tokens, componentes y módulos que hemos realizado previamente con nuestra herramienta de diseño de interfaces de usuario. Esta librería supone el auténtico marco de trabajo para los desarrolladores web. Cada uno de los elementos de esta librería se compone de:

Nombre: Ya sea una variable, un componente o un módulo, en la librería se especifica el nombre de cada uno de los elementos siguiendo la misma nomenclatura que se ha usado previamente en la fase de diseño. De este modo no hay problemas de comunicación o malentendidos y todo el mundo implicado en el site (diseñadores, programadores o responsables de contenido) sabe de qué estamos hablando cuando por ejemplo nos referimos a un ‘acordeón’.
Descripción: Cada elemento va acompañado de una descripción sobre su función y de unas normas de uso sobre cómo se debe utilizar y en qué casos debe emplearse. A veces incluso se incluyen ejemplos de lo que hay que hacer y de lo que no hay que hacer para contextualizar y ayudar a entender mejor el elemento.
Código: Cada elemento va acompañado de un fragmento de código de ejemplo que los desarrolladores pueden copiar y pegar en su proyecto para luego adaptarlo a sus necesidades jugando con los distintos atributos y clases que se especifican y que sirven para darle un aspecto u otro.

3. Recursos

Finalmente, en el Design System se pueden incluir todas las herramientas de uso necesario para diseñadores y desarrolladores:

Programas: Enlaces a los distintos programas de trabajo (Sketch, Figma, Photoshop, Illustrator, Visual Studio Code, Atom, Brackets…) así como a los plugins que deben instalarse. También se puede incluir un listado de herramientas online útiles.
Plantillas descargables: Fundamentalmente se incluyen las plantillas de diseño (Sketch, Figma, XD) ya listas con todos los componentes, estilos y guías para generar nuevas pantallas, aunque también se pueden incluir plantillas para la generación de imágenes o para la redacción de contenidos.
Control de versiones: Si se trabaja con integración continua, es muy útil que se incluya aquí el proceso de trabajo y el acceso a los repositorios.

En este artículo hemos visto el proceso para la creación de un Design System. Como puedes ver, con ayuda de un Design System cualquier producto digital —ya sea un sitio web o una app— puede crecer de forma ágil pero sin la pérdida de consistencia que a menudo se produce cuando los cambios son apresurados. Si necesitas elaborar tu propio Design System, en OKB Interactive Studio podemos ayudarte con ello.