Vad är en Lottie-animation?
En Lottie-animation är en lättviktig animationsfil i JSON-format som skapas i Adobe After Effects och exporteras via ett plugin som heter Bodymovin. Till skillnad från video eller GIF är en Lottie-fil vektorbaserad, vilket innebär att den skalas perfekt på alla skärmstorlekar utan att tappa kvalitet.
Formatet skapades ursprungligen av Airbnb och har sedan dess blivit en standard inom modern webbdesign och apputveckling. En Lottie-fil är ofta bara några kilobyte stor, jämfört med en GIF som kan bli många gånger tyngre för samma animation.
Varför är Lottie smart för din hemsida?
Rörelse fångar uppmärksamhet. Det är inte en trend eller en designpreferens, det är biologi. Vår hjärna reagerar instinktivt på rörelse och en animerad element på en hemsida får besikaren att stanna upp och titta.
Men rörelse utan syfte är bara brus. Det som gör Lottie-animationer särskilt kraftfulla är när de används med avsikt. En logotyp som animeras in på ett sätt som speglar varumärkets personlighet. En ikon som reagerar när användaren hovrar. En illustration som förklarar en process utan att behöva ett enda ord.
Det är då animation slutar vara dekoration och börjar vara kommunikation.
Vad kan man animera?
Många tänker på animation som något stort och komplicerat. Men de mest effektfulla animationerna är ofta enkla och subtila. Här är några vanliga användningsområden:
Logotypen är ett naturligt första steg. En animerad logotyp på hemsidans förstasida, i en videopresentation eller i en e-postsignatur gör ett minnesvärt intryck utan att ta plats.
Ikoner och symboler som reagerar när användaren interagerar med dem känns omedelbart mer genomtänkta än statiska motsvarigheter.
Hero-element och illustrationer på förstasidan kan ge webbplatsen liv utan att påverka laddningstiden nämnvärt, tack vare Lottie-formatets läga vikt.
E-postsignaturer är ett ovanligt och minnesvärt sätt att använda animation. Varje mejl du skickar får en lite mer levande avslutning.
Hur skapas en Lottie-animation?
Processen börjar i Adobe After Effects där animationen designas och byggs upp. Därifrån exporteras den som en JSON-fil via Bodymovin-pluginet. Den färdiga filen kan sedan användas direkt på webbplatsen, i Webflow, i en app eller i andra digitala miljöer.
För e-postutskick exporteras animationen istället som en GIF, eftersom de flesta e-postklienter inte stödjer JavaScript som krävs för att spela upp Lottie-filer. En väloptimerad GIF på två till tre sekunder fungerar utmärkt i det sammanhanget.
Vad kostar det och hur lång tid tar det?
En enkel logotypanimation eller ett par animerade ikoner är ett relativt litet jobb. Det är en engångsinvestering som du sedan kan använda på hemsidan, i videor, i presentationer och i e-postkommunikation. Beställer du via Atom Access kan du göra det som ett Credits-jobb utan lång offertprocess.
Vill du se vad en animerad logotyp skulle kunna göra för ert varumärke? Hör av dig eller logga in i Atom Access och lägg en beställning direkt.
