Dominar el arte de los fondos de video en los sitios web

El video siempre ha sido una de las formas más poderosas de comunicación visual. La influencia mundial de la televisión y el cine es testimonio de la atracción inherente de la “imagen en movimiento”.

Los fondos de vídeo se han convertido en una interesante tendencia en desarrollo en el transcurso de 2014. Tradicionalmente el video en la web ha sido sobre la transmisión de mensajes. Los fondos de video a menudo se centran en establecer un tono o sentimiento emocional más que en contar historias.

Consejos para fondos de video

La idea central que todo desarrollador de sitios web debe tener en cuenta es que los fondos de vídeo no deben utilizarse porque estén de moda y sean bonitos, sino más bien porque pueden favorecer el mensaje del sitio o evocar un cierto sentimiento.

Silenciar el audio

Por lo general, el video de fondo está configurado para “auto-play”, por lo que se iniciará automáticamente tan pronto como el usuario abra el sitio web. Por esta razón, generalmente es una buena práctica silenciar el audio por defecto, dando al usuario la posibilidad de anular el silencio si es necesario.

Limitar la duración de los videos

Otro aspecto que debes considerar es la duración del video, que en la mayoría de los casos se reinicia una vez terminado. Al igual que con los GIF animados, los bucles cortos pueden crear una irritante sensación de repetición, mientras que las secuencias de vídeo demasiado largas impactan en los tiempos de carga.

Las circunstancias variarán en cada caso, pero probablemente deberías estar filmando entre 15 y 25 segundos.

Diseño de una gama de dispositivos

Aunque no hay duda de que los fondos de video son una tendencia popular, esto no implica que todos los dispositivos los soporten. Los usuarios que visiten su sitio web con un teléfono inteligente, una tableta o un explorador heredado tal vez no puedan reproducir su video en absoluto. Un buen desarrollador web siempre proporcionará una imagen estática como fondo de reserva.

Incluso si un dispositivo técnicamente puede renderizar tu vídeo, eso no significa que deba hacerlo automáticamente. Forzar el vídeo de alta resolución en dispositivos móviles con ancho de banda limitado puede llevar a una experiencia de usuario lenta y potencialmente costosa.

Al igual que con la construcción de cualquier dispositivo , es fundamental pensar largo y tendido sobre el equilibrio entre la calidad y el peso para maximizar los resultados.

Encontrar fondos de video

Después de leer la primera parte del artículo, tal vez haya decidido darle un nuevo aspecto a su sitio, y ahora se pregunta dónde puede obtener algunos videos de calidad, de fondo?

Consulta nuestra guía de producción de vídeos si quieres aprender a crear un vídeo.

Si buscas ayuda profesional para la producción de un vídeo, puedes trabajar con un cineasta para crear un vídeo personalizado. Si tienes un presupuesto más bajo, hay sitios web de videos de stock que ofrecen una gran variedad de videos de alta calidad con temas relacionados con la naturaleza, la gente, los animales y muchas otras categorías útiles. Los vídeos de menor resolución a veces pueden descargarse gratuitamente, mientras que las versiones de mayor resolución suelen costar pocos dólares.

Tres grandes recursos de material de archivo que recomiendo son:

  • Videvo.net
  • Xstockvideo.com
  • Mazwai.com

Veamos ahora algunos de los aspectos positivos que el uso de un fondo de vídeo puede aportar a su sitio web.

Los Pros

  • Nuestros cerebros están construidos para lidiar con un mundo en movimiento y son naturalmente atraídos por el video.
  • Como con cualquier tendencia creativa, los fondos de video deben dar a su sitio un sabor fresco y moderno.
  • Todos entendemos la majestad y el poder del cine. El video nos da herramientas de edición, sincronización y encuadre que pueden ayudarnos a transmitir nuestro sentido de estilo o identidad de marca.
  • En los sitios web centrados en productos/servicios, el video puede ser usado para dar un sentido del producto en acción.

Sin embargo, no todo lo que brilla es oro y los fondos de vídeo tienen algunos aspectos negativos que deben tenerse en cuenta.

Los contras

  • Los fondos de video no son adecuados para todos los tipos de sitios web. Por ejemplo, es poco probable que los blogs, las revistas en línea y los sitios de noticias o institucionales se beneficien de ellos.
  • El vídeo a pantalla completa puede distraer al usuario de la tarea central de su sitio web – particularmente cuando el vídeo es demasiado colorido o respalda elementos importantes de la interfaz de usuario como los botones.
  • El rendimiento de su video depende en gran medida de factores que están fuera de su control. De hecho, en el caso de que una mala conexión a Internet resulte en un rendimiento irregular del sitio, tu usuario probablemente te culpará a ti , en lugar de a la conexión.
  • Los problemas de rendimiento de los vídeos pueden afectar a todo el rendimiento del sitio, incluso a las páginas que no utilizan vídeo.
  • Algunos usuarios pueden simplemente encontrar la presencia de un fondo animado perturbador o distractor.

¿Quién está usando fondos de video?

Veamos algunos ejemplos de fondos de video y veamos dónde funciona.

Surfeo porque

Sitio web: Navego porque…

Este sitio web es parte de la campaña de marketing digital de BillaBong. Decidieron usar un video como fondo en su página de inicio pero no en todo el sitio: esto hace que el sitio sea “amigable para cargar”.

Superponen inteligentemente su video con un patrón de malla de puntos para aumentar el contraste del texto.

Los gráficos de la página de inicio están compuestos en su mayoría por el video, lo que no interfiere con los escritos de motivación. Además, los desarrolladores de la web tuvieron la gran idea de congelar la acción momentáneamente mientras tomamos algunas instantáneas impresionantes y acrobáticas.

Todo, “I Surf Because” tiene tanto éxito que estoy ansioso por probar el surf!

Vida de Pi

Sitio web: La vida de Pi

El siguiente ejemplo que vamos a ver es el sitio web promocional de la película ganadora del Oscar de Ang Lee “Life of Pi”, estrenada en 2012. A diferencia de los otros ejemplos que se enumeran aquí, el vídeo utilizado aquí ES en realidad el producto que el sitio está diseñado para promover.

Este sitio fue uno de los primeros ejemplos de alto perfil usando el video como fondo. El sitio utiliza el video para mostrar escenas clave de la película y, con la ayuda de la música, crea una sensación de asombro y anticipación.

Sin embargo, puedes notar que la calidad del video no es muy alta y algunas escenas parecen borrosas y casi humeantes a veces. Aunque esto no es visualmente ideal, presumiblemente es un intercambio por tiempos de carga más rápidos.

PayPal

Sitio web: PayPal

Hay otro sitio web muy conocido, usado por miles de personas diariamente, que hace un gran uso de los fondos de video: sí, estamos hablando de Paypal.

La empresa de sistemas de pago en línea decidió seguir la tendencia y, hace menos de seis meses, cambió toda su interfaz de usuario.

En este caso, el vídeo se utiliza para enfatizar el lema de la empresa: ” Estamos aquí, allá, en cualquier lugar “. Muestra pequeñas tomas de clientes potenciales de PayPal haciendo negocios en una amplia variedad de lugares. Dondequiera que estén, pueden confiar en los servicios de PayPal.

A pesar del uso de un video, el sitio se carga en unos pocos segundos y las imágenes fluyen sin retrasos.

RiskEverything

Sitio web: Risk Everything

Nuestro último ejemplo es RiskEverything, una compañía que ayuda a las empresas a recaudar fondos. Sin embargo, lo que más nos interesa es la forma en que usan su video.

En lugar de cargar un fondo de pantalla completo, el video de Riskeverything sólo cubre la sección superior del sitio. El video se carga rápidamente y fluye sin problemas, pero a veces, discernir el texto blanco en ‘Nuestro modelo es simple ‘, y el botón fantasma contra el fondo no es fácil.

La naturaleza dinámica del video significa que la legibilidad del texto contra un fondo se convierte en un problema mucho más complejo. La legibilidad puede variar drásticamente de una escena a otra en un vídeo. Este es un desafío que las secuencias de créditos de apertura de películas han estado tratando durante muchos años.

Si produces el video desde cero, puedes planear un buen contraste de fondo. De lo contrario, tendrás que probar, probar y probar de nuevo.

Este es un caso en el que creo que los desarrolladores de RiskEverything podrían haber prestado más atención a la creación de contenidos con un contraste adecuado.

 

Este artículo fue escrito originalmente por Simone Sala y publicado en Sitepoint.com.

admin

Deja una respuesta

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

Publicar un comentario