Los colores en el diseño web | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

Los colores en el diseño web

Todos nos hemos preguntado alguna vez qué colores elegir para nuestro sitio web, qué trasmite cada color, qué quiero generar en los visitantes de mi sitio.
Con este post pretendo dar unas pinceladas a este tema tan interesante como extenso.

Los profesionales de estos temas nos dan una serie de consejos y pautas a seguir, nos definen las sensaciones que dan cada color, dónde debemos usarlos y los usos más frecuentes según la temática del blog o web. Yo simplemente os he resumido aquí algunos de los aspectos más importantes a tener en cuenta.

Si os interesa este tema, seguid leyendo...

Leer completo...[+/-]

    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 genera dinamismo y alegría. Es el color de la luz, el sol, la acción, el poder y la fuerza.

    No suele utilizarse para toda la web. En exceso, puede tener un efecto perturbador, inquietante. Se trata de un color muy llamativo por lo que suele utilizarse para llamar la atención del usuario sobre los aspectos más importantes de un diseño. Es muy adecuado para promocionar productos para los niños y para el ocio.

    Es el color del cielo y del mar. Transmite seriedad, seguridad y confianza. 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.

    Lo utilizan sitios web que quieren ganar credibilidad ante el usuario. Es muy adecuado para presentar productos relacionados con la limpieza y para promocionar productos de alta tecnología o de alta precisión. También para productos para hombres, aunque no debe asociarse a la alimentación.

    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.

    En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad. Se le asocia con hospitales, médicos y esterilidad. Puede usarse por tanto para productos médicos o que estén directamente relacionados con la salud. A menudo se asocia a con la pérdida de peso, productos bajos en calorías y los productos lácteos.

    El naranja combina la energía del rojo con la felicidad del amarillo. Representa la alegría, la juventud, la creatividad, el calor y el verano. Aumenta el optimismo, la seguridad, la confianza y el equilibrio. Tiene una visibilidad muy alta, por lo que 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 destacados de una web. Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para temáticas de su interés. También para productos alimenticios y juguetes.

    Es un color que denota poder, misterio, estilo y elegancia. En diseño web puede dar imagen de sofisticación y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es recomendable utilizarlo como fondo ya que disminuye la legibilidad. Combinado con colores vivos como el rojo o el naranja, produce un efecto agresivo y vigoroso.

    Óptimo para sitios web que promocionen productos lujosos o exclusivos. También es muy usado para mostrar galerías de fotos, ya que hace resaltar mucho el resto de colores y contrasta muy bien con los colores brillantes. El gris se vincula a lo elegante, innovador, moderno, futurista, tecnológico, suave y neutral. Al igual que el negro, ayuda a resaltar los demás colores.

    El rojo simboliza la pasión, el poder, y también ayuda a estimular la energía, la vitalidad. Es el color del fuego y el de la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, así como el deseo y al amor. En grandes áreas puede cansar fácilmente.
    Tiene una visibilidad muy alta, por lo que se suele utilizar en avisos importantes, prohibiciones y avisos de peligro.

    Incita al usuario a realizar acciones. Muy utilizado en webs relacionados con productos de compra compulsiva. También se utiliza para provocar sensaciones eróticas. Como está muy relacionado con la energía, es muy adecuado para anunciar coches, motos, bebidas energéticas, juegos, deportes y actividades de riesgo, sitios que pretendan recrear la sensación de excitación.

    Asociado a la feminidad y al romanticismo, sugiere calma y tranquilidad, muy útil para crear una atmósfera relajada. Evoca a la primavera, regalos, amistad, simpatía, salud, amor, etc…

    Se utiliza en sitios relacionados con la estética y los productos orientados al público femenino.
    En los sitios webs suele tender a un tono púrpura o amoratado, más elegante y no tan relacionado con lo femenino.

    Es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad, frescura y seguridad. Actúa como relajante y calmante.
    Se asocia principalmente a la riqueza y a la ecología. Los sitios relacionados con temas económicos y de entretenimientos lo utilizan bastante. Así como los relacionados con el medio ambiente, turismo rural, actividades al aire libre, productos médicos y salud.

    En un tono oscuro es asociado con la riqueza y el dinero, ideal para promocionar productos financieros, banca y economía.

16 comentarios:

DEL JILGUERO EDICIONES dijo...

Hola amigo, en un blog de tu creación me está ocurriendo que me sale una imagen en el fondo y no sólo eso sino que la entrada que realizo me queda corta sin llegar a verse el final de la misma. Mirá
http://teleficcionesdeljilguero.blogspot.com.ar/
Por favor agradeceré tu ayuda!
saludos y gracias!

Blogsmadeinspain dijo...

DEL JILGUERO EDICIONES, creo que no has leido esta entrada donde explicaba como corregir ese defecto de las imágenes de fondo en mis plantillas más antiguas

http://blogsmadeinspain.blogspot.com/2011/05/muy-importante-para-usar-plantillas.html

Respecto a la entrad cortada, ¿has intentado colocar el "Leer más..." de Blogger?
En mis plantillas personalizadas no funciona bien.

DEL JILGUERO EDICIONES dijo...

Si, ya me pasó esto hace un año, e introduje el código que me sale en esa entrada en las líneas de las imágenes pero ahora voy a edición de plantilla y ni siquiera me aparecen las líneas de las imágenes. Te adjunto en el comentario de abajo el html. No sé que estoy haciendo mal. Por otro lado no, no intenté colocar el "leer más"
Acá abajo te adjunto el html que yo veo:

DEL JILGUERO EDICIONES dijo...

bueno no me deja adjuntar en "comentarios" el html... no sé que hacer

Blogsmadeinspain dijo...

DEL JILGUERO, creo que hace tiempo que no editas la edición html de tu plantilla, ya que Blogger ha cambiado el editor, y ahora para ver parte del código tienes que pinchar sobre unas flechitas negras que te aparecen a la izquierda de algunos renglones.

DEL JILGUERO EDICIONES dijo...

Tal cual! sólo posteaba pero hace rato no entraba. Esto que señalás sigue estando en "diseño"? porque la edición la vi en un item que dice "el blog ahora /editar html" y no me salía el html habitual. Buscaré las flechitas negras, espero estén en "diseño"

DEL JILGUERO EDICIONES dijo...

encontré lo que me decías pero todas las imágenes ya tienen el código s1600/ ... y me sigue apareciendo una raya de fondo y la entrada sin poder leer completa mirá:
http://teleficcionesdeljilguero.blogspot.com.ar/

Blogsmadeinspain dijo...

Me da la sensación que has copiado códigos o el texto de la última entrada publicada de algún sitio que ya traía formato, y está creando cosas raras.
Si te fijas en otras entradas publicadas antes, se ven correctamente.
Además la columna derecha tiene algún problema. No sabría decirte lo que has tocado, pero has modificado algo de la columna derecha que da errores.

DEL JILGUERO EDICIONES dijo...

Juro que no toqué nada porque como te decia, ultimamente sólo metía entradas. NO toque el diseño. Ojala pueda solucionar esto porque esa plantilla viene genial para lo que estamos armando. Mudar todo sería doloroso la gente ya se acostumbró a esto, el blog tiene muchas visitas.
Pero me desconcierta no poder arreglarlo revisé todos los códigos de imagen y están bien. Yo te agradezco todas estas respuestas y tu gentileza. Si se te ocurre como solucionarlo avisame quisiera seguir con esta plantilla. Lo raro es eso, no toqué nada solo actualizando post.

Blogsmadeinspain dijo...

DEL JILGUERO, he estado viendo el código fuente de tu blog y hay dos problemas fáciles de solucionar:

1.- Te has dejado dos imágenes por corregir, y añadirle el tema del s1600.
Estas son:
http://1.bp.blogspot.com/_V-ZP-IfThOg/TA_On4bkV2I/AAAAAAAAAEY/pO18ayL_qwE/Notas_01_fondocol.jpg

http://4.bp.blogspot.com/_V-ZP-IfThOg/TA_PFfAl8ZI/AAAAAAAAAEg/txxj3e4rzpI/Notas_01_segundofooter.jpg

Aparecen dos veces y solo las has corregido en una ocasión.

2.- Hay una imagen que no carga, así que cambia en la imagen Notas_01_sidebar.jpg su ruta completa por esta otra...

http://1.bp.blogspot.com/-W0nMCv5Q5Ns/UZnPFgUXtEI/AAAAAAAAA38/zfWlJl2Q98U/s1600/Notas_01_sidebar.jpg

El problema del corte en la primera entrada proviene de esa entrada, en las demás no hay ese problema. Mi consejo es que la vuelvas a crear. Pero evita copiar texto de algún programa o lugar que ya tenga formato.

DEL JILGUERO EDICIONES dijo...

uhh PERFECTO muchas gracias! esta noche probaré y te cuento!! Mil gracias por darme una mano!!

DEL JILGUERO EDICIONES dijo...

Hola no encontré nunca las dos líneas que me recomendás más arriba en el punto 1.
Será porque habré borrado la entrada que generaba conflicto?
Por otro lado lo demás creo que ya está bien
muchas gracias!!!

Anónimo dijo...

Thank you very much for sharing this informative information which I am searching for last 6 month. Very informative with full of article.This article may help many people. That's why I should share this in my facebook wall.

Visit my blog: Avow Zone

diseño web dijo...

Muy buen articulo, me ayuda a la hora de decidir los colores para los diseños webs de mis clientes.

Manu - frases bonitas dijo...

Buen contenido, muy recomendable y interesante y los cursos estan muy bien.

Un saludo

obat herbal asam urat dijo...

hi,, i like to visit this site,, have a nice day :)