Вы находитесь на странице: 1из 17

Psicologa del Color aplicada al Diseo

Web
por Vernica Valenzuela | 13/10/2015
Los colores forman parte de nuestra vida, de hecho a veces guan
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 Ests preparad@ para usarlos
en tu web?

A lo mejor hay por ah algn despistaillo que no se ha dado cuenta


de que los colores forman parte de nuestra vida. Tanto, que a veces
son los encargados de transmitir emociones y conseguir que vare
nuestro estado de nimo.
Cada color va unido a uno o varios sentimientos y viceversa, a cada
uno de los sentimientos podemos aplicarle un color. Si hoy me levanto
triste, el da est gris y me visto con ropa en tonos trreos,
seguramente sea ms difcil que el da vaya a mejor. Si por el
contrario, cambio los tonos trreos de mi ropa por unos vivos,

posiblemente poco a poco vaya encontrando algo de positivismo. Y


ese pequeo gesto que hacemos a diario, lo podemos extrapolar a
todos los mbitos de la vida.

Qu significado tiene cada uno de los colores?


Que el cielo es azul y la hierba verde no es ningn descubrimiento. Si
os digo amor todos vais a pensar en rojo, pero y si os digo
cambio? Seguro que muchos estaris pensando en el naranja
Como decamos, cada una de las emociones lleva asociado a un color
por lo que a la hora de disear nuestra web, tenemos en cuenta lo
que queremos transmitir, la eleccin del color adecuado nos puede
ayudar a conseguirlo.
Hacemos un resumen de la psicologa de los colores principales?

Azul: Paz, tranquilidad, sosiego Un color muy usado en el


diseo porque todas las cualidades que transmite son positivas.
Sin embargo es un mal color para llamar la atencin porque no
destaca.

Verde: Ms que un color es un sentimiento y una manera de


ser. Suele estar unido al paso anterior que lleva al fin de un
proceso, por lo que es muy usado en los botones que validan.

Rojo: fuerza, pasin Muy til para llamar la atencin, pero


hay que usarlo en su justa medida pues podemos parecer
agresivos.

Naranja: El representante del cambio por excelencia, y como


veremos a continuacin el mejor para llamar la atencin sobre
algo.

Amarillo: El color ms ambiguo de todos, pasa de la alegra a


la envidia con solo un cambio de tonalidad. Al ser tan inestable
hay que tener cuidado cuando lo usamos en el diseo.

Rosa: Es un color del que no se puede decir nada malo. Est


muy unido en el diseo a lo infantil y lo femenino.

Violeta: Un color arriesgado porque va unido a la


extravagancia. Pero ya sabis, el que no apuesta no gana!

Negro: Color del lujo y la elegancia. Buen color para el diseo


pues puede combinarse con todos los colores.

Blanco: Color de la pureza y la sencillez, al igual que el negro


combina con todos los colores.

Gris: Aunque es un color casi sin carcter, es un buen


complemento, pues quita algo de peso al color negro.

Marrn: Si con algo podemos relacionar este color, sera a la


calidez del hogar. En el diseo est muy unido a alimentos que
tienen ese mismo color.

Combinacin de colores en mi web: crea contraste


Cuando diseamos nuestra imagen corporativa lo hacemos para
todos los elementos de nuestra marca. Todo debe ir en perfecta
concordancia y no puede estar diseado a la ligera. Si nuestra marca
va a ser fuerte tiene que comenzar desde el principio. Por esto hay
algunos conceptos que es mejor que tengas claros ;)

Para quin destino mi web?


Lo primero que hemos de determinar antes de comenzar con el
diseo de nuestra web, es el propsito de la misma. Voy a prestar un
servicio, consejos, informacin? De qu sexo o edad sern los
visitantes de la misma? De qu lugar geogrfico? Son algunas
preguntas que debes hacerte antes de comenzar con el diseo.
Ya sabemos que los colores no afectan a todos por igual sino que van
unidos al sexo o la edad, por lo que dependiendo de nuestro target
podremos decidirnos por unos colores u otros.

Elige tus colores, esos que solo pueden ser tuyos.


Tienes que elegir los colores que casen contigo y cuando digo contigo
me refiero con tu web y con lo que quieres conseguir con ella. Por
ejemplo, si es una pgina de salud, unos colores recomendables sern
el azul o verde, si por el contrario hablamos de lujo y exclusividad,
mejor qudate con el negro. Si tu pgina est destinada a los nios,
no olvides poner colores brillantes.
Una vez hayas decidido el color predominante para tu web, debes
decidir la tonalidad del mismo. Si mon amie, mi color es el rojo no
significa nada, hay una gran gama de colores rojo y ahora te toca
decidir cul es la tuya. No es lo mismo rojo sangre que granate, as
que animo!

Por ltimo, combnalos!


Una vez hayas hecho tu eleccin y no estemos hablando de rojo sino
de #c33020 es el momento de combinarlo. Como veremos en el
siguiente apartado, hay muchos elementos en la web que exigen

colores. A veces podemos usar nuestro color principal, pero en otros


casos hemos de irnos hacia una combinacin de ellos.
Hay muchas herramientas para combinarlos, te dejo alguna de ellas:

Colours lovers : Una genial herramienta para encontrar


combinaciones de colores. Puedes filtrar la bsqueda
introduciendo palabras significativas del uso que vayas a darle
a los colores.

El circulo cromtico : Con la ayuda del crculo cromtico


podemos conseguir combinaciones entre colores. Solo hay que
saber cmo usarlo.

Ui gradients : Aunque los ejemplos son de degradados es una


buena herramienta para saber como combinan dos colores.

Eleccin de colores para los elementos web


Ya conocemos perfectamente que significan cada uno de los colores,
por lo que debemos dar un paso ms. Podemos determinar cules son
los mejores colores a usar para cada uno de los elementos principales
de la web.
Claramente, tus colores corporativos deben estar presentes en tu
web, siendo el eje principal de la misma, pero hay varios elementos
que aparecen en el diseo web, tales como botones, en los que
debemos buscar una combinacin entre nuestros colores corporativos
y los ms adecuados para la accin que queremos que realice nuestro
usuario.

Botn de llamada a la accin: El naranja es el color


predilecto para las llamadas a la accin. Como hemos visto est
muy unido al cambio, por lo que es el mejor color para
convertir. Colores como el marrn o el gris, se sienten neutros y
sin fuerza, por lo que no llaman la atencin, y colores como el
rojo se presentan demasiado agresivos. El naranja en el punto
intermedio perfecto.

Segunda llamada a la accin: a veces en tu web, adems de


una primera llamada a la accin, necesitamos de otras
secundarias como pueden ser los botones de leer ms,
publicar comentario En algunos casos podemos mantener el
color escogido, pero tambin podemos usar uno
complementario al anterior y que vaya ms en consonancia con

nuestro color corporativo. Siempre que se cree contraste con


estas llamadas a la accin , es un buen momento para
introducir el color corporativo.

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


links o ttulos en nuestra pgina web, pero cuidado! Si tu color
tiene fuerza y sobre todo un alto contraste, enhorabuena,
puedes utilizarlo. En el caso de que esto no sea as, lo siento,
pero debes buscar un diseo diferente para aplicar a los
enlaces. Podemos subrayarlo o ponerle fondo pero siempre hay
que tener en cuenta que no podemos perder la legibilidad del
texto. Colores como el amarillo o el verde claro no suelen
funcionar (aunque depende de la tonalidad)

Fondo de la web: para el fondo de la web tenemos varias


opciones, principalmente podemos usar una textura o patrn o
un fondo plano. Sin embargo, antes de tomar una decisin
debes saber esto: la mejor combinacin entre texto y fondo, la
que crea contraste y da una legibilidad ms alta es la del texto
en negro y el fondo en blanco. Eso es as, por mucho que nos
duela. Los patrones molan, pero salos siempre como fondo en
una web en la que el texto vaya sobre blanco, en un diseo de
tarjetas por ejemplo.

De la misma manera, trabajar sobre fondos negros o oscuros no es


una buena opcin. La legibilidad del texto sobre fondos negros es
peor y la vista tienda a cansarse con ms facilidad. Si nuestros
colores web son el blanco y el negro, podemos usar este ultimo en el
footer o en el men, lugares donde escribiremos menos palabras, que
por ejemplo, como fondo para los artculos.

Conclusiones
Ya que los colores van unidos a nuestros sentimientos usemos esto
a nuestro favor! Como veis, si diseamos pensando en los colores,
conseguiremos que nuestra web sea ms cercana a nuestro pblico y
por lo tanto nos ayudar a conseguir nuestros objetivos.
Una vez sepamos el color que mejor encaja con nuestro pblico
objetivo, solo nos queda definir con exactitud nuestro color principal y
encontrar una gama de colores que combinen de forma armnica con
l, teniendo siempre en mente la accesibilidad y legibilidad de
nuestros contenidos.

5 reglas sobre el color:


el xito de un diseo
web profesional

El diseo de una pgina web se basa no slo en la composicin o en


las formas, si no tambin en la combinancin de colores. Muchos
publicistas incluso indican que la asociacin de los colores a una
marca es tan fuerte, que una mala combinacin puede llevar al
fracaso.

Hay que saber elegir los colores cuidadosamente, pues una visita
decide en cuestin de segundos si se queda o no en la pgina
web. Aunque no hay reglas absolutas, tener en cuenta algunas
directrices puede ayudarnos a encontrar un diseo armnico.

An no tienes una pgina web? Elige tu


diseo
Jimdo es un sistema para crear fcilmente pginas web y tiendas
online. Elige un diseo, aade el contenido y en 5 minutos estar
online.
Crear pgina web

1. Identifica el pblico
objetivo de tu pgina web

La importancia de elegir colores en base al pblico al que nos


dirigimos radica en que la mayora de los colores estn asociados a
determinados grupos. La pgina tiene ante todo que atraer y
convencer a la visita. Es por eso que hay que seleccionar colores con
los que la visita se sienta identificada.

Si el pblico al que queremos llegar es a un pblico msculino,


podemos utilizar colores oscuros (como grises o negros) o colores
fros (azules y verdes). El pblico femenino se identifica ms con los
colores como violeta o prpura; mientras que el pblico joven se
identifica ms con colores planos y llamativos como el naranja o el
verde.

2. Enciende las emociones

Una de las propiedades de los colores es la de transmitir


sensaciones. Los colores estimulan nuestro cerebro y nos evocan
tranquilidad, seguridad, confianza, pasin, misterio... Esto es muy
interesante desde el punto de vista del Marketing, ya que no es
necesario dar argumentos para convencer sobre las propiedas o
beneficios de un producto o servicio.
En el siguiente artculo puedes leer ms sobre las asociaciones de
colores, marcas y sensaciones.
Pero ojo: muchas de estas asociaciones tienen un fundamento
cultural. Por ejemplo, vestir de negro por ejemplo es ir de luto en
nuestra sociedad, mientras que en India el color del luto es en blanco.
Tenlo en cuenta en las relaciones internacionales de tu negocio.

3. Qu colores seleccionar?

Otro de los aspectos a la hora de escoger los colores para nuestra


marca y para nuestra pgina web es el equilibrio. La armona de
colores y el equilibrio hace que un diseo sea ms o menos
efectivo. Pero qu colores tenemos que seleccionar? Por lo general,
se recomiendan respetar una de estas tres reglas:
1. Colores de la misma gama cromtica; es decir, diferentes
tonos de un mismo color.
2. Colores complementarios; aquellos situados prximos en la
gama cromtica
3. Colores opuestos: son aquellos situados justo en el lado
opuesto de la gama cromtica y que ayudan al contraste.
Otra de las recomendaciones es no abusar de los colores: dos o tres
es suficiente y siempre es bueno que haya un color predominante.

4. Efectividad del color: el contraste

El contraste de color se produce al combinar dos colores que no estn


relacionados. Esto permite por ejemplo, resaltar textos o imgenes.
Combina colores claros y colores oscuros para lograr este efecto
visual.

5. Composicin y peso de
colores
Gracias a los colores y a las formas podemos dirigir la mirada de la
visita y as resaltar determinados elementos.
En la composicin se dice que los colores clidos, los oscuros o
tierras, pesan ms que los colores fros, claro so pesados. Busca la
armona y el equilibrio justo en el diseo de tu web.
Para ello puedes seguir estas tres reglas bsicas:
1. Crea un slo punto de impacto visual por pgina; es decir, un
punto al que dirigir la mirada.
2. Respeta la mirada del lector; es decir, de izquierda a derecha y
de arriba abajo.

3. Deja aire y espacios en blanco para que la mirada descanse.

Todo listo?

Sabes ya quin es tu pblico objetivo y con qu color se siente


ms identificado?

Con qu color se identifica tu marca y tu pgina web?

Cul de las tres reglas de la combinacin vas a seguir?

Estn los elementos y colores de tu pgina contrastados y es


el texto legible?

Has pensado en qu elemento vas a resaltar en tu pgina


web?

Cmo Elegir los Colores Para un Sitio Web


Escrita por: Alfredo Bizzocchi

Facebook132

Twitter123

Google+57

312

Cuando se crea un sitio web, la eleccin de los


colores es una tarea delicada, a pesar de parecer fcil. Seleccionar una correcta
paleta cromtica es importante para comunicar eficazmente el mensaje, crear
conciencia de marca y alcanzar a nuestra audiencia.
Los investigadores coinciden en que los colores producen sensaciones que la
mente humana interpreta.
El esquema de colores que utiliza su sitio web pueden ser una herramienta muy
eficaz para lograr que sus visitantes se sientan cmodos e interacten con su
sitio web, realizando una compra o solicitando un servicio.
Asimismo una paleta de colores errnea puede hacer que el visitante no
permanezca en su sitio ni siquiera unos segundos.
A pesar de que no somos muy conscientes de esto cuando visitamos un sitio
web, los colores -junto al contenido y los otros elementos visuales- son los que
determinan si nos quedamos o nos vamos.

Cmo elegir los colores?


Cualquiera que sea su actividad, le presentamos unos pocos consejos que le
sern de utilidad a la hora de comenzar su sitio web:

1. Utilize una paleta de colores que se relacione con su


objetivo

Hay que elegir los colores pensando en nuestra audiencia. Las


personas de diferentes edades tienen diferentes reacciones a los colores.

Por ejemplo las personas de cierta edad se encuentran generalmente mas


confortables en sitios web con colores ms sobrios y moderados. Los colores
mas relajantes les resultan ms atractivos.
Los jvenes, por el contrario, apreciarn los colores ms vivos y brillantes.
Hacer la distincin entre pblico adulto y joven mediante el uso de los colores
apropiados para cada categora es importante.
Tambin tenga en cuenta la temtica de su sitio web. Los colores tierra por
ejemplo son usados muchisimo en restaurantes latinos. El marrn, el terracota,
el amarillo y el naranja funcionan muy bien para este objetivo. Los colores con
una base verde se relacionan con el pensamiento conservacionista y ecolgico.
El negro es muy apreciado como fondo para sitios relacionados con actividades
musicales o nocturnas.

2. Establezca un fuerte contraste entre el fondo de una


pgina y el texto.
El color del texto debe estar en contraste con el color de fondo. Esto es muy
importante porque el contenido escrito es normalmente el aspecto ms
relevante de un sitio web. Un texto de alto contraste es el ms fcil de leer, y el
texto negro sobre un fondo blanco es mejor combinacin para facilitar la
lectura. Adems del blanco, otros colores efectivos de fondo son el gris claro y
el negro.
Si 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
atencin.

3. Elija una paleta de colores y sela en todo el sitio.

Esta es la manera de darle uniformidad y sentido de


unidad a nuestro sitio web. No use demasiados colores diferentes, con tres o

cuatro es suficiente. Todo el resto debera 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.

Herramientas y Sitios Recomendados:


checkmycolours.com Interesante utilidad para descubrir los colores utilizados
por un sitio web de nuestro agrado.
colorcombos.com Combinaciones de colores para sitios web.
colourlovers.com Para divertirse navegando a travs paletas de colores creadas
por los usuarios. Ofrece tambin patrones de colores organizados por categoras
como bodas, hogar, moda, negocios, etc. Usted puede hacer su propia paleta
online!
colorschemedesigner.com Paletas de colores monocromticos,
complementarios, triadas, etc.
cssdrive.com/imagepalette Nos permite subir una imagen y nos devuelve la
paleta de colores correspondiente.

Conclusin
Hay que pensar en forma inteligente al elegir un esquema de colores para un
sitio web. Es bien importante conocer nuestra audiencia o target y su posible
actitud hacia los colores. De la misma manera es esencial elegir colores que
trabajen armoniosamente juntos, para crear una buena impresin esttica. Por
ltimo, un sitio web cuyo contenido no puede ser leido fcilmente debido a la
falta de contraste entre el texto y el fondo deja a los visitantes y clientes
potenciales con una muy mala impresin de nuestro negocio.

Вам также может понравиться