Los fondos de pantalla completa en diseño web se han convertido en tendencia pues cumplen a la perfección con su propósito de llamar la atención. Por eso, son empleados ampliamente en el diseño de pagina web. Son realmente efectivas en páginas de destino y en páginas de inicio, especialmente si usas la foto adecuada y si los elementos gráficos se mantienen en armonía.
Si tú también deseas crear tu sitio web con fondo de pantalla completa, tenemos para ti algunos consejos básicos.
¿Usar imágenes o videos?
Un fondo de pantalla completa usualmente se emplea para imágenes o video. En el caso de las imágenes puedes incluir fotografías, ilustraciones, collage o incluso realizar un slideshow para que la página se vea más dinámica. En el caso del video, de por sí es dinámico, pero puede ser complicado implementarlo. Debes tener e cuenta el peso del video y la compatibilidad en los distintos navegadores.
En ambos casos debes recordar que los fondos, en el orden de jerarquía, no son tan importantes como el contenido. Esto implica que si la imagen o video de fondo se elimina, de igual manera el contenido debe leerse apropiadamente.
De igual manera, al tener una imagen como fondo, podrías presentar problemas de legibilidad debido a los diferentes matices de tu foto. El color de tu texto puede contrastar a la perfección con algunas zonas, pero no con otras. Por eso puede ser complicado elegir una fotografía o un video que combine bien con todos los otros elementos gráficos de tu sitio web.
Sin embargo, al elegir imágenes como fondo, a pesar de que elegir una paleta de colores puede ser complicado, tienes más facilidades para destacar los elementos importantes como el logo y el menú de navegación.
Por otro lado, un fondo que contenga video puede ser más dinámico e inesperado, puede llegar a ser ese factor sorpresa para los usuarios. Pero es más complicado elegir una paleta de colores para tu tipografía y demás elementos. Cambiar el color de la tipografía según el fondo tampoco es una opción viable, no sólo porque te va a tomar mucho tiempo, sino porque es más complicado trabajar con una paleta de colores más amplia y mantener la identidad de marca.
Fondo para página de inicio
El uso más común de un fondo de pantalla completa es en la página de inicio pues es la que debe causar mas impacto. En las otras secciones se suelen emplear fondos con colores por cuestiones básicas de legibilidad. Además, una imagen podría ser un elemento distractor en aquellas secciones donde el contenido cobra más relevancia.
Un factor importante a considerar es la compatibilidad con los dispositivos móviles. En general, poner un video de pantalla completa en un dispositivo móvil pierde el efecto impactante que tendría en un ordenador o portátil.
Otro factor a tener en cuenta es la personalidad de marca y el público objetivo. Debes asegurarte de elegir una imagen que represente a la marca. Es probable que está búsqueda te lleve tiempo, pero si logras elegir una imagen que se alinee bien con las características de la marca, podrás distinguir a tu sitio del resto.
Tener en cuenta el contraste
El contraste es una característica que podemos encontrar en todo sitio web. Gracias al contraste podemos destacar ciertos elementos, por ejemplo, para separar la tipografía del fondo usas un contraste entre tonos oscuros y claros. Es decir, tu fondo es de color oscuro y tu tipografía clara o viceversa.
Al trabajar con imágenes es un poco más sencillo verificar las cuestiones de contraste y legibilidad, pero en un video podría ser bastante complicado. Un recurso útil en estos casos es emplear un filtro de color en tu página de modo que el contenido textual pueda ser legible. Otra posible opción es encerrar tu texto sobre un recuadro de color sólido, de ese modo aseguras su legibilidad.
Creación de slideshows
Anteriormente hemos mencionado que existen básicamente dos formas de trabajar con imágenes grandes en fondos. Una de ellas es elegir una sola imagen y la otra es elegir varias para presentarlas en secuencia. Esta última opción es bastante popular en portafolios online. También es una técnica que se emplea en el comercio online, especialmente si se trata de accesorios y ropa.
Este slideshow también puede funcionar para videos, aunque sería más apropiado en un portafolio online, de modo que se visualiza como una galería de videos. Aunque esta opción suena bastante tentadora, es complicado crear una galería de este tipo y además puede que la renderización en los navegadores no sea óptima. De ser el caso, gran parte de la experiencia de usuario se pierde.
Usar layouts adaptativas
Aunque ya lo mencionamos anteriormente, los dispositivos móviles cuenta y debes tener en cuenta a estos usuario al momento de desarrollar tu sitio web. Ya sea que decidas emplear imágenes o video para tu fondo, realiza las pruebas correspondientes para verificar que tu fondo se visualiza bien en diferentes dispositivos.
