Dirigir la atención del usuario con los colores

Vamos a diseñar nuestra web y dudamos entre usar azul, rojo, rosa, amarillo… ¿que será mejor? ¿Y si le pongo los bordes rosa fucsia? Seguro que llamaría la atención y nadie se olvida de mi web…

Todos quienes hemos montado alguna web hemos pasado por ese proceso alguna vez, ¿qué color elegir? ¿Porqué no puedo poner naranja fosforito de fondo? Bueno, algunas cosas parecen obvias, pero otras no tanto. Voy a intentar ordenar algunas ideas respecto a este asunto en un post:

Cuando diseñes una web, lo primero que tienes que pensar es en cuál es el objetivo de la misma, y a partir de ahí, intenta dirigir al usuario hacia ese objetivo. Por ejemplo, pongamos que haces un blog por hobbie y lo que quieres es que los usuarios lean lo que escribes. Te pongo dos ejemplos de diseño:

Plantillas de ejemplo

En el primer ejemplo, vemos como las zonas que no queremos que llamen la atención tienen colores grisáceos, poco llamativos, dejando el blanco para la zona del blog en que irá el texto, lo que facilita la lectura al usuario (cansa menos la vista leer sobre fondo blanco). En el segundo diseño hemos mantenido el blanco para el texto, pero en un arrebato de originalidad le hemos colocado algunos colores mas llamativos.

Fíjate en el segundo diseño, ¿hacia donde se te van los ojos? Lo mas probable es que a cualquier sitio menos al contenido, ya que el blanco llama menos la atención, y ahora, fíjate en el primer diseño, aunque la cabecera llame algo la atención, tus ojos seguro que tienden hacia el blanco. ¡Caray! ¡Pues eso es lo que yo quería! Parece que no es tan difícil después de todo…

El truco consiste en poner los colores más llamativos en la zona objetivo, partiendo de que si tenemos texto éste debe ir sobre fondo blanco (salvo algunas excepciones), si nuestro objetivo fuera llevar al usuario a la barra lateral podríamos usar el amarillo del segundo diseño, si en cambio el objetivo es llevar el usuario al texto, hemos de usar colores menos brillantes que el blanco para el resto de la página.

Ejemplo práctico

RacingpasionVeamos ahora un ejemplo, el Blog de racingpasión utiliza un fondo rojo oscuro, lo que le da personalidad y nos hace recordar el rojo tan característico de Ferrari. He cogido este ejemplo precisamente para mostrar cómo se puede mantener la usabilidad y la libertad creativa al mismo tiempo. El rojo, aunque llama la atención, está en una zona desértica, sin contenido, distrae al usuario 1 segundo al entrar pero éste enseguida sabe que ahí no hay nada y dirige su mirada al contenido, sobre fondo blanco. Fíjate en que aunque es un diseño muy arriesgado y agresivo, luego lo suavizan colocando el resto en gris oscuro, para evitar mas distracciones de las que ya genera el fondo, y de paso darle un aire ferrarista de F1.

6 thoughts on “Dirigir la atención del usuario con los colores”

  1. Me ha gustado mucho el post, tanto que he mejorado mi blog (dentro de las posibilidades que me permiten, claro)cuando pueda crear uno más profesional ya te consultare…

  2. Jejejej, conste que lo del rosa fucsia no lo puse por ti, fue lo primero que se me vino a la cabeza… pero luego pensé en ti xD

    Mucho mejor tu Blog ahora, mira a ver si puedes colocar un width fijo, ya que en pantallas panorámicas el ancho se hace tan grande que cuesta leer (visualmente, las líneas de texto muy anchas dificultan el cambio de línea, por eso los periódicos suelen ir a columnas).

Comments are closed.