Cuando se utilizan de forma eficaz, los vídeos de fondo pueden captar la atención de los visitantes y sumergirlos en una experiencia envolvente.
Los vídeos de fondo pueden ser un complemento muy atractivo para el diseño de un sitio web. Sin embargo, si no se ejecutan bien, pueden frustrar a los visitantes y hacer que abandonen la página.
Ya sea un portafolio personal, una tienda online, o un blog, los vídeos de fondo pueden animar a los visitantes a interactuar con el contenido. No obstante, también pueden distraer o incluso resultar perjudiciales. Al incorporar movimiento a tu diseño, es fundamental tener en cuenta la accesibilidad.
En esta guía, exploramos sitios web con algunos de los mejores ejemplos de vídeos de fondo y compartimos consejos y trucos para elevar el nivel de tus diseños.
4 ejemplos de sitios web con vídeos de fondo
Los mejores sitios web con fondos de vídeo cautivan a los espectadores sin restar protagonismo al contenido principal. Su función principal es mantener a los visitantes interesados y presentes, mientras complementan el resto de los elementos del sitio.
Una forma excelente de aprender a aprovechar los vídeos de fondo es ver este elemento de diseño en acción. Aquí tienes cinco ejemplos de sitios web que utilizan fondos de vídeo con resultados espectaculares.
Aviso de fotosensibilidad: Los siguientes sitios web utilizan movimiento al cargar.
1. OSCO Studios
OSCO Studio es una agencia creativa especializada en contenido y estrategia. La página de inicio de la marca es un vídeo de fondo a pantalla completa con texto minimalista y una barra de navegación transparente en la parte superior.
El bucle de vídeo fluido muestra fragmentos de los trabajos de publicidad visual de la agencia —una amplia variedad de planos que van desde playas y cielos azules hasta montañas y coches deportivos— detrás de los logotipos de clientes anteriores y llamadas a la acción (CTA) como "contacta con nosotros". El uso que hace OSCO Studio de los vídeos de fondo pone de manifiesto su versatilidad y su capacidad para crear contenido fotográfico y de vídeo de primer nivel, asegurando que los clientes potenciales sepan que pueden esperar resultados impresionantes.
2. The Royal de Seed Mobile
The Royal es un teléfono lanzado por Seed Mobile, y este sitio web presenta el producto con clips de vídeo de fondo del dispositivo.
A los visitantes les recibe un vídeo de alta calidad a cámara lenta del teléfono y sus características, detrás de un texto que dice "THE SEED ROYAL UNVEILED". El vídeo utiliza un fondo negro con detalles en verde para combinar con la identidad de marca de Seed y se reproduce en un bucle continuo.
Los gráficos del vídeo de fondo despiertan curiosidad por el Royal sin distraer de otros elementos del sitio, incluido un modelo interactivo en 3D único del producto.
3. Milk Truck films
Milk Truck films es una productora de vídeo con sede en Finlandia, creada por Jacob Nordblad y Aleksi Puska. En la página de inicio, los visitantes se encuentran con una pantalla estática que muestra el nombre de la empresa y una flecha hacia abajo que invita a hacer scroll. A medida que bajas por la página, se reproducen en bucle clips de vídeo de varios proyectos.
Milk Truck utiliza vídeos de fondo para mostrar sus habilidades videográficas, pero también ofrece suficiente contenido estático para evitar abrumar a los visitantes.
4. Austin Gomez
Nada más entrar en el sitio web de Austin Gomez, queda claro que la música es la protagonista. Austin colabora con artistas para crear vídeos musicales y utiliza varios vídeos de fondo para mostrar su portafolio.
La página de inicio utiliza un vídeo en bucle, pero al bajar un poco más, aparece una cuadrícula de vídeos musicales con fondos animados y colores vibrantes. Algunos vídeos emplean fondos en movimiento para crear un efecto bokeh (desenfocado), mientras que otros son nítidos y detallados. Cada vídeo de la cuadrícula lleva una capa negra superpuesta para resaltar el texto blanco, lo que suaviza el diseño en movimiento y garantiza que el texto sea legible.
El sitio web de Austin es un ejemplo excelente de portafolio personal con vídeos de fondo que reflejan su estilo característico. Los visitantes pueden navegar por un currículum digital mientras clips de sus trabajos muestran su portafolio de fondo.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
3 lugares donde encontrar vídeos de fondo gratuitos
Dado que los vídeos de fondo deben complementar la narrativa y la identidad de una marca, un vídeo hecho a medida para tu sitio contará la historia más convincente. Sin embargo, los vídeos personalizados no siempre son una opción.
Los plazos de producción y los costes pueden hacer que producir un vídeo original sea inviable. La buena noticia es que un vídeo de stock también puede transmitir el mensaje adecuado, y hay muchos disponibles de forma gratuita.
Aquí tienes algunos lugares donde encontrar vídeos de fondo gratuitos para tu sitio:
- Coverr: Coverr ofrece una gran variedad de vídeos de stock gratuitos. Añaden vídeos nuevos cada semana, por lo que la colección siempre está actualizada. Las categorías incluyen comida, tecnología, animales y naturaleza.
- Vimeo: Aunque Vimeo no es en sí mismo un proveedor de vídeos de fondo, muchos miembros de la comunidad comparten material gratuito a través de la plataforma. Tendrás que buscar un poco para encontrar exactamente lo que necesitas, pero nunca se sabe cuándo puedes encontrar una joya.
- Pexels Videos: Pexels es una plataforma fantástica para encontrar fotos de stock gratuitas, así que no es de extrañar que también ofrezcan una colección de vídeos. Lo más útil de este recurso es la precisión de sus categorías: por ejemplo, en lugar de tener que revisar todo lo que ofrece la sección de "Naturaleza", puedes ir directamente a "Árboles".
Recomendaciones para tus vídeos de fondo
Añadir un vídeo de fondo puede elevar el nivel de tu sitio, pero es importante tomar decisiones de diseño informadas. Aquí tienes algunos consejos para guiarte.
Ofrece opciones para pausar los vídeos. El movimiento excesivo puede resultar perjudicial para visitantes con trastornos vestibulares, epilepsia, fotosensibilidad, TDAH o mareos. Incluye un botón de reproducir/pausar en los vídeos para que quienes no deseen ver tanto movimiento puedan seguir disfrutando de tu sitio web.
Reduce el tamaño del archivo. Los vídeos en calidad Full HD o 4K generan archivos pesados que afectan a la velocidad de carga. Cuanto mayor sea el tamaño, más lenta será la carga de tu página, lo que puede hacer que los visitantes vuelvan a los resultados de búsqueda en busca de una página más rápida. Para solucionar este problema, utiliza herramientas como Clipchamp y HandBrake para comprimir tus vídeos.
Usa GIFs para móviles. GIF significa Graphics Interchange Format (Formato de Intercambio de Gráficos). Son archivos de imagen cortos y en bucle que se usan principalmente en redes sociales, pero puedes utilizarlos en tu sitio web en lugar de vídeos para ahorrar espacio.
Los GIFs también están mejor optimizados para dispositivos móviles que los vídeos. Algunos GIFs pueden ser bastante pesados, así que lo mejor es usar un compresor especializado como Imgur, GIPHY o Ezgif para reducir el tamaño del archivo antes de subirlo.
Elige vídeos relevantes. No uses el primer vídeo que te parezca estéticamente agradable sin considerar si realmente encaja con tu contenido.
Los vídeos de fondo deben ser apropiados para tu sitio web y estar adaptados a tus productos y servicios. Si vendes un producto específico, lo ideal es conseguir material personalizado de un videógrafo que destaque exactamente el artículo de tu marca. Sin embargo, si no tienes los recursos, puedes elegir vídeos de stock que complementen tu producto. Por ejemplo, una empresa que vende equipo de acampada podría usar un vídeo de un bosque para crear una sensación de naturaleza en el sitio. La misma estrategia se aplica a los negocios de servicios: las imágenes de un bosque podrían encajar perfectamente en una web de visitas guiadas por senderos locales.
Recuerda: los vídeos de un producto no siempre son suficientes; deben estar enfocados de tal manera que transmitan un mensaje al visitante y le animen a realizar una compra.
El sitio web de un diseñador de interiores no muestra vídeos del proceso de reforma de una casa con paredes derribadas y escombros por todas partes. En su lugar, los vídeos de fondo podrían mostrar una residencia tras la reforma, con imágenes de una familia sonriendo y disfrutando de su nuevo hogar, comunicando a los espectadores que ellos también pueden encontrar la felicidad a través de los servicios del diseñador.
Usa videos más cortos. Los videos cortos reducen el tamaño de los archivos y mejoran la velocidad de carga. Poner un clip corto en bucle para dar la impresión de un video más largo mantiene el dinamismo visual sin causar esperas por carga.
Evita videos que distraigan. Los videos de fondo no están hechos para ser el centro de atención; por algo están en el fondo. Deben complementar las imágenes principales sin desviar la mirada del contenido importante.
No uses videos con sonido. Evita los videos de fondo que suenan a todo volumen en el móvil o portátil nada más entrar. Un cliente potencial podría cerrar la pestaña al instante y marcharse a la competencia, que seguro tiene un diseño más amable.
Prescinde del sonido y cuenta historias con imágenes. Si el audio o la música son clave para la experiencia, asegúrate de que empiecen silenciados y añade un botón en una esquina para que los visitantes puedan activarlos o desactivarlos a su gusto.
Encuentra más inspiración con Webflow
Usar los temas, colores y efectos de bucle adecuados en las imágenes de fondo puede darle vida a tu diseño. Pero recuerda: el video que se reproduce solo sin una opción clara para pausar es una de las 10 razones principales por las que la gente abandona una web. Con Webflow, puedes activar un botón de reproducción/pausa en todos los videos por defecto.
Para más consejos sobre cómo usar videos de fondo en tus diseños, echa un vistazo a la lección sobre estilos de fondo de Webflow University.
Diseño web de otro nivel
Desde lo más básico hasta lo avanzado: aprende a crear sitios en Webflow con más de 100 lecciones, incluyendo los fundamentos de HTML y CSS.
