Digitalt design · 05
Bevægelse, der forklarer, guider og gør oplevelsen levende.
Kontakt osAnimation er en del af designet, ikke et lag ovenpå. Vi designer overgange, mikrointeraktioner og scroll-oplevelser, der gør websites og produkter tydeligere og mere mindeværdige. Ydelsen findes, fordi bevægelse enten er fraværende, så sitet føles dødt og kunden ikke får feedback på sine handlinger, eller er tilføjet af en udvikler uden retningslinjer, så hvert element bevæger sig på sin egen måde.
Vi definerer først motion-principper for brandet: varigheder, kurver, hvad der bevæger sig, og hvad der ikke gør. Overgange prototypes i Figma eller After Effects, og vi bygger det selv i kode med CSS, GSAP eller Lottie, så det er let og hurtigt. Alt måles på Core Web Vitals, og reduceret bevægelse respekteres. Motion designes sammen med UI og brand, så det er samme udtryk i shop, video og annoncer.
I står med et sæt motion-principper med tokens for varighed og easing, prototyper af de vigtigste overgange, og en implementering i jeres frontend, som udviklere kan genbruge. Dertil Lottie-filer eller videoer til annoncer og social, hvor det er relevant. Sitet giver feedback på hver handling, og bevægelsen kan genkendes som jeres.
Vi gennemgår eksisterende bevægelse på sitet og i annoncer, måler Core Web Vitals og definerer motion-principper: hvad der må bevæge sig, varigheder, easing-kurver og undtagelser for reduceret bevægelse. Principperne godkendes af jer.
De vigtigste interaktioner prototypes: læg i kurv, filtrering, navigation, sideovergange og eventuelle scroll-sekvenser. Prototyper laves i Figma eller After Effects og gennemgås med udvikleren for gennemførlighed.
Overgange bygges som CSS-tokens og klasser, større sekvenser i GSAP, illustrationer som Lottie. Vi bygger i jeres frontend eller leverer til jeres udvikler med dokumentation og eksempler i Storybook.
Vi måler INP, CLS og LCP på mobil før og efter, tester på ældre enheder og med reduceret bevægelse slået til, og justerer det, der koster. Motion-principperne lægges i designsystemet.
Animation skal hjælpe: vise hvad der skete, hvor man er, og hvad der er vigtigt. En vare, der glider ned i kurven, bekræfter handlingen. En filterliste, der folder ud med en kort overgang, viser, hvor indholdet kom fra. Vi designer bevægelse som en del af identiteten, ikke som pynt, og definerer varighed og easing som tokens, fx 150 ms for feedback og 300 ms for navigation, så alle elementer bevæger sig ens.
Animationer bygges, så de ikke koster hastighed eller tilgængelighed. Vi animerer kun transform og opacity, som browseren kan tegne uden layoutberegninger, og undgår tunge JavaScript-biblioteker, hvor CSS rækker. Vi respekterer reduceret bevægelse via prefers-reduced-motion og måler effekten på Core Web Vitals, især INP og CLS, før og efter. Scroll-drevne effekter afprøves på en ældre Android-telefon, ikke kun på en ny Mac.
Samme bevægelsessprog i webshop, video og annoncer, så udtrykket er genkendeligt overalt. Motion-principperne bruges i Lottie-animationer til annoncer, i logo-animation til video og i mikrointeraktioner på sitet. Det betyder, at en Meta-annonce og produktsiden, den fører til, opfører sig ens, og at teamet kan producere nye animerede annoncer efter faste regler i After Effects eller Figma.
Vi bygger det selv i kode eller sammen med jeres udvikler. Overgange leveres som CSS-klasser og tokens, større sekvenser som GSAP-timelines med dokumenterede parametre, og illustrationer som Lottie-filer. Alt lægges i jeres designsystem og Storybook, så en udvikler kan tilføje bevægelse til en ny komponent uden at opfinde varighed og kurve selv.
Et eksempel fra virkeligheden
En webshop med ca. 2.500 varer inden for boligtilbehør havde fået bygget en ny frontend med scroll-effekter på forsiden og produktsider. Efter lancering faldt INP på mobil fra "god" til "skal forbedres" i Search Console, og supporten fik henvendelser om, at siderne hakkede. Vi gennemgik animationerne, fandt, at højde og margin blev animeret på produktkort, og at scroll-effekterne kørte uden reduceret variant. Vi omskrev til transform og opacity, tilføjede prefers-reduced-motion og definerede fælles tokens. INP kom tilbage i "god" inden for en måned.
Mere inden for Digitalt design
W 
A 
U 
S 
Nyt PrestaShop site og 360 graders digital marketing med SEO og PPC annoncering.
Se alle cases
Et digitalt sats på e-handel, der gav pote. Se vores arbejde for Werenberg, og hvordan vækstkurven blev stejl med en stabil og udviklingsdygtig webshop.
Skræddersyet design og udvikling af møbelshop. Markedsføring gennem PPC med 200% vækst.
All-around design, udvikling, branding, strategi og søgemaskineoptimering
Avanceret Google Tag Manager setup til konverteringstracking
Ofte stillede spørgsmål
Ikke når det er bygget rigtigt. Vi bruger CSS og lette biblioteker og måler altid.
Ja. I PrestaShop, Shopify og de fleste temaer kan vi tilføje overgange og mikrointeraktioner uden at skifte tema. Større scroll-oplevelser kræver ofte en headless frontend, og det vurderer vi først.
Motion-principper og implementering af de vigtigste overgange i en eksisterende shop fra 25.000 kr. En fuld motion-identitet med prototyper, kode og filer til annoncer fra 45.000 kr.
Ja. Fra identitet og logo til retningslinjer og skabeloner, og vi sørger for, at det virker digitalt først.
Ja, alt design lever i Figma med komponenter og tokens, som udviklere kan bruge direkte.
Nødvendige cookies får siden til at virke. Statistik og markedsføring sætter vi kun med dit samtykke. Du kan altid ændre valget nederst på siden. Læs cookiepolitikken.
