5 opciones de color que absolutamente debes evitar al diseñar para la web

La Web es cada vez más visual. El buen contenido sigue siendo el rey, pero es mejor que ese contenido esté envuelto en un paquete visual atractivo para que se destaque.

Para los profesionales del diseño, eso no es un gran problema. Están completamente inmersos en la teoría del color y la psicología del color.

Pero, ¿qué pasa con el creciente número de habitantes de la web que intentan mantener su contenido web al día con la creciente naturaleza visual de la web? Incluso aquellos artículos web que resumen la teoría del color y la psicología del color, aunque son excelentes para compartir los conceptos básicos del color en el diseño, pueden ser malinterpretados por aquellos que no tienen la experiencia que tienen los profesionales gráficos, lo que lleva a decisiones potencialmente desastrosas.

Entonces, ¿qué opciones de color debe evitar absolutamente en sus páginas web?

Negro puro

Comencemos con el negro, negro puro, lo que está codificado como #000000 en HTML.

¿Sorprendido? El negro está en todas partes, ¿no es así, como en el texto de la mayoría de las páginas web, el omnipresente vestidito negro y el cielo nocturno?

Bueno, el negro puro es menos común de lo que piensas. Ese verdadero negro puro #000000 es en realidad un color antinatural. No existe en la naturaleza. El negro puro requiere la absorción de todos los espectros de luz, y eso simplemente no sucede en la naturaleza. Los colores naturales son más mezclados y tenues.

El negro puro, por tanto, no es algo que nuestros ojos estén acostumbrados a ver. es duro Se destaca (que es parte de lo que hace que ese pequeño vestido negro sea tan popular). Entonces, ¿por qué no usarlo en el diseño web? Después de todo, los artículos web que abordan la psicología del color enfatizan su conexión con el glamour, la sofisticación, el poder y la autoridad. ¿Están mal esos artículos cuando fomentan el uso del negro?

No se equivocan en absoluto. El negro se puede utilizar para despertar algunas poderosas asociaciones positivas en la mente de las personas. La clave es utilizar un negro que no sea negro puro .

Debido a que el negro puro no es un color natural, es más difícil de procesar para el cerebro. Aumente su color negro del #000000 al #111111 o un gris muy oscuro similar y aún obtendrá los llamativos beneficios del color negro sin ejercer tanta presión sobre los cerebros de sus visitantes.

Colores neón en los elementos de la interfaz

Los colores neón también, aunque son llamativos, tienen la misma tendencia a abrumar el cerebro. Como colores que no aparecen en la naturaleza, no son familiares para el cerebro y son más difíciles de procesar que los colores mezclados más apagados.

Guarde los llamativos colores de neón para resaltar los gráficos y hacer que su contenido visual destaque en lugar de en los elementos de su interfaz. Y asegúrese de usarlos no solo para llamar la atención sobre el gráfico, sino también para llamar la atención del visitante sobre las partes de su página donde reside la información clave.

En otras palabras, mantenga los colores de neón fuera de los fondos donde se superpondrá texto, como fondos para su texto principal, barras laterales, cintas de navegación o botones.

Use colores más naturales, ligeramente mezclados que sean más agradables a la vista como fondos para su contenido textual. Los colores de neón como texto o en los fondos de texto tienden a cansar la vista. Esto puede dejar una impresión negativa subconsciente del sitio web y lo que ofrece, que es lo último que desea. Desea dejar a su visitante con un sentimiento positivo acerca de su negocio.

Una regla general para cubrir las dos primeras opciones de color que se deben evitar es evitar los colores que en la codificación HTML presentan los extremos en los espectros de color: los ceros y las F, especialmente en el texto y los fondos de texto. Aléjelos ligeramente de los colores antinaturales absolutamente puros y serán más fáciles de procesar para la mente, y dejarán una impresión más favorable en sus visitantes.

Combinaciones de demasiado contraste

Además de evitar colores demasiado puros, ten cuidado con ciertas combinaciones de colores.

Aunque un elemento básico de la temporada navideña, el rojo y el verde plantean una serie de problemas en el diseño del sitio, tanto que un pequeño poema entre los diseñadores dice: "El rojo y el verde nunca deben verse, sin un color intermedio".

Eso se debe a la forma en que el cerebro procesa esos dos colores. El rojo se registra como el color más cálido y estimula la actividad en el cerebro. Es el color que más rápidamente llama nuestra atención. El rojo agita el cerebro.

El verde, por otro lado, se registra como un color frío. Calma el cerebro. Poner los dos juntos pone al cerebro en la posición incómoda de procesar una imagen que al mismo tiempo intenta agitarlo y calmarlo. Deja el cerebro en conflicto. Eso no es bueno para crear una impresión favorable.

Al igual que con el uso mencionado de colores de neón en el texto o en el fondo del texto, usar rojo y verde juntos puede dejar a su visitante con una impresión subconsciente negativa de lo que ofrece que no tiene nada que ver con la oferta en sí. En cambio, esa impresión negativa proviene de la incomodidad interna de procesar los colores que chocan.

El rojo y el verde también tienen un segundo problema. Culturalmente en el mundo occidental, la gente está acostumbrada a asociar el rojo con detener o no, y el verde con seguir o sí. Nuevamente, obliga al cerebro a lidiar con un conjunto contradictorio de entradas que lo incomodan. Y cuando el cerebro se sienta incómodo, transferirá esa sensación de inquietud a tu ofrecimiento, en absoluto lo que deseas.

Aunque no tan extremo de un contraste, el mismo principio se aplica a la combinación de rojo y azul y, en menor grado aún, a cualquier combinación de los llamados colores secundarios, a saber, púrpura, verde o naranja.

El rojo y el azul crean un choque entre un color muy cálido y un color muy frío. Los colores secundarios, que son mezclas de los colores primarios (el violeta es una mezcla de rojo y azul, el verde una mezcla de azul y amarillo, el naranja una mezcla de amarillo y rojo) simplemente no se mezclan bien. Cualquiera de estas combinaciones es simplemente un contraste demasiado poderoso para que el cerebro las procese cómodamente.

Nuevamente, esfuércese por obtener colores combinados más naturales que eviten las combinaciones de esfuerzo cerebral que surgen al usar colores que están directamente opuestos entre sí en la rueda de colores, o que son opuestos en términos de calidez y frialdad.

Combinaciones de demasiado bajo contraste

Sin embargo, eso no significa que deba usar solo colores que sean casi idénticos en tono (color) y valor (oscuridad relativa). También puede ir demasiado lejos en esa dirección, creando un tipo diferente de problema para los visitantes.

Colocar texto claro sobre un fondo blanco, como rosa, amarillo, azul claro o lavanda sobre blanco, puede dificultar que los visitantes entiendan lo que dice el texto. Lo mismo ocurre con el texto oscuro sobre un fondo oscuro, como el rojo, el azul real o el magenta sobre negro.

Otras malas combinaciones específicas son amarillo sobre verde o verde sobre amarillo, y fondos rojos con negro, azul o magenta. No solo corre el riesgo de que un visitante daltónico no vea ningún texto, sino que irritará a los visitantes no daltónicos al hacer que se esfuercen por leer lo que ha escrito. Y no estamos hablando de impresiones subconscientes aquí. Estamos hablando de que están conscientemente irritados contigo por hacer que tu sitio web sea tan difícil de leer para ellos.

Este error es especialmente frecuente cuando superpone texto sobre imágenes, como en una imagen de encabezado grande en la parte superior de su página. Siempre asegúrese de que TODO su texto se lea claramente en sus imágenes de encabezado, no solo la mayoría.

Fondos multicolores

Abundan los sitios web que ofrecen fondos de textura gratuitos a los diseñadores web, y puede sentir que harán que su sitio web se destaque. Pero ten cuidado si eliges usar uno. Los fondos texturizados corren el riesgo de estar ocupados y, por lo tanto, distraer a los visitantes de su contenido. Y te enfrentas al mismo peligro de que el texto se pierda en los fondos texturizados que al superponer texto sobre imágenes.

Tenga cuidado al elegir un fondo texturizado. Evite los fondos llamativos y de choque de colores populares en los primeros días de Internet. Esos fondos a menudo se componían de pequeños diseños repetitivos con colores brillantes y contrastantes en los que el texto se perdía fácilmente.

La tendencia actual es una apariencia sutil y natural que le da a su fondo una sensación de profundidad sin distraer. Y la regla general para las paletas de colores para sitios web es usar no más de tres colores, definitivamente no más de cuatro.

La misma advertencia de tener cuidado con el uso de texturas se aplica al uso de degradados (un elemento gráfico en el que el color o la oscuridad de un fondo cambia gradualmente de una parte del fondo a otra). Evite usarlos para múltiples bloques de texto en una página. Y evita usar un degradado que incluya el color de tu texto, para que tu texto no se pierda en el degradado. Siempre coloque su texto en cuadros o en un área clara de su fondo, con suficiente espacio de otro elemento visual para que su texto se destaque claramente.

Conclusión

La elección de colores para un sitio web claramente implica más que elegir sus colores favoritos o un conjunto de colores que le gustaron en otro sitio web. Implica más que tomar una recomendación aislada de un artículo en línea, ya que todo lo que hay que saber sobre la elección del color sin aprender más.

El color es una herramienta muy poderosa en la persuasión. Si se utiliza con cuidado, puede ayudar a los visitantes a realizar una acción que usted desea que realicen. Usado sin cuidado, puede dejar a los visitantes con una vaga sensación de inquietud acerca de su negocio o incluso dejarlos conscientemente irritados con la dificultad de uso de su sitio.

Concentre sus opciones de color en los que son fáciles para el cerebro, y continúe aprendiendo cómo elegir colores que funcionen bien juntos y estará bien encaminado para diseñar un sitio donde sus colores funcionen junto con todos los demás elementos de su sitio para lograr sus objetivos.