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

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

De bakomliggande idéerna, som timing, hierarki och efterföljande rörelse, tas upp i principer för rörelsedesign. 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.

: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ä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 förklarar hur.

Rörelse genom ett varumärkes alla material

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 igenom de viktigaste angreppssätten.

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.

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 tar upp hur du bygger färg runt den.