Bevegelse i merkevareprofilen: slik beveger merkevaren seg

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 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 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.

De underliggende ideene, som timing, hierarki og etterbevegelse, dekkes i prinsipper for bevegelsesdesign. 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.

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

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 forklarer hvordan.

Bevegelse i merkevarens flater

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 gjennom de viktigste fremgangsmåtene.

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.

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 viser hvordan du bygger farge rundt den.