Diseñando en color

El color es una fuerza poderosa en manos de un diseñador. Atrae su atención, evoca emociones y comunica significado. Para darle una idea de lo importante que es el 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 eso, el uso eficaz del color es importante para los diseños. Pero también es difícil crear diferentes combinaciones de colores. Cada color tiene su propio significado y existe una infinidad de combinaciones.

Este artículo está diseñado para servir como guía para ayudarlo a crear paletas de colores para sus diseños. Te anima a explorar más con el color, lo que te 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

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. El 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 tu diseño? ¿Ser informativo? ¿Convencer?
  • ¿Qué emociones quieres que evoque tu diseño?

El propósito de su diseño debe servirle como guía al elegir su paleta de colores.

Identifica tu audiencia

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 en las personas según 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 del color son universales para 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 entre 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 prosperidad y felicidad.

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

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

Revisar la teoría del color

Al elegir una paleta de colores, a veces es útil conocer un poco la 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.

Una buena base es Basic Color Theory de Canva y Color Theory 101 de Hubspot. Puede leer sobre una aplicación interesante de la teoría del color en ¿Por qué Facebook es azul? La ciencia detrás de los colores en el marketing.

Encontrar 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 material design, puede utilizar un sitio como MaterialUI. El equivalente de diseño plano se puede encontrar en FlatUIColors.

Esos sitios son útiles, pero intente buscar diseños que provengan de fuera del medio específico para el que está diseñando. Si lo hace, lo ayudará a crear paletas de colores inesperadamente únicas y agradables. Como ejemplo, podría mirar los diseños de interiores.

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

No tienes que ir a Corea para encontrar inspiración en el color. Está en todas partes, incluida tu vida diaria. La próxima vez que salga, deténgase para apreciar los colores que le rodean.

Cuando encuentre algo que le inspire, cree una paleta de colores para ello. Puede usar la herramienta de cuentagotas en su programa de diseño favorito para crear 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 forman parte de su diseño. Esto incluye todo, desde botones hasta tipografía. Considere cosas como qué tipo de botones usará y cómo se ve su barra de navegación.

Para ver un ejemplo de un sistema de diseño, consulte el sistema de diseño de Salesforce. Para ver aún más ejemplos, aquí hay una lista de 50 guías de estilo meticulosas que toda startup debería ver antes de lanzarse.

Es útil establecer un sistema de diseño antes de elegir una paleta de colores, incluso si es solo un boceto. 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 ceñirse 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:

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

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

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

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ía un artista 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 ellos. Mientras más, mejor. No tengas miedo de experimentar también con los colores por tu cuenta.

Al reducir las opciones de la paleta de colores, piense en las dos primeras secciones en las que 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 atraen tu atención?
  • ¿Necesitas 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 las 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, sus colores de fondo se utilizará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 aparición 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í.

Aplicar paletas de colores

Para darte una idea de cómo aplicar colores a los sistemas de diseño, echemos un vistazo a Airbnb. El color principal de Airbnb es Rausch, que lleva el nombre de la calle en la que se originó la empresa. Kazan sirve como color secundario y los dos grises se utilizan como colores de fondo.

En la mayoría de las páginas, Airbnb utiliza el gris brumoso como fondo. Puede ver que usan el rausch como su color principal para acentuar acciones importantes, como solicitar reservar un anuncio.

Kazán, el color turquesa, se usa para llamar la atención 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 rausch. El rojo, junto con el signo de exclamación, atrae inmediatamente su atención y le notifica el estado del sistema.

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

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 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 trabajar más. Piense en el color como un aditivo. Si tiene el diseño y la funcionalidad de su diseño, 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. Cual es tu proceso? No dudes en dejarme una nota o un tuit.

PD: Si te gustó este artículo, significaría mucho si presionas el botón de recomendar o lo compartes con amigos.