Repasando grandes productos o aplicaciones que usamos todos los días podemos descubrir esta tendencia: La complejidad de la interacción tiende a ser inversamente proporcional a la cantidad de colores.
Stripe es un gran ejemplo. Un landing page o una página de ventas tiene un nivel de interacción muy bajo. El objetivo principal está muy claro: comprar, suscribirse, iniciar, etc. UnCall to Action.
En estos casos la cantidad de color tanto en volumen como en variedad puede ser muy alta.
Pero cuando vamos a su dashboard la interacción es mucho más compleja, los objetivos del usuario son otros y el manejo del color es mucho más medido.
2. Variaciones de color
¿Cómo aprovechamos cada color para que sea funcional, predecible y aún así transmita el espíritu de una marca? Este es el gran reto del diseñador de interfaces a nivel de color.
La respuesta está en las variaciones: ligeras transformaciones de un color para construir todos los componentes que necesitemos. Veamos un par de ejemplos:
Esta es la vista móvil de Quora: 1 color principal y 2 variaciones.
Ahora Facebook: 1 color principal y 2 variaciones. Un poco más interesante que Quora. ¿Por qué?
El camino fácil para obtener variaciones de color es tomar nuestro color principal y llevarlo hacia el negro para obtener una variación más oscura o hacia el blanco para obtener una versión más clara. Eso hizo Quora y aunque funciona no deja de ser un poco aburrido.
Como seres humanos estamos acostumbrados a ver variaciones de color muy complejas todo el tiempo. En cualquier objeto de un solo color vemos variaciones por condiciones de luz, temperatura, reflejo, ambiente, etc. Por esto una variación tan pobre como la anterior no es muy interesante.
Usemos el mundo real para obtener variaciones más interesantes
Al ver con detenimiento el panel de color tenemos un comportamiento menos predecible pero un resultado mucho más interesante:
Profundicemos en el color digital
El modelo de color con el que estamos acostumbrados a trabajar es el RGB, combinación de valores de 0 a 255 para cada canal. Ahora veamos uno muy útil:
HSB
Hue Matiz
Escala de 0 a 360 de todos los colores "puros".
Saturation Saturación
Escala de 0 a 100 dónde 100 es la saturación máxima de un color y 0 es blanco
Brightness Brillo.
Escala de 0 a 100 siendo 100 el color limpio y 0 el negro puro
Volviendo a las muestras hay unos valores interesantes. En la variación oscura la saturación aumentó y el brillo bajó, al contrario de la variación clara donde la saturación bajó y el brillo aumentó.
Esto ya es un patrón repetible:
Al aplicar esto a un solo color ya podemos obtener suficientes variaciones interesantes:
3. El Gris es MUY importante
Una escala de grises es fundamental en nuestra paleta de color. Permitirá que los colores principales sean valiosos y mantendremos la atención del usuario dónde realmente importa. Aquí también podemos tomar el camino fácil y elegir algunos grises entre el negro y el blanco:
Pero de nuevo, son muy aburridos para nuestra experiencia visual. Si utilizamos lo aprendido con el modelo HSB lograremos una paleta mucho mejor. Tomemos los extremos de las variaciones y bajemos su saturación para neutralizarlos un poco:
Con estos extremos ya podemos hacer nuestra paleta de grises. Y definitivamente es mucho más interesante que la anterior:
Con un solo color hemos logrado una paleta versátil, útil y sobre todo Interesante. Podemos arriesgarnos un poco más y tener un color secundario, como cereza del pastel. Ya sabemos los fundamentos:
4. ¿Y el negro?
La recomendación tradicional nos dice que jamás olvidemos el blanco y evitemos el negro absoluto. Simplemente porque genera un contraste muy fuerte en las pantallas que cansan la vista. Esto sigue siendo cierto sin embargo hay que tener en mente el caso inverso.
La masiva adopción de "versiones nocturnas" en aplicaciones nos obliga a tener presente paletas invertidas dónde el background será negro absoluto, allí tenemos que "evitar" el blanco.
Estos consejos nos ayudarán a crear muy buenas paletas de color en interfaces, aunque siempre nos encontraremos con colores difíciles de manipular. Déjame en los comentarios las dudas y con gusto lo resolvemos.
Excelente, normalmente trabajo con el color negro, pero esto me ha hecho querer probar con otros colores y saber como hacer combinaciones Geniales.
Excelente combinación 💪 Se ve muy bien!
:clap: :clap: :clap: :clap:
Estoy trabajando en un emprendimiento🚀, espero su feedback en la paleta😌
A mi me parece muy bueno, sin embargo siento que la ultima linea podría sobrar
Excelente paleta, muy buen trabajo. Gracias por compartirlo, saludos. 👋😃
Me encantó
Me fascina el diseño de interiores.
Aplicando lo aprendido 😃
Una paleta muy interesante que funciona muy bien!
Sigue así.
¡Excelente información!, les comparto una de mis ilustraciones y la paleta de colores .
Genial, que buen trabajo, gracias por compartirlo. Un abrazo. 😃💛
Que lindo Lion!
Esperando el dark mode en Platzi 💚.
x2
Me llama mucho la atención la idea de las versiones nocturnas. Para una app ya creada, rediseñar su imagen para este tipo de opciones debe ser interesante.
Justo lo que estaba pensando :)
Totalmente , creo que todas deberían de tenerlo salvo excepciones.
Intente hacer una paleta con un color frío
.
2 - Evitar el negro absoluto, con una paleta de grises.
3 - La regla que se aplica al negro se invierte al pensar productos en modo nocturno.
Me adhiero a tus claves, las tendre en mi sección de herramientas al incurrir en el manejo del colores.
Hay que hacer muchos ejercicios de paleta de color antes de considerarse un verdadero experto.
Hola, una pregunta en donde se puede realizar esa actividad?
La puedes realizar con algun programa de adobe, yo utilice illustrator
Muy buena!
Buena tarde Jessica:
Se refiere al texto oscuro sobre un fondo claro es superior al texto claro sobre un fondo oscuro, es decir, es más fácil de leer. Produce menos fatiga visual cuando se leen caracteres oscuros sobre fondo blanco.
Un dark mode usa gris oscuro como fondo porque produce menos contraste que texto blanco sobre superficie negra. Ademàs emiten bajos niveles de luz mientras mantienen un alto nivel de usabilidad. Normalmente es un modo complementario que el usuario puede activar (o desactivar), Actualmente, la autonomía de las baterías es un problema y el dark mode es una solución potencial para este problema Un tema oscuro usa gris oscuro, en lugar de negro, como el color de superficie principal para los componentes.
Te felicito sin lugar a dudas resolverás su inquietud :)
Gran tema, ya me siento intrigado por tratar casos practicos.
