Todo lo que debes saber de Colores en UI Design: Teoría y Práctica
Una serie de tips, teoría, mejores prácticas y ejemplos de como usar el color para diseñar interfaces
Esta semana estuve pensando mucho sobre los colores, hay una gran variedad de colores por usar y sobre todo en interfaces donde tenemos más oportunidades de poder sacarle provecho, usando altos contrastes, escogiendo colores más alegres y que llamen más la atención, con el propósito claro de mejorar la experiencia.
El color sin duda es uno de los personajes principales de esta historia (la interface) junto con otros personajes como la tipografía, el espacio, etc. Pero hoy quiero contarles de nuestro amigo el color.
¿Se han preguntado cómo podemos mejorar la armonía de colores en nuestras interfaces? Una de las cosas que considero muy importante cuando entrevisto nuevos UI Designers (ó Visual Designers) es su sensibilidad al color y su manejo de este. Si eres nuevo en UI o te gusta mucho diseñar productos digitales esto te podrá ayudar.
Comencemos hablando de la famosa ¨Rueda del color¨ o tambíen llamado Color Wheel. Siempre que hablemos de color, contraste, armonía; debemos tener esta imagen en nuestra cabeza:
Hay 3 cosas importantes sobre el color que deben saber: Hue, Value & Saturation. Ahora les explico cada uno de ellos :)
1. Hue
Hue es el color tal cual lo vemos, el color con su saturación en un modo natural. Por ejemplo el azul, el amarillo, rojo, etc. Sin ninguna variación de luz y oscuridad.
Otro ejemplo que te puede ayudar a entender esto sería definir hue como cada uno de los colores que ves en el círculo cromático (color wheel) sin ninguna otra alteración de luz y sombra como la imagen a continuación
2. Value
Value tiene que ver con luz y la oscuridad que tiene el color, un claro ejemplo en nuestra vida diaria es ver que cosas están más cerca a la luz y que otras en un segundo plano con más oscuridad.
Cuando nosotros caminamos y vemos cosas podemos notar como ciertos elementos cambian de día y de noche. Por ejemplo, una montaña que tiene un color marrón (este vendría a ser su hue) cuando hay mucho Sol es probable que lo veamos con cierta tonalidad extra de luz (blanco) y cuando está más lejos o en un lugar donde no cae el sol es probable que lo veamos más oscuro con ciertas tonalidades negras. Esto es el value.
Mientras mas cerca a la luz está, tendrá mas tonos de luz (+ value) y mientras más lejos de la luz está, tendrá más sombra (- value)
En UI (User Interface) el value juega un papel importante ya que al usarlo bien podemos lograr un buen contraste y también diferenciar planos en nuestra interface.
Un claro ejemplo es Material Design de Google, donde usan planos para identificar y diferenciar la importancia de los elementos, siendo los elementos en primer plano (más cerca a la luz) los más importantes. Y sabes cómo lograron esto? Pues definiendo bien el value de cada uno de sus colores :)
Resumiendo, el Value es que tanta luz o oscuridad hay en el color lo que a su vez nos da una sensación de planos. Cuando un color tiene el value al 100% da como resultado un color blanco. Cuando un color tiene el value al 0% da como resultado un color negro. Espero esta imagen te ayude :)
3. Saturation
Ahora hablemos de saturación, saturación tiene que ver con la intensidad del color, cuando saturamos un color lo que estamos haciendo es lograr un color más intenso y vivo, mientras que cuando desaturamos como resultado tenemos un color más opaco, un ejemplo de esto es que al desaturar por completo un color lo que obtenemos como resultado es un color gris.
La saturación es algo que no se puede usar mucho en el mundo impreso, eso es porque hay un cierto límite de hasta donde podemos saturar el color cuando vamos a hacer algún libro, afiche, etc. En el mundo digital no tenemos ese límite.
Vida real vs vida digital
Hay un punto importante que debemos tocar cuando hablamos de saturación en interfaces, a diferencia del mundo real donde muy rara vez vemos colores vivos e intensos en el mundo digital sí a posible lograr esto ya que usamos RGB y no CMYK. Es por eso que es muy importante usarlo con mucha responsabilidad.
Vuelve a lo básico
Cuando hablamos de color otro tema importante que escucho mucho es sobre como combinar colores. Pues algo que recuerdo mucho es mi clase de Teoría del Color, específicamente los contrastes y la armonía. Lograr contraste no siempre significa que existe armonía. Mientras más opuestos estén los colores en el círculo cromático (Color wheel) más contraste tendrá.
Para tener una armonía en los colores es necesario que entre ellos exista cierta cantidad del color del otro.
Mira esta imagen a continuación. Como ves los colores opuestos tienen más contrastes, mientras los colores cercanos tienen menos contraste pero sí es más notorio la armonía entre ellos.
La regla del 60 30 10
No, no son las medidas de una supermodelo, sino la proporción para combinar colores con éxito. Debes escoger un color dominante y usarlo en el 60% del espacio, otro secundario para que esté en un 30% y un último color para el 10% restante. Sí solo 3 colores! Es algo que se usa mucho en el diseño de interiores.
Cuando diseñemos una interface pensemos que estamos decorando nuestra sala, y cada tono de color, iluminación y posición deben ser perfectos y cumplir una funcionalidad
Como ven en la imagen se usan 3 colores. Blanco, Rosa y Verde, siendo el verde el color que da el acento. Si traemos esta metáfora a diseño de interface el color de acento lo podemos definir como el color de nuestros CTA (Call to actions)
Inspírate de la naturaleza
Sabían que el ojo humano puede ver más de 10 millones de colores! Siempre puedes encontrar una armonía y contraste en la naturaleza y en lo que ves!. Naturaleza, objetos, animales, espacios. Todo tiene una paleta de colores, solo necesitas tomar mucha atención.
Las sombras nunca son negras, ni la luz nunca es blanca 🤔
Hay algo muy común que cometemos al usar luz y sombra, es pensar que si queremos hacer una sombra necesitamos poner un color negro con opacidad y para luz debemos usar blanco con opacidad.
Si aún no te convences, solo fíjate en la vida real, siempre la oscuridad tiene ciertos tonos de su base donde es reflejada. También dependiendo del material de la base puede adquirir ciertos colores de su entorno
Como pueden ver la oscuridad nunca es negro es el tono del color del objeto con mucha oscuridad (value). Se podría decir que la sombra del limón es un verde muy oscuro casi negro y la sombra de la tabla de madera es un marrón muy oscuro casi negro. Pero nunca es negro. Negro seria solo cuando hay una total ausencia de luz.
Usa escala de grises para poner a prueba la armonía y el contraste de tus colores
Usando los colores desaturados o a escala de grises quitamos de la ecuación el hue y solo nos quedamos con la luz y la sombra que son los responsables por esa sensación de realismo y de profundidad.
Cuando nos quedamos solo con escala de grises podemos ver que hay una diferencia entre los tonos (value), hay algunos más oscuros y otros más claros. Esto nos da una sensación de armonía entre ellos y de contraste. Esto es un ejemplo de lo que sí debe pasar.
Grises con tonos de color
Hoy en día las interfaces cada vez están más cleans y más blancos, y otro personaje sale a la luz, la Tipografía. Pero en otro post hablaremos de nuestro amigo la tipografía, ahora quiero hablarles específicamente sobre el color.
El de la izquierda usa negro #000000 y el otro usa un azul muy oscuro #15163D. Parecen negros los dos, pero no lo son. ¿Por qué esto es tan importante? Mira la siguiente imagen
Al Bajarle la opacidad a los dos vemos como uno va hacia un gris y el otro a un gris con un tono de azul. Cuando usamos textos con un tono de algún color le estamos dando más oportunidades a que tengan más armonía con su entorno. ¿Recuerdan que les dije que para lograr más armonía entre colores es necesario cierta cantidad del color del otro?
Como pueden ver a simple vista los dos pueden parecer que son negros, pero uno tiene ciertas tonalidades de violeta que es un color complementario y que hace contraste con el amarillo. Al hacer esto, logramos un contraste y a la vez una armonía.
¿Entonces es malo usar negro y grises? No! .Todo depende de lo que quieras lograr. El negro es un color neutro y siempre va bien con cualquier color. Pero a veces, como el ejemplo arriba, agregando ciertos tonos de color logramos otra sensación de colores.
Ejercita tu ojo para que evolucione
Asi como vamos al gimnasio para ejercitar nuestro cuerpo, debemos ver inspiraciones para ejercitar nuestro ojo todos los días
Mucho de nosotros estamos acostumbrados a ver colores no tan saturados ni tan vivos, es normal. El mundo no es perfecto y los colores tampoco. Muchos de nosotros venimos de un mundo físico donde solo usábamos CMYK y donde el color tenía un límite.
Cuando estamos en el mundo digital las posibilidades son muchas y debemos estar preparados para poder distinguir las cosas. Un buen ejercicio que recomiendo mucho es ver inspiraciones diarias. ¿Christian como hago para ver inspiraciones diarias? Tengo muchas cosas que hacer.
Hackea tu propio sistema de tal manera que no parezca una tarea inspirarte, sino algo natural del día a día.
Algo que me ayuda mucho en esto es Instagram. Instagram ya es parte de mi día a día y al ser una red social no exclusivo para diseñadores no siento que sea una tarea. Lo que hago es seguir páginas de inspiración, donde veo a diario muchos diseños de interface y cómo aplican el color.
Pensamientos Finales
Como todo en esta vida, saber combinar colores es práctica y práctica. Es normal que al principio se nos sea un poco difícil y complicado, pero luego notarán como es más fácil. Nunca paren de aprender y de practicar. Investiguen y pónganlo en práctica.
Los invito a seguirme en mis redes sociales donde paro publicando trabajos y procesos a diarios.
- Instagram: https://instagram.com/christvizcarra/
- Behance: http://behance.com/christvizcarra
- Dribbble: https://dribbble.com/christvizcarra
- Linkedin: https://linkedin.com/in/christvizcarra/
- Twitter: https://twitter.com/christvizcarra
Muchas Gracias y espero les ayude. Cualquier feedback déjalos en los comentarios. Yo estaré muy feliz de leerlos.
