107

Teoría del Color en el diseño de interfaces

8308Puntos

hace 2 años

Curso de Diseño de Interfaces y UX 2017
Curso de Diseño de Interfaces y UX 2017

Curso de Diseño de Interfaces y UX 2017

Crea experiencias digitales que tus usuarios amen. Desde las etapas de investigación y el flujo de interacción, aprenderás con Sketch cómo diseñar una interfaz atractiva y funcional.

La clave para definir una paleta de color en un sitio web, una app o cualquier producto digital está en habilidad de manipular un color, no solo elegirlo.

1. Cantidad de Colores

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.

color_interfaces.png

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.

stripe_landing.png

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.

stripe_dashboard

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.

quora_color.png

Ahora Facebook: 1 color principal y 2 variaciones. Un poco más interesante que Quora. ¿Por qué?

facebook_color.png

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

Screenshot 2017-09-29 19.32.43.png

Al ver con detenimiento el panel de color tenemos un comportamiento menos predecible pero un resultado mucho más interesante:

Screenshot 2017-09-29 19.36.18.png

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

rgbvshsb.png

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ó.

Screenshot 2017-09-29 19.39.00.png

Esto ya es un patrón repetible:

Screenshot 2017-09-29 19.40.26.png

Al aplicar esto a un solo color ya podemos obtener suficientes variaciones interesantes:

Screenshot 2017-09-29 19.44.24.png

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:

Screenshot 2017-09-29 19.53.35.png

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:

Screenshot 2017-09-29 20.00.44.png

Con estos extremos ya podemos hacer nuestra paleta de grises. Y definitivamente es mucho más interesante que la anterior:

Screenshot 2017-09-29 20.05.18.png

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:

Screenshot 2017-09-29 20.12.17.png

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 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. 😊

Curso de Diseño de Interfaces y UX 2017
Curso de Diseño de Interfaces y UX 2017

Curso de Diseño de Interfaces y UX 2017

Crea experiencias digitales que tus usuarios amen. Desde las etapas de investigación y el flujo de interacción, aprenderás con Sketch cómo diseñar una interfaz atractiva y funcional.
Carlos
Carlos
@unavacaverde

8308Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
32
34440Puntos

Me gustaría aportar un grano de arena al tema del uso de colores en el diseño de productos digitales, UI / UX, y quisiera introducir el concepto de Material Design y las paletas de colores propuestas por Google dentro de este concepto.

“El Color en Material Design está inspirado en matices sólidos contrastados con entornos neutrales, con sombras profundas y realces brillantes.” -Google
Fuente

Dentro de su concepto de material design el objetivo es hacer que el diseño sea sencillo pero intencional y significativo, y para ello definió una paleta de colores, codificada y lista para usar, además de algunas herramientas en línea.

A continuación una herramienta online creada por Google para facilitar la selección de la paleta para aplicacion android basadas en MaterialDesign.
Material Color Tool

Está muy buena!
Saludos.
jjy

2
13992Puntos
2 años

La estuve probando, está bastante buena y es sencilla de usar, incluso puedes decirle el color primario y secundario que desees y la aplicación se encarga de darte las variaciones de los colores.

Otra buena herramienta es Paletton.com

0
1138Puntos
3 meses

Link caído

Ver todas las respuestas

7
3095Puntos

Genial!! me encanto este post! desde hace tiempo he estado buscando algo que explique la ciencia del color de forma basica y facil de aprender! Muy Bueno @unavacaverde

4
23539Puntos

No tenía idea de lo cool que podría llegar a ser aplicar colores interesantes, muchas gracias!

4
9834Puntos

Qué post más increíble. Siempre se me ha dificultado hacer match de colores, nunca lo había visto así. Yo creo que no sólo aplique para interfaces, hasta para pintar la casa.

Ojalá muchos diseñadores lo ponga en práctica por el bien de nuestros ojitos !!

4
6107Puntos

Genial aporte, yo siempre he sufrido a la hora de escoger colores, pero son muy buenos consejos.

Pregunta: Tiene platzi pensado crear un “Tema oscuro”?

3
34440Puntos

Que bien vaca! Excelentes consejos!
Gracias por compartirlos.
Saludos.

5
9834Puntos
2 años

Con "Muuuuuuucho"gusto

3
6289Puntos

Me gustó mucho este post Carlos, he venido haciendo algo similar tratando de generar una variación de colores base del principal, pero ahora que lo explicas así me parece excelente. Mi pregunta sería: Si la marca tiene 3 colores (principal, secundario y digamos terciario) se deben hacer variaciones por cada uno ? Saludos

3
8308Puntos
2 años

Cuantos más colores incluyas, más difícil es trabajarlos. Pero es completamente posible, piensa en Slack:
Su marca incluye muchos colores. En la app usan super bien esa amplia paleta aprovechando el contraste y variaciones pequeñas. Pero en la web llevan el color a la ilustración y en la interfaz es mucho más medido y trabajado.

Mi recomendación es que lo limites tanto cómo puedas, intenta resolver todo con 2 colores y sus variaciones.

Luego te encontrarás con otras necesidades cómo alertas, notificaciones, etc. Elementos de interfaz que necesitan colores particulares y deben tenerse en cuenta.

2

Excelente post elegir los colores para empezar un proyecto para quienes no somos diseñadores siempre es un reto… gracias por el aporte.

2
8308Puntos
2 años

Lo es. Un buen punto de partida son los colores de la marca y desde ahí empezar a construir la paleta de color

2
2464Puntos

@unavacaverde increible me encantó tu charla en el meetup y ahora este post, son cosas que nos ayudan a crecer cada día como profesionales 😉

2
9829Puntos

Genial ! el color es muy importante en nuestras interfaces.

2
568Puntos

Muy buen post. Como diseñador considero que el manejo del color es uno de los temas más complejos de llegar a controlar, sobretodo en una interfaz. Pero este post lo explica muy bien @unavacaverde, gracias!

Me gustaría añadir una recomendación: sería bueno también explicar el cambio que se hace el Hue cuando se pasa de un color base a uno más “claro” u “oscuro” pues si ven el ejemplo del color verde, también hay una variación en el Hue. Si es más claro el color, éste se acerca al amarillo, pero si por el contrario el color es más oscuro, éste se acerca más al color azul de acuerdo al Hue en el que éste este.
Y en un futuro explicar el comportamiento de los colores cálidos y los colores fríos, pues éstos tiene un comportamiento diferente respecto al uso del HSB…

1
8308Puntos
2 años

Tienes Toda la razón. Esto es una muy buena herramienta. La teoría de temperatura de color nos puede ayudar a darle un carácter a nuestra paleta. Seguro da para otro post 😉

2
1868Puntos

Buenísima aportación por parte de Carlos, vaya que si nos ayuda demasiado a los interesados en diseño 😛
Muchas gracias y tambien a jjyepez por su comentario 😄

1
7155Puntos

Guardado como herramienta en Notion para fácil acceso Link

1
18686Puntos

Ha sido muy útil el post. Gracias

1
4971Puntos

Este es uno de mis posts favoritos, tanto por el post en sí como por los comentarios!

1
3330Puntos

Qué genial. Nunca antes había visto el HSB explicado como un cono.

Solo porque no vi que nadie más lo compartiera, creo que herramienta útil para generar colores complementarios en hexadecimal es Kuler.

Por ejemplo, acá subí una foto que me gustó de Júpiter y busqué (una suerte de) colores complementarios:

Y luego fui a la rueda cromática y pude ver el código hexadecimal de cada uno 😃

1

Realmente muy bueno e instructivo. Muy practico para quienes no somos muy buenos al momento de seleccionar una paleta de colores adecuada para cada tipo de proyecto. Gracias

1
4822Puntos

algún libro de referencia?

3
8308Puntos
2 años

No uno conozco uno especifico. Hay libros increíbles sobre teoría del color tradicional como The Elements of Color de Johannes Itten o Interaction of Color de Josef Albers.

El pequeño problema es que tienen un enfoque muy pictórico. Sin embargo los recomiendo 100%

1
11808Puntos

Increíble post… 😄

1

Buenísimo!
Profundizaré más sobre el HSB que no lo conocía
Gracias Vaquitaverde!

1
8308Puntos
2 años

Con gusto. Si usas sketch haz un click sobre R G B en el picker para cambiarlo a HSB

1
10527Puntos

Que Post tan bueno, se denota la experiencia y me encanto 👍

1
9222Puntos

Esta excelente el post! Sobretodo para quienes tenemos poco conocimiento de diseño. Había leído sobre la teoría del color, pero con esta explicación, quedó super claro!!
Gracias! 😃

1
14668Puntos

Excelente post!!! sinceramente me encantó… La verdad es que como todo programador soy terriblemente malo diseñando, pero voy a guardar este post en mis favoritos para utilizarlo y mejorar al menos en lo referente a elegir una paleta de color. Muchas gracias!