Las imágenes de fondo pueden ayudar a atraer, involucrar e informar a los visitantes del sitio. Dependiendo de su diseño y posición, las imágenes de fondo pueden crear un estado de ánimo, brindar contexto sobre la marca y atraer la atención de los visitantes hacia elementos importantes de un sitio web.
En esta publicación, repasaremos dos tipos diferentes de imágenes de fondo de sitios web que puede usar y luego lo guiaremos a través de algunos ejemplos reales de sitios web con este tipo de imagen de fondo. A continuación, cubriremos algunas de las mejores prácticas para usar imágenes de fondo en el diseño de su propio sitio web. Empecemos.
Imágenes de fondo para sitios web
Antes de comenzar a buscar la imagen de fondo perfecta, debe conocer los conceptos básicos del fondo de su sitio web en general.
Hay dos tipos de fondo del sitio: fondo de contenido o contenido. El fondo del cuerpo ocupa la mayor parte o toda la pantalla. Puede ser una imagen, una ilustración gráfica, un solo color, un degradado de color o una textura. El fondo del contenido rodea el texto, las imágenes u otro contenido y se puede colocar encima del fondo del contenido.
Tomemos, por ejemplo, la página de inicio de nuestro blog. El fondo del contenido es blanco y el fondo del contenido es azul claro. El fondo del contenido ayuda a agrupar la imagen destacada, el título, la categoría y el tiempo de lectura de cada publicación de blog. Esto puede facilitar que los visitantes exploren su blog y tomen decisiones más informadas sobre en qué hacer clic.
Al usar imágenes de fondo en sus páginas web, puede usar imágenes como fondos de contenido y colocar texto directamente sobre ellas. Este es un enfoque común para crear una página de inicio efectiva. También puedes utilizar una imagen (o varias) como fondo de tu contenido, superpuestas sobre un fondo de un solo color. Este es un enfoque común para los sitios de cartera.
Echemos un vistazo a algunos ejemplos de diseños de fondo de sitios web a continuación.
Diseño de fondo del sitio web
- Varsovia UL
- cuidado de la corbeta
- Diseño de adicción
- A través de la oscuridad
- Colosal
- INSPIRAR
- Morris Adjmi Arquitectos
- estudio hipcool
- Bebidas doradas
- k +
- JVN
- Parques en Sintra
1. Varsovia UL
La UL de Varsovia es un sitio web interactivo que utiliza animaciones de desplazamiento e imágenes de fondo grandes para atraer y mantener la atención de los visitantes. Cada pintura le permite observar más de cerca el interior de la oficina con servicio.
Lo que nos gusta: Cada imagen de fondo incluida en el control deslizante de la página de inicio contiene tonos de azul que combinan con el color del logotipo y otros elementos de diseño, lo que hace que el diseño general sea más uniforme.
2. cuidado de la corbeta
Corvette Care es un sitio web rico en imágenes. Su página de inicio contiene un control deslizante de imagen de héroe que se activa cuando el usuario pasa el cursor sobre una de las palabras que representan los servicios de la empresa. Esta es una forma visual de mostrar que la empresa no solo ofrece mantenimiento y conservación básicos, sino que también es una de las mejores instalaciones de restauración y rendimiento del país para un Corvette.
Lo que nos gusta: En lugar de mostrar tres imágenes una al lado de la otra, este sitio utiliza un control deslizante con diferentes imágenes de fondo para representar una gama de servicios que se activan cuando el usuario pasa el cursor sobre el texto.
3. Diseño de adicción
Addictions Design viene con muchos tipos de imágenes de fondo: algunas son de tamaño completo, en capas y se presentan en controles deslizantes únicos. Estas imágenes de fondo ayudan a cumplir la misión de la empresa de mostrar las colecciones de artesanos y empresas de muebles.
lo que nos gusta: Las imágenes de fondo, en particular la imagen de fondo de todo el sitio en la sección Héroe de la página de inicio, te hacen sentir como si estuvieras entrando en una de las salas de exhibición de Addictions Design.
4. A través de la oscuridad
ThruDark combina imágenes de fondo y videos con colores oscuros para transmitir las diferentes vibraciones y actividades para las que están diseñados sus productos, ya sea para un viaje a la tundra extremadamente fría o a la jungla húmeda.
Lo que nos gusta: Las fotos de los productos se superponen a las fotos y videos de paisajes, lo que enfatiza que las prendas y el equipo ThruDark se desarrollaron para ayudar a los clientes en las condiciones más difíciles.
5. Colosal
Colossal utiliza colores llamativos, imágenes y animaciones para contar la historia de cómo creará un camino hacia la extinción. El sitio dedicado al innovador proyecto de extinción, la resurrección del mamut lanudo, utiliza imágenes de fondo y animaciones para explicar de manera efectiva qué es esta especie y cuáles son sus objetivos para darle vida.
Lo que nos gusta: Las imágenes de fondo combinadas con animaciones y otros efectos hacen que este sitio sea tan interesante como informativo.
6. INSPIRAR
INSPiiR muestra el vecindario de INSPiiR Saint-Sauveur con grandes imágenes de fondo en todo su sitio. El sitio usa transparencia para hacer que estas imágenes de fondo sean un poco más transparentes y oscuras, para que pueda leer fácilmente el texto en la parte superior.
Lo que nos gusta: Las superposiciones translúcidas mantienen el texto legible sin oscurecer las imágenes de fondo.
7. Morris Adjmi Arquitectos
El sitio web de MA ha sido diseñado para cumplir con la misión del estudio de crear edificios distintivos. Para esto, la página de inicio tiene un control deslizante de imagen de héroe con una barra de navegación casi sin formato con el logotipo en sí y un botón con la etiqueta «menú». Esto asegura que los proyectos de la MA estén en el punto de mira.
Lo que nos gusta: La barra de navegación minimalista se enfoca en las imágenes de fondo que contienen diseños del portafolio del estudio.
8. estudio hipcool
hipcool Studio es un sitio web minimalista que utiliza magistralmente el espaciado, la tipografía limpia y un color de fondo blanco para que las imágenes de su cartera se destaquen. Dado que las imágenes son la única fuente de color (aparte del logotipo), capturan y mantienen la atención del visitante.
Lo que nos gusta: El sitio yuxtapone imágenes de fondo grandes y coloridas con un estricto fondo blanco del contenido para realzar las imágenes.
9. Bebidas doradas
Al igual que los productos, el sitio web de Goldling Drinks está diseñado para transportar a los visitantes al mundo del sabor de sus bebidas. Para ello, cuenta con un fondo gráfico soñador y divertido que plasma la “hora dorada”.
Lo que nos gusta: El fondo de la página consta de ilustraciones gráficas que evocan la alegría y la complejidad de sus productos y su marca.
10 k +
K+ es uno de los mejores sitios web de portafolios de fotos. Su página de inicio presenta un control deslizante de héroe con imágenes de fondo que parecen imágenes de cuerpo completo hasta que el usuario se desplaza. Las fotos están perfectamente seleccionadas: la composición llama la atención con texto centrado y una flecha de desplazamiento, y un logo y un botón de menú de hamburguesas en las esquinas.
Lo que nos gusta: Las imágenes de fondo son coloridas y detalladas, pero logran llamar la atención, en lugar de distraer, sobre el logotipo, el botón de menú, el texto y el ícono de desplazamiento.
11 JVN
El sitio web de JVN se centra en los ingredientes que hacen que estos productos se destaquen, lo que se refleja en la copia, así como en videos y fotos. Las imágenes de fondo muestran los productos, sus ingredientes específicos como la caña de azúcar, así como los resultados en el cabello de personas reales.
Lo que nos gusta: La imagen de fondo del encabezado yuxtapone una textura que parece un producto con una imagen del fundador sosteniendo un producto embotellado para representarlo de múltiples maneras.
12 Parques en Sintra
Parques de Sintra está diseñado para ayudar a los visitantes a descubrir muchas formas diferentes de explorar Sintra. Para hacer esto, utiliza múltiples controles deslizantes de imagen. Por ejemplo, en la sección de encabezado, el control deslizante de imágenes animadas muestra recortes de imágenes que representan muchos de los parques, monumentos y sitios de Sintra. Esta es una excelente manera de mostrar que el viaje de una persona por la ciudad puede ser muy diferente al de otra.
Lo que nos gusta: El control deslizante del panel de imagen principal de este sitio es una forma inteligente de mostrar varias imágenes de fondo sin ocupar mucho espacio.
Si desea ver más diseños de fondo de sitio, aquí está el vídeo de flujo que pasa por cinco sitios web con imágenes de fondo geniales y otros efectos y por qué funcionan:
Mejores prácticas para la imagen de fondo del sitio web
La imagen de fondo del sitio web no solo pretende verse bien, sino también mejorar la experiencia del usuario de alguna manera. Veamos algunas prácticas recomendadas para elegir una imagen de fondo que ayude a transmitir su marca y proporcione señales visuales a sus usuarios.
1. Seleccione imágenes de alta calidad.
Cuando se trata de imágenes de fondo, la calidad se relaciona con la composición, la resolución y el tamaño. En primer lugar, las imágenes de fondo deben tener suficiente espacio y contraste de color para que cualquier texto superpuesto sea fácil de leer. Aquí hay un ejemplo:
Las imágenes de fondo del sitio web deben tener al menos 72 píxeles por pulgada (ppi) y preferiblemente 1920 píxeles de ancho x 1080 píxeles de alto, según Colectivo de medios del noroeste. Esta proporción de 16:9 se considera ideal ya que cubre el sitio web sin comprometer la calidad de la imagen.
2. Resalte el texto.
Si está utilizando una imagen de fondo, deberá asegurarse de que su texto se destaque para que los visitantes puedan leerlo. Hay varias formas de hacer esto: usando colores contrastantes o un fondo sólido del contenido entre el texto y la imagen de fondo, o usando superposiciones de imágenes. También puede colocar su texto en las partes más oscuras o más claras de la imagen de fondo.
Observe en el siguiente ejemplo que el fondo blanco del contenido ayuda a que el logotipo y el texto se destaquen del contenido.
3. Asegúrese de que las imágenes respondan.
Es muy importante que la imagen de fondo sea receptiva para que se adapte a todos los tamaños de pantalla sin ningún impacto notable en el rendimiento del sitio web. Para hacer que las imágenes respondan, debe:
- Establezca la propiedad de tamaño de fondo de CSS en «cubrir». Este valor le dice al navegador que escale el ancho y el alto de la imagen de fondo para que sea igual o mayor que las dimensiones del área visible.
- Agregue una consulta de medios. Esto permitirá que el navegador muestre una imagen de fondo más pequeña para dispositivos móviles, lo que reducirá la carga y, por lo tanto, acortará el tiempo de carga.
Para obtener información más detallada sobre todo el código necesario para que las imágenes de fondo respondan, consulte Cómo agregar una imagen y una imagen de fondo en HTML.
4. Pon imágenes llamativas y coloridas en el encabezado.
Si tiene una imagen con colores llamativos o ilustraciones, considere incluirla en la sección de encabezado de su página de inicio. De esta manera, puede determinar de inmediato la personalidad de la marca y el estado de ánimo del sitio, y luego colocar más contenido debajo con mucho texto. Aquí hay un ejemplo de un encabezado de video seguido de una sección más minimalista:
Usa imágenes de fondo en tu proyecto
El uso de una imagen de fondo del sitio web puede ayudar a captar la atención de los visitantes de inmediato, contar una historia y brindar importantes señales visuales. Su uso requerirá que consideres el tamaño de los archivos, los tiempos de carga, el color del texto y otros factores, pero si se hace correctamente, las imágenes de fondo harán que tu sitio web sea más atractivo y memorable.
