# Motion branding: hur ett varumärke rör sig, inte bara ser ut

[Canonical HTML page](https://gradiently.design/sv/guide/motion-branding-guide)

Två varumärken kan dela typsnitt och färg och ändå kännas helt olika när de rör sig. Rörelse är den del av identiteten som de flesta varumärken lämnar åt slumpen.

## The short version

- Motion branding är de regler som styr hur ett varumärkes logotyp, typografi, bakgrunder och gränssnitt rör sig.
- De avgörande besluten är tempo, easing, riktning och vilka element som överhuvudtaget får röra sig.
- Ett varumärkes rörelse bör passa dess karaktär: lugna varumärken rör sig långsamt med mjuk easing, energiska rör sig snabbare med mer överskjutning.
- Rörelseregler är mest användbara när de skrivs som några få namngivna varaktigheter och easingkurvor som designers och utvecklare delar.
- Bra motion branding innehåller alltid en version med reducerad rörelse för den som ber sina enheter om mindre rörelse.

**Motion branding** är den del av en identitet som beskriver hur varumärket rör sig: hur snabbt saker händer, hur de tar fart och bromsar, åt vilket håll de rör sig och vad som överhuvudtaget får röra sig. En logotyp som snäpper på plats säger något annat än en som glider in. Nedskrivet som en handfull regler får rörelsen varje film, story, webbplats och app att kännas som samma varumärke, även när färger och layouter ändras.

## Därför hör rörelse hemma i en varumärkesidentitet

De flesta grafiska profiler slutar vid logotyp, färg och typografi, eftersom de skrevs för tryck. I dag möter folk ofta ett varumärke i rörelse: i en Reel, en animerad story, en webbplatshero, ett produktgränssnitt. Om ingen bestämmer hur de rör sig bestämmer varje designer och varje verktyg i stället, och varumärket börjar bete sig som flera olika företag.

Även ett varumärke som mest står stilla har nytta av det. En enda regel, som ”ord kommer in genom att stiga mjukt, aldrig genom att snurra”, stoppar mycket som inte hör hemma innan det börjar. Har ditt varumärke aldrig rört sig förut är [rörlig grafik för varumärken](https://gradiently.design/sv/guide/motion-for-still-brands) ett milt ställe att börja.

## De fyra besluten i motion branding

1. **Tempo.** Hur lång tid saker tar. Korta varaktigheter känns effektiva och livliga; långa känns lugna, genomtänkta eller lyxiga.
2. **Easing.** Hur rörelsen tar fart och bromsar. Mild ease out känns naturlig; en lätt överskjutning känns lekfull; linjär känns mekanisk. Se [easing](https://gradiently.design/sv/guide/easing) för kurvorna.
3. **Riktning och beteende.** Stiger saker, glider, skalas, tonar eller avtäcks de? Välj två eller tre beteenden och använd dem konsekvent.
4. **Vad som rör sig.** Bestäm vilka element som får röra sig: bakgrunden, orden, logotypen, fotona. Återhållsamhet här är den största skillnaden mellan exklusivt och stökigt.

| Karaktär | Tempo | Easing | Typiskt beteende |
| --- | --- | --- | --- |
| Lugn, exklusiv | Långsamt, 400 till 700 ms | Mjuk ease out | Gradienter, långsamma stigningar, färg som driver |
| Självsäker, redaktionell | Medel, 250 till 400 ms | Fast ease out | Svepningar, rena glidningar, klipp på takten |
| Lekfull, vänlig | Snabbt, 200 till 350 ms | Ease out med överskjutning | Poppar, studsar, skalningar in |
| Teknisk, precis | Snabbt, 150 till 250 ms | Skarp ease in out | Raka glidningar, skrivmaskinstext |

Utgångspunkter för gränssnitts- och textrörelse. Bakgrunds- och stämningsrörelse går mycket långsammare, mätt i sekunder.

De bakomliggande idéerna, som timing, hierarki och efterföljande rörelse, tas upp i [principer för rörelsedesign](https://gradiently.design/sv/guide/motion-design-principles). Motion branding är att välja bland dem och stå fast vid valet.

## Så skriver du rörelseregler som designers och utvecklare delar

Riktlinjer för rörelse misslyckas när de skrivs som adjektiv. ”Mjukt och självsäkert” betyder olika saker för alla. Namnge några varaktigheter och några easingkurvor, ge dem till designers och utvecklare med samma ord, så rör sig varumärket likadant i ett videoredigeringsprogram och i kod.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

Ett varumärkes rörelse som tokens. Tre varaktigheter, ett stämningstempo och tre namngivna kurvor täcker nästan allt.

Lägg märke till den sista regeln. Vissa blir distraherade eller sjuka av rörelse och ber sin enhet om mindre av den. Ett komplett rörelsevarumärke definierar vad som händer då, oftast en enkel tonad övergång eller ingen rörelse alls. [Reducerad rörelse](https://gradiently.design/sv/guide/reduced-motion) förklarar hur.

## Rörelse genom ett varumärkes alla material

| Material | Vad som ska definieras | Exempelregel |
| --- | --- | --- |
| Logotyp | Dess entré, dess viloläge, hur länge den står kvar | Ritas in på 800 ms, står stilla, loopar aldrig |
| Typografi | En eller två entrésätt | Rubriker stiger; stödrader tonar in en takt senare |
| Bakgrunder | Hastighet, riktning, om de loopar | Färgen driver långsamt och loopar var tolfte sekund |
| Övergångar | Hur en scen eller sida ersätter en annan | Svep i läsriktningen, aldrig en snurr |
| Gränssnitt | Hover, tryck, öppna och stäng | Paneler öppnas med basvaraktigheten, stängs snabbare |

En rad per material räcker. Om en regel behöver ett stycke för att förklaras är den troligen för komplicerad.

Logotypen får oftast mest uppmärksamhet och syns minst ofta. Bakgrunder och text syns på skärmen mycket oftare, och där lönar sig konsekvens. För själva logotypen går [animerad logotyp](https://gradiently.design/sv/guide/animated-logo) igenom de viktigaste angreppssätten.

Stående design med en redaktionell rubrik om att göra saker långsamt över en mjukt drivande gradient

Ett lugnt varumärke: långa varaktigheter, färg som driver, ord som tonar in och står kvar.

Stående produktlansering med texten Nu är den här i klar färg och en djärv layout

Ett lekfullt varumärke: snabbare tempo, ord som poppar med överskjutning, ljusare rörelse i bakgrunden.

## Bakgrunder som rör sig som ditt varumärke

Den mest synliga rörelsen i de flesta varumärkens innehåll är bakgrunden: den rörliga färgen bakom en story, en Reel eller en hero. Det är också den rörelse varumärken oftast lånar från bildbanker, vilket betyder att den inte tillhör någon. En bakgrund vars färger, ljus, korn och rörelse alla är dina gör mer för igenkänning än en avancerad logotypanimation som ses en gång.

Ett varumärkes färgfält: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

En bakgrund som den här, som rör sig långsamt och på samma sätt varje gång, blir lika igenkännbar som en logotyp.

Så fungerar Marks i Gradiently. En Mark är ett recept av färger, material, ljus, korn, rörelse och en typografisk röst, så dess rörelse är en del av dess identitet snarare än en effekt du lägger till. Varje design som bär den, från en story till en bild, rör sig på samma sätt, och eftersom varje Mark är unik och har en ägare rör sig ingen annans innehåll riktigt som ditt. [System för varumärkesgradienter](https://gradiently.design/sv/guide/brand-gradient-system) tar upp hur du bygger färg runt den.

### Rörelse utanför varumärket

- Varje designer väljer sina egna övergångar
- Alla element animeras på en gång
- Rörliga bakgrunder från bildbank
- Riktlinjer skrivna bara som adjektiv
- Ingen plan för reducerad rörelse

### Motion branding

- Två eller tre namngivna beteenden, använda överallt
- En sak rör sig i taget, i ordning
- En bakgrund som tillhör varumärket
- Namngivna varaktigheter och kurvor i delade tokens
- En definierad stillbild eller tonad reserv

## FAQ

### Vad är motion branding?

Motion branding är de regler som styr hur ett varumärke rör sig: dess tempo, easing, riktning och vilka element som får röra sig. Det får filmer, inlägg i sociala medier, webbplatser och appar att kännas som ett varumärke.

### Vad ska riktlinjer för varumärkets rörelse innehålla?

Några namngivna varaktigheter, några easingkurvor, två eller tre entrébeteenden, regler för logotyp, typografi, bakgrunder och övergångar, och vad som händer när någon föredrar reducerad rörelse.

### Hur snabba ska varumärkesanimationer vara?

Gränssnitts- och textrörelse ligger oftast mellan ungefär 150 och 700 millisekunder, snabbare för energiska varumärken och långsammare för lugna. Bakgrundsrörelse är mycket långsammare, mätt i sekunder.

### Behöver ett litet varumärke motion branding?

En kort version hjälper varje varumärke som postar film eller stories. Redan en regel för hur ord kommer in och en rörlig bakgrund håller innehållet enhetligt.