Los colores tienen sus propios pesos naturales. El amarillo es un color naturalmente “más ligero”, mientras que el azul y el rojo se consideran naturalmente “más pesados”.
Los colores más oscuros en general se perciben como más pesados. Cuanto más matiz tenga un color (es decir, cuanto más negro se añada a un color), más pesado parecerá. Cuanto más matiz tenga un color (es decir, cuanto más blanco se añada a un color), más claro parecerá. Los colores que aparecen a continuación pertenecen a la misma tonalidad (verde y morado, respectivamente), pero tienen diferentes tintes y matices.
Cuanto más saturado está un color, más pesado parece.
Ahora, ¿qué significa esto y cómo afecta a tus diseños? En pocas palabras…
A continuación se muestra un bonito caso de estudio de toda esa teoría. Todas las texturas, formas y colores no pueden competir con el botón rojo de Play totalmente saturado en el centro (el equilibrio radial también ayuda). Además, el fondo difuminado ayuda a centrar la atención en la pantalla. Fíjate en que los colores sombreados del globo no restan atención al botón. Los botones inferiores en colores más claros, turquesa y amarillo, no compiten y son claramente secundarios. Bien hecho, diseñadores de la interfaz de usuario de Airdrop!
Considere el diseño siguiente. 3 líneas de texto frente a una sola línea que contiene una etiqueta de precio. ¿Qué elemento le llama más la atención? Bingo. La sombra ultra oscura supera claramente al tipo claro y también equilibra muy bien las 3 líneas frente a la 1 línea mediante el uso del color. Fíjate en que también hay un bonito equilibrio asimétrico entre el lado izquierdo y el derecho de este diseño, pero eso es para otro post 🙂
¡En este siguiente diseño hay una competición de pesos pesados! El fondo rosa fuerte y saturado compite un poco con el elemento oscuro del centro, que destaca gracias a su posición centrada y a su gran peso (en cuanto a tonos). Hay mucho que hacer en el fondo (y el sitio web tiene movimiento encima de todo eso), pero a pesar de toda la textura y el patrón repetido del fondo, el ojo todavía tiene un enfoque claro. Buen trabajo.
Echa un vistazo a la composición de abajo. ¿Te das cuenta de que la pareja de rojo y amarillo tiene una atracción visual mucho más fuerte que la pareja de la izquierda, e incluso la parrilla se convierte en un punto focal secundario debido al tono rojo? Los verdes no pueden competir con esos colores fuertes. De hecho, hay un poco de competencia visual entre la camisa y la parrilla rojas y el icono rojo. Eso es algo que el diseñador podría considerar y potencialmente abordar aclarando la camisa y saturando el icono un poco (esa sería mi sugerencia, de todos modos 🙂 Por supuesto, en el sitio en vivo, hay una animación al icono que insta al visitante a prestar más atención al icono: http://yadrenakopot.ru/
Así que esa es tu guía rápida de cómo el peso del color afecta al diseño de la IU. Espero que tengas en cuenta el peso del color en tu próximo diseño como una de las muchas herramientas de tu kit de diseño.