La regla 60-30-10 en diseño UX

El color es una de las herramientas más poderosas en el diseño UX/UI. A parte de definir la personalidad visual de una interfaz, influye directamente en cómo los usuarios la perciben y navegan por ella. Los colores guían la atención, marcan jerarquías y transmiten emociones, haciendo que la interacción con un producto digital sea mucho más intuitiva.

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

Aquí es donde entra en juego la regla 60-30-10, una fórmula sencilla pero efectiva para distribuir los colores de manera equilibrada. Este enfoque sugiere que el 60% del diseño esté dominado por un color principal, el 30% por un color complementario y el 10% restante se reserve para acentos que capten la atención.

¿Cómo se aplica la regla 60-30-10?

Para implementar la regla 60-30-10 en tu diseño UX/UI, sigue estos pasos para distribuir los colores de manera equilibrada y funcional:

1. Selecciona el color dominante (60%)

Este será el color base que ocupará la mayor parte de la interfaz, aportando cohesión y estabilidad visual. Generalmente se elige un tono neutro o suave, ideal para áreas extensas como el fondo o secciones principales de contenido, ya que no cansa la vista. Este color debe ser el «ancla» del diseño, creando una atmósfera consistente y armoniosa.

2. Elige el color secundario (30%)

El color secundario complementa al dominante, añadiendo contraste y variedad sin robar protagonismo. Úsalo en elementos de apoyo como encabezados, barras laterales o formularios. Este color aporta profundidad y ayuda a dividir visualmente la interfaz, creando puntos de interés que enriquecen la experiencia sin saturar al usuario.

3. Define el color de acento (10%)

Este es el color que se usará para captar la atención y guiar al usuario hacia las acciones clave. Ideal para botones de llamada a la acción, enlaces o notificaciones importantes, el color de acento debe ser llamativo y diferenciarse claramente del resto de la paleta. Al aplicarlo con moderación, puedes destacar los elementos esenciales de la interfaz sin distraer al usuario.

4. Prueba la combinación en diferentes contextos

Una vez que has definido los tres colores, pruébalos en distintos dispositivos y tamaños de pantalla para asegurarte de que mantienen un equilibrio visual en todos los escenarios. Verifica que la combinación funcione bien tanto en modo claro como oscuro, y que se conserve la legibilidad y en cada entorno.

5. Ajusta según el contexto de uso

Dependiendo del tipo de proyecto, puede ser necesario modificar la intensidad o el tono de los colores. En aplicaciones móviles, por ejemplo, el color de acento suele ser más llamativo para mejorar la interacción táctil. 

Aplicando esta fórmula, se asegura que el diseño tenga una jerarquía visual clara y facilite la navegación para el usuario sin sobrecargarlo de información.

Métodos para elegir la paleta de colores

Para crear una paleta de colores efectiva, te recomendamos usar uno de estos cuatro métodos:

1. Análogo: combina el color base con dos tonos adyacentes en la rueda de colores. Es ideal para fondos y diseños suaves, sin alto contraste.
2. Monocromático: usa distintos tonos de un mismo color para lograr un efecto limpio y profesional. Perfecto para gráficos y visualizaciones de datos.
3. Tríada: elige tres colores equidistantes en la rueda, formando un triángulo. Úsalo para equilibrio visual, aplicando un color como fondo y los otros dos para acentos.
4. Complementario: selecciona colores opuestos en la rueda para un contraste alto, ideal para resaltar elementos clave como botones de acción.

Cada uno de estos enfoques asegura una paleta de colores equilibrada y funcional. Lo importante es usar el color con intención, destacando lo esencial sin sobrecargar la interfaz. 

Beneficios de la regla  60-30-10

La regla 60-30-10 ofrece múltiples ventajas para el diseño UX/UI, mejorando tanto la experiencia del usuario como la estética de la interfaz. Aquí te explicamos algunos de los beneficios más importantes:

1. Equilibrio visual: distribuir los colores en proporciones claras evita la saturación y da una estructura ordenada al diseño, facilitando una navegación más fluida.
2. Jerarquía de información: esta regla resalta los elementos clave (con el color de acento) y mantiene la coherencia entre colores, ayudando al usuario a identificar lo importante de un vistazo.
3. Fácil de aplicar: su simplicidad la convierte en una guía intuitiva para cualquier miembro del equipo, incluso sin experiencia en diseño.
4. Mejora la usabilidad: el color de acento dirige la atención a botones y llamadas a la acción, mejorando la interacción y las tasas de conversión.
5. Consistencia de marca: aplicar esta regla ayuda a mantener la identidad visual de la marca, reforzando el reconocimiento y la confianza del usuario.

La regla 60-30-10 es una forma sencilla de dar estructura y armonía a tus diseños sin caer en la tentación de usar colores al azar o solo los que nos gustan. Por ello, antes de lanzarte a elegir colores, considera aplicarla: te ayudará a crear una base sólida y visualmente atractiva desde el principio.

---

Foto de Vincent Giersch en Unsplash