Tendencia de diseño: fotos que cobran vida
Una foto en vivo. Cinemagraph. Imágenes en movimiento. Todavía movimiento. Hay tantos nombres para esta tendencia en el diseño web, identificados por una imagen de héroe que parece cobrar vida de una manera sutil.
No es exactamente una foto, pero tampoco es un video. El movimiento a menudo se limita a una sola acción en la imagen para ayudar a captar la atención del usuario y atraerlos 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 saber dónde comenzó la idea de las fotos "en vivo", pero podría argumentar que Apple ayudó a hacerla más popular. La compañía introdujo una fotografía que incluía toques de movimiento con el iPhone 6S. Ese pequeño momento extra de deleite es el mismo concepto para fotos vivas en sitios web. Hay algo extra en una imagen estelar que te mantiene mirando 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 Sunday Night Football incluyen disparos a la cabeza del jugador que parpadean después de un segundo, lo que muestra que en realidad es acción en vivo.
¿Por qué usar 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 produce imágenes cinematográficas para 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
Las imágenes vivas o cinemagraphs pueden trabajar con fotografías o ilustraciones. No hay una regla que diga que tienes que usar un tipo de imágenes u otro. Mirando las dos imágenes de arriba, puede ver que cualquier estilo puede ser bastante efectivo.
Otra consideración es que el movimiento no tiene que seguir sucediendo en un bucle. Hillmann Living, arriba, arroja luz sobre los productos en la página de inicio mientras 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 qué importa en la página 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 sobre los mensajes en este sitio web porque se sienten atraídos por el idioma más importante gracias al movimiento en la pantalla.
Consejos para el éxito
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 o paisajes simples donde una hermosa fotografía es el punto de partida.
La hierba puede moverse en el viento o en un paisaje. Una persona puede parpadear cuando se muestra en un tiro en la cabeza de gran tamaño. Un producto puede inclinarse, girar o completar la acción para la que está diseñado.
Lo más importante al pensar en esta tendencia es la simplicidad. Si hay demasiado movimiento, probablemente deberías 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.
- Tiene que parecer realista.
- El movimiento necesita seguir las leyes de la física.
- El movimiento debe ser sutil pero notable.
- No exagere agregando sonido o muchas acciones de clic.
- Considere el control sutil del usuario, como el movimiento que ocurre con los movimientos del mouse.
- Desarrolle una imagen en movimiento que pueda usarse en múltiples campañas, no solo en su sitio web.
¿Cómo lo haces?
Hay muchas formas de crear este efecto en sus diseños. El método realmente determina tu nivel de habilidad, cómo planeas usar las imágenes vivas y el presupuesto.
Algunas de las opciones para crear movimiento sutil incluyen:
- Crea un gif.
- Use una herramienta en línea (hay un número disponible con costos variables.
- Cree la imagen como video con movimiento limitado.
- Use una aplicación o incluso su iPhone.
- Encadena imágenes fijas en 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 derretido 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. El visual imaginado parece 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 del registro.
Este sitio web es un gran caso de estudio en formas efectivas de usar esta tendencia. Dirígete y haz clic para ayudar a impulsar 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 necesariamente tener que producir 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 tonto no necesariamente te dará el efecto deseado. Regrese y mire 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 un diseño cinematográfico efectivo.
