Tlfs: 91 494 45 24608 408 159Diseño páginas web desde 2001 – Diseño web y SEO – Diseño gráfico – SEM info@ideaweb.es

diseño paginas web madrid

Diseño web y colores. Consejos sobre colores en el diseño de páginas web.

BLOG

Blog Patrocinado por las mejores herramientas para Diseñadores web y SEO:

La elección de los colores puede ser un auténtico quebradero de cabeza para todo aquel que se dedica al diseño web o para ese creativo que tiene que diseñar el logotipo de una empresa. No es un tema baladí. El color influye en nuestras decisiones y en nuestro estado de ánimo mucho más de lo que la gente realmente piensa. Si crees que exageramos, echa un vistazo a este estudio, publicado en la revista de medicina BMJ. En él se estudiaba la relación existente entre el color de los medicamentos y su efectividad, y llegó a la resumen de que, efectivamente, los colores influyen. Parece ser que las pastillas azules y verdes funcionaban mejor como sedantes y que las rojas y naranjas lo hacían mejor como estimulantes. El cerebro humano es complicado.

En la película The Matrix, Morpheus propone a Neo una elección entre una píldora azul (volver a su vida de siempre, aunque fuese una ilusión) y una roja (la verdad). Si Morpheus hubiese tenido conocimientos de marketing, es probable que hubiese intercambiado los efectos de las pastillas, ya que por norma general el rojo indica peligro, lo que podría hacer que esa píldora fuera menos apetecible. O a lo mejor no, porque el rojo también se considera un color seductor y atrayente (pensad en la Coca-Cola o en el Kit Kat). Ya sabéis, a veces lo prohibido atrae. Ya advertimos algo similar en una entrada sobre logotipos, en este tema del diseño, dos más dos no siempre son cuatro.

 

Color Rojo Sensacion

Amanita muscaria, un hongo venenoso. Su color no dice precisamente “Cómeme, cómeme”. Aun así, hay gente que lo hace por sus efectos alucinógenos. Nosotros te recomendaríamos no hacerlo, los experimentos con Coca-cola.

Vale, supongamos que hemos puesto a trabajar nuestra máquina neuronal junto con la señora inspiración y juntos han creado un fruto de su trabajo llamado color para el proyecto  y con esto ya hemos elegido un color principal para nuestra web. Bien, hemos dado el primer paso, ahora… ¿Con qué colores combina mejor? Otro jaleo. ¿Le va bien el azul al verde? ¿Azul claro u oscuro? ¿Y cuántos colores uso? ¿Dos? ¿Tres? ¿Catorce?.

El hombre desde tiempos ancestrales ya se preguntaba e intentaba dar solución, teorías e hipótesis sobre el color, primero con la superstición y más tarde con la ciencia, para daros un pequeño inciso, ya Aristóteles describía los colores básicos apoyándose en el agua, la tierra, el cielo y el fuego.

Cojamos mejor la época en al que comienzan las teorías basadas en ciencia que es más demostrable. Plinio en lo que se conoce como el tratado de historia del arte más antiguo, el libro 35 de “Historia Naturallis” que supone una de las mayores obras individuales que sobreviven del Imperio Romano en nuestros días  también hacía mención a los colores y su importancia, estudiándolos y evocando los sentimientos que generaba cada uno. Los experimentos del siglo XIII por Sir Roger Bacon, descomponiendo los colores a través de un prisma y aplicándolos a propiedades de la materia y así varios personajes de nuestra historia, destacados han ido desgranando la cientificidad de los colores, hasta que llegó Johann Wolfgang von Goethe (1749-1832) con su tratado “Teoría del color” se opuso a la visión meramente física de Newton para asignar en su teoría que en realidad el color no es dependiente solo de materia y luz, si no que los colores dependen además de nuestra percepción, ya que en la “lectura” de un color se encuentran involucrados cerebro y visión, por lo que existe una subjetividad que se añadió como tercer “actor” en la percepción del color. Se trata realmente de una percepción subjetiva de los aspectos físicos, ondas, frecuencias, espectro visible… que inciden sobre la materia y que son posteriormente procesadas por nuestros sentidos.

Es más, nosotros creemos, y seguro que algún científico o psicólogo especialista nos daría la razón con bases acreditadas, que incluso el color depende de la historia, y la carga de vida que cada persona  posea, hay un aspecto que nadie puede compartir y es la historia experiencia, sucesos, ocurrencias, experiencias que cada uno ha tenido e incluso aunque fueran iguales, se han percibido de manera diferente, y eso es la carga psicológica y de aprendizaje que tiene su influencia en los colores percibidos, si alguien ha tenido una mala experiencia con el color azul, puede que no  le resulte tan agradable (inconscientemente incluso) verlo en un manual técnico impreso y por lo tanto esa marca o producto le genere repulsión o bajo interés.

Esta entrada la vamos a dedicar a hacer unas recomendaciones sobre el uso de los colores en el diseño web, teniendo siempre presente que al final es un tema un poco subjetivo, y que para gustos, los colores, aunque el criterio de diseño profesional ya sabéis que es un plus, puesto que la personalidad de tu proyecto y todo lo que comunica está muy apoyado en los colores. No obstante os damos unas pequeñas y superficiales pautas que os vendrán bien como punto de inicio en este complicado mundo del color, longitudes de onda, teoría y psicología del color.

 

COLOR Y ACCESIBILIDAD WEB

Colores Pagina Web

Si ves un 12, estás bien; si no lo ves, ya sabes porque veías todos los M&M’S marrones

La accesibilidad web es una característica deseable en los sitios web, y su objetivo principal es conseguir que la navegación por internet sea satisfactoria para un mayor número de personas. Estas prácticas son promovidas por la W3C. Desde un punto de vista moral (y también práctico), debemos intentar implementar buenas prácticas de accesibilidad en el diseño web, al igual que reclamamos edificios o infraestructuras sin barreras arquitectónicas.

La discromatopsia es una afección que sufren principalmente los varones, y que en Europa afecta a un 8% de la población. Consiste en una discapacidad que impide distinguir bien los colores. Puede afectar a un color en concreto o puede implicar a varios. El daltonismo es una discromatopsia de origen genético.

 

Si a la hora de diseñar una web decides que esta tenga un color de fondo verde y unas letras del mismo color algo más claro o algo más oscuro, has de tener en cuenta que cierto número de usuarios no va poder leer nada, o lo va a leer mal. Puedes estar negando contenido a un porcentaje de población cercano al 8%.

Como en ideaweb somos muy majos, te facilitamos este enlace que te va a ser muy útil. Es una web donde puedes introducir un color de fondo y un color de primer plano, y la aplicación te mostrará la proporción de contraste que presentan. También te informan sobre los valores que son recomendables para que una web sea accesible.

 

¿QUÉ TRANSMITEN LOS COLORES DE UNA WEB?

Sobre esto hay mucho escrito, solo tienes que hacer una búsqueda en Google. Aquí te presentamos un listado de colores y algunas de las emociones o sentimientos que pueden inspirar:

*Rojo: peligro, pasión, energía, seducción…

*Azul: seguridad, confianza, simpatía, fidelidad, paz…

*Amarillo: optimismo, alegría, diversión, amabilidad…

*Negro: elegancia, poder, lujo, misterio…

*Blanco: pureza, paz, tranquilidad, respeto, confort…

*Gris: lógica, simplicidad, neutralidad, tristeza…

*Naranja: amistad, creatividad, alegría, entusiasmo…

*Verde: naturaleza, salud, bienestar, limpieza…

*Violeta: nobleza, salud, riqueza…

*Rosa: romanticismo, feminidad, dulzura, inocencia…

*Marrón: hogar, comodidad, sosiego…

Y esto te puede orientar un poco. Si vas a diseñar la web de una notaría, nosotros nos olvidaríamos del rojo o del naranja como colores principales, y nos decantaríamos por el blanco y el negro, el gris, el azul… ¿Una tienda de lencería? Prueba con el violeta, el rosa, el rojo…

También a la hora de diseñar una web puedes tener en cuenta los colores favoritos de las personas por edad y por sexo, y adecuar ese conocimiento a los clientes a los que diriges tu actividad; el target de una tienda de cosméticos no es el mismo que el de una tienda de videoconsolas. Así, el color favorito de casi todo el mundo (al menos en USA) es el azul, aunque en el caso de las mujeres está casi empatado con el morado o violeta. Parece ser que el verde también está entre los colores favoritos. Si analizamos estas preferencias teniendo en cuenta la edad, vemos que el azul sigue predominando, y parece que esta preferencia aumenta con la edad, algo que también ocurre con el violeta. El verde casi iguala al azul entre los menores de 19 años.

En cuanto a los colores que menos gustan a la gente, el naranja y el marrón se llevan la palma, aunque en el caso de los varones el violeta tampoco sale favorecido. Por edades, el marrón disgusta más a los más jóvenes, y el naranja a los más ancianos. ¿Quiere eso decir que nunca debes utilizar el marrón para hacer una web? Pues tampoco es eso. Una web que venda muebles de madera, o café, o que trate sobre geología o fósiles, no tiene porque quedar mal en tonos pardos. Ya sabes, dos más dos no son siempre cuatro.

Y recuerda, muchas de las cosas que hemos escrito en esta sección son válidas para el mundo occidental. Si tu web es de una academia para enseñar español a chinos, preocúpate por enterarte de lo que representan para ellos los colores, no vayas a llevarte un disgusto.

 

COMBINACIÓN DEL COLOR

Si ya estábamos nadando en el mar de la subjetividad, ahora nos adentramos en un océano. Hay gente que tiene un don a la hora de combinar colores y conseguir resultados muy elegantes, y hay otros que no, lo sentimos, no se puede escribir, es algo con lo que se nace y se ejercita con los años.

Pero, la teoría existe por supuesto y de eso escribimos aquí bastante, por lo tanto la pregunta sería: ¿Qué es lo que hace que una combinación de colores nos parezca maravillosa y otra horrible? ¿A todos nos gustan las mismas combinaciones? Existe un estudio muy interesante que intenta explicarlo. Para ello tienen en cuenta tres aspectos: la preferencia estética de la gente por una combinación de dos colores, la sensación de armonía que le produce esa combinación independientemente de que le guste y la sensación de ver un color no como una combinación, sino formando parte del frente y del fondo. Parece ser que cuando vemos un color sobre un fondo, atrae más cuanto mayor sea el contraste entre ambos; sin embargo, cuando en la combinación de colores no se distingue un frente ni un fondo, la gente prefiere tonos similares.

Puedes usar colores con tonalidades similares para la mayor parte del contenido de la web y emplear colores que contrasten para llamar la atención sobre algún aspecto particular (por ejemplo: ¡GRAN OFERTA!).

Dispones de herramientas online gratuitas que pueden ayudarte con esta tarea. Un ejemplo es Color Schemer Online. Su funcionamiento es muy simple, introduces un color (ya sea en hexadecimal o RGB) y te va a mostrar 16 colores que pueden combinar. Después tienes la opción de aclararlos u oscurecerlos.

 

Bueno, si has leído todo el post ( ya eres una campeona o campeón), esperando la fórmula mágica que te permitiese alcanzar la perfección a la hora de elegir los colores de una web o un logo, ya es hora de que te digamos que no la vas a encontrar aquí. Si la tuviésemos, habríamos escrito esta entrada desde el Caribe tomando un daiquiri, imaginad lo que estarían dispuestas a pagar las multinacionales por la combinación de colores perfecta y 100% efectiva para todos. Sí que hemos intentado dar algún consejo y facilitar alguna herramienta que puede ser práctica. Si quieres hacer una web y no sabes cómo, ni que colores emplear, ni que logo usar, llámanos o escríbenos. Hemos creado unas cuantas centenas de webs en más de doce años que llevamos en esto y probablemente sabemos algo sabemos del tema para poder diseñar tu página web o tienda online. Hasta la próxima entrada.




¿Quieres contactar con ideaWeb? ¿Necesitas un presupuesto web o gráfico?

ideaWeb
DISEÑO WEB MADRID

91 494 45 24

608 408 159

info@ideaweb.es

También puedes describirnos tu proyecto web o bien enviarnos tus propuestas, dudas o consultas para presupuesto de Diseño web, Posicionamiento SEO o Diseño de Logotipo:

ir al formulario de contacto