El body como fondo

La etiqueta body del HTML es la que determina el cuerpo de un documento web, todo lo que va contenido en ella es lo que el browser despliega en pantalla, texto, fotos, videos, vinculos, listas…

Con los avances que ha tenido el diseño web y la tecnología, este elemento ha ido cobrando protagonismo. Durante los 90 y comienzos del 2000 era muy extraño que se le dedicara tiempo en el diseño, generalmente se le desconocía al mismo tiempo que se desconocía la ventana del browser, los diseños se encerraban en elementos contenedores que funcionaban como cajas y se integraban muy poco al fondo. En el ejemplo es posible ver un fondo sin atención gráfica que poco y nada ayuda a tener un despliegue de contenidos rico y agradable.

La variedad de resoluciones de pantalla que es posible acceder hoy y la entrada de la poderosa mezcla de CSS con HTML ha permitido sacarle mas partido a este elemento y reconocer la ventana del browser como un área util que permita dar aire y respiro al usuario al ver los contenidos, dejándolos mas libres. Otra cosa muy importante es entender que le podemos sacar mucho partido al body cuando lo utilizamos gráfcamente para trabajar el ambiente, la onda, la ilumnación de un diseño.

Porque es importante que dediquemos tiempo a pensar los fondos:

• Nos permiten definir parte importante de los aspectos sensoriales de un diseño
• Permite establecer una iluminacion general
• Determina rápidamente la atmósfera que estará presente en el sitio
• Es un área que podemos utilizar para desplegar contenido, no hay que tenerle miedo

Creo que es posible sacarle mucho partido al lienzo del sitio a diseñar. Personalmente me gusta partir un diseño la base general como la buena masa de una pizza, el fondo. Sobre este buen fondo se me hace más fácil colocar los elementos de contenido y es más fácil poner atención y dedicación al diseño orientado al contenido. Es como pensar los ingredientes de la pizza. No es llegar y mezclar las cosas, debemos saber muy bien que colocar y para lograr buenos resultados debemos pensar primordiamente en el contenido, como cuando pensamos en el sabor final de nuestra pizza.

A continuación dejo un par de ejemplos de sitios que admiro por su buen diseño. El primero es el de Veerle Pieters (con excelentes contenidos también) donde utiliza una caja para enmarcar el contenido principal del sitio y el body (lienzo) para el despliegue de contenidos complementarios. Es interesante el uso que da al eje z para levantar el área principal.

Y este, perteneciente al diseñador portugués Filipe Varela. Podemos ver como sin miedo lanza todo el contenido libre, sin marcos o fronteras mas que la sugerida por la alineación. ¿Que sería de este simple diseño sin su fondo?

Espero que estas pistas y esta reflexión te sean tan útiles como me fueron a mi.