Motion branding: hoe een merk beweegt, niet alleen oogt

Motion branding is het deel van een identiteit dat beschrijft hoe het merk beweegt: hoe snel dingen gebeuren, hoe ze versnellen en vertragen, welke kant ze op gaan en wat überhaupt mag bewegen. Een logo dat op zijn plek klikt zegt iets anders dan een logo dat binnendrijft. Als een handvol regels opgeschreven laat beweging elke video, story, website en app aanvoelen als hetzelfde merk, ook als kleuren en opmaken veranderen.

Waarom beweging bij een merkidentiteit hoort

De meeste merkrichtlijnen stoppen bij logo, kleur en letters, omdat ze voor print zijn geschreven. Tegenwoordig ontmoeten mensen een merk vaak in beweging: in een Reel, een geanimeerde story, een websitehero, een productinterface. Beslist niemand hoe die dingen bewegen, dan beslist elke ontwerper en elke tool voor hen, en begint het merk zich te gedragen als meerdere verschillende bedrijven.

Zelfs een merk dat meestal stilstaat heeft er baat bij. Eén enkele regel, zoals “woorden komen binnen door zacht omhoog te komen, nooit door te draaien”, voorkomt veel werk buiten de merkstijl voordat het begint. Heeft je merk nog nooit bewogen, dan is motion graphics voor merken een zachte plek om te beginnen.

De vier beslissingen van motion branding

1. Tempo. Hoe lang dingen duren. Korte duren voelen efficiënt en levendig; lange voelen kalm, bedachtzaam of luxueus.
2. Easing. Hoe beweging versnelt en vertraagt. Zachte ease-out voelt natuurlijk; een lichte overshoot voelt speels; lineair voelt mechanisch. Zie easing voor de curves.
3. Richting en gedrag. Stijgen dingen, schuiven ze, schalen ze, vervagen ze of onthullen ze? Kies twee of drie gedragingen en gebruik ze consequent.
4. Wat beweegt. Bepaal welke elementen mogen bewegen: de achtergrond, de woorden, het logo, foto’s. Terughoudendheid is hier het grootste verschil tussen premium en druk.

De onderliggende ideeën, zoals timing, hiërarchie en doorbeweging, staan in bewegingsontwerpprincipes. Motion branding is het kiezen daaruit en je eraan committeren.

Bewegingsregels schrijven die ontwerpers en ontwikkelaars delen

Bewegingsrichtlijnen mislukken als ze als bijvoeglijke naamwoorden worden geschreven. “Soepel en zelfverzekerd” betekent voor iedereen iets anders. Noem een paar duren en een paar easingcurves, geef ze aan ontwerpers en ontwikkelaars in dezelfde woorden, en het merk beweegt hetzelfde in een video-editor en in code.

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

Let op de laatste regel. Sommige mensen raken afgeleid of onwel van beweging en vragen hun apparaat om minder. Een complete bewegingsmerkidentiteit bepaalt wat er dan gebeurt, meestal een simpele fade of helemaal geen beweging. Prefers reduced motion legt uit hoe.

Beweging in de assets van een merk

Het logo krijgt meestal de meeste aandacht en verschijnt het minst vaak. Achtergronden en letters staan veel vaker in beeld, en daar loont consistentie. Voor het logo zelf gaat geanimeerd logo de belangrijkste aanpakken langs.

Achtergronden die bewegen als je merk

De meest zichtbare beweging in de meeste merkcontent is de achtergrond: de bewegende kleur achter een story, een Reel of een hero. Het is ook de beweging die merken het vaakst van stock lenen, wat betekent dat ze van niemand is. Een achtergrond waarvan kleuren, licht, korrel en beweging allemaal van jou zijn, doet meer voor herkenning dan een uitgebreide logoanimatie die je één keer ziet.

Zo werken Marks in Gradiently. Een Mark is een recept van kleuren, materialen, licht, korrel, beweging en een lettertoon, dus zijn beweging is deel van zijn identiteit in plaats van een effect dat je toevoegt. Elk ontwerp dat hem draagt, van een story tot een slide, beweegt op dezelfde manier, en omdat elke Mark uniek is en één eigenaar heeft, beweegt de content van niemand anders precies zoals die van jou. Merkverloopsystemen behandelt hoe je er kleur omheen bouwt.