Ett levande foto. Cinemagrafi. Rörliga bilder. Fortfarande rörelse. Det finns så många namn för den här trenden i webbdesign, identifierad av en hjältebild som verkar komma levande på ett subtilt sätt.
Det är inte riktigt ett foto, men inte heller en video heller. Rörelsen är ofta begränsad till en åtgärd i bilden för att hjälpa användaren att uppmärksamma och dra in dem i bilden. Oavsett vad du kallar det, trender den här trenden och poppar upp överallt i webbdesign, som delbara gifs och på sociala medier.
Utveckling av trenden
Det är svårt att berätta varför idén för? Live? bilder startade, men du kan argumentera för att Apple hjälpte till att göra det mer populärt. Företaget introducerade fotografi som inkluderade rörelser med iPhone 6S. Det lilla extra ögonblicket av glädje är samma koncept för levande bilder på webbplatser. Det finns något extra i en stjärnbild som håller på att titta på den bara lite längre.
Samma begrepp som rörande bilder har börjat dyka upp på flera ställen. Verkligen fortfarande ramar reklam på digitala skyltar inkluderar någon som sedan blinkar eller blinkar på dig. Även lineups för Sunday Night Football inkluderar spelare headshots som blinkar efter en sekund, visar att det faktiskt är live action.
Varför använda den här tekniken? Det håller användarens uppmärksamhet längre och ger en mer intressant punkt av visuell referens. Flixel, ett företag som tillverkar filmbilder för kunder, säger att det genomsnittliga rörliga fotot håller användarnas uppmärksamhet 9 sekunder, jämfört med 1 sekund för den genomsnittliga stillbilden.
Foton eller illustrationer
Levande bilder eller filmteckningar kan fungera med fotografier eller illustrationer. Det finns ingen regel som säger att du måste använda en bildtyp eller en annan. Titta på de två bilderna ovan kan du se att antingen stilen kan vara ganska effektiv.
En annan övervägning är att rörelse inte behöver hända i en loop. Hillmann Living ovanför lyser på produkterna på hemsidan när det laddas. Det är den enda rörelsen och då är bilden bara det, ett stillbild. Vad som är trevligt om effekten här är att det gör att du ser direkt på de stolar som företaget säljer genast. Tekniken visar användarna vad på sidan betyder och vad de ska fokusera på på ett subtilt och intressant sätt.
Bar Z Wines tar ett annat tillvägagångssätt. Den illustrerade hemsidan verkar ganska vanlig först, men ett litet plan flyger genom skärmens övre mitt på en slinga. Rörelsen hjälper användaren att titta på viktiga ord på skärmen:? Våra viner är ofiltrerade.? Användaren vet omedelbart något om meddelandet på den här webbplatsen eftersom de dras till det viktigaste språket tack vare rörelse på skärmen.
Tips för framgång
Denna teknik kan fungera på flera sätt och för en mängd olika applikationer. Några av de bästa exemplen kommer från enkla scener eller landskap där ett vackert fotografi är utgångspunkten.
Gräset kan flytta i vinden eller ett landskap. En person kan blinka när den visas och överdimensionerad headshot. En produkt kan luta eller vrida eller slutföra den åtgärd den är avsedd för.
Det viktigaste när man tänker på denna trend är enkelheten. Om det är för mycket rörelse bör du förmodligen välja en video. Överraskningselementet är det som får det att fungera; Användarna förväntar sig en stillbild, men då kommer det till liv.
- Håll dig till en sak, och en användning per hemsida.
- Det måste se realistiskt ut.
- Rörelsen måste följa fysikens lagar.
- Motion bör vara subtil men märkbar.
- Överdriv inte det genom att lägga till ljud eller massor av klickåtgärder.
- Tänk på subtil användarkontroll, som rörelse som händer med musrörelser.
- Utveckla en rörlig bild som kan användas i flera kampanjer, inte bara din webbplats.
Hur gör du det?
Det finns många sätt att skapa denna effekt i dina mönster. Metoden bestämmer verkligen på din skicklighet, hur du planerar att använda levande bilder och budget.
Några av alternativen för att skapa subtil rörelse är:
- Skapa ett gif.
- Använd ett onlineverktyg (det finns ett nummer tillgängligt med varierande kostnader.
- Skapa bilden som en video med begränsad rörelse.
- Använd en app eller till och med din iPhone.
- Stryk samman stillbilder i ett videoformat.
Prova med denna YouTube-handledning för att hjälpa dig att planera och skapa en levande bild.
Ett perfekt exempel
Webbplatsen för Monochrome Paris är ett perfekt exempel på denna trend i åtgärd. Hemsidan är en till synes enkel bild av en rekord, men det styva elementet ser nästan ut smält och tar på sig tygets rörelse som rör sig i vinden. Effekten är engagerande, iögonfallande och drar användarna in i designen.
Effekten hjälper till att skapa intresse på ett subtilt sätt. Den föreställda visuella ser lite mer verklig ut på grund av rörelsen. Bläddra ner på sidan och andra rörliga element hälsar användaren, inklusive en vanlig vy av rekordspinnningen.
Denna webbplats är en bra fallstudie på effektiva sätt att använda denna trend. Hoppa över och klicka runt för att hjälpa till med att jogga din inspiration.
Slutsats
Oavsett vad du kallar det är levande bilder en av de trender som troligen kommer att hålla sig kvar. Det är ännu ett sätt att lägga till animering i en design utan att nödvändigtvis behöva producera en verklig video. Det är effektivt och kan vara mycket billigare än videoproduktion.
Tricket mot denna trend är att se till att det ser avsiktligt och verkligt ut. Att införa en dum lite rörelse kommer inte nödvändigtvis att ge dig önskad effekt. Gå tillbaka och titta verkligen på exemplen ovan, gå till webbplatser och klicka runt. Se vad den här animationen leder till i designen. I var och en av exemplen hjälper rörelsen användaren att komma till ett visst element eller utföra en viss åtgärd. Att avsiktlig och riktad användning av rörelse är nyckeln till effektiv filmdesign.