# Bevegelse i merkevareprofilen: slik beveger merkevaren seg

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

To merkevarer kan bruke samme skrift og farge og likevel føles helt ulike når de beveger seg. Bevegelse er den delen av identiteten flest overlater til tilfeldighetene.

## The short version

- Bevegelse i merkevareprofilen er reglene for hvordan logo, tekst, bakgrunner og grensesnitt beveger seg.
- De viktigste valgene er tempo, bevegelseskurver, retning og hvilke elementer som i det hele tatt får bevege seg.
- Bevegelsen bør passe merkevarens karakter: Rolige merkevarer beveger seg sakte og mykt, energiske raskere og med mer oversving.
- Bevegelsesregler er mest nyttige som noen få navngitte varigheter og kurver som designere og utviklere deler.
- En god bevegelsesprofil har alltid en versjon med redusert bevegelse for dem som ber enheten sin om mindre bevegelse.

**Bevegelse i merkevareprofilen** beskriver hvordan merkevaren beveger seg: hvor fort ting skjer, hvordan de øker og senker farten, hvilken retning de går i, og hva som i det hele tatt får bevege seg. En logo som smetter på plass, sier noe annet enn en som driver inn. Noen få nedskrevne regler får alle videoer, stories, nettsteder og apper til å føles som samme merkevare, selv når farger og oppsett endres.

## Hvorfor bevegelse hører hjemme i en merkevareprofil

De fleste profilmanualer stopper ved logo, farge og skrift fordi de ble laget for trykk. I dag møter folk ofte en merkevare i bevegelse: i en Reel, en animert story, et toppbilde på et nettsted eller et produktgrensesnitt. Hvis ingen bestemmer hvordan dette beveger seg, gjør hver designer og hvert verktøy valgene selv, og merkevaren begynner å oppføre seg som flere ulike selskaper.

Selv en merkevare som stort sett står stille, har nytte av dette. Én regel, som «ord kommer inn ved å løfte seg forsiktig, aldri ved å snurre», stopper mye arbeid som bryter med profilen før det begynner. Har merkevaren aldri beveget seg før, er [bevegelsesgrafikk for merkevarer](https://gradiently.design/nb/guide/motion-for-still-brands) et rolig sted å starte.

## De fire valgene i en bevegelsesprofil

1. **Tempo.** Hvor lang tid ting tar. Kort varighet virker effektivt og livlig; lang varighet virker rolig, gjennomtenkt eller luksuriøst.
2. **Bevegelseskurver.** Hvordan farten øker og avtar. Myk nedbremsing føles naturlig; litt oversving virker lekent; jevn fart virker mekanisk. Se [bevegelseskurver](https://gradiently.design/nb/guide/easing) for kurvene.
3. **Retning og oppførsel.** Løfter, skyver, skalerer, toner eller avdekker du elementene? Velg to eller tre måter og bruk dem konsekvent.
4. **Hva som beveger seg.** Bestem hvilke elementer som får bevege seg: bakgrunn, ord, logo og bilder. Tilbakeholdenhet her skiller mest mellom et eksklusivt og et travelt uttrykk.

| Karakter | Tempo | Bevegelseskurve | Typisk oppførsel |
| --- | --- | --- | --- |
| Rolig, eksklusiv | Sakte, 400 til 700 ms | Myk nedbremsing | Uttoning, langsomme løft, drivende farger |
| Selvsikker, redaksjonell | Middels, 250 til 400 ms | Bestemt nedbremsing | Avdekking, rene sidebevegelser, klipp på taktslag |
| Leken, vennlig | Raskt, 200 til 350 ms | Nedbremsing med oversving | Sprett, hopp, innskalering |
| Teknisk, presis | Raskt, 150 til 250 ms | Tydelig akselerasjon og nedbremsing | Rette sidebevegelser, skrivemaskintekst |

Utgangspunkter for bevegelse i grensesnitt og tekst. Bakgrunnsbevegelse og stemningsskapende bevegelse går mye saktere og måles i sekunder.

De underliggende ideene, som timing, hierarki og etterbevegelse, dekkes i [prinsipper for bevegelsesdesign](https://gradiently.design/nb/guide/motion-design-principles). En bevegelsesprofil handler om å velge blant dem og holde fast ved valgene.

## Skriv bevegelsesregler designere og utviklere deler

Retningslinjer for bevegelse svikter når de bare består av adjektiver. «Mykt og selvsikkert» betyr noe forskjellig for alle. Navngi noen varigheter og bevegelseskurver, og gi designere og utviklere de samme ordene. Da beveger merkevaren seg likt i et videoredigeringsverktøy 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; }
}
```

Merkevarens bevegelse som designtokens. Tre varigheter, ett bakgrunnstempo og tre navngitte kurver dekker nesten alt.

Legg merke til den siste regelen. Noen blir distrahert eller uvel av bevegelse og ber enheten sin om mindre av den. En fullstendig bevegelsesprofil definerer hva som skjer da, vanligvis en enkel uttoning eller ingen bevegelse. [Foretrukket redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) forklarer hvordan.

## Bevegelse i merkevarens flater

| Element | Hva du må definere | Eksempelregel |
| --- | --- | --- |
| Logo | Hvordan den kommer inn, hviletilstand, hvor lenge den vises | Tegnes inn over 800 ms, står stille, går aldri i løkke |
| Tekst | Én eller to inngangsstiler | Overskrifter løfter seg; støttelinjer tones inn ett slag senere |
| Bakgrunner | Fart, retning, om de går i løkke | Fargen driver sakte og gjentas hvert 12. sekund |
| Overganger | Hvordan én scene eller side erstatter en annen | Avdekk i leseretningen, aldri med snurring |
| Grensesnitt | Peker over, trykk, åpne og lukke | Paneler åpner med grunnvarigheten og lukker raskere |

Én rad per element er nok. Trenger en regel et helt avsnitt for å forklares, er den trolig for komplisert.

Logoen får som regel mest oppmerksomhet og vises sjeldnest. Bakgrunner og tekst er på skjermen langt oftere, og det er her konsekvens lønner seg. For selve logoen går [animert logo](https://gradiently.design/nb/guide/animated-logo) gjennom de viktigste fremgangsmåtene.

Stående design med en redaksjonell overskrift om å lage ting sakte over en mykt drivende gradient

En rolig merkevare: lang varighet, drivende farger og ord som tones inn og blir stående.

Stående design til en produktlansering med teksten Den er her, klare farger og et kraftig oppsett

En leken merkevare: raskere tempo, ord som spretter inn med oversving, og livligere bakgrunnsbevegelse.

## Bakgrunner som beveger seg som merkevaren din

Den mest synlige bevegelsen i merkevareinnhold er som regel bakgrunnen: fargene bak en story, en Reel eller et toppbilde. Det er også den bevegelsen merkevarer oftest henter fra bildebanker, og dermed tilhører den ingen. En bakgrunn der farger, lys, korn og bevegelse er dine egne, gjør mer for gjenkjennelsen enn en forseggjort logoanimasjon som vises én gang.

Ett fargefelt for merkevaren: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

En bakgrunn som denne, som beveger seg sakte og likt hver gang, blir like gjenkjennelig som en logo.

Slik fungerer Marks i Gradiently. En Mark er en oppskrift av farger, materialer, lys, korn, bevegelse og et skriftuttrykk. Bevegelsen er dermed del av identiteten, fremfor en effekt du legger til. Alle design som bruker den, fra en story til en presentasjonsside, beveger seg likt. Fordi hver Mark er unik og har én eier, beveger ingen andres innhold seg helt som ditt. [Gradientsystemer for merkevarer](https://gradiently.design/nb/guide/brand-gradient-system) viser hvordan du bygger farge rundt den.

### Bevegelse utenfor profilen

- Hver designer velger egne overganger
- Alle elementer animeres samtidig
- Bevegelige bakgrunner fra bildebanker
- Retningslinjer som bare består av adjektiver
- Ingen plan for redusert bevegelse

### Bevegelsesprofil

- To eller tre navngitte bevegelsesmåter, brukt overalt
- Én ting beveger seg om gangen, i rekkefølge
- En bakgrunn som tilhører merkevaren
- Navngitte varigheter og kurver i felles tokens
- En definert stillestående eller uttonet reserveversjon

## FAQ

### Hva er bevegelse i merkevareprofilen?

Det er reglene for hvordan merkevaren beveger seg: tempo, bevegelseskurver, retning og hvilke elementer som får bevege seg. Reglene får videoer, sosiale innlegg, nettsteder og apper til å føles som én merkevare.

### Hva bør retningslinjer for merkevarebevegelse inneholde?

Noen navngitte varigheter og bevegelseskurver, to eller tre inngangsmåter, regler for logo, tekst, bakgrunner og overganger, og hva som skjer når noen foretrekker redusert bevegelse.

### Hvor raske bør merkevareanimasjoner være?

Bevegelse i grensesnitt og tekst ligger vanligvis mellom omtrent 150 og 700 millisekunder, raskere for energiske merkevarer og saktere for rolige. Bakgrunnsbevegelse er mye langsommere og måles i sekunder.

### Trenger en liten merkevare en bevegelsesprofil?

En kort versjon hjelper alle merkevarer som publiserer video eller stories. Selv én regel for hvordan ord kommer inn og én bevegelig bakgrunn holder innholdet konsekvent.