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

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

De bagvedliggende idéer, som timing, hierarki og efterfølgende bevægelse, gennemgås i principper for motion design. 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.

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

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

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

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 de vigtigste tilgange.

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.

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 viser, hvordan du bygger farve omkring den.