Guía para seleccionar colores para tus productos

Rojo, blanco y azul

Ocho reglas sobre las paletas de colores que todo el mundo (incluidos los que no son diseñadores) debe saber

Las interacciones humano-computadora son elementos gráficos basados ​​en UI y el color juega un papel fundamental en esto. Como Pierre Bonnard dijo una vez:

El color no agrega una calidad agradable al diseño, sino que lo refuerza.

Al diseñar un nuevo producto, a menudo es difícil decidir sobre el esquema de color debido a la infinita cantidad de combinaciones de colores posibles. En este artículo, cubriremos ocho reglas básicas que pueden ayudarlo a seleccionar la paleta de colores correcta.

1. Limite el número de colores

Aplicar color a un proyecto de diseño tiene mucho que ver con el equilibrio.Cuantos más colores uses, más difícil será lograr ese equilibrio. Obtendrá mejores resultados si mantiene un máximo de 3 colores primarios en su combinación de colores. De acuerdo con un estudio de la Universidad de Toronto sobre cómo las personas usaban Adobe Color CC , la mayoría de la gente dijo que prefería combinaciones de colores simples que dependieran de solo dos o tres colores.

Si necesita colores adicionales a los que ha definido en su paleta, utilice tonos y matices.

Cómo crear un esquema

Entonces, ¿cómo elegir esos dos o tres colores? La rueda de colores puede ayudar.

rueda de colores

La rueda de 12 colores es una herramienta importante para crear esquemas de color

Hay una serie de estándares de esquema de color predefinidos que facilitan la creación de nuevos esquemas, especialmente para principiantes:

  • Monocromático Los esquemas monocromáticos son los más simples de crear, ya que todos están tomados del mismo color, pero incluyen variaciones en matices, sombras y tonos. Los colores monocromáticos van bien juntos, produciendo un efecto calmante.

El esquema monocromático es muy sencillo para los ojos (especialmente los tonos azules o verdes). Como puede ver en este ejemplo de Facebook, el esquema se ve limpio y elegante.

  • Análogo . Los esquemas de color análogos se crean a partir de colores relacionados; un color se usa como color dominante mientras que otros se usan para enriquecer el esquema. Si bien esto es relativamente fácil de lograr, el truco está en decidir la vitalidad de los colores que estás usando, ya que todo el esquema se verá exagerado. Por ejemplo, Clear , una aplicación de tareas impulsada por gestos, utiliza los llamativos colores análogos para priorizar visualmente su conjunto actual de tareas. Mientras que Calm , una aplicación de meditación, utiliza los colores análogos azul y verde para ayudar a los usuarios a sentirse relajados y en paz.
Es

Los esquemas análogos se crean usando tres colores que están uno al lado del otro en la rueda de color de 12 radios. Clear, una aplicación de tareas impulsada por gestos, utiliza llamativos colores análogos energéticos para priorizar visualmente un conjunto actual de tareas.

calma colores analogos

La calma usa colores análogos para establecer un estado de ánimo general.

  • Complementario. En su forma más básica, estos esquemas consisten en solo dos colores que contrastan fuertemente. Este esquema se usa para atraer la atención del espectador. Cuando se usa un esquema complementario, es importante elegir un color dominante y usar su color complementario para los acentos. Por ejemplo, cuando el ojo humano ve un objeto lleno de diferentes tipos de verdes, un poco de rojo se va a destacar muy bien.
colores complementarios

Usar colores complementarios es la forma más fácil de resaltar algo.

  • Personalizado. Crear un esquema de color personalizado no es tan complicado como mucha gente piensa. Hay un truco simple que puede emplear para crear una gran paleta de colores: simplemente agregue un color de acento brillante en una paleta de lo contrario neutra (por ejemplo, un esquema monocromático tradicional). El esquema recién creado será uno que sea visualmente impactante.
la escala de grises

Agregar un color a un diseño en escala de grises llama la atención de manera simple y efectiva. Un diseño con una combinación de blanco y gris salpicado con toques de azul en el esquema de colores como la de Dropbox.

2. Inspírate por la naturaleza

Las mejores combinaciones de colores provienen de la naturaleza. ¿Porqué? Porque esos esquemas parecen naturales a la vista. Para inspirarnos solo necesitamos mirar a nuestro alrededor, si ve un color particularmente bello o llamativo en su vida diaria, intente crear un esquema a partir de allí o simplemente tome una foto de un momento hermoso y cree su esquema de color a partir de él.

colores de la naturaleza

Las mejores combinaciones de colores provienen de la naturaleza. Puede crear un esquema de color desde la toma.

3. Trate de seguir la regla 60-30-10

Esta es una regla de decoración intemporal que puede ayudarlo a combinar un esquema de colores fácilmente. La proporción del 60% + 30% + 10% está destinada a equilibrar los colores utilizados en cualquier espacio.

Este concepto es increíblemente fácil de usar: el 60% es el tono dominante, el 30% es el color secundario y el 10% es el color de acento. La idea es que el color secundario sea compatible con el color principal, pero es lo suficientemente diferente como para diferenciarlos. Tu 10% es tu color de acento. Puede ser un color para el CTA u otro elemento que desee destacar.

La regla 60 30 10

60% es tu tono dominante, 30% es color secundario y 10% es para color de acento. Esta técnica permite que el ojo se mueva cómodamente de un punto focal a otro.

4. Diseñe en escala de grises primero

Jugar con el color es divertido. Es por eso que elegir un esquema de color es una de las primeras cosas que hacemos en los proyectos nuevos. Es realmente tentador jugar con un esquema de color, pero en vez de eso, te recomiendo forzarte a diseñar primero en escala de grises. Cree un prototipo de su aplicación en un gradiente de escala de grises y utilícelo como su línea base.Diseñar en escala de grises antes de agregar color lo obliga a enfocarse en el espaciado y en la disposición de los elementos.

Agregue el color de último y solo entonces con un propósito.

agregar color con grises

Agregar un color a un diseño en escala de grises llama la atención de manera simple y efectiva.

5. Evite usar el color negro

En la vida real, el negro puro casi nunca existe. Todos los objetos “negros” que nos rodean tienen cierta cantidad de luz que rebota en ellos, lo que significa que no son realmente negros, son de color gris oscuro. Las carreteras no son negras. Las sombras no son negras.

color negro total no existe

El color de este perro es gris oscuro, no negro.

Cuando colocas el negro puro junto a un conjunto de colores meticulosamente escogidos, el negro domina todo lo demás. Se destaca porque no es natural. Muchas de las aplicaciones que utilizamos a diario tienen negros que no son realmente negros, sino grises oscuros. Por ejemplo, el color más oscuro en la barra superior de Asos no es # 000000 , es # 242424 . Así que recuerde siempre agregar un poco de saturación a su color.

asos

El color más oscuro en ASOS no es negro

6. Establecer importancia usando contraste de color

El Сolor es una herramienta que puede ayudar a guiar el ojo hacia un punto en particular. Cuanto más quieras que se destaque algo, más deberás confiar en colores contrastantes. En general, el alto contraste es la mejor opción para contenido importante o elementos clave. Si quieres que los usuarios vean o hagan clic en algo, ¡haz que se destaque!

guiar con colores contrastantes

El contraste hace que el área se vea diferente al resto de la pantalla. cuanto más quieras que se destaque algo, más deberías confiar en colores contrastantes.

7. Usa el color para afectar las emociones de los usuarios

Es un hecho bien conocido que los colores tienen un significado inherente y pueden provocar emociones. Estos significados tendrán un impacto directo en la forma en que sus usuarios perciben su producto.

Cuando elige una paleta de colores para su aplicación / sitio, no puede simplemente pensar en cómo se ven las cosas, sino también en cómo se sienten. Los colores que elija pueden funcionar a favor o en contra de la identidad de marca que intenta crear. Para comenzar, he compilado una guía de referencia rápida que cubre las asociaciones básicas con cada color (en el mundo occidental).

Rojo, naranja, amarillo

  • Rojo (Apasionado, Poderoso, Peligroso, Importante): el rojo es un color extremadamente estimulante. Da la impresión de velocidad y potencia. Es conocido como el color de la energía. Tiene efectos fisiológicos probados de aumentar la circulación sanguínea y aumentar el metabolismo . Es por eso que cuando la gente ve el rojo, lee más fuerte y más rápido. Usar rojo es una forma de captar la atención de los usuarios o resaltar un elemento individual que requiere atención.
  • Naranja (juguetona, enérgica, atractiva, barata): naranja es un color cálido y vibrante. Tiene un aura energética y es capaz de crear una sensación cálida y acogedora para sus usuarios. Algunos investigadores encuentran que el naranja denota baratura .
  • Amarillo (alegre, amistoso, estimulante, que busca atención): el amarillo es un color extremadamente versátil según el tono que elijas. El amarillo claro se asocia con el sol y, por lo tanto, comunica positividad y calidez.Tonos oscuros de amarillo (como el oro) dan la impresión de antigüedad y edad. Estos tonos más oscuros a menudo están relacionados con la atemporalidad y la sabiduría.

colores dan emociones

Verde, azul, púrpura

  • Verde (Natural, Seguro, Fresco): Verde refleja un sentido de ecologismo y cercanía a la naturaleza. También significa crecimiento, y es por eso que a menudo se asocia con negocios. Verde significa un sentido de correcto o incorrecto.
  • Azul (calmo, responsable, digno de confianza, confiable): el color azul a menudo se asocia con emociones tranquilas y relajantes. También está asociado con la fuerza y ​​la fiabilidad, dando un sentido de confianza y profesionalismo. Azul emite sentimientos de seguridad interior. Es por eso que puede ver bancos y empresas tecnológicas usando el color. Los gigantes de las redes sociales como Facebook, Twitter y LinkedIn utilizan el color azul en sus redes.
  • Púrpura (Lujosa, Misteriosa, Romántica, Espiritualidad): Históricamente vinculada a la realeza, el morado insinúa que un producto es de alta gama.

Rosa, negro, blanco, gris

  • Rosa (Femenino, Inocencia, Juventud): el rosa es más conocido por sus asociaciones con la feminidad.
  • Negro (Poderoso, sofisticado, misterioso, nervioso): el negro atrae la atención más rápido que otros colores, incluido el rojo. Es por eso que se usa más comúnmente solo para texto y acentos.
  • Blanco (pureza, salud, limpieza, inocencia): el blanco acentúa otros colores a su alrededor, por lo que es una opción popular para un color secundario.
  • Gris (Neutral, formal, sofisticación, esterilidad): el gris representa la neutralidad, puede adoptar las características de negro o blanco. Cuando se usa como color primario, da la impresión de formalidad.

Es importante mencionar que el significado de los colores puede variar según la cultura y las circunstancias. Para obtener más información al respecto, consulte el artículo Simbolismo de los colores y los significados del color en todo el mundo .

8. Haz tu diseño accesible

La accesibilidad es una consideración clave al diseñar con color. Los productos de hoy en día deben ser accesibles para todos, independientemente de las habilidades de una persona.

Evite usar solo un color como indicador

Aproximadamente el 8% de los hombres y el 0.5% de las mujeres se ven afectados por alguna forma de daltonismo. Eso es 1 de cada 12 hombres y 1 en 200 mujeres. Si bien hay varias formas de la condición, la ceguera al color rojo / verde es la más común. Una persona que padece esta forma de daltonismo generalmente tendrá problemas para ver variaciones tanto del rojo como del verde.

como se ven colores con deficiencia en la vision

Colores como se ven con la visión normal y los mismos colores que se observan con la deficiencia de color rojo-verde (Deuteranopia y Protanopia).

Como el daltonismo toma diferentes formas (incluyendo rojo-verde, azul-amarillo y monocromático), es importante utilizar múltiples señales visuales para comunicar estados importantes en su producto. Además del color, use elementos como trazos, indicadores, patrones, textura o texto para describir acciones y contenido.

no usar rojo y verde para informacion

Evite usar solo colores rojos y verdes para transmitir información, ya que puede ser una experiencia extremadamente frustrante para las personas que no pueden ver los caracteres rojos.

Evitar bajo contraste para el texto

El contraste de color es un área donde la teoría del color es crucial para la usabilidad de un diseño. Cuando use colores en el texto, tenga en cuenta que colocar dos colores con un contraste de bajo valor uno al lado del otro puede hacer que su copia sea muy difícil de leer.

no usar bajo contraste

El texto de bajo contraste es algo que puede romper la usabilidad de muchas aplicaciones.

Verifique los contrastes para asegurarse de que los colores de fondo y de primer plano aparecen con suficiente contraste para una persona daltónica o para alguien con baja visión. Realmente no es tan difícil, todo lo que necesita hacer es verificar la relación de contraste. Los ratios de contraste representan qué tan diferente es un color de otro color (comúnmente escrito como 1: 1 o 21: 1). Cuanto mayor sea la diferencia entre los dos números en la relación, mayor será la diferencia en la luminancia relativa entre los colores. El W3C recomienda las siguientes proporciones de contraste para el texto del cuerpo y el texto de la imagen:

  • El texto pequeño debe tener una relación de contraste de al menos 4.5: 1 con su fondo.
  • El texto grande (a 14 pt en negrita / 18 pt regular y superior) debe tener una relación de contraste de al menos 3: 1 con respecto a su fondo.

Buenas noticias!!, no tienes que verificarlo manualmente. Con la herramienta Color Contrast Checker puedes verificar sus combinaciones de colores con unos pocos clics.

comprobar contraste webain

Comprobador de contraste de color Webaim

Bonus: herramientas esenciales para UX Designer

Para facilitar las cosas, también proporcionaré algunas de las mejores herramientas para elegir las paletas de colores.

Adobe Color CC

Adobe Color CC (anteriormente conocido como Kuler) es una gran herramienta para encontrar, modificar y crear combinaciones de colores. Cada color en la paleta puede modificarse individualmente o seleccionarse como el color base, con unos simples clics. Las paletas se pueden guardar y agregar a una biblioteca, y hay varios esquemas de colores geniales creados por la comunidad disponible en el sitio:

herramienta adobe color cc

Adobe Color CC es una herramienta increíble que puede acelerar la exploración de varias opciones de combinaciones de colores.

Dribbble Búsqueda por color

Cuando desee realizar una investigación visual sobre el uso de un color en particular por parte de otros diseñadores, vaya a dribbble.com/colors y seleccione el color deseado.

herramienta dribble

También puede especificar el porcentaje mínimo del color que contiene el disparo (por ejemplo, el disparo es 30% azul).

Porcentaje de disparo dribble

Especifique el porcentaje mínimo de color que contiene el disparo

Material Design

Las pautas de diseño de materiales proporcionan una fantástica paleta de colores que se puede utilizar para ilustración o para desarrollar los colores de su marca. Todos los colores en esta paleta están diseñados para trabajar armoniosamente entre ellos.

paleta de colores material design

Colorzilla

ColorZilla es una extensión disponible para Google Chrome y Mozilla Firefox que incluye una gran cantidad de herramientas relacionadas con el color, incluyendo un selector de color, un cuentagotas, un generador de gradiente de CSS y un navegador de paleta.

extencion colorzilla

Coolors.co

Coolors es una poderosa herramienta para crear esquemas multicolores. Simplemente puede bloquear el color seleccionado y presionar la barra espaciadora para generar una nueva paleta. Lo bueno de esta herramienta es que no está limitado a un solo resultado: es posible recibir algunos esquemas de color simplemente modificando el punto de referencia.

herramienta de colores coolers

Una de mis formas favoritas de crear un esquema de color es usar una fotografía. Esta herramienta permite cargar una imagen y crear una paleta de colores a partir de ella.

coolors sube ftografia

Coolors le brinda la capacidad de cargar una imagen y crear una paleta de colores a partir de ella.

Simulación de ceguera de color en Adobe Photoshop

Con Photoshop, puede probar la accesibilidad de su diseño. Simplemente vaya a Ver > Configuración de prueba , y luego puede elegir entre dos tipos (Protanopia-type o Deuteranopia-type)

simulacion de ceguera en photoshop

 

NoCoffee Vision Simulator para Chrome

Para evitar problemas de accesibilidad en el diseño, es una buena idea experimentar el daltonismo al diseñar. NoCoffee Vision Simulator se puede utilizar para simular deficiencias de visión de color y condiciones de baja visión en cualquier buscapersonas. Por ejemplo, usando la configuración de “Deficiencia de Color” “Deuteranopia”, puede ver las páginas web en escala de grises. Esto lo ayudará a hacer que su diseño sea accesible para los usuarios con impedimentos visuales.

NoCoffee Vision Simulator

El color es una de las herramientas más poderosas en el juego de herramientas de un diseñador. Pero al mismo tiempo, es una herramienta difícil de dominar. Espero que las reglas mencionadas anteriormente establezcan una buena base para los futuros diseñadores. Ahora es el momento de pasar a la práctica, porque la mejor manera de ser bueno en esquemas de color es realmente crearlos.

Tomado de : https://medium.springboard.com

Dejar una opinión

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *