Una foto en vivo. Cinemagraph. Imágenes en movimiento. Movimiento inmóvil Hay tantos nombres para esta tendencia en diseño web, identificados por una imagen de héroe que parece cobrar vida de manera sutil.
No es una foto, pero tampoco un video. El movimiento a menudo se limita a una acción en la imagen para ayudar a captar la atención del usuario y atraerla hacia la imagen. Independientemente de cómo lo llames, esta tendencia está teniendo un impacto y aparece en todas partes en el diseño web, como gifs compartibles y en las redes sociales.
Evolución de la tendencia
Es difícil decir dónde está la idea de? Vivir? Las fotos comenzaron, pero se podría argumentar que Apple ayudó a hacerlo más popular. La compañía introdujo la fotografía que incluía toques de movimiento con el iPhone 6S. Ese pequeño momento extra de deleite es el mismo concepto para vivir fotos en sitios web. Hay algo extra en una imagen estelar que te mantiene mirándolo un poco más.
Ese mismo concepto de imágenes en movimiento ha comenzado a aparecer en más lugares. Aparentemente, los anuncios de fotograma fijo en las carteleras digitales incluyen a alguien que luego parpadea o te guiña un ojo. Incluso las alineaciones para el Sunday Night Football incluyen disparos en la cabeza del jugador que parpadean después de un segundo, mostrándote que en realidad es acción en vivo.
¿Por qué utilizar esta técnica? Mantiene la atención del usuario por más tiempo y proporciona un punto de referencia visual más interesante. Flixel, una compañía que hace imágenes de cinemagraph para los clientes, dice que la foto en movimiento promedio mantiene la atención de los usuarios durante 9 segundos, en comparación con 1 segundo para la imagen fija promedio.
Fotos o ilustraciones
Imágenes vivas o cinemagraphs pueden trabajar con fotografías o ilustraciones. No hay una regla que diga que debes usar un tipo de imagen u otro. Mirando las dos imágenes de arriba, puedes ver que cualquiera de los estilos puede ser bastante efectivo.
Otra consideración es que el movimiento no tiene que seguir ocurriendo en un bucle. Hillmann Living, arriba, ilumina los productos en la página de inicio a medida que se carga. Ese es el único movimiento y luego la foto es solo eso, una foto fija. Lo bueno del efecto aquí es que te hace mirar directamente a las sillas que la compañía está vendiendo de inmediato. La técnica muestra a los usuarios lo que en la página importa y en qué se supone que deben enfocarse de una manera sutil e interesante.
Bar Z Wines toma otro enfoque. La página de inicio ilustrada parece bastante simple al principio, pero un pequeño avión vuela a través del centro superior de la pantalla en un bucle. La moción ayuda a dirigir al usuario a mirar palabras importantes en la pantalla: "Nuestros vinos no están filtrados". El usuario inmediatamente sabe algo acerca de los mensajes en este sitio web porque se sienten atraídos por el lenguaje más importante gracias al movimiento en la pantalla.
Consejos para el exito
Esta técnica puede funcionar de varias maneras y para una variedad de aplicaciones de diseño. Algunos de los mejores ejemplos provienen de escenas simples o paisajes donde una hermosa fotografía es el punto de partida.
La hierba podría moverse en el viento o en un paisaje. Una persona puede parpadear cuando se muestra en la cabeza y sobredimensionada. Un producto puede inclinar, girar o completar la acción para la que está diseñado.
Lo más importante cuando se piensa en esta tendencia es la simplicidad. Si hay demasiado movimiento, probablemente debería optar por un video. El elemento sorpresa es lo que lo hace funcionar; los usuarios esperan una imagen fija, pero luego cobra vida.
- Se adhieren a una cosa, y un uso por sitio web.
- Necesita parecer realista.
- El movimiento necesita seguir las leyes de la física.
- El movimiento debe ser sutil pero notable.
- No exagere agregando sonidos o muchas acciones de clics.
- Considere el control del usuario sutil, como el movimiento que ocurre con los movimientos del mouse.
- Desarrolle una imagen en movimiento que se pueda usar en varias campañas, no solo en su sitio web.
¿Cómo lo haces?
Hay muchas formas de crear este efecto en tus diseños. El método realmente determina su nivel de habilidad, cómo planea usar las imágenes vivientes y el presupuesto.
Algunas de las opciones para crear movimientos sutiles incluyen:
- Crea un gif.
- Use una herramienta en línea (hay un número disponible con costos variables).
- Crea la imagen como video con movimiento limitado.
- Usa una aplicación o incluso tu iPhone.
- Unir imágenes fijas en un formato de video.
Prueba este tutorial de YouTube para ayudarte a planificar y crear una imagen viva.
Un ejemplo perfecto
El sitio web de Monochrome Paris es un ejemplo perfecto de esta tendencia en acción. La página de inicio es una imagen aparentemente simple de un registro, pero el elemento rígido casi parece fundido y toma el movimiento de la tela que se mueve en el viento. El efecto es atractivo, llamativo y atrae a los usuarios al diseño.
El efecto ayuda a crear interés de una manera sutil. Lo visual imaginado se ve un poco más real debido al movimiento. Desplácese hacia abajo en la página y otros elementos en movimiento saludan al usuario, incluida una vista normal del giro de grabación.
Este sitio web es un gran caso de estudio en formas efectivas de usar esta tendencia. Dirígete y haz clic para ayudar a tu inspiración.
Conclusión
Independientemente de cómo lo llames, las imágenes vivas son una de esas tendencias que probablemente se mantendrán. Es una forma más de agregar animación a un diseño sin tener que producir necesariamente un video real. Es efectivo y puede ser mucho menos costoso que la producción de video.
El truco de esta tendencia es asegurarse de que se vea intencional y real. Incorporar un poco de movimiento no necesariamente le dará el efecto deseado. Regrese y observe los ejemplos anteriores, vaya a los sitios web y haga clic. Mira a qué te lleva esa animación en el diseño. En cada uno de los ejemplos, el movimiento ayuda al usuario a llegar a un elemento específico o realizar una determinada acción. Ese uso intencional y dirigido del movimiento es la clave para el diseño efectivo de cinemagraph.