Search the design system

MOTION

Rörelse är en central del av vår identitet. Vårt rörelsemanér bygger på perspektiv och tredimensionalitet, en känsla av att befinna sig mitt i upplevelsen. Det här kapitlet ger en överblick av de verktyg och principer som styr vår rörelse.

→Används i både kommunikation och interaktion
→Tre principer hjälper till att justera tonläge beroende på tillfälle och kanal
→Bygger på Vinnarkubens tredimensionalitet
Svenska Spel motion image

Rörelseprinciper

Tre principer styr hur vi rör oss. Tillsammans gör de det enkelt att anpassa tonläget beroende på tillfälle, kanal och målgrupp. Från det lekfulla till det kraftfulla, alltid med omsorg.

Lekfull och underhållande

Objekt och texter som snurrar och studsar, vrider och vänder på sig. Används när vi vill addera glädje och lekfullhet.

Trygg och enkel

Lugna rörelser, objekt och texter som tonas fram och skalas försiktigt. Används när vi vill guida och addera en känsla av trygghet.

Kraftfull och energirik

Objekt och texter som svischar förbi, växer och skalas upp. Används när vi vill addera energi och en känsla av impact.

Beståndsdelar

All vår motion är samlad i ett och samma After Effects-dokument. Det gör att det blir strukturerat och enkelt att jobba med motion för våra professionella användare. Där finns ett antal olika huvudområden med motion. Nedanstående exempel är ett axplock ur dessa huvudområden. Utgå från våra rörelseprinciper och arbeta med professionella motiondesigners när du vill addera rörelse.

Transitions

Våra transitions bygger på logotypens kubform och dess tredimensionalitet. På så sätt blir varje övergång en förlängning av identiteten och förstärker känslan av perspektiv och rörelse.

Transitions ska användas med omsorg. En enkel klippning är ofta det bästa valet, medan en välplacerad transition kan markera ett skifte eller lyfta ett ögonblick.

Äldre kvinna och man i stadsmiljö
Vänner sitter i en solig park

Formelement

I rörelse förstärks ordlådornas och prislapparnas fysiska ursprung och taktila karaktär. När rörelse kommer in blir de också mer tydliga där de används.

Ordlådor

Prislappar

Text

Textanimationer hjälper till att bygga upp en känsla. De finns både som kraftfulla animationer som skapar uppmärksamhet, och som enklare som finns där i bakgrunden och ger ett tryggt, modernt intryck.

Easing

Easing styr hur rörelse känns. Våra easings ger en gemensam utgångspunkt för all animation.

cubic-bezier(.5,0,0,1)

Börjar långsamt, hämtar kraft i mitten och landar mjukt. Passar i transitions eller när ett objekt redan befinner sig i bild.

cubic-bezier(.5,0,0,1)

cubic-bezier(0,.56,.4,1)

Kommer in med hög fart och decelererar kraftigt men landar mjukt. Passar när ett objekt kommer in i bild.

cubic-bezier(0,.56,.4,1)

Brand portalSvenska Spel / Formelement
Brand portalBrand system / Logotyp

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.5.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se