El uso del color y su significado en el diseño web

NUEVO POST:
Curso Online – Iniciación al Diseño de Producto Digital

Para los diseñadores web el color es una herramienta imprescindible que poseemos para poder captar la atención del usuario. Hay una relación directa entre el color y los elementos de una composición, alterar el color de un objeto puede repercutir en la valoración jerárquica que se haga.

También los colores nos provocan diferentes sensaciones de las que normalmente no somos conscientes, nos afecta pues vivimos rodeados de ellos y culturalmente se han ido identificando con las cosas que nos rodean.


El color representa un estimulo visual potente siendo significativo el efecto que puede generar en el usuario. El uso del color se extiende mucho más allá de destacar simplemente ciertas zonas o ciertos fragmentos de texto.

Desde un punto subjetivo está directamente relacionado con la experiencia visual del usuario y de su contexto cultural. De esta manera podemos establecer relaciones entre el color y su significado o entre el color y sus propiedades espaciales.

El color desprende diferentes expresiones del ambiente, que pueden transmitirnos  la sensación de calma, plenitud, alegría, violencia etc. La utilización de ciertos colores afecta de diferente manera en nuestro estado de ánimo, de modo que le proporciona al diseñador web la oportunidad de conectar mejor con el usuario, pero también con el riesgo de conseguir una sensación negativa.

Hay que tener claro que todas estas emociones y sensaciones asociadas con el color, corresponden en la gran mayoría a la cultura occidental, ya que en otras culturas los mismos colores pueden expresar lo contrario. Por ejemplo mientras que el blanco se asocia al matrimonio en nuestra cultura, en culturas orientales e islámicas está asociado a la muerte.

Por lo tanto hemos de conocer las cualidades y las posibilidades como factores claves  en el proceso de comunicación. Según nuestro propósito  comprender estas asociaciones cromáticas nos puede ayudar a garantizar el éxito comunicativo.

En el diseño web el color es uno los puntos más importante en su proceso, debida a esta importancia, debemos entender el significado de los colores para transmitir determinados mensajes.

Por eso quiero compartir con vosotros el significado de los colores más importantes, y su relación con las emociones, que se utilizan normalmente en el diseño web, así como ejemplos que os puedan servir de ayuda e inspiración.

Amarillo

El color amarillo está vinculado con la inteligencia y la creatividad ya que estimula la actividad mental y los sentimientos de felicidad. Actúa como calmante de ciertos estados de excitación nerviosa. Es un color cálido y generar buen rollo y alegría. Es el color de la luz, el sol, la acción, el poder, la fuerza… También tiene un significado negativo como la pereza, la arrogancia y la envidia.

Ejemplos:
http://webdesignledger.com/inspiration/50-yellow-web-designs-to-inspire-you
http://www.webanddesigners.com/20-yellow-color-based-website-design/
http://inspiredology.com/18-examples-of-yellow-websites/

Naranja

El naranja combina la energía del rojo con la felicidad del amarillo. Representa la alegría, la juventud, el calor y el verano. Aumenta el optimismo, la seguridad, la confianza y el equilibrio. Utilizado en pequeñas extensiones es de una gran utilidad pero en grande áreas puede ser demasiado atrevido y puede crear la sensación de agresividad.
Por eso es muy útil para captar atención y subrayar los aspectos más destacables de una página web.

Ejemplos:
http://inspiredology.com/examples-of-orange-websites/
http://www.smashingbuzz.com/2010/01/showcase-of-50-exceptional-orange-website-designs/
http://devisefunction.com/2010/02/01/20-examples-of-using-the-color-orange-in-web-design/

Rojo


El rojo simboliza la pasión, el poder, y también ayuda a estimular la energía, la vitalidad. El color rojo es el del fuego y el de la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, la determinación, así como el deseo y al amor. Hay que controlar su extensión e intensidad por su potencia de excitación. En grandes áreas puede cansar fácilmente

Ejemplos:
http://indeziner.com/design/45-examples-of-using-the-color-red-in-web-design/
http://webdesignledger.com/inspiration/50-red-web-designs-to-inspire-you
http://devisefunction.com/2010/01/11/20-examples-of-using-the-color-red-in-web-design/
http://www.xyberworks.com/blog/custom-web-design/examples-of-using-red-color-in-custom-web-design/

Azul


Es el color del cielo y del mar. Simboliza la paz y la confianza, transmite seriedad y tranquilidad. Estimula la paciencia y la serenidad. Es el color del infinito, de los sueños y de la amistad.También puede relacionarse con el poder de la tecnología, la limpieza, el aire y el agua. Puede tener un significado negativo como la depresión o la indiferencia

Ejemplos:
http://sixrevisions.com/web_design/30_beautifully_blue_web_designs/
http://webdesignledger.com/inspiration/55-beautifully-blue-web-designs-to-inspire-you
http://smashingshare.com/2011/01/16/blue-in-web-design-45-inspiring-examples/
http://designm.ag/inspiration/examples-of-blue-in-web-design/

Purpura


Actúa directo al corazón. Sugiere abundancia, sofisticación, inteligencia, espiritualidad, religiosidad, dignidad. Pero también puede evocar frivolidad, artificialidad y pomposidad. Representa el misterio, la ceremonia,  la iluminación, la telepatía, la empatía. Ideal color para diseños web  dirigidos a un público femenino.

Ejemplos
http://spyrestudios.com/25-kick-ass-purple-portfolio-website-designs/
http://webdesignledger.com/inspiration/35-purple-web-designs-to-inspire-you
http://designm.ag/inspiration/examples-of-purple-in-web-design/
http://www.webgeekly.com/inspiration/30-great-examples-of-purple-in-web-design/

Rosa


Utilizado para el romance y presencia femenina por que sugiere calma y tranquilidad, muy útil para crear una atmósfera relajada. Significa primavera, regalos, aprecio, admiración, simpatía, salud, amor, junio…

Ejemplos
http://webdesignledger.com/inspiration/25-pink-web-designs-to-inspire-you
http://scarletbits.com/2009/pink-web-design/
http://inspirationfeed.com/2010/10/35-examples-of-pink-web-design/
http://ginva.com/2011/04/20-beautiful-pink-website-design-showcases/

Verde


Es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura. Simboliza la esperanza y se utiliza para neutralizar los colores cálidos. Actúa como relajante y calmante; sugiere humedad, frescura. Es un color útil para el diseño web relacionado con el medio ambiente.

Ejemplos
http://webdesignledger.com/inspiration/50-green-web-designs-to-inspire-you
http://dzineblog.com/2011/04/examples-of-green-in-web-design.html
http://www.inspirationmix.com/50-green-website-designs-inspiration/
http://blog.echoenduring.com/2009/11/29/25-examples-of-green-and-grassy-websites/

Marrón


Simboliza la amistad,  la tierra, el pensamiento materialista, la fiabilidad, la paz, la productividad y el trabajo práctico. Representa la vejez, tiene connotaciones de calidad, comodidad, conservador y natural.

Ejemplos
http://inspectelement.com/articles/20-great-examples-of-the-use-of-brown-in-web-design/
http://webdesignledger.com/inspiration/50-beautifully-brown-web-designs
http://designtutorials4u.com/30-beautiful-brown-websites-for-your-inspiration/

Blanco


Simboliza la pureza, la fe, la paz, la alegría y la pulcritud. Se le considera el color de la perfección. Se le asocia con la frescura y la limpieza porque es el color de la nieve. Útil para mostrar o resaltar otros colores y dar la impresión de sencillez y limpio. Tiene un significado negativo como color frío y distante.

Ejemplo
http://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs
http://webdesignledger.com/inspiration/55-minimal-black-and-white-web-designs-to-inspire-you
http://www.ozoneeleven.com/showcases/20-examples-of-white-space-properly-used-in-web-design/
http://inspirationti.me/websites/white (sirve para cualquier color)

Gris


Se vincula a lo elegante, fresco, innovador, moderno, futurista, tecnológico, espacioso, suave, neutral. Puede representar respeto, desconsuelo, aburrimiento y vejez. Es un color que ayuda a resaltar los demás colores.

Ejemplos
http://inspirationti.me/websites/grey (sirve para cualquier color)
http://spyrestudios.com/20-examples-of-dark-minimalist-website-designs-with-great-typography/

Negro


Se relaciona con la oscuridad, el dolor, la desesperación, la formalidad, la tristeza, la melancolía, la infelicidad, el enfado y lo oscuro. Es un color que denota poder, misterio y estilo. En diseño web puede dar imagen de elegancia y sofisticación y aumenta la sensación de profundidad y perspectiva.

Ejemplos:
http://speckyboy.com/2010/04/28/50-examples-of-black-in-web-design-black-is-beautiful/
http://webdesignledger.com/inspiration/55-minimal-black-and-white-web-designs-to-inspire-you
http://emdma.com/50-examples-of-black-in-web-design-%E2%80%93-black-is-beautiful/
http://webexpedition18.com/articles/beautiful-black-website-design-flavours/
http://inspirationti.me/websites/black (sirve para cualquier color)

 

Google+

Publicado

en

,

por

Comentarios

10 respuestas a «El uso del color y su significado en el diseño web»

  1. Avatar de sergio

    Excelente nota, buenos ejemplos y una buena explicación para cada color. El color es una parte muy importante en el diseño, y puede influir mucho dependiendo de la importancia de cada uno.
    Saludos

  2. Avatar de skier

    está bueno el blog, soy publicista ya leí casi todo jajaja saludos

  3. Avatar de Jimmy
    Jimmy

    Excelente, muy bien con los ejemplos..gracias

  4. Avatar de carmen
    carmen

    muy bueno y de gran ayuda, muchas gracias por compartir.

  5. Avatar de Juan M Rincon

    Los colores nos orientan, nos indican, nos predisponen, nos entusiasman, nos tranqulizan o nos estresan, nos alegran o nos entristesen, en fin un color nos puede cambiar la vida, Pantone tiene en su sitio web un libro colostrology en el que nos da un color para cada dia

  6. Avatar de Michael
    Michael

    Excelente. Para tomarlo en cuenta en mi proximo proyecto.

  7. Avatar de Mario

    Muy bueno, solo creo que falto indicar que ciertos colores en abundancia producen efectos contrarios a lo que necesitamos. Aunque hay algún matiz de ello en algunos parrafos.

    Gracias

  8. Avatar de luis
    luis

    excelente contenido, muchas gracias por los aportes.

  9. Avatar de Johana Gordillo
    Johana Gordillo

    con los colores nos podemos inspirar,distraer,nos ayudan mucho,para poder reconocer alguna cosa u objeto,saludos……

  10. Avatar de posicionamiento sem reus

    Estoy entusiasmado de encontrar blogs donde leer informacion tan practica como esta. Gracias por facilitar este post.

    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *