Color en el diseño de la interfaz de usuario: un marco (práctico)

Siendo bastante autodidacta en cuanto al diseño de UI, siempre me he preguntado por qué tantos artículos y libros hablan sobre teoría del color y paletas. En mi experiencia, el uso de una "paleta complementaria dividida" es aproximadamente 0% predictivo de que yo haga diseños atractivos.

Tengo otra palabra para ese tipo de cosas: inútil.

Entonces, si la teoría del color no proporciona una base sólida para el color en el diseño de la interfaz de usuario, ¿qué lo hace?

Déjame decirte algo: modificaciones de color. Es el ajuste del color lo que cuenta, no la elección del sombrero de la teoría del color.

O, dicho de otra manera: la habilidad fundamental de los diseños de interfaz para colorear es poder modificar un color base en muchas variaciones diferentes.

Sé que esto suena un poco extraño. Escúchame. Voy a darle un marco para ajustar el color en sus diseños de interfaz de usuario.

Este marco:

  • Le permite modificar un color de tema básicamente para cualquier propósito en su interfaz de usuario (esto es muy poderoso y, como veremos, qué aplicaciones como Facebook ya están haciendo)
  • Ayudarle a predecir qué cambios de color se verán bien
  • Hacer que el color parezca menos subjetivo ("subjetivo" es a menudo una palabra para "no he descubierto cómo funciona", y es una palabra que se escucha mucho cuando la gente habla de color)

¿Nosotros somos geniales? ¿Estamos bien?

Excelente.

Variaciones más oscuras y más claras

Una cosa que he notado en muchas interfaces atractivas es que a menudo tienen variaciones más oscuras y claras en un color de tema en particular.

No pensaste que la barra de búsqueda era solo una superposición negra translúcida, ¿verdad? Alerta de spoiler: no lo es. Ninguna opacidad del negro superpuesto en ese azul le dará el color de la barra de búsqueda. Es una variación elegida por otra magia.

Rápido, ahora mire Swell Grid, la hermosa aplicación de pronóstico de surf.

Sha-BAM. Acabamos de ser golpeados con un bote lleno de variaciones. ¿Cuántos hay? Vaya al sitio web y cuéntelos usted mismo. Prácticamente todo en esta página es una variación del azul inicial.

O, aquí hay otro ejemplo simple:

Incluso los estados de los elementos son variaciones de un color. Esto no se describe mejor como "una paleta de 3 azules". Es un azul con variaciones.

Pero esto plantea la pregunta: ¿cómo se modifica realmente un color para obtener buenas variaciones?

Llegaremos allí, pero quiero que entiendan estas cosas desde cero. Así que aquí están nuestros 2 principios de confianza para resolver esto:

  1. Buscaremos señales de referencia en el mundo real. Aunque nuestras interfaces son "falsas", todavía copiamos como locos del mundo real, porque después de décadas de ver las cosas en el mundo real, solo esperamos que la luz y el color funcionen de ciertas maneras.
  2. Utilizaremos el sistema de color HSB. En resumen: es el sistema de color más intuitivo con un uso amplio (para mis propósitos, Sketch y Photoshop). Si no sabe qué tono, saturación y brillo son, rompamos y volvamos a encontrarnos en 10.

Variaciones de color del mundo real

Muy bien, mira a tu alrededor. ¿Qué "variación de color" está viendo, sin duda, dos docenas de veces cada vez que mira alrededor de su habitación?

Oscuridad.

Puede pensar en una sombra como una variación más oscura en un color base.

Foto de David Blaikie.

¿Conmigo?

Ahora pasemos a Sketch y obtengamos nuestros selectores de color y descubramos exactamente qué sucede cuando una sombra cae sobre nuestra pared de coral.

Como mencioné, lo resolveremos en HSB.

Nota: los perfiles de color de monitor / imagen pueden hacer que estas medidas exactas sean diferentes para usted.

El brillo se mueve hacia abajo - OK, eso fue bastante obvio. Pero espere: antes de ir a generalizar demasiado, veamos otro ejemplo.

Foto de Matthias Uhlig

¿Las sombras funcionan de la misma manera en Cuba? Estamos a punto de averiguarlo.

Muy bien, ahora podemos comparar y contrastar. ¿Ves un patrón?

Cuando hay una variación sombreada de un color, puede esperar que el brillo disminuya y la saturación aumente. Acabamos de ver esto en dos casos, pero por lo que he visto, es una regla sólida que puedes seguir.

Ahora el tono es un poco más loco: bajó por la sombra de la pared de coral y subió por la sombra de la pared de color verde azulado. Hay una explicación para eso, pero es mucho menos importante y un poco más esotérico que la saturación / brillo, por lo que volveremos al tono más tarde.

Las normas

Vamos a desempaquetar estos conceptos un poco más.

Variación de color más oscuro = mayor saturación + menor brillo

Si vuelve a mirar nuestro ejemplo de la barra de búsqueda de Facebook, verá que eso es exactamente lo que está sucediendo.

El tono se mueve 1 ° de 360 ​​°, lo que es prácticamente un error de redondeo.

La saturación aumentó a medida que disminuyó el brillo. La razón por la que la barra de búsqueda no puede ser una opacidad de negro superpuesto en la base azul es porque, en HSB, agregar negro es equivalente a reducir el brillo. En cambio, queremos reducir el brillo al mismo tiempo que agregamos saturación. ¡El negro no agrega saturación a nuestro color!

¿Por qué, en el mundo real, los colores más oscuros están correlacionados con saturaciones más altas? No tengo la menor idea. Pero siempre puedo inventar algo: es porque a medida que la intensidad de la luz (brillo) supera la intensidad del color (saturación), el color necesariamente se desvanece, y viceversa.

Eso podría ser BS completo, pero tiene sentido, ¿verdad?

Variación de color más claro = saturación más baja + brillo más alto

Ahora, siendo los lectores exigentes y eruditos que son, probablemente adivinaron que la transformación opuesta que nos da variaciones más oscuras nos dará variaciones más claras.

Y lo has clavado, por Dios.

Por supuesto, podemos ir un paso más allá. Si seguimos bajando la saturación y aumentando el brillo hasta que las vacas vuelvan a casa, ¿dónde terminamos?

Aquí:

Terminamos en blanco.

Puede pensar en hacer variaciones más ligeras como agregar blanco. Y hay dos formas muy simples de agregar blanco a un color en Sketch et al:

  1. Reduzca la opacidad del elemento (si está sobre un fondo blanco)
  2. Agregue una capa translúcida de blanco sobre el elemento

La cosa más importante

Si recuerda solo una cosa de este artículo, recuerde esto:

Las variaciones de color más oscuras se realizan disminuyendo el brillo y aumentando la saturación. Las variaciones de color más brillantes se hacen aumentando el brillo y disminuyendo la saturación.

Con esta idea simple, podrás hacer cosas increíbles con un solo color.

La verdad es que muchas variaciones de color entre elementos, o incluso estados del mismo elemento, son simples modificaciones de color.

Aquí está Harvest, la aplicación de seguimiento del tiempo que uso y amo.

Mira el encabezado. El estado de desplazamiento es más ligero. El estado seleccionado es más oscuro.

O mira el botón verde Nueva entrada.

El estado de desplazamiento es una variación más oscura: mayor saturación, menor brillo.

Usarás esto una y otra vez.

Para ser justos, no todos los diseños siguen esta regla el 100% del tiempo. En el encabezado Harvest anterior, el estado seleccionado es solo un brillo más bajo (saturación sin cambios) y el estado de desplazamiento es solo una saturación más baja (brillo sin cambios). Pero hemos visto cómo funciona el color en el mundo real, y sabemos que por qué estos diseños se ven bien es porque se aproximan a los principios establecidos aquí.

¿Qué hay de Hue?

Hablando de aproximar los principios establecidos aquí, deberíamos hablar de matiz. También lo dije anteriormente, pero vale la pena repetirlo: el tono es tan secundario a toda la saturación y el brillo del movimiento en direcciones opuestas que a menudo puedes ignorarlo por completo al hacer ajustes de color.

Dicho esto, aquí está la explicación más breve.

En primer lugar, cada color tiene una especie de "brillo percibido". Esto se llama luminosidad.

A pesar de que este azul y este amarillo tienen un brillo HSB del 100%, ¿qué parece más brillante?

Quiero decir, pregunta a alguien fuera de la calle: ¿cuál es más brillante?

"Um. Amarillo. ¿Amarillo?"

Gracias rando. Acabas de descubrir la luminosidad.

"¿Entonces tengo razón?"

Si, si lo eres. Incluso si mantiene el brillo y la saturación constantes, y solo varía los tonos, obtendrá un rango de luminosidades o brillos percibidos, que medimos en valores entre 0 y 100.

Estos son nuestros tonos en intervalos de 30 °, todos al 100% de saturación y 100% de brillo.

Y aquí están nuestros tonos duplicados, colocados en el modo de mezcla de Luminosidad (sobre un fondo blanco, que es crítico agregar si está siguiendo en Sketch), y superpuestos con el brillo del gris resultante. Esto nos da una medida de la luminosidad del color original.

En el modo de mezcla Luminosity, un gris brillante significa alta luminosidad y un gris oscuro significa baja luminosidad. Si lo piensas por un segundo, esto tiene mucho sentido.

Ahora, te imprimí los números, pero el cuadro vale mil números, ¿verdad?

Mira, Sherlock, un patrón.

Y este patrón particular responde nuestra pregunta desde arriba. ¿Recuerdas cómo vimos que a veces, para una sombra, el tono se desplazaría hacia abajo y a veces hacia arriba? ¿Porque hace eso?

Bueno, primero, observe que este gráfico tiene tres puntos máximos y tres puntos mínimos. Los puntos bajos son rojo, verde y azul. Los puntos altos son cian, magenta y amarillo.

¿Estos colores particulares suenan una campana? Sí. RGB y CMY son sistemas de color populares, pero ignore eso por ahora, porque lo está desviando.

Lo importante es esto: si no cuenta la saturación y el brillo, cambiar el tono hacia rojo (0 °), verde (120 °) o azul (240 °) disminuirá la luminosidad o la claridad percibida del color. Y cambiar el tono hacia amarillo (60 °), cian (180 °) o magenta (300 °) aumentará la claridad percibida del color.

El truco consiste en hacer que el movimiento del tono coincida con el movimiento de la saturación y el brillo. Si desea una variación más oscura, mueva el tono hacia rojo (0 °), verde (120 °) o azul (240 °), el que esté más cerca, y viceversa (con cian, magenta y amarillo) para variaciones más claras. (Por supuesto, esto supone que también está disminuyendo el brillo y aumentando la saturación)

Es por eso que la sombra en la pared de coral cambió de tono: estaba cambiando hacia el rojo, a 0 °, que es el punto mínimo más cercano a 21 °.

Y es por eso que la sombra en la pared verde azulado cambió de tono: estaba cambiando hacia el azul, a 240 °, que es el punto mínimo más cercano a 194 °.

¿Alucinado todavía?

El camino del color

Entonces, cuando se trata de variaciones de color, pregúntese: ¿necesito simplemente una variación más clara u oscura en un color que ya tengo?

(Y si buscas algo limpio y simple, la respuesta es muy, muy a menudo sí)

Variaciones más oscuras:

  • El brillo disminuye
  • La saturación aumenta
  • El tono (a menudo) cambia hacia un mínimo de luminosidad (rojo, verde o azul)

Variaciones más ligeras:

  • El brillo aumenta
  • La saturación disminuye
  • El tono (a menudo) cambia hacia un máximo de luminosidad

Esto le permitirá tomar un tono, pero modificarlo infinitamente para todas sus necesidades de IU, utilizando variaciones más oscuras y más claras cuando corresponda.

Una interfaz con un color y muchas modificaciones.

Acabo de preparar un ejemplo rápido aquí. Una interfaz completa que se construye de un solo color. Diga ... ¿le resulta familiar ese tono verde azulado?

Ahora he sido bastante breve con todo esto. Todavía hay muchos temas para cubrir:

  • ¿Cómo es el tono aún más importante en gradientes y visualización de datos?
  • Cuando estás en Sketch (etc.), ¿qué técnica utilizas para hacer variaciones más oscuras?
  • ¿Mueves más la saturación o el brillo?
  • ¿Cómo encuentras grises que coincidan con tu esquema de color?
  • ¿Cómo eliges colores totalmente no relacionados que se vean bien juntos?
  • ¿Cómo lo arreglas cuando los colores chocan?
  • Y, por supuesto, ¿por qué RGB y CMY son los puntos bajo / alto en el gráfico de luminosidad?

Me alegra que lo hayas preguntado.

Presentamos ... Aprenda diseño de interfaz de usuario

He estado trabajando duro los últimos 11 meses para crear el curso de video en línea más completo para aprender las habilidades prácticas del diseño de la interfaz.

Estamos hablando de todo aquí:

  • Color
  • Tipografía
  • Diseños
  • Proceso
  • Diseño de respuesta
  • Y más…

El curso es de más de 16 horas de video en más de 30 lecciones de video.

En casi todos los videos, me verás diseñar en Sketch. Esto es importante. No estoy enseñando un marco teórico aquí. En cambio, todo lo que le muestro son los consejos, trucos y marcos que uso para diseñar interfaces todos los días. Piense en ello como mirar por encima del hombro mientras le enseño todo lo que sé.

Por ejemplo, en el video de Espaciado (y sí, es un video de 50 minutos enteramente en espacios en blanco), comienzo con un ejemplo simple basado en texto, hablando sobre cómo abordar el espaciado entre letras, el espaciado entre líneas, el espaciado entre párrafos, el espacio entre el título y el cuerpo, el espacio junto al texto, etc.

Eso culmina en mí hablando de los 3 principios más importantes del espacio. Luego, en la segunda parte del video, realizo un rediseño de la página de inicio de 350.org, centrándome específicamente en mejorar el uso de espacios en blanco. Se basa en todos los conceptos que acabamos de presentar. Finalmente, analizo algunos casos en los que ves estas reglas estiradas, como las páginas de destino o las tablas con muchos datos.

Esto es lo que la gente dice:

"Aprender el diseño de la interfaz de usuario es como aprender a volar un avión sentado en la cabina con el piloto. Erik está constantemente diseñando / rediseñando ejemplos del mundo real justo en frente de usted, explicando por qué X es bueno o malo, y cómo ir sobre hacerlo aún mejor ".
 - Mudassir Ali, ingeniero frontend, Canva
“El enfoque directo de Learn UI Design, ilustrado con ejemplos y tutoriales de la vida real, fue extremadamente útil y revelador. Recomiendo encarecidamente este curso a los diseñadores de UX que deseen agregar diseño de interfaz de usuario a su kit de herramientas ".
 - Sarah Kim, jefa de diseño de UX
"¡El enfoque pragmático de Erik para el diseño me ha enseñado infinitamente más de lo que nunca leyeron los libros de diseño! Lejos de los libros, y un video más, por favor.
 - Anders Nysom, desarrollador independiente

Si eres un desarrollador, diseñador de experiencia de usuario o PM, y quieres agregar diseño visual a tu conjunto de habilidades, este curso está hecho a medida para ti. Súbete a learnui.design para más.

Y sí, tengo el mejor nombre de dominio, gracias por mencionarlo.

Dos complementos finales antes de despedirnos: tengo un boletín de diseño al que envío intencionalmente muy pocos pero muy valiosos artículos de diseño (como el anterior). Si desea ver cosas como esta todos los meses (o 6) en su bandeja de entrada (básicamente todo inédito en cualquier otro lugar), debe tomarse un momento e inscribirse.

Finalmente: ¿necesita un diseñador de UX / UI independiente? Contratame.