Motion Branding: wie eine Marke sich bewegt, nicht nur aussieht

Motion Branding ist der Teil einer Identität, der beschreibt, wie sich die Marke bewegt: wie schnell Dinge passieren, wie sie beschleunigen und abbremsen, in welche Richtung sie sich bewegen und was sich überhaupt bewegen darf. Ein Logo, das an seinen Platz springt, sagt etwas anderes als eines, das hereingleitet. Als eine Handvoll Regeln festgehalten, sorgt Bewegung dafür, dass sich jedes Video, jede Story, jede Website und jede App wie dieselbe Marke anfühlt, auch wenn sich Farben und Layouts ändern.

Warum Bewegung in eine Markenidentität gehört

Die meisten Markenrichtlinien enden bei Logo, Farbe und Schrift, weil sie für Print geschrieben wurden. Heute begegnen Menschen einer Marke oft in Bewegung: in einem Reel, einer animierten Story, einem Website Hero, einer Produktoberfläche. Entscheidet niemand, wie sich diese Dinge bewegen, entscheidet jeder Designer und jedes Tool für sich, und die Marke verhält sich plötzlich wie mehrere verschiedene Unternehmen.

Selbst eine Marke, die überwiegend stillsteht, profitiert davon. Eine einzige Regel wie „Worte kommen durch sanftes Aufsteigen, nie durch Drehen“ verhindert viel Arbeit, die nicht zur Marke passt, bevor sie entsteht. Hat sich deine Marke noch nie bewegt, ist Motion Graphics für Marken ein sanfter Einstieg.

Die vier Entscheidungen im Motion Branding

1. Tempo. Wie lange Dinge dauern. Kurze Dauern wirken effizient und lebhaft, lange wirken ruhig, durchdacht oder luxuriös.
2. Easing. Wie Bewegung beschleunigt und abbremst. Sanftes Ease Out wirkt natürlich, ein leichtes Überschwingen verspielt, linear mechanisch. Die Kurven findest du unter Easing.
3. Richtung und Verhalten. Steigen Dinge auf, gleiten sie, skalieren, blenden oder werden enthüllt? Wähl zwei oder drei Verhaltensweisen und nutze sie konsequent.
4. Was sich bewegt. Entscheide, welche Elemente sich bewegen dürfen: der Hintergrund, die Worte, das Logo, Fotos. Zurückhaltung ist hier der größte Unterschied zwischen hochwertig und unruhig.

Die zugrunde liegenden Ideen wie Timing, Hierarchie und Nachschwingen behandelt Prinzipien des Motion Design. Motion Branding heißt, daraus auszuwählen und sich festzulegen.

Bewegungsregeln, die Design und Entwicklung teilen

Bewegungsrichtlinien scheitern, wenn sie als Adjektive geschrieben sind. „Geschmeidig und selbstbewusst“ bedeutet für jeden etwas anderes. Benenne ein paar Dauern und ein paar Easing Kurven, gib sie Design und Entwicklung mit denselben Worten, und die Marke bewegt sich im Videoschnitt genauso wie im 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; }
}

Achte auf die letzte Regel. Manche Menschen werden durch Bewegung abgelenkt oder bekommen davon Beschwerden und bitten ihr Gerät um weniger davon. Eine vollständige Motion Marke legt fest, was dann passiert, meist eine einfache Überblendung oder gar keine Bewegung. Prefers reduced motion erklärt, wie.

Bewegung über alle Markenelemente hinweg

Das Logo bekommt meist die meiste Aufmerksamkeit und erscheint am seltensten. Hintergründe und Schrift sind viel öfter auf dem Bildschirm, und genau dort zahlt sich Einheitlichkeit aus. Für das Logo selbst geht animiertes Logo die wichtigsten Ansätze durch.

Hintergründe, die sich wie deine Marke bewegen

Die sichtbarste Bewegung in den meisten Markeninhalten ist der Hintergrund: die bewegte Farbe hinter einer Story, einem Reel oder einem Hero. Es ist auch die Bewegung, die Marken am häufigsten aus Stockmaterial borgen, und damit gehört sie niemandem. Ein Hintergrund, dessen Farben, Licht, Körnung und Bewegung ganz dir gehören, tut mehr für die Wiedererkennung als eine aufwendige Logoanimation, die man einmal sieht.

So funktionieren Marks in Gradiently. Ein Mark ist ein Rezept aus Farben, Materialien, Licht, Körnung, Bewegung und einer Typostimme, seine Bewegung ist also Teil seiner Identität und kein Effekt, den du hinzufügst. Jedes Design, das ihn trägt, von der Story bis zur Folie, bewegt sich gleich, und weil jeder Mark ein Einzelstück mit einem Besitzer ist, bewegt sich niemandes Content ganz so wie deiner. Verlaufssysteme für Marken zeigt, wie du Farbe um ihn herum aufbaust.