Background-color: #FFFFFF

Últimamente me estoy dando cuenta que está volviendo la moda de utilizar colores oscuros en los fondos de la web.

Varias de las páginas que consulto habitualmente o que “descubro” que han rediseñado su portal, y cotilleo para “ver que han hecho”, han cambiado su pulido y esterilizado “Background-color:#FFFFFF” por bonitos azules marinos, negros e incluso estampados multicolor.

Ahora yo me pregunto…

¿Hasta que punto afecta el color de fondo de una web?

Añadir un color de fondo oscuro o un motivo cargado en una web, puede resultar muy beneficioso para esta, ya que, si el trabajo esta bien hecho y mantiene una coherencia con la imagen de marca y el contenido de la página, podemos a realizar un trabajo mucho más memorable y atractivo para nuestro usuario, que con un fondo en blanco.

El problema viene, cuando la web tenga contenido, por lo que hay que plantearse dos aspectos mucho más importantes que la “memorabilidad” de nuestra web:

  • ¿De que color será el texto? Hay que definir un color de texto que contraste lo suficiente con el fondo de la página, para evitar problemas de accesibilidad, pero sobre todo de legibilidad del usuario final. También hay que tener en cuenta que si queremos diferenciar los títulos, subtítulos y párrafos, no solo por tamaño, si no también por estilo, tenemos que utilizar más de un color o fuente en nuestro texto.
  • ¿Como son las imágenes que se van a utilzar? Según el tamaño, la tonalidad o el efecto de imágenes y gráficos que vamos a utilizar en la web, tenemos que saber que un color oscuro debajo de una imagen, hará que esta pierda tonalidad y fuerza.

Como conclusión personal, pienso que la utilización de un fondo claro u oscuro, con motivos, degradados u otros aspectos gráficos no tendría que tratarse de una simple moda, si no de las necesidades de cada proyecto, valorando la identidad gráfica de nuestro proyecto y sobre todo su público general. Por lo que, sin ser un experto en la materia, ya que aún no he tenido la oportunidad de realizar un proyecto con estas características, me permito exponer unos cuantos conceptos que nos ayudarán a realizar un proyecto coherente y sin dificultades visuales o efectos indeseados:

El texto de la web:

  • No utilices tipografías con serifa (es decir, las famosas Timer New Romand, Garamond, etc.); mejor dicho, utiliza SIEMPRE tipografías de palo seco (Sans Serif), ya que mejorará la lectura de los textos.
  • No utilices cuerpos inferiores a 14px. Con un fondo blanco, podríamos llega a utilizar tipografías de palo seco con un cuerpo mínimo de 11px. pero al utilizarse “en negativo” no se visualizan correctamente.
  • En los párrafos utiliza un color de fuente lo suficientemente contrastado con el fondo, para que la lectura sea fácil y clara. Recuerda también ampliar el interlineado. El interlineado tiene que se igual o superior a la altura de la “x” de tu fuente.
  • Si quieres diferenciar los títulos, subtítulos y textos de tu web, no solo por tamaño de fuente, si no también por color, el título, que tiene un cuerpo de letra mucho mayor que el texto, tendría que ser más oscuro que este, y nunca a la inversa.

textos

Las imágenes de la web:

  • Utiliza siempre un marco en las fotos. Intenta que este sea lo más claro posible y de mínimo 2px. de grosor. De esta manera, evitarás que las fotos claras pierdan fuerza y que las más oscuras no lleguen a verse correctamente.
  • Si puedes evitarlo y tu proyecto no te lo exige, no utilices fotos en blanco y negro o con filtros de color.
  • Intenta que el tamaño de las imágenes sea grande y evita utilizar miniaturas.

fotos1

 

.

Del “efecto wow” a la facilidad de uso

Hace ya más de 9 meses que trabajo en el departamento de Usabilidad y experiencia de usuario de Toprural y, como en cualquier puesto de trabajo, cada día descubres y aprendes nuevas maneras de trabajar.

la-foto-300x224

Debido a mi formación de diseñador gráfico, había tenido mucha experiencia profesional en el diseño de páginas web y usabilidad enfocada a un punto mucho más “visual” que “útil” para el usuario. Aquí cada día que pasa descubro que hay que darle mucha más importancia a la facilidad de uso que pueda tener el usuario al entrar en nuestra página/herramienta/portal, que no a lo que yo denomino “efecto wow!”… ese estado que te atrapa cuando entras en una web en la que todo se mueve y convierte tu monitor en una especie de super producción de Hollywood, digna del mismísimo James Cameron… y a veces con banda sonora incluida.

El problema de esto es que la distracción de tu usuario es irremediable y te va a conducir al fracaso… si tienes una web con estas características tendrías que plantearte las siguientes preguntas:

  • ¿Es necesario tanto show en una web?
  • ¿Tu usuario llega a su destino? ¿encuentra lo que busca?
  • ¿Tu usuario tiene tiempo para ver todas las animaciones y bombardeos en forma de flash antes de encontrar lo que busca?

Como decía al principio, llegar a un equipo íntegro de experiencia de usuario, me ha hecho cambiar bastantes ideas que tenía marcadas a fuego en mi cabeza (quizás por deformación profesional). Si lo tuviera que definir con una fórmula sería la siguiente:

Diseño web + usabilidad = EXPERIENCIA DE USUARIO

Ahora, antes de empezar un proyecto realizo un protocolo de actuación que antes no había realizado nunca. De hecho, lo conocía pero lo ignoraba. Mantengo mi mentalidad de “grafista” pero ya empiezo a cruzar gráficos con los adjetivos fácil y útil. Y siempre sin olvidar los mandamientos de la experiencia de usuario.

Todo esto, permite construir un prototipo pensando mucho en el diseño, pero aún más en:

  • ¿Que sensaciones recibirá el usuario al navegar por la web?
  • ¿Es fácil de utilizar?
  • ¿Tiene un orden correcto y bien definido?
  • ¿Es una web amigable y rápida?
  • ¿Utiliza un lenguaje limpio y claro o muy técnico?
  • e infinitas preguntas más…

Todo esto quizás no nos permitirá tener la web con el “efecto wow!!” más alto del mundo, pero si conseguiremos que nuestro usuario se sienta cómodo y encuentre lo que necesita rápidamente… por lo que su experiencia será…

PERFECTA!

Y para acabar recuerda… tu usuario puede ser cualquiera, y puede estar en cualquier sitio… ¡No se lo pongas difícil!

.