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

 

.

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>