Cinemagraphs en Diseño Web

Si lees alguno de los innumerables informes de tendencias de diseño web que se publicaron a principios de este año, es probable que hayas leído acerca de la promesa de grandes cinemagrafías del tamaño de un héroe colocadas de manera prominente en las páginas de inicio de todas partes. Entonces, ¿dónde están?

Si bien algunas empresas vanguardistas los utilizan en sus sitios web, el cinemagraph ha sido relegado en gran medida para mostrar artículos resumidos y páginas de Reddit.

Bueno, yo digo que ya es suficiente. Es hora de que los cinemagraphs se levanten y ocupen el lugar que les corresponde como los héroes de las páginas web en los que estaban destinados a convertirse.

Por que funcionan los cinemagraphs

La idea de seguir una tendencia de diseño web simplemente porque estaba pronosticada nunca me emocionó mucho. Pero, ¿y si pudieras ser pionero en esa tendencia? ¿Y si realmente tuviera un propósito y resolviera un problema al mismo tiempo?

Cuando se trata de cinemagraphs, todas las afirmaciones anteriores son ciertas. Si bien ciertamente se ha discutido (e incluso se ha pronosticado como una tendencia en el diseño web), muy pocos sitios web los están utilizando. Como resultado, ni siquiera se han acercado a alcanzar una masa crítica, por lo que siguen siendo fascinantes para la mayoría de los usuarios de la web.

Ni una fotografía, ni un video, los cinemagraphs son inherentes a la vista porque engañan al espectador el tiempo suficiente para hacer que eche un segundo vistazo. En la era ADD en la que vivimos hoy, cualquier cosa que pueda usar para hacer que un usuario se detenga, incluso por un instante, cuenta como una pequeña ganancia por una razón muy importante:

Tienes su atención.

Una forma particularmente efectiva de atraer un poco la atención en un sitio web siempre ha sido el video. El ojo humano ama el movimiento. Pero un gran video de héroe (incluso uno corto) es tan voluminoso. Seguro que puede comprimirlo a una pulgada de su vida útil, pero luego se ve … comprimido. O puede dejarlo solo y sufrir las consecuencias de una página web de carga lenta.

Pero al usar un cinemagraph, puede ahorrar mucho ancho de banda sin dejar de satisfacer esa necesidad de movimiento. En realidad, estás subiendo la apuesta, porque puedes sacar provecho del aspecto novedoso de un cinemagraph: la gente simplemente no los ve muy a menudo y se impresiona cuando lo hacen.

Entonces, ahora que sabe por qué los cinemagraph merecen un lugar de importancia en la web, echemos un vistazo de alto nivel a cómo dar vida a uno.

Motores Glendevon utiliza un cinemagraph en su área de héroe para transmitir un estado de ánimo y destacarse como una «marca premium» entre sus competidores.

Opción 1: use un cinemagraph preexistente

Hay muchos casos en los que obtener un CG prefabricado es aceptable, o incluso se prefiere a hacer uno propio. Yo diría que si puede encontrar lo que necesita, y está en su presupuesto obtener los derechos, entonces ese es el camino a seguir. La única pregunta es: ¿dónde lo encuentras?

La buena noticia es que tienes opciones. Estarán determinados en gran medida por su presupuesto (o el de su cliente), pero existen muchas fuentes. Incluso hay algunos los libres Para escoger de. Sin embargo, si tiene ochenta dólares para gastar, Shutterstock tiene una selección bastante decente de CG de alta definición.

(Sugerencia: no tienen una sección de cinemagraph independiente, por lo que solo tienes que buscar el término «cinemagraph», además de tus otros términos de búsqueda dentro de la sección «metraje»).

Si logra encontrar lo que estaba imaginando, probablemente aún querrá comprimir el archivo hasta cierto punto. Más sobre esto en un momento.

Opción 2: haz tu propio

Quizás no pudiste encontrar lo que habías imaginado. O tal vez solo eres un aficionado al bricolaje, y te respeto por eso. Entonces, ¿cómo se hace exactamente un cinemagraph desde cero?

Primero, es útil tener el equipo y un plan adecuados. Esto es lo que recomiendo para comenzar:

• Una cámara que puede grabar videos
• Un trípode
• Un modelo y / o cualquier accesorio necesario.
• Un ordenador
• Acceso a un programa de edición de video (opcional)
• Acceso a Adobe Photoshop o un software de edición de cinemagraph más dedicado, como flixel

Eso es lo que necesitarás para hacer un cinemagraph. Pero para que sea efectivo, necesitará una gran idea.

¿Qué hace a un gran héroe Cinemagraph?

Si bien el tema general de su CG estará dictado en gran medida por el nicho del sitio web en sí, hay ciertos puntos universales a tener en cuenta al configurar la escena. Asegúrate de:

• Mantenlo sutil: El objetivo de usar un CG en lugar de un video es que está destinado a ser un truco mental. Algunos de los mejores CG se ven muy quietos y luego sorprenden al espectador con un movimiento sutil. Hablando de sutileza, asegúrese de que la composición general no esté demasiado ocupada o de colores brillantes si está colocando texto en capas y un CTA encima. Recuerde, el CG debe jugar con esos elementos, no distraerlos. Hablando de que…
• Deja espacio para el verdadero héroe: Asegúrate de saber dónde quieres que vayan tu título, subtítulo y botón de llamada a la acción dentro del cinemagraph. Esto afectará dónde coloca la acción principal en la composición.
• Mantenlo anclado: Por supuesto, un CG tiene algo de movimiento, pero la escena en general debe estar muy quieta para contrastar adecuadamente el movimiento. Un trípode debería ayudar con el movimiento de fondo y la estabilidad de la cámara. Si los ojos de su modelo deben moverse de un lado a otro, asegúrese de que mantenga la cabeza muy quieta al mismo tiempo.
• Hágalo capaz de realizar bucles: Dado que desea que el archivo sea relativamente pequeño, deberá repetir la acción para que se repita de la manera más fluida posible. Planifique esto al preparar la escena. Idealmente, la primera posición debería coincidir muy de cerca con la posición final, cerrando el ciclo.
• Utilice a una persona si es posible: Los estudios han demostrado que las imágenes con personas en ellas captan la atención de las personas mucho más que las que no lo hacen. Esto también es válido para los CG. Puntos extra si logras que tu modelo mire en la dirección del CTA. Esto ha sido demostrado para atraer la atención del usuario allí también.

Una vez que tenga todos sus elementos en su lugar, intente grabar entre 20 y 30 segundos de video, repitiendo el movimiento deseado varias veces, con aproximadamente 5 segundos de mantener las cosas completamente quietas en el medio. Esto debería darle suficiente metraje en bruto para convertirlo en un cinemagraph llamativo.

Poniendo todo junto

Si bien no entraré en el proceso paso a paso de convertir un video en un cinemagraph, hay varias opciones disponibles para ti. Puede desembolsar $ 299 para usar un programa de diseño de cinemagraph dedicado, pero puede armar un buen CG usando Photoshop, (que supongo que ya usas).

Comprimir el archivo

Ya sea que haya creado su CG desde cero o que haya obtenido uno existente, desea asegurarse de que se cargue rápidamente. Ya sea que su archivo de salida final sea un gif o un video (que recomiendo), su compresión dependerá de dos factores separados:

1. Calidad
2. Largo

Personalmente, trato de buscar la mayor calidad posible en cualquier imagen de héroe, video o cinemagraph de gran formato. En mi opinión, es una lástima sacrificar la calidad de cualquier archivo que tenga la intención de causar tal impacto visual. Para equilibrar esto, trato de hacer que mi bucle de cinemagraph sea lo más corto humanamente posible.

La acción tendrá un efecto en lo corto que puede ser el bucle: un tren que pasa zumbando puede ser mucho más corto que una mirada lenta y deliberada, que puede parecer algo espástica si se repite demasiado rápido. Tome el siguiente ejemplo de la agencia web El profundo final. Como todo lo que se necesita aquí es que un vagón de tren coincida con el siguiente para lograr un bucle bastante fluido, logré reducirlo a alrededor de un segundo.

A pesar de que logré mantener la acción extremadamente concisa, aún sabía que el tamaño del archivo podría reducirse para una carga aún más rápida. Terminé usando un compresor de video en línea gratuito llamado ClipChamp. Pude comprimir el video de varios megabytes a unos esbeltos 319 KB. Recuerde, la mayoría de los usuarios saldrán de su sitio después de solo tres segundos de espera, por lo que vale la pena ser rápido.

Y si su resultado final se queda con artefactos de compresión extrema, siempre puede emplear un truco probado y verdadero que se usa en videos imperfectos de héroes: enmascararlo con un semitransparente superposición estampada.

¿Interesado en ver cómo otros han utilizado cinemagraphs como imágenes heroicas? Tengo buenas noticias y malas: no hay muchas más para mostrar, que son las malas noticias. Pero la buena noticia es que si usted Si pusieras este plan en acción, estarías a la vanguardia de lo que promete ser una tendencia bastante importante.

Aquí hay un par que logré encontrar en la web:

Sabor dorado [Editor’s note: This site is shut down.]

conservación natural

Pensamientos finales

Un cinemagraph no solo puede impulsar un proyecto de sitio web que de otro modo sería aburrido, sino que también puede afectar su éxito. Si lo combina con un título espectacular y una llamada a la acción convincente, realmente puede captar la atención de sus usuarios. Lo que hagas con esa atención depende de ti.