Psicología Del Color Aplicada Al Diseño Web

8/18/2019 Psicología Del Color Aplicada Al Diseño Web

1/17

Psicología del Color aplicada al Diseño Web

porVerónica Valenzuela | 13/10/2015

Los colores forman parte de nuestra vida, de hecho a veces guían

nuestras decisiones casi sin que nosotros nos demos cuenta. Cada uno

de ellos transmite unos sentimientos, que pueden cambiar nuestra forma

de actuar. Son muy poderosos, así que… ¿Estás preparad@ para usarlos

en tu web?

A lo mejor hay por ahí algún “despistaillo” que no se ha dado cuentade que los colores forman parte de nuestra vida. Tanto, que a veces

son los encargados de transmitir emociones y conseguir que varíe

nuestro estado de ánimo.

ada color va unido a uno o varios sentimientos y viceversa, a cada

uno de los sentimientos podemos aplicarle un color. !i hoy me levanto

triste, el día está gris y me visto con ropa en tonos t"rreos,

seguramente sea más difícil que el día vaya a mejor. !i por el

contrario, cam#io los tonos t"rreos de mi ropa por unos vivos,

http://octuweb.com/psicologia-color-aplicada-al-diseno-web#authorhttp://octuweb.com/psicologia-color-aplicada-al-diseno-web#author


2/17

posi#lemente poco a poco vaya encontrando algo de positivismo. $

ese peque%o gesto que hacemos a diario, lo podemos e&trapolar a

todos los ám#itos de la vida.

¿Qué significado tiene cada uno de los colores?

'ue el cielo es a(ul y la hier#a verde no es ningún descu#rimiento. !i

os digo “amor” todos vais a pensar en rojo, pero y )si os digo

“cam#io”* !eguro que muchos estar"is pensando en el naranja+

omo decíamos, cada una de las emociones lleva asociado a un color

por lo que a la hora de dise%ar nuestra e#, tenemos en cuenta lo

que queremos transmitir, la elecci-n del color adecuado nos puede

ayudar a conseguirlo.

)acemos un resumen de la psicología de los colores principales*

Azul: /a(, tranquilidad, sosiego+ 0n color muy usado en eldise%o porque todas las cualidades que transmite son positivas.!in em#argo es un mal color para llamar la atenci-n porque nodestaca.

Verde: 1ás que un color es un sentimiento y una manera deser. !uele estar unido al paso anterior que lleva al 2n de unproceso, por lo que es muy usado en los #otones que validan.

Rojo: fuer(a, pasi-n+ 1uy útil para llamar la atenci-n, perohay que usarlo en su justa medida pues podemos pareceragresivos.

Naranja: 3l representante del cam#io por e&celencia, y comoveremos a continuaci-n el mejor para llamar la atenci-n so#realgo.

Amarillo: 3l color más am#iguo de todos, pasa de la alegría ala envidia con solo un cam#io de tonalidad. Al ser tan inesta#lehay que tener cuidado cuando lo usamos en el dise%o.

Rosa: 3s un color del que no se puede decir nada malo. 3stámuy unido en el dise%o a lo infantil y lo femenino.

Violeta: 0n color arriesgado porque va unido a lae&travagancia. /ero ya sa#"is, el que no apuesta no gana4

Negro: olor del lujo y la elegancia. 5uen color para el dise%opues puede com#inarse con todos los colores.


3/17

Blanco: olor de la pure(a y la sencille(, al igual que el negrocom#ina con todos los colores.

Gris: Aunque es un color casi sin carácter, es un #uencomplemento, pues quita algo de peso al color negro.

Marrón: !i con algo podemos relacionar este color, sería a lacalide( del hogar. 3n el dise%o está muy unido a alimentos quetienen ese mismo color.


4/17


5/17


6/17


7/17

nuestro color corporativo. !iempre que se cree contraste conestas llamadas a la acci-n , es un #uen momento paraintroducir el color corporativo.

Color de los links: a menudo usamos el color corporativo para

lins o títulos en nuestra página e#, pero cuidado4 !i tu colortiene fuer(a y so#re todo un alto contraste, enhora#uena,puedes utili(arlo. 3n el caso de que esto no sea así, lo siento,pero de#es #uscar un dise%o diferente para aplicar a losenlaces. /odemos su#rayarlo o ponerle fondo pero siempre hayque tener en cuenta que no podemos perder la legi#ilidad delte&to. olores como el amarillo o el verde claro no suelenfuncionar Baunque depende de la tonalidad7

Fondo de la we: para el fondo de la e# tenemos variasopciones, principalmente podemos usar una te&tura o patr-n oun fondo plano. !in em#argo, antes de tomar una decisi-nde#es sa#er esto@ la mejor com#inaci-n entre te&to y fondo, laque crea contraste y da una legi#ilidad más alta es la del te&toen negro y el fondo en #lanco. 3so es así, por mucho que nosduela. 8os patrones molan, pero úsalos siempre como fondo enuna e# en la que el te&to vaya so#re #lanco, en un dise%o detarjetas por ejemplo.


8/17

:e la misma manera, tra#ajar so#re fondos negros o oscuros no es

una #uena opci-n. 8a legi#ilidad del te&to so#re fondos negros es

peor y la vista tienda a cansarse con más facilidad. !i nuestros

colores e# son el #lanco y el negro, podemos usar este ultimo en el

footer o en el menú, lugares donde escri#iremos menos pala#ras, que

por ejemplo, como fondo para los artículos.

Conclusiones

$a que los colores van unidos a nuestros sentimientos+ usemos esto

a nuestro favor4 omo veis, si dise%amos pensando en los colores,

conseguiremos que nuestra e# sea más cercana a nuestro pú#lico y

por lo tanto nos ayudará a conseguir nuestros o#jetivos.

0na ve( sepamos el color que mejor encaja con nuestro pú#lico

o#jetivo, solo nos queda de2nir con e&actitud nuestro color principal y

encontrar una gama de colores que com#inen de forma arm-nica con

"l, teniendo siempre en mente la accesi#ilidad y legi#ilidad de

nuestros contenidos.


9/17

5 reglas sobre el color:

el éxito de un diseño

web profesional

El diseño de una página web se basa no sólo en la composición o en

las formas, si no también en la combinanción de colores. Muchos

publicistas incluso indican que la asociación de los colores a una

marca es tan fuerte, que una mala combinación puede llevar al

fracaso.


10/17

Ha que saber elegir los colores cuidadosamente, pues una visita

decide en cuestión de segundos si se queda o no en la página

web. !unque no ha reglas absolutas, tener en cuenta algunas

directrices puede audarnos a encontrar un diseño armónico.

"!#n no tienes una página web$ Elige tudiseño

%imdo es un sistema para crear fácilmente páginas web tiendas

online. Elige un diseño, añade el contenido en & minutos estará

online.

'rear página web

1. Identifica el público

obetivo de tu página web

(a importancia de elegir colores en base al p#blico al que nos

dirigimos radica en que la !a"or#a de los colores están asociados a

deter!inados grupos. (a página tiene ante todo que atraer

convencer a la visita. Es por eso que ha que seleccionar colores con

los que la visita se sienta identificada.

http://es.jimdo.com/dise%C3%B1os/http://es.jimdo.com/dise%C3%B1os/


11/17

)i el p#blico al que queremos llegar es a un p#blico másculino,

podemos utili*ar colores oscuros +como grises o negros o colores

fr-os +a*ules verdes. El p#blico femenino se identifica más con los

colores como violeta o p#rpura mientras que el p#blico /oven se

identifica más con colores planos llamativos como el naran/a o el

verde.

$. %nciende las e!ociones

0na de las propiedades de los colores es la de trans!itir

sensaciones. (os colores estimulan nuestro cerebro nos evocan

tranquilidad, seguridad, confian*a, pasión, misterio... Esto es mu

interesante desde el punto de vista del Mar1eting, a que no es

necesario dar argumentos para convencer sobre las propiedas o

beneficios de un producto o servicio.

En el siguiente art-culo puedes leer más sobre las asociaciones de

colores, marcas sensaciones.

2ero o/o3 muchas de estas asociaciones tienen un fundamento

cultural. 2or e/emplo, vestir de negro por e/emplo es ir de luto en

nuestra sociedad, mientras que en 4ndia el color del luto es en blanco.

5enlo en cuenta en las relaciones internacionales de tu negocio.

http://www.puromarketing.com/3/10927/elegir-color-adecuado-para-marca-imagen-nuestro-negocio.htmlhttp://www.puromarketing.com/3/10927/elegir-color-adecuado-para-marca-imagen-nuestro-negocio.html


12/17

&. '(ué colores seleccionar)

6tro de los aspectos a la hora de escoger los colores para nuestra

marca para nuestra página web es el equilibrio. *a ar!on#a de

colores " el equilibrio +ace que un diseño sea !ás o !enos

efectivo. "2ero qué colores tenemos que seleccionar$ 2or lo general,

se recomiendan respetar una de estas tres reglas3

7. ,olores de la !is!a ga!a cro!ática es decir, diferentes

tonos de un mismo color.

8. ,olores co!ple!entarios aquellos situados pró9imos en la

gama cromática

:. ,olores opuestos3 son aquellos situados /usto en el lado

opuesto de la gama cromática que audan al contraste.

6tra de las recomendaciones es no abusar de los colores: dos o tres

es suficiente siempre es bueno que haa un color predo!inante.

-. %fectividad del color: el contraste


13/17

El contraste de color se produce al combinar dos colores que no estánrelacionados. Esto permite por e/emplo, resaltar te9tos o imágenes.

'ombina colores claros colores oscuros para lograr este efecto

visual.

5. ,o!posición " peso de

colores;racias a los colores a las formas podemos dirigir la mirada de lavisita as- resaltar determinados elementos.

En la composición se dice que los colores cálidos, los oscuros o

tierras, pesan más que los colores fr-os, claro so pesados.


14/17

:. /ea aire " espacios en blanco para que la mirada descanse.

'0odo listo)

• ")abes a quién es tu p#blico ob/etivo con qué color se siente

más identificado$

• "'on qué color se identifica tu marca tu página web$

• "'uál de las tres reglas de la combinación vas a seguir$

• "Están los elementos colores de tu página contrastados es

el te9to legible$

• "Has pensado en qué elemento vas a resaltar en tu página

web$

-mo 3legir los olores /ara un !itio Ce#

3scrita por@ Alfredo 5i((occhi

Dace#oo !"#

Titter !#"

EoogleF $%

312

http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/http://www.ideaschicago.com/author/lfredb/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/http://void%280%29/https://plus.google.com/share?url=http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/https://plus.google.com/share?url=http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/https://plus.google.com/share?url=http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/http://www.ideaschicago.com/author/lfredb/http://void%280%29/http://void%280%29/https://plus.google.com/share?url=http://www.ideaschicago.com/como-elegir-los-colores-para-un-sitio-web/


15/17

uando se crea un sitio e#, la elecci-n de los

colores es una tarea delicada, a pesar de parecer fácil. !eleccionar una correcta

paleta cromática es importante para comunicar e2ca(mente el mensaje, crear

conciencia de marca y alcan(ar a nuestra audiencia.

8os investigadores coinciden en que los colores producen sensaciones que la

mente humana interpreta.

3l esquema de colores que utili(a su sitio e# pueden ser una herramienta muy

e2ca( para lograr que sus visitantes se sientan c-modos e interactúen con su

sitio e#, reali(ando una compra o solicitando un servicio.

Asimismo una paleta de colores err-nea puede hacer que el visitante nopermane(ca en su sitio ni siquiera unos segundos.

A pesar de que no somos muy conscientes de esto cuando visitamos un sitio

e#, los colores Gjunto al contenido y los otros elementos visualesG son los quedeterminan si nos quedamos o nos vamos.

)-mo elegir los colores*

ualquiera que sea su actividad, le presentamos unos pocos consejos que le

serán de utilidad a la hora de comen(ar su sitio e#@

H. 0tili(e una paleta de colores que se relacione con su

o#jetivo

ay que elegir los colores pensando en nuestra audiencia. 8as

personas de diferentes edades tienen diferentes reacciones a los colores.


16/17

/or ejemplo las personas de cierta edad se encuentran generalmente mas

conforta#les en sitios e# con colores más so#rios y moderados. 8os colores

mas relajantes les resultan más atractivos.

8os j-venes, por el contrario, apreciarán los colores más vivos y #rillantes.

acer la distinci-n entre pú#lico adulto y joven mediante el uso de los colores

apropiados para cada categoría es importante.

Tam#i"n tenga en cuenta la temática de su sitio e#. 8os colores tierra por

ejemplo son usados muchisimo en restaurantes latinos. 3l marr-n, el terracota,

el amarillo y el naranja funcionan muy #ien para este o#jetivo. 8os colores con

una #ase verde se relacionan con el pensamiento conservacionista y ecol-gico.

3l negro es muy apreciado como fondo para sitios relacionados con actividades

musicales o nocturnas.

?. 3sta#le(ca un fuerte contraste entre el fondo de unapágina y el te&to.

3l color del te&to de#e estar en contraste con el color de fondo. 3sto es muy

importante porque el contenido escrito es normalmente el aspecto más

relevante de un sitio e#. 0n te&to de alto contraste es el más fácil de leer, y el

te&to negro so#re un fondo #lanco es mejor com#inaci-n para facilitar lalectura. Además del #lanco, otros colores efectivos de fondo son el gris claro y

el negro.

!i lo que promocionamos es un determinado producto, lo mejor es destacarlo

usando un fondo de gran contraste para que el producto sea el centro de

atenci-n.

=. 3lija una paleta de colores y úsela en todo el sitio.

3sta es la manera de darle uniformidad y sentido de

unidad a nuestro sitio e#. ;o use demasiados colores diferentes, con tres o


17/17

cuatro es su2ciente. Todo el resto de#ería estar en la gama de estos colores

principales. A mis clientes le muestro una paleta de colores o les sugiero visitar

sitios donde para elegir una paleta de su agrado.

erramientas y !itios Iecomendados@

checmycolours.com Jnteresante utilidad para descu#rir los colores utili(adospor un sitio e# de nuestro agrado.colorcom#os.com om#inaciones de colores para sitios e#.colourlovers.com /ara divertirse navegando a trav"s paletas de colores creadaspor los usuarios. Kfrece tam#i"n patrones de colores organi(ados por categoríascomo #odas, hogar, moda, negocios, etc. 0sted puede hacer su propia paletaonline4colorschemedesigner.com /aletas de colores monocromáticos,

complementarios, triadas, etc.cssdrive.comLimagepalette ;os permite su#ir una imagen y nos devuelve lapaleta de colores correspondiente.

onclusi-n

ay que pensar en forma inteligente al elegir un esquema de colores para un

sitio e#. 3s #ien importante conocer nuestra audiencia o target y su posi#le

actitud hacia los colores. :e la misma manera es esencial elegir colores que

tra#ajen armoniosamente juntos, para crear una #uena impresi-n est"tica. /or

último, un sitio e# cuyo contenido no puede ser leido fácilmente de#ido a la

falta de contraste entre el te&to y el fondo deja a los visitantes y clientes

potenciales con una muy mala impresi-n de nuestro negocio.
http://www.checkmycolours.com/http://colorcombos.com/http://www.ideaschicago.com/www.colourlovers.comhttp://www.ideaschicago.com/www.colourlovers.comhttp://colorschemedesigner.com/http://www.cssdrive.com/imagepalette/http://www.checkmycolours.com/http://colorcombos.com/http://www.ideaschicago.com/www.colourlovers.comhttp://colorschemedesigner.com/http://www.cssdrive.com/imagepalette/

Psicología Del Color Aplicada Al Diseño Web

Documents

Transcript of Psicología Del Color Aplicada Al Diseño Web