Colores, sombras y tipografía en sistemas de diseño

Diseño UX
08/10/2024
|
Torresburriel Estudio
Una pared llena de paneles de colores organizados en una gradación que va del morado oscuro al rojo, creando un patrón visual que combina tonos de púrpura, rosa y naranja. Los paneles están alineados de manera precisa en filas y columnas, generando un efecto geométrico.

Un Sistema de Diseño es una colección de elementos reutilizables, pautas, estilos y principios que se utilizan para construir y mantener productos digitales de manera coherente.

Es un manual de instrucciones para crear productos digitales, donde se definen todos los elementos visuales y funcionales que se utilizarán. Este «manual» incluye aspectos como los colores que deben usarse, la tipografía, el estilo de los botones y otros componentes visuales, además de reglas sobre cómo deben combinarse.

El objetivo principal es que todo el equipo de diseño use las mismas herramientas y siga las mismas reglas, sin importar quién esté trabajando en él o qué parte del producto estén creando. Si quieres informarte acerca del resto de beneficios te recomendamos leer Sistemas de diseño, ¿qué son y por qué son tan importantes? 

1. Colores 

Paleta de colores

La paleta de colores es un conjunto de colores que se utilizará en todo el diseño. Para definirla, te aconsejamos elegir:

  • Colores primarios: colores principales que representarán la marca o producto, y suelen ser los más utilizados.
Un logo de "UX Learn" en tonos azul y morado, junto a una paleta de colores de la marca. Los colores principales incluyen un azul brillante con el código hex #0bb4e8, un morado oscuro con el código #330033, un gris oscuro #2e2e2d y un blanco con el código #f9f6f6, todos acompañados de degradados.
  • Colores secundarios: colores complementarios que se usan para dar variedad y evitar que todo se vea igual.
  • Colores neutros: como blancos, grises y negros, que sirven para equilibrar visualmente el diseño.

Colores de estado

Los colores de estado son críticos para comunicar de manera visual los mensajes y acciones dentro de una interfaz. Cada color tiene una connotación universal que guía la interpretación del usuario:

  • Rojo: errores o advertencias críticas.
  • Verde: confirmaciones o acciones completadas
  • Amarillo: advertencias o precauciones

Ver también: El impacto de los colores en la UX

Accesibilidad

Para garantizar la accesibilidad en un diseño, es importante que el contraste entre el texto y el fondo sea adecuado. 

Por ejemplo, si usas texto azul sobre un fondo morado, puede resultar difícil de leer porque los colores son demasiado similares. Sin embargo, un texto oscuro, como morado sobre un fondo claro, proporcionará un buen contraste, asegurando que sea fácil de leer para todos los usuarios, incluidas las personas con dificultades visuales.

Dos botones comparativos de contraste: el primero a la izquierda tiene un fondo morado oscuro con un ícono de pulgar hacia abajo en azul y texto "Morado y azul", mientras que el segundo a la derecha tiene un fondo blanco con borde morado, un ícono de pulgar hacia arriba en azul y texto "Blanco y morado". El diseño resalta las diferencias de legibilidad entre ambos esquemas de color.

Una herramienta muy útil para verificar el nivel de contraste entre colores y asegurar la accesibilidad es el Contrast Checker de WebAIM. Esta web permite evaluar el contraste exacto entre dos colores y comprobar si cumplen con los estándares establecidos por las Pautas de Accesibilidad para el Contenido en la Web (WCAG). El ratio de contraste mínimo recomendado es de 4.5:1 para texto normal y 3:1 para texto grande.

Siguiendo con el ejemplo anterior de UX Learn, si introducimos los valores hexadecimales del color morado y el blanco, obtenemos un contraste de 15.44:1. Este valor indica que, además de ser legible, cumple con las WCAG.

Captura de pantalla de una herramienta de verificación de contraste (Contrast Checker) que muestra los valores de color en hexadecimal para el texto y el fondo (#330033 para el texto y #F9F6F6 para el fondo), con un resultado de relación de contraste de 16.44:1, lo que cumple con los estándares WCAG AA y AAA para texto normal, texto grande y componentes gráficos de la interfaz de usuario.

2. Sombras y efectos 

Las sombras añaden profundidad y ayudan a definir qué elementos son interactivos o están más cercanos al usuario en términos de interacción. Por ejemplo, un botón con una sombra sutil aparece elevado y, por lo tanto, clicable. Este uso visual guía a los usuarios intuitivamente sin necesidad de explicaciones adicionales.

Los efectos visuales, como desenfoques, brillos y transparencias, pueden mejorar el diseño de una manera sutil pero efectiva. Por ejemplo:

  • El desenfoque puede usarse en fondos para hacer que el contenido principal destaque más, sin distraer al usuario.
  • Un brillo ligero en un botón o icono le da mayor visibilidad, haciéndolo parecer más importante sin recargar la interfaz.
  • Las transparencias permiten que los elementos se mezclen mejor en la pantalla, manteniendo un diseño limpio y moderno sin perder claridad. Ver también: Glassmorphism: una tendencia de diseño UX

En este blog nos gusta que todas las imágenes aparezcan en blanco y negro pero, a la hora de seleccionar el post que quieres leer, este muestra sus colores reales para destacar sobre resto.

Vista previa de tres publicaciones de blog de diseño UX: "Selección de fechas con Date Picker" con una imagen de un calendario antiguo; "3ª edición del Programa de Especialización en UX" con un diseño geométrico abstracto; y "Diseño de selectores de zona horaria" con la imagen de una persona de espaldas con un mapa tatuado.

4. Tipografía

En UX, la selección de fuentes es un aspecto clave para garantizar una experiencia de usuario fluida y coherente. El objetivo principal es asegurar que el texto sea legible en todo tipo de dispositivos. Por lo tanto, establecer el tamaño y espaciado correctos conseguirá que la lectura sea cómoda. 

En términos de accesibilidad, es imprescindible asegurar un buen contraste y una jerarquía visual clara, para que todos los usuarios, independientemente de sus capacidades, puedan interactuar sin dificultades.

Si te interesa profundizar en estos aspectos, te invitamos a leer este artículo: Consejos para un sistema tipográfico efectivo.

Adoptar estas estrategias facilita la colaboración entre equipos y asegura que el producto evolucione de manera coherente, sin perder calidad visual ni funcional. Te invitamos a seguir estas recomendaciones y descubrir el impacto positivo que tendrán en tus proyectos UX.


Foto de Dulcey Lima en Unsplash

¿Quieres darnos tu impresión sobre este post?

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.
Mastodon