{"id":446,"date":"2020-03-04T12:00:53","date_gmt":"2020-03-04T13:00:53","guid":{"rendered":"http:\/\/www.webolto.com\/es\/?p=446"},"modified":"2023-09-25T11:19:45","modified_gmt":"2023-09-25T12:19:45","slug":"elegir-colores-sitio-web-internet-ejemplos","status":"publish","type":"post","link":"https:\/\/www.webolto.com\/es\/blog\/elegir-colores-sitio-web-internet-ejemplos\/","title":{"rendered":"Aprende a elegir los colores de tu sitio web: impacto psicol\u00f3gico y ejemplos"},"content":{"rendered":"

En un sitio web, as\u00ed como en otros aspectos generales, los colores siempre tienen un impacto psicol\u00f3gico, algunas veces est\u00e1 ligado a aspectos culturales. Por ejemplo, el blanco es sin\u00f3nimo de pureza; el amarillo representa alegr\u00eda, sensualidad o c\u00f3lera, el verde representa naturaleza, confort, y as\u00ed la lista contin\u00faa. Al momento de elegir el dise\u00f1o de tu sitio web, deber\u00e1s tener en cuenta la dimensi\u00f3n simb\u00f3lica de los colores. Estos no deben elegirse al azar, sino deben reflejar tu imagen, el posicionamiento que quieres darle a la marca, tu producto, tus historias e incluso tus valores. <\/span><\/p>\n

Este aspecto del dise\u00f1o web no es de los m\u00e1s tocados en la red, es por ello que en Webolto hemos decidido analizar el tema a detalle. Asimismo, podr\u00e1s encontrar en este post una recopilaci\u00f3n de conjuntos de colores, para que no pases horas y horas buscando y puedas elegir una combinaci\u00f3n que funcione bien para tu sitio web.<\/span><\/p>\n

<\/a>El impacto de los colores de un sitio de Internet<\/span><\/h2>\n

La labor de un dise\u00f1ador web no es para nada f\u00e1cil, como algunos podr\u00edan pensar. El especialista en dise\u00f1o debe tener en mente muchas variables para poder realizar un dise\u00f1o web profesional y, a menudo, sus tareas suelen ser muy exigentes. Por ejemplo tiene que preparar su presupuesto<\/a> o elegir un buen hosting<\/a>.<\/span> Asimismo, debe asegurarse de que la navegaci\u00f3n del sitio sea clara y fluida, aspecto importante de la experiencia de usuario<\/em> y, al mismo tiempo, debe ponerse en el lugar del internauta. Asimismo, el dise\u00f1ador debe priorizar las etapas del <\/span>t\u00fanel de conversi\u00f3n<\/span><\/i>, y de esta forma optimizar la conversi\u00f3n del sitio, teniendo siempre en cuenta los objetivos del propietario de la plataforma. <\/span><\/p>\n

A medida que el dise\u00f1o de un sitio web ha ido ganando protagonismo sobre el comportamiento de los usuarios, los dise\u00f1adores web se han interesando poco a poco en la psicolog\u00eda del usuario y, en especial, en la psicolog\u00eda de los colores<\/strong>. Si un dise\u00f1ador posee un vasto conocimiento sobre el significado de los colores,\u00a0 podr\u00e1 responder de forma m\u00e1s adecuada y optimizar el trabajo de dise\u00f1o. Al utilizar los colores id\u00f3neos, el dise\u00f1o puede ayudar a que los clientes se sientan atra\u00eddos a realizar una acci\u00f3n en particular. Asimismo, los colores tienen una influencia notable, especialmente en la conversi\u00f3n. Estos permiten atraer la atenci\u00f3n donde se necesita, enviando las se\u00f1ales correctas y generando las emociones positivas deseadas. Debajo te mostramos una breve descripci\u00f3n de la simbolog\u00eda de los colores.\u00a0<\/span><\/p>\n

\"choisir<\/p>\n

Los colores ayudan a determinar la percepci\u00f3n que tienen los clientes, en este caso en particular, los visitantes de tu sitio web, de tu marca y de tu posicionamiento. En pocas palabras, los colores influyen sobre la percepci\u00f3n y tienen un rol persuasivo. Para hacer frente al tema de la psicolog\u00eda, deber\u00e1s hacerte las siguientes preguntas: \u00bfQu\u00e9 color corresponde de mejor manera a la imagen de marca que quiero construir y al mensaje que quiero enviar? \u00bfQu\u00e9 color debo utilizar para alcanzar el \u00e9xito de mis objetivos.<\/span><\/p>\n

Diferentes estudios cient\u00edficos nos han ayudado a comprobar la relaci\u00f3n que tienen los colores de los productos y el deseo comprar. Al observar un color se desencadenan una serie de reacciones en el hipot\u00e1lamo. Se liberan hormonas en la tiroides y generan emociones junto con un impacto en el comportamiento. Est\u00e1 comprobado que entre el 62% y el 90% de las compras est\u00e1n determinadas por los colores. As\u00ed, de esta manera, la relaci\u00f3n entre los colores y la conversi\u00f3n est\u00e1 claramente establecida. Si bien concentrarse activamente en la psicolog\u00eda de los colores no es algo obligatorio durante el desarrollo web, s\u00ed deber\u00eda formar parte esencial del trabajo de dise\u00f1o de tu plataforma.<\/span><\/p>\n

Existen secciones y\/o lugares clave donde deber\u00e1s reflexionar sobre los colores a utilizar. Entre estos mencionamos los siguientes: pop-ups, banners, bordes, zonas de t\u00edtulos, fondo, im\u00e1genes hero<\/em>, im\u00e1genes del encabezado, botones (en particular los <\/span>call to action<\/span><\/i>), entre otros. La elecci\u00f3n de colores de estas zonas estrat\u00e9gicas, dependen enteramente de la audiencia a la que te dirijas. Cada imagen genera emociones diferentes y es posible generar conversiones sobre cada una de \u00e9stas.<\/span><\/p>\n

Ejemplo de <\/span>hero image <\/span><\/i>de<\/span> SquareSpace:<\/a><\/span><\/p>\n

\"\"<\/a><\/p>\n

Debajo un buen ejemplo del uso de colores de L’Or\u00e9al:<\/a><\/span><\/p>\n

\"elegir<\/p>\n

En la foto del ejemplo se utilizan diferentes tonalidades del rosa, sobre un fondo violeta. Una imagen como la anterior es atractiva, especialmente para el p\u00fablico femenino. Simboliza belleza y sofisticaci\u00f3n, las cuales corresponden a la empresa y a los productos de belleza que comercializan. La elecci\u00f3n de los colores no se dio por azar. Asimismo, no es casualidad que la p\u00e1gina de inicio de sesi\u00f3n de <\/span>Facebook<\/span><\/a>, o la p\u00e1gina de pagos de <\/span>Paypal<\/span><\/a> est\u00e9n basadas en tonos de azul. El azul inspira confianza.<\/span><\/p>\n

\"\"<\/p>\n

Contraste y luminosidad<\/span><\/h3>\n

La luminosidad tambi\u00e9n juega un rol crucial para el \u00e9xito de un sitio web. Usualmente, se suele decir que las mujeres prefieren los colores dulces, sobrios, mientras que los hombres prefieren los colores m\u00e1s brillantes. En el ejemplo de la imagen de L\u2019Or\u00e9al, podemos ver, en efecto, que los colores son mayormente brillantes. Los colores utilizados no servir\u00edan igual para un sitio web donde se vende ropa para ni\u00f1os. Igualmente, si son las mujeres las que compran ropa para sus ni\u00f1os, preferir\u00edan colores m\u00e1s brillantes en el sitio, los cuales simbolizan vitalidad, dinamismo y el vigor asociados a la infancia.<\/span><\/p>\n

Otro elemento importante a tener en cuenta son los contrastes. Estos determinar\u00e1n la legibilidad del sitio. A ning\u00fan visitante le gusta tomarse demasiado tiempo para entender el texto escrito en un bot\u00f3n o en cualquier elemento gr\u00e1fico del sitio. Por ejemplo, un texto negro sobre un call to action<\/em> predominantemente blanco pasar\u00e1 desapercibido.<\/p>\n

Al momento de crear la paleta de colores de tu sitio web, deber\u00e1s tener en cuenta todos los aspectos de los colores. Es decir, no solo los colores en s\u00ed, sino tambi\u00e9n sus relaciones y asociaciones. Las combinaciones de colores pueden tener un impacto importante en la accesibilidad y la usabilidad de tu sitio.<\/p>\n

Para comprobar qu\u00e9 combinaciones son las mejores, la mejor t\u00e9cnica es simplemente ponerse en el lugar del visitante. Como tal, debes ser capaz de leer y comprender f\u00e1cilmente el contenido y la estructura del sitio. En cuanto a la legibilidad, la psicolog\u00eda del color tiende a favorecer el naranja, el amarillo, el rojo y el azul.<\/p>\n

La optimizaci\u00f3n de im\u00e1genes tienen un impacto importante en el rendimiento de un sitio web, espec\u00edficamente en cuanto a la velocidad de carga. Una herramienta gratuita que podr\u00eda servirte para medir la velocidad de tu sitio es PageSpeed Insights de Google<\/a>.<\/p><\/blockquote>\n

<\/a>Ejemplos para el uso de colores<\/h2>\n

Moz public\u00f3 recientemente un estudio<\/a> donde muestra la mejora notable que tuvo un sitio de tragamonedas al cambiar un bot\u00f3n de color verde a amarillo. Dicho cambio aument\u00f3 la tasa de conversi\u00f3n en m\u00e1s de 180%. Les aconsejamos hacer diferentes pruebas A\/B de colores para identificar los que generen el mejor rendimiento y que tengan mayor impacto en su objetivo. Debajo les mostramos dos ejemplos puntuales de la utilizaci\u00f3n de colores.<\/p>\n

#1 El amarillo<\/h3>\n

En el mundo del marketing se dice que el amarillo refleja la serenidad. Este color puede aplicarse muy bien para aquellos negocios que comercializan juguetes o juegos para ni\u00f1os. En parte porque este color est\u00e1 asociado a la prudencia, as\u00ed tambi\u00e9n a la alegr\u00eda de vivir y a la inocencia.<\/p>\n

El amarillo tambi\u00e9n es usualmente considerado como el color m\u00e1s en\u00e9rgico. Desde una edad muy temprana solemos asociar el amarillo con el sol y, por ende, con el calor y la felicidad. Por lo tanto, los sitios web dirigidos a los ni\u00f1os, o a sus padres mayormente, tienden a apostar por este color. Claro que no es una regla absoluta, grandes cadenas como Toys R’ Us optaron por el azul.<\/p>\n

Dicho esto, es posible jugar con los matices de los colores. Por ejemplo, el amarillo oscuro sugiere antig\u00fcedad, como en los pergaminos, y podr\u00eda asociarse con sabidur\u00eda o curiosidad. Debajo tenemos el ejemplo de Moozedesign<\/a>, utilizando el amarillo como color predominante:<\/p>\n

\"Elige<\/p>\n

#2 El Verde<\/h3>\n

El color verde representa la paz, la tranquilidad y la naturaleza. Tambi\u00e9n proporciona una sensaci\u00f3n de calma, optimismo y hasta regeneraci\u00f3n. Los tonos verdes oscuros est\u00e1n m\u00e1s asociados con el dinero (como el d\u00f3lar norteamericano), y pueden ser utilizados con los sitios web que quieren transmitir riqueza, crecimiento y estabilidad financiera. Los tonos claros del verde est\u00e1n m\u00e1s asociados con la primavera, y pueden utilizarse en sitios que desean alcanzar relajaci\u00f3n, frescura y honestidad. Para los sitios web que quieren proyectar una relaci\u00f3n con el cuidado del medio ambiente, pueden elegir el verde como color predominante. Como en el ejemplo debajo del sitio Plant with Purpose<\/a>:<\/p>\n

\"elige<\/p>\n

Te invitamos a utilizar la rueda de color de Adobe<\/a> para identificar los colores que corresponden a tu marca, siempre teniendo en cuenta las reglas de la psicolog\u00eda del color y el simbolismo asociado con cada color. Como \u00faltimo consejo, no olvides que el significado del color puede variar de una cultura a otra, mientras que en algunas pueden considerarse como positivas en otras podr\u00edan ser negativas. Por ejemplo, en China el blanco est\u00e1 asociado a la muerte, mientras que en muchos pa\u00edses de Latinoam\u00e9rica est\u00e1 asociado al matrimonio y a la pureza. El violeta, considerado un color femenino en la mayor\u00eda de pa\u00edses, est\u00e1 asociado a la muerte en Brasil.<\/p>\n

<\/a>12 ejemplos de combinaciones de color<\/h2>\n

Puedes utilizar las paletas interactivas como las propuestas por Adobe m\u00e1s arriba, para elegir combinaciones de color que funcionen bien, pero no es tan simple. Para hacerlo m\u00e1s sencillo, otros prefieren copiar combinaciones ya existentes o inspirarse en ejemplos. La herramienta de dise\u00f1o online Canvas, public\u00f3 un art\u00edculo muy interesante sobre este punto, donde propone 100 ejemplos de combinaciones de colores eficaces. Podr\u00e1n encontrar para todos los gustos y temas. Buscamos entre todos y seleccionamos 12 para ti.<\/p>\n

#1 Neutralidad y versatilidad<\/h3>\n

\"Colores<\/p>\n

Los colores en este ejemplo, tonos de gris y caf\u00e9, ofrecen una gran versatilidad. Dichos colores pueden combinarse con casi cualquier otro color. Asimismo, puede ser interesante utilizar solo colores neutros como estos para tu sitio. Todo depender\u00e1 de la manera en la que apliques estos colores a tu dise\u00f1o, los cuales pueden dar una impresi\u00f3n de alta gama y sofisticaci\u00f3n (por ejemplo, p\u00e1ginas de hoteles de lujo), o tambi\u00e9n pueden inspirar sentimientos de calma y de confort.<\/p>\n

#2 Divertido y tropical<\/h3>\n

\"Colores<\/p>\n

Esta combinaci\u00f3n de colores brindan una impresi\u00f3n de alegr\u00eda, tambi\u00e9n de exotismo. Son ideales, por ejemplo, para el dise\u00f1o de una tarjeta de invitaci\u00f3n a una fiesta de verano, o para el dise\u00f1o de un p\u00f3ster de evento para ni\u00f1os. Esta paleta de colores no tiene ambig\u00fcedades: es sin\u00f3nimo de alegr\u00eda y punto.<\/p>\n

#3 Moderno y refrescante<\/h3>\n

\"Colores<\/p>\n

La combinaci\u00f3n del negro y el blanco, junto con el verde, da como resultado una paleta de colores que proporciona un sentimiento de sofisticaci\u00f3n, sin caer en la seriedad. A diferencia de la combinaci\u00f3n del blanco, negro y rojos (o azul), esta combinaci\u00f3n de verde es realmente refrescante. Algunos usos y aplicaciones podr\u00edan incluir tiendas de plantas y organizaciones en pro de la naturaleza.<\/p>\n

#4 Elegante y retro<\/h3>\n

\"Color<\/strong><\/p>\n

Los matices discretos de estos colores brindan un car\u00e1cter vintage a la combinaci\u00f3n. El azul agua y el dorado estaban muy de moda en las d\u00e9cadas de 1950 y 1960, pero no quiere decir que esta combinaci\u00f3n sea anticuada. Por el contrario, estos colores y en general la est\u00e9tica de mediados del siglo XX, han visto un resurgimiento en su popularidad en los \u00faltimos a\u00f1os.<\/p>\n

#5 Azul hielo y gris<\/h3>\n

 <\/p>\n

Al combinar un gris c\u00e1lido con azules fr\u00edos, incluso como del color del hielo, produce un efecto din\u00e1mico interesante. Esto nos da como resultado un hermoso efecto luminoso y brillante. Esto contrasta con los azules opacos utilizados generalmente.<\/p>\n

#6 Fresco y en\u00e9rgico<\/h3>\n

\"Color<\/p>\n

La combinaci\u00f3n entre azul ne\u00f3n y verde claro compensa los dos otros colores m\u00e1s serios, en conjunto tienen una frescura real. Este tipo de combinaci\u00f3n suele ser adecuada para marcas de deportivas y fitness<\/em>. Asimismo, es ideal para aquellos sitios que desean separar la seriedad del lado profesional y la sensaci\u00f3n de energ\u00eda y dinamismo.<\/p>\n

#7 Refrescante y bonita<\/h3>\n

\"Color<\/p>\n

Los tonos azul turquesa y amarillo brillante, combinados con el rosa chicle, se convierten en una refrescante paleta de colores “dulces”. Si sientes que el rosa hace que la composici\u00f3n se vea demasiado femenina, puedes quitarlo. Suficiente con combinar los verdes y el amarillo para que sea efectiva.<\/p>\n

#8 Mediterr\u00e1neo<\/h3>\n

\"Color<\/p>\n

Cualquier que haya comido en un restaurante italiano encontrar\u00e1 un gran parecido con esta combinaci\u00f3n de colores. Tienes el amarillo pasta, el rojo de la pasta de tomate y el vino. Esta combinaci\u00f3n de colores agrega un toque de calidez a tu proyecto web. Asimismo, la incorporaci\u00f3n de un color opaco como el crema, permite crear un contraste muy interesante con otros colores v\u00edvidos.<\/p>\n

#9 Elegante y moderno<\/h3>\n

\"Color<\/p>\n

El negro, el gris y el blanco combinan casi con todo. Si agregas un azul cobalto se convierte en una combinaci\u00f3n bastante neutral para la base de un dise\u00f1o actual. Esta paleta de colores se puede utilizar para todo tipo de sitios, desde sitios web corporativos hasta modernos.<\/p>\n

#10 Oscuro y atractivo<\/h3>\n

\"Color<\/p>\n

Madera oscura, cuero, libros antiguos. Los colores que encontramos en esta combinaci\u00f3n recuerdan el ambiente de los antiguos pubs de Inglaterra. Si lo que buscas es un dise\u00f1o sofisticado y ligero, puedes probar esta combinaci\u00f3n de marr\u00f3n con tonos neutros.<\/p>\n

#11 Natural y relajante<\/h3>\n

\"Color<\/p>\n

Si tienes una marca o necesitas un dise\u00f1o que enfatice el medio ambiente y lo natural, esta paleta que combina verdes y marr\u00f3n tierra es una opci\u00f3n ideal. El brillo de estos colores contrastan con los marrones opacos utilizados.<\/p>\n

#12 Oscuro tierra<\/h3>\n

\"Color<\/p>\n

Los paisajes des\u00e9rticos est\u00e1n llenos de contrastes sorprendentes. Esta paleta de colores transcribe bien estos contrastes, con suaves matices sin ser aburrida.<\/p>\n

Estos han sido los ejemplos de combinaci\u00f3n de colores. En resumen, los colores tienen un impacto importante en el rendimiento de tu sitio web, especialmente en su conversi\u00f3n. No solo es importante saber la inversi\u00f3n que debes hacer en tu sitio web<\/a>, tambi\u00e9n debes tener especial cuidado en colores que elijas, ya que deben estar est\u00e9n alineados con el mensaje que deseas transmitir y con el posicionamiento, pero tambi\u00e9n tener en cuenta la combinaci\u00f3n de los mismos.<\/p>\n

\n

<\/i>Tambi\u00e9n te puede interesar<\/span><\/p>\n