¿Qué es la regla 60/30/10 en el diseño de UI?

¿Qué es la regla 60/30/10?

La regla 60/30/10 es un mantra para que tu casa no parezca un revoltijo de pintura, como si un camaleón hiperactivo hubiera vomitado sobre tus paredes. Es un plan de ataque para que los colores bailen en armonía.

El 60% es el rey del mambo, el color principal que domina tu espacio. Piensa en él como el traje de gala de tu habitación, el que dice "aquí mando yo". Por ejemplo, si te va lo nórdico, un blanco roto o un gris pálido serían tus súbditos principales.

Luego viene el 30%, el compañero de baile con chispa. Este color secundario le da un aire de "uy, qué interesante", sin robarle protagonismo al 60%. Imagina un azul petróleo que se abraza a ese blanco roto, ¡un dúo dinámico!

Y para rematar, el 10% de brillo y ¡zas! Este es el color sorpresa, el detalle picante que hace que todo el conjunto cobre vida. Un toque de amarillo sol en unos cojines, o un terracota en una lámpara, ¡boom! Como la guindilla en un plato bien hecho.

¿Por qué funciona esta movida?

• Evita el caos cromático: Sin un plan, acabas con paredes que gritan más fuerte que un concierto de heavy metal sin amplificador.
• Genera equilibrio: Es como una buena receta, con los ingredientes justos en su sitio.
• Facilita la toma de decisiones: Menos vueltas le das a la cabeza, más rápido decoras. ¡Y eso es oro molido!

Para que no te pierdas en el arcoíris:

• El 60% suele ser para paredes y muebles grandes. Sofás, cortinas... ¡lo que ocupe más espacio visual!
• El 30% va para muebles más pequeños, alfombras o incluso una pared de acento. Algo que no sea abrumador pero que aporte carácter.
• El 10% es para los accesorios, los detalles finales. Cuadros, jarrones, mantas pequeñas... ¡la guinda del pastel!

Mi casa, por ejemplo, es un experimento constante. Ahora mismo, tengo un azul marino profundo en la pared principal (mi 60% actual), que parece el fondo del océano sin tener que nadar. Luego, le metí un tono beige cálido en el sofá y algunas cortinas (mi 30%, que no está nada mal), que le da un toque acogedor, como estar envuelto en una manta de lana gigante. Y el 10%... ¡ahí me divierto! Ahora mismo, son toques de naranja quemado en cojines y una mesita auxiliar que parece sacada de una película de Fellini. ¡Le da vidilla al asunto sin que parezca una feria!

¿Por qué las grandes películas utilizan la regla del color 60/30/10 por ciento?

Es verdad eso del color, ¿eh? 60/30/10. Lo usan en las pelis.

Pero ¿por qué exactamente? Supongo que tiene que ver con que no te distraigas, que mires lo que quieren que mires. Crear un orden visual, creo.

Sí, eso. Guiar el ojo, ¿entiendes? Que no se pierda. Como cuando yo me pierdo en la tele a veces.

A mí me funciona mucho en mis fotos, si me pongo a pensar. Un color dominante, uno secundario y un acento. Lo aplico sin saberlo a veces. Me lo enseñó mi amigo Leo, que es un crack de la fotografía.

Y en el diseño, seguro que es igual. Estabilidad, calma. Que no sea un caos de colores. Aunque a veces el caos mola, ¿no? Depende de lo que busques. A mí me gusta el arte moderno que rompe todo. Pero para un diseño más comercial, sí, el orden es clave.

Las grandes pelis se lo curran, se nota. La paleta de colores te cuenta algo.

En fin, el 60/30/10 para la armonía y el foco.

• Regla 60/30/10 en cine y diseño: Un principio de composición visual.
• 60% Color Dominante: El color principal, base de la escena.
• 30% Color Secundario: Un color que complementa al dominante.
• 10% Color de Acento: Un color llamativo para resaltar elementos clave.
• Objetivo: Generar equilibrio, armonía visual y dirigir la atención del espectador.
• Aplicación: Se usa tanto en la cinematografía como en el diseño gráfico y de interfaces. Busca una experiencia estética agradable y funcional.

¿Qué es la teoría del color en UI/UX?

La teoría del color es el estudio y aplicación práctica de cómo los colores se mezclan y cómo son percibidos por el ojo humano. En el ámbito moderno, utiliza el círculo cromático para organizar y definir las relaciones entre colores primarios, secundarios y terciarios. En UI/UX, la teoría del color se enfoca en cómo los colores influyen en la usabilidad, la accesibilidad y la experiencia emocional del usuario.

Es fascinante detenerse a pensar que el color no es una propiedad intrínseca de los objetos, ¿verdad? sino una compleja interacción entre la luz, la superficie del objeto y nuestro propio cerebro. Lo que percibimos es una interpretación, casi una ilusión construida, que dota de significado a nuestro entorno digital y físico. Esto tiene implicaciones profundas.

En el diseño de interfaces, esta "ilusión" se convierte en una herramienta poderosísima. Un buen uso del color puede guiar la atención del usuario, establecer una jerarquía visual clara y evocar emociones específicas. Pensemos en cómo el rojo suele señalizar una alerta o un error, mientras que el verde sugiere éxito o una acción positiva. Es un lenguaje universal, sin palabras.

La identidad de marca también está intrínsecamente ligada al color. Mi primo, que trabaja en marketing, siempre insiste en cómo el azul transmite confianza, o el naranja energía. Es algo que, sin ni siquiera darnos cuenta, moldea nuestra percepción de una empresa o un producto. No es solo estético, es funcional, fundamental.

Los estoicos, por ejemplo, sostenían que nuestras percepciones son clave para nuestra experiencia del mundo. ¿Hasta qué punto nuestras respuestas emocionales al color están programadas culturalmente o son universales? Esta pregunta siempre me intriga. El color es un recordatorio constante de esa subjetividad compartida, un puente entre lo material y lo psíquico.

Al aplicar la teoría del color en UI/UX, hay principios esenciales a considerar:

• Contraste adecuado: Vital para la accesibilidad, asegurando que los textos sean legibles para todos, incluyendo personas con deficiencias visuales. No es solo una norma, es respeto.
• Consistencia: Mantener una paleta de colores coherente a lo largo de toda la interfaz refuerza la identidad y mejora la usabilidad.
• Psicología del color: Elegir colores basándose en las emociones y asociaciones que deseamos evocar. El amarillo, alegría, aunque a veces, también precaución.
• Balance: Evitar sobrecargar la interfaz con demasiados colores, buscando una armonía visual que no distraiga. Menos, a menudo es más.

Recuerdo el año pasado, cuando estaba rediseñando la página web de mi club de lectura, luché mucho con la paleta de colores. Quería algo que fuera serio pero acogedor. Terminé usando tonos tierra con toques de azul suave. No fue fácil. Descubrir que el color podía hacer o deshacer la primera impresión de la gente sobre nuestro pequeño rincón literario fue bastante revelador, la verdad.

Al final, la teoría del color no es una simple colección de reglas. Es una guía para diseñar experiencias, para comunicar sin palabras, para influir sutilmente en el estado de ánimo de un usuario. Es una mezcla de ciencia, arte, psicología y un poco de intuición, creo. Es fundamental, realmente. Y sí, a veces, incluso divertida.

¿Qué es la regla 60/30/10 en el color?

La regla 60/30/10 es una guía de diseño de interiores. El 60% es el color dominante, el 30% el color secundario y el 10% el de acento.

Es de noche. Otra vez. Miro esta habitación y pienso en esa regla. 60/30/10. La repiten como un mantra para que los espacios no se sientan vacíos. O para que no se sientan tan... llenos de uno mismo.

Mi 60% es este gris de las paredes. Un gris que se come la luz de la lámpara. A veces me pregunto si lo elegí yo o si me eligió él a mí. Es el fondo de todo. El silencio.

Luego está la madera. Oscura. El 30%. La cama, la estantería que me traje de casa de mis padres hace ya tanto. Tiene marcas, golpes. Una historia que ya casi no recuerdo. Aporta algo de calidez, supongo. O solo es peso.

Y el 10%. Es lo que me mata. Un solo cojín de un azul eléctrico sobre la cama. Lo compré un día que me sentía valiente. Ahora, en la penumbra, parece un moretón. Un punto final. A veces me dan ganas de esconderlo.

Es solo una regla. Pero en la noche, parece el resumen de una vida.

• El color principal (60%) casi siempre va en las paredes. Es el que define el estado de ánimo general. Es la atmósfera. La base sobre la que todo lo demás existe.

• El color secundario (30%) debe contrastar con el principal. Se usa en muebles grandes, cortinas, quizá una alfombra. Su función es añadir interés, que la vista no se quede plana.

• El acento (10%) es el destello. Son los objetos pequeños. Lámparas, cojines, arte. Es el punto de atención. Donde quieres que la gente mire. O donde tú no puedes dejar de mirar.

• No es una ley inquebrantable. A veces se usa una paleta análoga, donde los colores son vecinos en el círculo cromático. O monocromática, usando tonos de un mismo color. Mi gris es un poco eso, una mentira monocromática.

• La textura es un color oculto. Un lino no refleja la luz igual que un terciopelo. Eso cambia la percepción del color. una pared lisa no se siente igual que una rugosa. nunca se siente igual.

¿Qué dice la regla 60/30/10 sobre las paletas de colores?

La regla 60/30/10. Un esquema.

• 60%: color principal. La base.
• 30%: color secundario. Soporte.
• 10%: color de acento. El brillo.

Armonía visual. Equilibrio. O eso dicen.

Es un orden. A veces necesario. A veces un corsé.

Mi estudio usa a menudo tonos tierra. Un 60% de beige. El 30% en verde oliva. El 10% de terracota para detalles. El contraste marca la diferencia.

El color lo es todo. O casi. Lo que comunica sin decir.

Un buen diseño no se anuncia. Se siente.

La vida es un conjunto de proporciones. A veces, más simple de lo que parece. La clave está en la proporción. 60% de calma. 30% de interés. 10% de chispa.

Cada color tiene su propia voz. La orquesta es el arte.

El 60% marca el tono. El 30% añade matices. El 10% es la sorpresa. La vida misma.

Las reglas existen para ser entendidas. Y a veces, para ser rotas. Con conocimiento.

Recuerdo un proyecto para la galería. 70% blanco roto. 20% negro mate. 10% rojo sangre. Impactante.

Los colores son emociones. El diseño, su manifestación.

¿Qué es la teoría del color en diseño digital?

La teoría del color en diseño digital es el estudio de cómo se perciben, combinan y usan los colores para crear efectos visuales específicos en pantallas.

Uf, la teoría del color digital, qué lío a veces. Es como entender que no es solo elegir un color bonito y ya. Es más profundo. Mi jefe siempre dice, "el color habla". ¿Y sí que habla, no? Es que es todo un universo de significado y cómo impacta en la gente.

Pienso en el RGB, claro, rojo, verde, azul, que es lo que vemos en el móvil o en la pantalla de mi ordenador. Es aditivo, o sea, que si los pones todos al máximo... blanco. No como cuando pintas, que se hace negro. Ese cambio me voló la cabeza la primera vez. Es luz.

Y luego, la psicología. ¿Por qué el rojo te da hambre, o te pone alerta? ¿Por qué el azul calma? Cada color tiene su vibración, su mensaje. El otro día con un cliente, quería todo en naranja chillón para una app de finanzas. ¡Finanzas! Le tuve que explicar que quizás no era la mejor idea para la confianza. Casi me cuesta el proyecto, jeje.

Importante también el contraste. Mucha gente se olvida de eso, ¡y es clave para que se lea bien! Para la accesibilidad, vamos. Mi hermana tiene problemas de visión, y siempre me recuerda que piense en los colores para ella. ¿Cómo puedo hacer que mi diseño sea usable para todos? Esa es la pregunta que me hago.

Es que en lo digital es complicado porque lo que ves en una pantalla no es lo mismo que si se imprime. Ahí entra el CMYK, cian, magenta, amarillo y negro, para la imprenta. Es sustractivo. Un rollo pasar de uno a otro y que los colores salgan igual. Siempre hay que calibrar los monitores, es mi mantra cada lunes.

Ahora mismo, estoy con un proyecto para una marca de ropa nueva. Tengo que usar colores pastel según el briefing, porque este año 2024 las tendencias tiran mucho por ahí. Verdes menta, rosas empolvados... La paleta me está costando, llevo como cinco versiones ya. Parece fácil, pero no lo es.

Hay herramientas, claro, muchísimas. Me gusta Adobe Color para empezar, o Coolors. Para esto, hay que entender:

• Armonías de color: Complementarios, análogos, triádicos.
• Saturación: La intensidad del color, ¿es vibrante o apagado?
• Valor/Luminosidad: Lo claro u oscuro que es.
• Tonalidad (hue): El color "puro" en sí mismo, rojo, azul, etc.

Al final, es práctica. Mucha práctica. Y no tener miedo a experimentar. Mi primer logo era un desastre de colores que no pegaban ni con cola. Ahora miro mis trabajos y veo el avance. El color es un lenguaje que se aprende. Y se siente, vaya que sí se siente.