Rörelse
Animerade gradienter, sömlösa loopar och rörelse som känns naturlig.
200 guider · 11 ämnen
RörelseAnimerad gradientbakgrund för video och sociala medier
5 minuters läsning
En animerad gradient kan se ut som ljus som rör sig genom siden, eller som en skärmsläckare. Skillnaden är en handfull designval som du kan göra med avsikt.
RörelseSömlös loopvideo: så gör du en som aldrig hoppar
6 minuters läsning
En loop som hoppar var tionde sekund är sämre än ingen rörelse alls. Lösningen är inte en bättre redigerare; det är rörelse som är designad för att komma hem.
RörelsePrinciper för motion design för dig som inte animerar
5 minuters läsning
Du behöver inte vara animatör för att göra rörelse som känns rätt. Du behöver några få principer, en handfull varaktigheter och disciplinen att använda mindre.
RörelseVideobakgrund på webbplats: vikt, autouppspelning och tillgänglighet
5 minuters läsning
En rörlig hero kan få en webbplats att kännas levande, eller göra den långsam, distraherande och svårläst. Skillnaden är en kort lista med tekniska och designmässiga val.
RörelseGIF, MP4 eller WebM: vilket format ska du välja för loopar
5 minuters läsning
GIF är formatet alla känner till och nästan ingen bör använda på webben. Det är också det enda som fungerar i en inkorg. Här är vilket du ska välja, var och varför.
RörelseBakgrund för Reels och TikTok: så designar du den
5 minuters läsning
Vertikal video har en ram du inte helt kontrollerar: bildtexter, knappar och namn ligger ovanpå. Designa bakgrunden för den yta som blir kvar.
RörelseEasing förklarat: därför känns bra rörelse naturlig
4 minuters läsning
Samma rörelse kan kännas klumpig eller lätt beroende på en enda inställning. Den inställningen är easing, och några enkla regler täcker nästan alla fall.
RörelsePrefers reduced motion: animation som alla kan använda
5 minuters läsning
För vissa är en parallaxrullning eller en zoomande hero inte förtjusande, den är yrselframkallande. En enda inställning visar vilka de är. Så respekterar du den utan att tappa din design.
RörelseAnimerad logotyp: enkla sätt att väcka en logga till liv
5 minuters läsning
En logoanimation ska kännas som att loggan drar ett andetag, inte som att den kör ett nummer. Här är de få teknikerna som fungerar, och reglerna som håller dem smakfulla.
RörelseLevande bakgrundsbilder av gradienter: gör dina egna
5 minuters läsning
En gradient som långsamt glider bakom klockan kan få en skärm att kännas levande utan att någonsin kräva uppmärksamhet. Hantverket ligger i att hålla den långsam, mörk och stilla.
RörelseMotion graphics för varumärken som inte gör video
5 minuters läsning
De flesta små varumärken lägger upp stillbilder eftersom video känns som ett andra jobb. En långsam loop av din egen look som rör sig under stilla ord tar dig en lång bit på vägen, helt utan redigering.