Por @jonathanzwhite

Diseñando en color

El color es una fuerza poderosa en manos de un diseñador. Llama la atención, evoca emociones y comunica significado. Para darle una idea de la importancia del color, en un estudio ampliamente citado titulado El impacto del color en el marketing, los investigadores descubrieron que, para algunos productos, el 90% de las decisiones rápidas que las personas toman sobre los productos podrían basarse solo en el color.

Por lo tanto, el uso efectivo del color es importante para los diseños. Pero crear diferentes combinaciones de colores también es difícil. Cada color tiene su propio significado, y hay un número infinito de combinaciones por ahí.

Este artículo está diseñado para servir como guía para ayudarlo a crear paletas de colores para sus diseños. Lo alienta a explorar más con el color, lo que lo ayudará a desarrollar un sentido intuitivo para las buenas combinaciones de colores.

A medida que explora más con el color, desarrollará un sentido intuitivo para las buenas combinaciones de colores.

Elegir una paleta de colores

Pretty fly para una paleta de colores

A veces, una paleta de colores es el resultado de una inspiración repentina. Pero la mayoría de las veces, se trata de adoptar un enfoque sistemático.

Identificar propósito

Antes de hacer cualquier otra cosa, primero identifique el propósito de su diseño. Un buen diseño alinea su paleta de colores con su propósito.

Pregúntate a ti mismo las siguientes preguntas:

  • ¿Cuál es el mensaje que quieres transmitir con tu diseño?
  • ¿Cuál es el propósito de su diseño? Para ser informativo? ¿Convencer?
  • ¿Qué emociones quieres que evoque tu diseño?

El propósito de su diseño debe servirle de guía cuando elija su paleta de colores.

Identifica a tu audiencia

¿Quién es tu audiencia y cómo afecta eso a tu diseño?

Las personas perciben los colores de manera diferente. Como dijo Fairchild, el color es un fenómeno psicológico que surge dentro del observador. Los colores tienen diferentes efectos sobre las personas en función de sus preferencias personales, educación cultural y experiencias. Como tal, para comprender cómo reaccionarán las personas a su diseño, debe identificar a su audiencia.

Si bien algunos significados de color son universales en todos los públicos, otros no lo son. El verde representa universalmente la naturaleza, ya que es el color de la vegetación. Sin embargo, un color como el rojo se interpreta de manera diferente en todas las culturas. En el mundo occidental, el rojo está asociado con el fuego, la violencia y la guerra. También está asociado con el amor y la pasión. Sin embargo, países como China asocian el rojo con la prosperidad y la felicidad.

Sobre rojo chino

Debido a que los colores tienen tantos significados diferentes, es importante hacer coincidir los modelos de color mental que tiene como diseñador con los de su audiencia.

Para leer más sobre el significado de los colores en diferentes países y datos demográficos, consulte La psicología del color en marketing y branding y El significado del color.

Revisar la teoría del color

Al elegir una paleta de colores, a veces es útil conocer una pequeña teoría del color. La teoría del color es una estructura lógica y una guía práctica para mezclar colores. Abarca todo, desde la rueda de colores hasta el significado de los colores individuales.

Un buen manual es Color Theory de Design School y Color Theory 101 de Hubspot. Puede leer sobre una aplicación interesante de la teoría del color en ¿Por qué es azul Facebook? La ciencia detrás de los colores en marketing.

Encuentra inspiración

A veces es difícil visualizar la paleta de colores adecuada para su diseño. Está bien, los grandes artistas roban. O más bien, se inspiran en otros artistas.

El sospechoso habitual de la inspiración de la paleta de colores son sitios como Dribbble y Behance. Si desea encontrar inspiración de color para un estilo de diseño específico como el diseño de material, puede usar un sitio como MaterialUI. El diseño plano equivalente se puede encontrar en FlatUIColors.

Esos sitios son útiles, pero intente mirar los diseños que provienen del exterior del medio específico para el que está diseñando. Hacerlo te ayudará a crear paletas de colores inesperadamente únicas y agradables. Como ejemplo, podrías mirar diseños de interiores.

Los diseñadores de interiores usan el color para dar vida a los espacios

Si quieres algo diferente, busca inspiración de color en el diseño de otras culturas. Por ejemplo, los diseños de sets de videos musicales coreanos son conocidos por sus coloridas y llamativas paletas de colores. Cada cuadro puede servir como fuente de inspiración.

El diseño del set es una gran fuente de inspiración.

No tienes que ir a Corea para encontrar inspiración de color. Está en todas partes, incluida tu vida diaria. La próxima vez que salgas, detente para apreciar los colores que te rodean.

La inspiración del color está en todas partes, incluida tu vida diaria

Cuando encuentre algo que lo inspire, cree una paleta de colores para ello. Puede usar la herramienta cuentagotas en su programa de diseño favorito para extraer una paleta de colores y hacer ajustes si es necesario.

Establecer un sistema de diseño.

Un sistema de diseño, a veces llamado guía de estilo, es un marco que encapsula todos los elementos que intervienen en su diseño. Esto incluye todo, desde botones hasta tipografía. Considere cosas como qué tipo de botones usará y cómo se verá su barra de navegación.

Para ver un ejemplo de un sistema de diseño, consulte el sistema de diseño de Salesforce. Para obtener aún más ejemplos, aquí hay una lista de 50 Guías de estilo meticuloso que todo inicio debe ver antes del lanzamiento.

El sistema de diseño de MashCreative

Es útil establecer un sistema de diseño antes de elegir una paleta de colores, incluso si es solo un boceto aproximado. Hacerlo te dará una idea de qué elementos tienes y cómo tus colores podrían aplicarse a ellos.

Al elegir una paleta de colores para su diseño, es mejor atenerse al principio KISS (Keep it simple, stupid). Cuantos menos colores, mejor. Para la mayoría de los sistemas de diseño, la siguiente estructura es un buen comienzo:

  • Fondo
  • Acento primario
  • Acento secundario
  • Color de error
  • Color de éxito

El color primario es el color que usa con mayor frecuencia para botones y acentos importantes. Para muchas empresas, este es también el color de su logotipo.

El color secundario es el color que utiliza para diferenciar las acciones secundarias de las primarias. Por ejemplo, botones primarios y secundarios. Los colores de error y éxito, generalmente rojo y verde, transmiten estados de diseño. Por ejemplo, notificaciones de éxito o error.

Estados de diseño

Elige una paleta de colores

Ahora que está armado con inspiración y un esbozo de un sistema de diseño, es hora de elegir una paleta de colores.

Para una paleta de colores básica, me gusta poner mis colores uno al lado del otro, como lo harían los artistas para su paleta de pintura.

Este es el momento de tomar toda su inspiración de color y crear paletas de colores a partir de ellas. Mientras más, mejor. No tengas miedo de experimentar también con los colores por tu cuenta.

Al reducir sus opciones de paleta de colores, piense en las dos primeras secciones donde identificó el propósito y la audiencia de su diseño. Pregúntate a ti mismo las siguientes preguntas:

  • ¿Qué colores son accesibles?
  • ¿Qué colores tienen impacto visual y te llaman la atención?
  • ¿Necesita un esquema de color claro u oscuro? ¿A qué hora del día la gente usará su producto?
  • ¿Qué estado de ánimo quieres que transmita tu diseño? ¿Alguna paleta de colores que tienes hace esto mejor que los demás?

Como mencioné en la última sección, los colores tendrán diferentes roles en su sistema de diseño. Esto también significa que cada color tiene un peso diferente en su sistema. Por ejemplo, los colores de fondo se usarán con más frecuencia que los colores de acento.

Debido a esto, a veces es un buen ejercicio crear un diseño desechable compuesto de formas de diferentes tamaños, con cada tamaño aproximadamente igual a la frecuencia de ocurrencia y el área de superficie promedio del color en una página determinada.

Como ejemplo, aquí está la paleta de colores de Invision.

Una representación geométrica podría verse así.

Aplicando paletas de colores

Para darle una idea de cómo aplicar colores a los sistemas de diseño, echemos un vistazo a Airbnb. El color primario de Airbnb es Rausch, llamado así por la calle de la que se originó la compañía. Kazan sirve como color secundario y los dos grises se usan como colores de fondo.

Los colores de la marca Airbnb

Para la mayoría de las páginas, Airbnb usa el gris brumoso como fondo. Puede ver que usan el rausch como su color primario para acentuar acciones importantes como solicitar una lista.

Kazan, el color turquesa, se utiliza para captar y atraer la atención. Observe cómo complementa el color primario.

Para los mensajes de error, Airbnb usa un rojo claro, posiblemente un tono de rausch. El rojo, junto con el signo de exclamación, llama inmediatamente la atención y le notifica el estado del sistema.

Comience sin ningún color en su diseño. Centrarse en el diseño y la colocación de elementos. Una vez que esté satisfecho con lo que tiene, puede comenzar a aplicar su paleta de colores a su diseño.

Comience sin color y agregue lentamente desde allí

Piense en la jerarquía visual en su diseño. Considere qué componentes de diseño desea resaltar y asigne el color apropiado. Además, considere usar diferentes tonos de sus colores para cosas como los estados de desplazamiento y clic.

Envolver

El color tiene que ver con la experimentación y la iteración. Si desea mejorar en el trabajo con el color, la única respuesta es hacer más trabajo. Piensa en el color como un aditivo. Si tiene el diseño y la funcionalidad de su diseño hacia abajo, puede experimentar con tantas paletas de colores como desee.

Aprender a diseñar con colores es infinitamente valioso para un diseñador. A medida que mejora en la selección de paletas de colores, desarrolla la capacidad de visualizar combinaciones de colores en un diseño incluso antes de tocar un programa de diseño.

Me encantaría saber cómo trabajas con el color. ¿Cuál es tu proceso? Siéntase libre de dejarme una nota o un Tweet.

PD Si le gustó este artículo, significaría mucho si presiona el botón de recomendación o comparte con amigos.