ny-workshop-brand-design

Derfor fungerer web animationer så godt

    Web animationer før og efter Flash – derfor fungerer de så godt

    slutslut

    Konkurrencen om vores opmærksomhed har aldrig været større. Menneskets naturlige reaktion på bevægelse har gjort animation til den helt store spiller.

    I dette blogindlæg ser vi tilbage på, hvordan web animation startede, hvorfor det er så effektivt, og hvornår det giver mening at bruge animerede web bannere.

    I et hårdt konkurrencepræget miljø søger virksomheder panisk efter måder at fange og bevare folks opmærksomhed på. Den uendelige strøm af visuel stimulering fra animerede annoncer på gaden, videoer på vores mobiler og vores sociale medie-feeds skaber en følelse af konstant bevægelse, der kæmper for vores opmærksomhed.

    Hvis et statisk billede er værd tusind ord, hvor meget er en animation så værd?

    Det er her web animation kommer ind i billedet. Webdesignere håber at fange og fastholde vores opmærksomhed.

    Animation kan bruges til at visualisere forskellige trin i en kompleks proces eller idé til at illustrere et simpelt budskab eller til at flytte ting på en webside på en naturlig og flydende måde, når folk scroller — igen for at henlede opmærksomheden på noget bestemt.

    Sådan startede web animation for alvor: GIF-animationer

    I de tidlige dage af World Wide Web var tingene ret statiske og kedelige. Websider var for det meste baseret på grafisk design og layout fra den trykte verden. En af de første tilføjelser af en GIF-animation til et websted var på Jeffrey Zeldmans Batman Forever i 1995. Besøgende blev mødt af en flyvende Batman – animeret som en billedesekvens.

    image-1568763206016-3ab1cf472789b7031216beedd88e017e

     

    Batman Forever-promoveringssiden var et af de mest populære sider på det tidspunkt. Det inspirerede andre webdesignere og udviklere til at integrere GIF-animationer som et finurligt, iøjnefaldende element på deres websider.

    Introduktionen af ​​Flash

    Det store web animationsboom kom med introduktionen af ​​Flash i 1996, da Macromedia annoncerede deres web-plugin og det ledsagende rammebaserede animationsværktøj Macromedia Flash (efter at de havde erhvervet FutureSplash Animator - et vektoranimationsprogram).

    Flash spillede en førende rolle med at bringe nye muligheder til internettet. Fra lyd og animation til interaktivitet og video hjalp Flash med at skubbe internettet fremad.

    flash

     

    Desværre fungerede Flash-animationen ikke så godt på alle enheder og blev til sidst droppet. Mens filstørrelsen var relativt lille, var Flash ikke optimeret optimalt. Afslutningen af ​​Flash-æraen kom efter, at Steve Jobs besluttede ikke at støtte Flash på Apple mobile enheder.

    "Flash was created during the PC era—for PCs and mice. But the mobile era is about low power devices, touch interfaces, and open web standards—all areas where Flash falls short."

    - Steve Jobs

    Web animation i dag

    Da Flash i dag er forældet, har vi forskellige behov for animation. Værktøjer skal være fleksible og simple. Webdesignere skal oprette responsivt og tilpasningsdygtigt indhold til forskellige enheder (desktop, tablet og mobil) og tage hensyn til forskellige skærmdimensioner, browsere, billedformater, pixeltæthed og mere.

    Vores web animationer skal fungere på en 5-tommer skærm, 720px mobil, en 9,7-tommer QXGA-tablet og en 32-tommer Retina 6K-skærm.

    Teknologien er nået til et punkt, hvor selv små mobile enheder kan håndtere meget krævende web animationer og video i høj opløsning. Dette betyder ikke, at websider skal spytte animationer ud helt uhæmmet.

    Som altid handler det om at finde den rigtige balance mellem animationen, dynamisk interaktion og statiske elementer. Bare fordi vi kan implementere en masse smarte web animationer i dag, betyder det ikke, at vi skal.

    HTML5, CSS3, JavaScript og SVG (skalerbar grafik) synes at være de bedste løsninger til web animation. Brugen af disse moderne webteknologier og sprog vil hjælpe med at tackle de fleste – men ikke alle – problemer. Men det er altid en god ide at træde varsomt.

    Hvorfor skal jeg bruge web animationer?

    Web animationer kan engagere og holde folks opmærksomhed i længere tid end en statisk grafik og kan kommunikere en idé eller koncept mere tydeligt og effektivt. God animation formidler en historie bag enhver bevægelse. Det handler om at bringe en animation til live med mening og "sjæl".

    Web animation skal være nemt, meningsfuldt og understøtte den besøgendes behov. Webdesigneren, grafikeren og animatoren skal være opmærksom på, hvordan animationen passer ind i brugeroplevelsen.

    Webdesignere må ikke kun se på web animation fra et rent teknisk perspektiv; de er også nødt til at se på det fra brugerens perspektiv.

     

    En af de væsentligste ting ved animation er timing. Korrekt timing giver en animation fysisk og følelsesmæssig betydning og oplevelsen skal være logisk.

    Hvis animationen ikke er flydende (forkert timing), kan folk opfatte det som en fejl og miste al motivation til at udforske webstedet yderligere.

     

    Hvornår skal jeg bruge animationer?

    Først skal du kontrollere, hvordan animationen vil påvirke brugeroplevelsen. Vil det forbedre webstedets UX?

    Det kan du gøre:

    •     Undersøg det eksisterende website design (hvis tilgængeligt)
    •     Kontroller målgruppen og de hardwareplatforme, de bruger
    •     Kontroller load-tider og CPU-belastning
    •     Udforsk andre alternativer
    •     Hold øje med brugervenligheden


    Beslutningen om at bruge web animation skal behandles som enhver anden designbeslutning; du skal overveje fordele og ulemper og sørge for, at brugeroplevelsen ikke kompromitteres. Der bør også være et samarbejde med udviklere og programmører for at konstatere kodekrav og sikre, at de ikke sidder fast med ineffektiv kode, der muligvis skal finjusteres.

    Moderne web-animationsteknologi er modnet markant i de sidste 20 år og ydeevne, tilgængelighed og renderingskvalitet er blevet bedre. Dog skal designere være omhyggelige og kun tilføje animation til et website, hvis det er meningsfuldt og forbedrer brugeroplevelsen.

     


    Dette blogindlæg er skrevet af skribent Ana Gregurec, UX designer hos Toptal og oversat til dansk. Læs den fulde artikel på engelsk her: Web Animation In The Post-Flash Era

     


    Relaterede kurser og nyheder om web-bannere og animation

    Animeret-infografik-420-1Animeret Infografik

    På dette kursus lærer du at bryde større informationsmængder ned til enkle budskaber, du kan servere lækkert i en visuel flot animeret infografik.

    Uanset om målet er salg, information eller intern kommunikation, så kan du efter deltagelse på dette kursus levere en animation, der fastholder brugerens opmærksomhed.

     

    gifTutorial: Sådan laver du en animeret gif med Photoshop

    GIF-animationer har taget verden med storm i de senere år. Lær hvordan du selv kan lave en animeret GIF i dette blogindlæg. 

     

    blog-top-dine-faerdigheder-med-video-animation-1Blog: Top dine kreative færdigheder med video og animation

    I dette blogindlæg får du 3 tip til, hvordan du kan supplere dine kreative evner med video og animation. Lær blandt andet om motion graphics og videoredigering samt hvordan du sparer produktionstid ved at bruge skabeloner og grafiske elementer. 

     

     

     




    authorIcon Af Gæsteskribent

    Har du lyst til at byde ind med viden og erfaring i et gæsteindlæg?

    Vi ønsker at skabe en platform for vidensdeling og erfaringsudveksling fra hverdagen, og derfor er vi altid interesseret i relevante bidrag fra folk men noget på hjertet.

    Så hvis du har draget dig nogle erfaringer, eller har gode tips og tricks til værktøjer eller arbejdsområder, er du velkommen til at sende os dit bidrag. Send os en mail på kursus@softworld.dk!

    Seneste blogindlæg


    Kurser og workshops
    grafiske-kurser-blog

    After Effects kursus
    På dette 3-dages kursus i Aarhus og København får du det fulde overblik over After Effects. Læs mere om kurset >>

    InDesign kursus
    Lær InDesign på 2 dage så du kan opsætte grafisk design til plakater, annoncer, foldere og meget mere. Læs mere om kurset >>

    UX design kursus
    Få en solid og praktisk forståelse for UX Design, så du kan designe gode brugeroplevelser og overbevisende design. Læs mere om kurset >>

     

    Se flere kurser