En omfattande guide till webbanimationsdesign 2023

Om du prenumererar på en tjänst från en länk på den här sidan kan Reeves and Sons Limited tjäna en provision. Se vår etik uttalande.

Tro det eller inte, du har inte mycket tid att övertyga dina webbplatsbesökare att stanna kvar. Ditt fönster är faktiskt mycket kortare än du antar.

I huvudsak tar det bara 0.05 sekunder efter att din sida har laddats för att besökarna ska få en åsikt. Mer specifikt betyder det 50 milisekunder. Överraskande kort, eller hur?

Ok, några av dem kommer att lämna. Men andra kan välja att stanna.

Sedan kommer intryckningssteget, vilket i princip varar bara 10 sekunder. Om din webbplats inte kan hantera en solid, förlorar du huvuddelen av din trafik innan de ens börjar på konverteringsprocessen. De fortsätter bara för att slå bak eller knapparna.

Och om du hade några hopp om att återhämta dem, här är den hårda sanningen. 88% av dem kommer troligen inte att återvända till en webbplats efter en dålig upplevelse.

Men vänta en minut. Vilket jobb är det att behålla webbtrafik när de landar på webbplatsen?

Ok, naturligtvis är det bara naturligt att skylla på webbplatsens innehållshanterare. Och du kanske har rätt. Men bara delvis.

Det visar sig att allt börjar med webbdesignern. I själva verket konstaterade en studie som omfattande undersökte ett brett spektrum av konsumentåterkoppling det 94% av de negativa var designrelaterade.

Vad betyder det?

Till att börja med, finns det ingen undgå detta. Huvudansvaret ligger hos dig. Förutom att implementera alla bästa designmetoder som vi har täckt i våra tidigare delar, måste du bära en PR-hatt och ta hänsyn till element som effektivt ansluter till trafiken.

Jag pratar om saker som webbanimationer.

Och varför föreslår vi det specifikt?

Det är något jag ska avslöja inom kort. Den här guiden leder dig genom alla kritiska aspekter av webbanimationer. Men först, låt oss utforska grunderna ...

Grunderna i webbanimationer

Föreställ dig din favorit seriefigur som promenerar över skärmen. Eller kanske telefonens logotyp som dansar runt skärmen när du startar om enheten. Vad har de gemensamt?

De är båda grundläggande exempel på animationer.

Animering sker väsentligen när ett stillastående element "väcks till liv". Den börjar sedan visa ut någon form av rörelse.

Vi vet inte exakt när denna praxis började. Men vi har en idé om att första animerade filmen i historien gjordes för över ett sekel sedan. Trenden har utvecklats ganska omfattande sedan dess, tack vare progressiva tekniska framsteg.

En sak har emellertid varit konstant - animeringens principer. I själva verket skrev Disneys Ollie Johnston och Frank Thomas senare om dem i sin bok, "Illusion of Life: Disney Animation". Här är den fullständiga listan:

  • Överklagande
  • Solid ritning
  • Överdrift
  • Tidpunkten
  • Sekundär åtgärd
  • Arc
  • Långsamt in och långsamt ut
  • Följ igenom och överlappande åtgärder
  • Rakt framåt åtgärder och posera för att posera
  • Staging
  • Förväntan
  • Squash och stretch

De tolv utgör fortfarande ramen för design av animationer idag, inklusive de som publiceras på webben som videor, WebGL, SVG, CSS och GIF.

Nu kan webbanimationer vara så enkla som en höjdpunkt som dyker upp när du håller muspekaren över en bokstav till en komplex flerskiktsserie med fullskärmsfilmer. Med andra ord kan du ta ett subtilt tillvägagångssätt eller välja att gå ut med dominerande animationer som skriker om uppmärksamhet. Allt beror på situationen.

Och det väcker frågan - när ska du till och med använda animationer?

När ska du använda webbanimationer?

Naturligtvis är de söta. Och de skulle verkligen vara intressanta tillägg till din webbplats layout.

Men vet du vad? Deras efterföljande effektivitetsnivåer är helt annorlunda. Så det säger sig självt att animationer inte är lämpliga för alla webbplatsprojekt. Och viktigast av allt är det en dålig idé att anta dem på ett slumpmässigt sätt.

Det händer bara så 46% av online-konsumenter bedöma en webbplatss trovärdighet utifrån dess övergripande visuella tilltal och estetik. Du har helt enkelt inte råd att omfatta det med en dåligt utformad animationsram. Samtidigt vore det olyckligt att hela tiden missa gyllene omvandlingsmöjligheter genom att inte utnyttja animationer.

Så när ska du utnyttja dem?

Tja, här är saken. Webanimationer är huvudsakligen idealiska när du behöver öka användbarheten genom att kanske uppmärksamma eller hjälpa användare med navigationsprocessen.

Hur?

Generellt tar det 2.6 sekunder för en besökares ögon att landa på webbplatsavsnitt som främst påverkar deras första intryck. Skickligt med hjälp av en animation kan emellertid påskynda saker genom att omedelbart uppmärksamma de mest kritiska områdena på webbplatsen.

Animationer är också praktiska när du försöker rikta användare genom konverteringstratten. En animerad form dyker upp, till exempel, skulle vara en tankeväckande strategi för att bygga postlistor. När det gäller köpprocessen kanske du överväger att bädda in videor. De har visat sig övertyga 73% av köparna för att fortsätta och köpa en produkt eller tjänst.

Slutligen kan du använda webbanimationer enbart för estetiska ändamål. En dekorativ animation som är smidig och sömlös kan förbättra det övergripande visuella tilltalet ganska avsevärt, och därmed skapa en emotionell koppling mellan användare och gränssnittet. Och det är hur du gradvis ökar nivåerna av användarengagemang.

Webanimationsverktyg

Är du redo att börja skapa webbanimationer? Perfekt! Men var ska du börja?

Vad sägs om att söka ett robust verktyg för att konvertera dina idéer till faktiska animationer? Tack och lov finns det ett brett utbud av snygga alternativ på webben, som är väloptimerade för olika användare och olika typer av animationer. Vad du väljer för dina projekt beror på dina färdigheter, primära mål, budget och vilken typ av webbplats du arbetar med.

Som sagt, här är några framstående exempel, var och en med sitt eget unika fall:

  • js
  • 3D-linjer animering med Three.js
  • js
  • Flubber
  • Färganimering
  • jqMoln
  • Scrollissimo
  • Cel-animering
  • js
  • js
  • CSS3-animering
  • Trans-när
  • js
  • Slappna av
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • ramjet
  • Dänga
  • Blanda det
  • css
  • css
  • js
  • ceaser
  • CSSynth
  • Saffran
  • CSShake
  • css
  • js
  • Raket
  • Genomresa
  • css
  • js
  • Popmotion
  • GSAP av GreenSock
  • js
  • js
  • CSS Animera
  • Det är tisdag
  • Lömsk
  • js
  • js
  • js
  • js
  • js
  • Vänta! Animera
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • Magic Animationer
  • css

Designa webbanimationer

hover Effekter

Hover-animationer är utan tvekan några av de enklaste på webben. De kommer till liv och markerar utvalda element när pekaren rör sig över dem. Själva animationen kan förekomma i olika former - som förändring i storlek eller färgändring.

Tricket här är att ta till sig effekterna sparsamt. Övrigwise, riskerar du att framhäva alldeles för många element, vilket i efterhand kan förvirra användarna.

Det är också tillrådligt att upprätthålla någon form av konsekvent med metodiken på hela webbplatsen. Om till exempel knapparna på din hemsida blir från grön till röd, använd t.ex. samma ram för ytterligare höjdpunkter på andra webbsidor.

Bakgrundsanimationer

Att bädda in en bakgrundsanimation är en effektiv strategi för att lägga spänning och vitalitet på din webbsida utan att nödvändigtvis störa huvudtyngden. Du kan använda allt från videor till subtila bilder som växlar i följd.

Den bästa metoden här är att hålla saker strukturerade och enkla. Om du väljer att integrera en video, förkorta den i enlighet därmed och upprätthålla en slinga som är relevant för din webbplats. Se sedan till att rörelserna är subtila nog för att locka uppmärksamhet utan överväldigande användare.

GIF-animationer

En GIF är värd att överväga om du är särskilt intresserad av en animering som är exceptionellt lätt att konfigurera. En typisk kan kanske vara något som att skifta text eller en leende clown inbäddad i din innehållslayout.

Allt du behöver göra är att komma på en solid idé, skaffa en relevant video eller bild och sedan konvertera den till en perfekt GIF med hjälp av ett lämpligt redigeringsprogram. Laddar upp den resulterande skapelsen i GIF format genererar en videoliknande animation som laddas lika snabbt som en liten bild.

Övergångsanimationer

Övergångsanimationer används för att introducera kraft när användare flyttar från en del av webbplatsen till en annan. De liknar bildspelsanimationer som visas när du går från en bild till nästa.

Bild poäng: Shutterstock

För att få ett perfekt resultat ska du se till att animationerna är smidiga och konsekventa på hela webbplatsen. De bör också vara tillräckligt korta för att inte försena själva övergångsprocessen.

Laddar animationer

Fakta är- 47% av online-konsumenter förvänta dig att dina webbsidor laddas på minst 2 sekunder. Om du inte lyckas med detta, översätter varje ytterligare sekund till 7% färre konverteringar.

Går av aktuell genomsnittlig laddningstid på 22 sekunder, det är ganska uppenbart att det är ganska svårt att möta förväntningarna på 2 sekunder. Men du kan rädda en betydande del av trafiken genom att hålla dem upptagna med animationer eftersom andra webbplatselement fortsätter att ladda.

Fokusera på att skapa enkla som är tillräckligt lätta för att ladda nästan omedelbart trafik omdirigeras till din webbplats. De bör utformas för att systematiskt introducera besökare till varumärket och det övergripande webbplatstemat.

Scroll-triggade animationer

Ögonspårningsstudier har visat att webbplatsanvändare spenderar ungefär 57% av sin tid ovanför veckan. Men det visar sig att många av dem är villiga att rulla ner - så länge du ger en gynnsam designstruktur och mekanism.

Och det är precis där rullningsutlösta animeringar kommer in. De börjar rulla direkt när användarna börjar rulla för att skapa en illusion av en jämn, oändlig sida. Det är ett genomtänkt sätt att eliminera övergångar som andra skulle görawise avskräcka rullning.

Navigering och menyanimationer

Låt oss vara ärliga. Menyalternativ tar en avsevärt stor mängd skärmutrymme, särskilt på holistiskt dynamiska platser med flera nivåer av val. Lyckligtvis kan du utnyttja animationer för att dölja alternativen och sedan avslöja dem bara när en användare klickar på eller svävar över motsvarande knappar.

Denna typ av animering effektiviserar och förenklar också navigationsprocessen genom att komprimera hela strukturen till visuellt anslutna menyalternativ. Ramverket ska utformas med undermenynssegment som systematiskt dyker upp varje gång en användare klickar eller pekar på menyalternativen för överläggning.

Galleri och bildspel

Kanske överraskande, genomsnittligt uppmärksamhetsområde för människor är 8 sekunder - åtminstone enligt en nyligen genomförd studie utförd av Microsoft. Även en guldfisk kan hålla sig uppmärksam längre än en typisk idividubbel. Därför kan du satsa på att de flesta av webbplatsens besökare inte kommer att vara ihärdiga nog för att klicka igenom alla dina galleriposter.

Men gissa vad? Du kan smart utnyttja animationer i galleri och bildspel för att automatiskt visa upp många bilder utan att nödvändigtvis tvinga användare att navigera igenom dem.

Det viktigaste här är tiden för bildvisning. Korta skärmar med snabba övergångar skulle känna sig rusade, medan långa skärmar med långsamma övergångar skulle visa sig vara tråkiga och tröga. Med detta i åtanke, utforma den totala layouten så att varje bild visas i cirka 5 till 8 sekunder innan du snabbt går över till nästa.

Slutsats

Sammantaget bör du analysera animationer baserat på hur mycket de sedan förbättrar användarupplevelsen. En bra bör antingen utlösa en emotionell anslutning från användare eller underlätta navigationsprocessen. En perfekt, å andra sidan, borde kunna uppnå båda samtidigt.

För att uppnå detta, ta dig tid att kritiskt utvärdera alla relevanta parametrar när du designer och bädda in animationer på din webbplats. Och kom ihåg - håll det enkelt, lätt och väl anpassat till ditt märke.

header image med tillstånd av Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.

Kommentarer 0 Responses

Kommentera uppropet

E-postadressen publiceras inte. Obligatoriska fält är markerade *

Betyg *

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.