# Motion branding: hvordan et brand bevæger sig, ikke kun ser ud

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

To brands kan dele skrifttype og farve og alligevel føles helt forskellige, så snart de bevæger sig. Bevægelse er den del af identiteten, som de fleste brands overlader til tilfældighederne.

## The short version

- Motion branding er sættet af regler for, hvordan et brands logo, typografi, baggrunde og brugerflade bevæger sig.
- De centrale beslutninger er tempo, easing, retning og hvilke elementer der overhovedet må bevæge sig.
- Et brands bevægelse skal matche dets karakter: rolige brands bevæger sig langsomt med blid easing, energiske brands bevæger sig hurtigere med mere overshoot.
- Bevægelsesregler er mest nyttige, når de er skrevet ned som nogle få navngivne varigheder og easingkurver, som designere og udviklere deler.
- God motion branding har altid en version med reduceret bevægelse til dem, der beder deres enheder om mindre bevægelse.

**Motion branding** er den del af en identitet, der beskriver, hvordan brandet bevæger sig: hvor hurtigt ting sker, hvordan de accelererer og bremser op, hvilken retning de bevæger sig i, og hvad der overhovedet må bevæge sig. Et logo, der klikker på plads, siger noget andet end et, der glider ind. Skrevet ned som en håndfuld regler får bevægelse hver video, story, website og app til at føles som det samme brand, også når farver og layouts skifter.

## Hvorfor bevægelse hører hjemme i en brandidentitet

De fleste brandmanualer stopper ved logo, farve og typografi, fordi de blev skrevet til tryk. I dag møder folk ofte et brand i bevægelse: i en Reel, en animeret story, en hero på et website, en produktbrugerflade. Hvis ingen beslutter, hvordan de ting bevæger sig, beslutter hver designer og hvert værktøj det for dem, og brandet begynder at opføre sig som flere forskellige virksomheder.

Selv et brand, der for det meste står stille, har gavn af det. En enkelt regel, som »ord kommer ind ved at stige blidt op, aldrig ved at snurre«, stopper meget arbejde, der ikke passer til brandet, før det går i gang. Har dit brand aldrig bevæget sig før, er [motion graphics til brands](https://gradiently.design/da/guide/motion-for-still-brands) et blidt sted at begynde.

## De fire beslutninger i motion branding

1. **Tempo.** Hvor lang tid ting tager. Korte varigheder føles effektive og livlige; lange føles rolige, gennemtænkte eller luksuriøse.
2. **Easing.** Hvordan bevægelse accelererer og bremser op. En blid ease out føles naturlig; et let overshoot føles legende; lineær føles mekanisk. Se [easing](https://gradiently.design/da/guide/easing) for kurverne.
3. **Retning og adfærd.** Stiger, glider, skaleres, toner eller afsløres tingene? Vælg to eller tre adfærdsmønstre, og brug dem konsekvent.
4. **Hvad der bevæger sig.** Beslut, hvilke elementer der må bevæge sig: baggrunden, ordene, logoet, fotos. Tilbageholdenhed her er den største forskel på eksklusivt og rodet.

| Karakter | Tempo | Easing | Typisk adfærd |
| --- | --- | --- | --- |
| Rolig, eksklusiv | Langsom, 400 til 700 ms | Blød ease out | Toninger, langsomme stigninger, drivende farve |
| Selvsikker, redaktionel | Mellem, 250 til 400 ms | Fast ease out | Wipes, rene glid, klip på takten |
| Legende, venlig | Hurtig, 200 til 350 ms | Ease out med overshoot | Pop, hop, indskalering |
| Teknisk, præcis | Hurtig, 150 til 250 ms | Skarp ease in out | Lige glid, skrivemaskinetekst |

Udgangspunkter for bevægelse i brugerflade og tekst. Baggrunds- og stemningsbevægelse kører meget langsommere og måles i sekunder.

De bagvedliggende idéer, som timing, hierarki og efterfølgende bevægelse, gennemgås i [principper for motion design](https://gradiently.design/da/guide/motion-design-principles). Motion branding er at vælge blandt dem og holde fast.

## Bevægelsesregler, som designere og udviklere deler

Retningslinjer for bevægelse fejler, når de skrives som tillægsord. »Glat og selvsikker« betyder noget forskelligt for alle. Navngiv nogle få varigheder og nogle få easingkurver, giv dem til designere og udviklere med de samme ord, og brandet bevæger sig på samme måde i et videoredigeringsprogram og i kode.

```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; }
}
```

Et brands bevægelse som tokens. Tre varigheder, ét stemningstempo og tre navngivne kurver dækker næsten alt.

Læg mærke til den sidste regel. Nogle mennesker bliver distraherede eller utilpasse af bevægelse og beder deres enhed om mindre af den. Et komplet bevægelsesbrand fastlægger, hvad der så sker, som regel en enkel toning eller slet ingen bevægelse. [Prefers reduced motion](https://gradiently.design/da/guide/reduced-motion) forklarer hvordan.

## Bevægelse på tværs af et brands materialer

| Materiale | Hvad du skal fastlægge | Eksempel på regel |
| --- | --- | --- |
| Logo | Dets entré, dets hviletilstand, hvor længe det står | Tegnes ind over 800 ms, står stille, looper aldrig |
| Typografi | En eller to måder at komme ind på | Overskrifter stiger; støttelinjer toner ind et slag senere |
| Baggrunde | Hastighed, retning, om de looper | Farven driver langsomt og looper hvert 12. sekund |
| Overgange | Hvordan én scene eller side afløser en anden | Wipe i læseretningen, aldrig en snurren |
| Brugerflade | Hover, tryk, åbn og luk | Paneler åbner med basisvarigheden og lukker hurtigere |

Én række pr. materiale er nok. Kræver en regel et helt afsnit at forklare, er den sikkert for kompliceret.

Logoet får som regel mest opmærksomhed og optræder sjældnest. Baggrunde og typografi er langt oftere på skærmen, og det er dér, konsekvens betaler sig. For selve logoet gennemgår [animeret logo](https://gradiently.design/da/guide/animated-logo) de vigtigste tilgange.

Stående design med en redaktionel overskrift om at lave ting langsomt over en blødt drivende gradient

Et roligt brand: lange varigheder, farve der driver, ord der toner ind og bliver stående.

Stående produktlanceringsdesign med teksten Den er her i klare farver og et kraftigt layout

Et legende brand: hurtigere tempo, ord der popper ind med overshoot, livligere bevægelse i baggrunden.

## Baggrunde, der bevæger sig som dit brand

Den mest synlige bevægelse i det meste brandindhold er baggrunden: den bevægelige farve bag en story, en Reel eller en hero. Det er også den bevægelse, brands oftest låner fra stockmateriale, hvilket betyder, at den ikke tilhører nogen. En baggrund, hvis farver, lys, korn og bevægelse alle er dine, gør mere for genkendeligheden end en avanceret logoanimation, man ser én gang.

Ét farvefelt for et brand: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

En baggrund som denne, der bevæger sig langsomt og på samme måde hver gang, bliver lige så genkendelig som et logo.

Sådan fungerer Marks i Gradiently. En Mark er en opskrift på farver, materialer, lys, korn, bevægelse og en typografisk stemme, så dens bevægelse er en del af dens identitet frem for en effekt, du tilføjer. Alle designs, der bærer den, fra en story til et slide, bevæger sig på samme måde, og fordi hver Mark er unik og har én ejer, bevæger ingen andens indhold sig helt som dit. [Gradientsystemer til brands](https://gradiently.design/da/guide/brand-gradient-system) viser, hvordan du bygger farve omkring den.

### Bevægelse uden for brandet

- Hver designer vælger sine egne overgange
- Alle elementer animeres på én gang
- Bevægelige baggrunde fra stock
- Retningslinjer skrevet udelukkende som tillægsord
- Ingen plan for reduceret bevægelse

### Motion branding

- To eller tre navngivne adfærdsmønstre, brugt overalt
- Én ting bevæger sig ad gangen, i rækkefølge
- En baggrund, der tilhører brandet
- Navngivne varigheder og kurver i delte tokens
- En fastlagt reserve med stilstand eller toning

## FAQ

### Hvad er motion branding?

Motion branding er sættet af regler for, hvordan et brand bevæger sig: tempo, easing, retning og hvilke elementer der må bevæge sig. Det får videoer, opslag på sociale medier, websites og apps til at føles som ét brand.

### Hvad skal retningslinjer for brandbevægelse indeholde?

Nogle få navngivne varigheder, nogle få easingkurver, to eller tre måder at komme ind på, regler for logo, typografi, baggrunde og overgange, og hvad der sker, når nogen foretrækker reduceret bevægelse.

### Hvor hurtige skal brandanimationer være?

Bevægelse i brugerflade og tekst ligger som regel mellem omkring 150 og 700 millisekunder, hurtigere for energiske brands og langsommere for rolige. Baggrundsbevægelse er meget langsommere og måles i sekunder.

### Har et lille brand brug for motion branding?

En kort version hjælper ethvert brand, der poster video eller stories. Bare én regel om, hvordan ord kommer ind, og én bevægelig baggrund holder indholdet konsekvent.