# Motion Graphics Vorlagen: bewegte Designs ohne After Effects

[Canonical HTML page](https://gradiently.design/de/guide/motion-graphics-templates)

Die meisten Marken brauchen jede Woche bewegte Designs und nie einen Motion Designer. Hier erfährst du, was Motion Graphics Vorlagen sind, welche Art zu dir passt und wie eine davon nach dir aussieht statt nach allen anderen.

## The short version

- Motion Graphics Vorlagen sind vorab animierte Designs, bei denen du Worte, Farben und Medien änderst, während die Bewegung schon fertig ist.
- Vorlagen für After Effects und Premiere Pro brauchen diese Software, browserbasierte Designtools dagegen bieten animierte Vorlagen, die du wie ein normales Design bearbeitest.
- Eine gute Motion Vorlage hat wenige bewegte Teile, editierbaren Text, Formate für jede Plattform und einen Loop, der sauber übergeht.
- Vorlagen wirken generisch, wenn Farben, Schrift und Hintergrund so bleiben, wie sie geliefert wurden, also ersetze alle drei vor dem Posten.
- Kurze Loops von 5 bis 15 Sekunden passen zu den meisten animierten Social Posts und Stories.

**Motion Graphics Vorlagen** sind Designs, die schon animiert sind: Du änderst Worte, Farben, Fotos oder Logo, und die Bewegung ist bereits erledigt. Es gibt sie für professionelle Videosoftware wie After Effects und Premiere Pro, aber du brauchst keins von beiden. Browserbasierte Designtools bieten animierte Vorlagen, die du wie jedes andere Design bearbeitest und dann als Video oder GIF exportierst. Der Trick ist, Vorlagen mit einfacher, ruhiger Bewegung zu wählen und genug davon zu ersetzen, damit das Ergebnis nach deiner Marke aussieht.

## Die Arten von Motion Graphics Vorlagen

„Motion Vorlage“ umfasst sehr unterschiedliche Dateien. Welche du willst, hängt von der Software ab, die du schon nutzt, und davon, wie viel Kontrolle du brauchst.

| Art | Funktioniert in | Gut für | Lernaufwand |
| --- | --- | --- | --- |
| After Effects Projekt | Adobe After Effects | Komplexe Titel, Logo Reveals, volle Kontrolle | Hoch |
| MOGRT (.mogrt) | Premiere Pro, mit in After Effects angelegten Reglern | Bauchbinden und Titel im Videoschnitt | Mittel |
| Apple Motion Vorlage | Final Cut Pro und Motion | Titel und Übergänge für Mac Cutter | Mittel |
| Lottie Animation (JSON) | Websites und Apps, über einen Player | Kleine Oberflächenanimationen und Icons | Braucht Entwickler |
| Animierte Designvorlage | Designtools im Browser | Social Posts, Stories, Anzeigen, Loops für Bildschirme | Sanft |

Wenn du Posts, Stories und einfache Anzeigen machst, reicht meist eine animierte Designvorlage im Browser.

## Motion Graphics ohne After Effects

After Effects ist für Keyframes, Expressions und Compositing gebaut, und das ist weit mehr, als ein animierter Sale Post braucht. Für die meiste Social und Marketing Arbeit erledigen drei Arten von Bewegung alles, und gute Browsertools bieten alle drei ohne einen einzigen Keyframe.

- **Hintergrundbewegung.** Das Farbfeld driftet, fließt oder atmet langsam hinter stehenden Worten. Ruhig, hochwertig und leicht zu loopen.
- **Textauftritte.** Worte steigen an ihren Platz, ploppen auf, wischen herein oder tippen sich Buchstabe für Buchstabe, und stehen dann lange genug still, um gelesen zu werden.
- **Seitenfolgen.** Mehrere Frames laufen nacheinander mit einem Übergang dazwischen, wie ein bewegtes Karussell.

Die Regel, die alle drei professionell aussehen lässt: Beweg immer nur eine Sache und lass die Worte zur Ruhe kommen, bevor irgendetwas anderes passiert. [Prinzipien des Motion Design](https://gradiently.design/de/guide/motion-design-principles) und [Easing](https://gradiently.design/de/guide/easing) erklären, warum ruhige Bewegung als Qualität wahrgenommen wird.

## Was eine gute animierte Vorlage ausmacht

### Lass sie liegen

- Alles bewegt sich gleichzeitig
- Text animiert heraus, bevor du ihn lesen kannst
- Auf eine Größe festgelegt
- Ein Sprung beim Neustart des Loops
- Effekte, die nur mit dem Demofoto funktionieren

### Nimm sie

- Ein oder zwei bewegte Teile, der Rest steht
- Worte kommen an und stehen zwei Sekunden oder länger
- Versionen für Story, Post und Quadrat
- Ein Loop ohne sichtbare Naht
- Sieht mit deinen Worten gut aus, nicht nur mit dem Beispiel

Teste eine Vorlage mit deiner echten, längsten Headline, bevor du dich festlegst. Viele Vorlagen sehen mit einer Beispielzeile aus drei Wörtern wunderbar aus und fallen mit deiner auseinander.

## Vorlagen, die du bereithalten solltest

Ein kleines Set animierter Vorlagen deckt das meiste ab, was ein Unternehmen postet. Mach jede einmal in deiner Marke, speichere sie, und jede künftige Version ist eine Bearbeitung von zwei Minuten.

Eine animierte Countdown Story im Hochformat mit dem Text Noch 3 Tage für einen Frühlingsmarkt, auf einem bewegten Verlauf

Eine Countdown Story: Die Zahl ändert sich jeden Tag, Hintergrund und Layout nie.

Ein Feed Post im Hochformat mit dem Text Sommer Sale, nur dieses Wochenende, und langsam driftendem Verlaufshintergrund

Ein Sale Post, bei dem die Worte über einem driftenden Hintergrund aufsteigen und dann stehen bleiben.

- **Ankündigung:** neues Produkt, neue Öffnungszeiten, neue Kollegin. Siehe [Ankündigungspost](https://gradiently.design/de/guide/announcement-post-design).
- **Countdown:** Launches, Events, Fristen. Siehe [Countdown Post](https://gradiently.design/de/guide/countdown-post-design).
- **Zitat oder Kundenstimme:** die Worte einer Kundin, Zeile für Zeile getippt.
- **Sale oder Angebot:** Headline und Daten, sonst nichts.
- **Tipp oder Anleitung:** eine kurze Seitenfolge, ein Schritt pro Seite.
- **Event:** Datum, Ort, eine Zeile zum Warum.

## So sieht eine Vorlage nach deiner Marke aus

Eine Vorlage erkennt man am schnellsten daran, dass sie noch ihre eigenen Farben trägt. Ersetze diese Dinge in dieser Reihenfolge, und sie wird zu deiner.

1. **Den Hintergrund tauschen** Der Hintergrund füllt den größten Teil des Bildes, also leistet er die meiste Markenarbeit. Nutze dein eigenes Farbfeld oder deinen eigenen Verlauf, nicht den der Vorlage.
2. **Die Schrift tauschen** Setz Headlines in der Überschriftenschrift deiner Marke und den kleinen Text in ihrer Textschrift.
3. **Streichen, was du nicht brauchst** Lösch dekorative Formen, Sticker und überzählige Textfelder. Weniger Elemente, die sich weniger bewegen, wirken hochwertiger.
4. **Die Bewegung verlangsamen** Bietet die Vorlage ein Tempo an, wähl das langsamere. Schnelle Loops wirken in der Wiederholung billig.
5. **Jedes Format aus einem Design machen** Bau Story, Feed und Quadrat aus derselben Datei, damit sie im Look identisch bleiben.

- Rosé für einen Launch: `radial-gradient(circle at 20% 20%, #fb7185 0%, #be123c 40%, #2a0612 85%)`
- Tiefsee für Tech: `linear-gradient(200deg, #0f172a 0%, #0e7490 60%, #67e8f9 100%)`
- Warmes Creme für Essen: `radial-gradient(circle at 75% 75%, #fcd34d 0%, #fef3c7 45%, #fffbeb 90%)`

Drei Ausgangsgründe. Welchen du auch wählst, nutze denselben in jeder Vorlage, damit das Set als eine Marke wirkt.

## Animierte Vorlagen exportieren

Exportiere MP4 für Instagram, TikTok, LinkedIn und überall, wo Video läuft; nutze GIF nur dort, wo kein Video abgespielt wird, etwa in manchen E-Mail Programmen. Halte Loops für Posts und Stories zwischen 5 und 15 Sekunden und prüf, ob das letzte Bild ins erste zurückfließt. [GIF oder MP4](https://gradiently.design/de/guide/gif-vs-mp4) erklärt die Abwägungen, und [animierte Instagram Posts](https://gradiently.design/de/guide/animated-social-posts) behandelt das Posten.

## Animierte Vorlagen in Gradiently

Die Vorlagen von Gradiently (Posts, Stories, Plakate, Speisekarten, Karten und Hintergrundbilder) nehmen deinen Mark als Hintergrund. Der bewegte Teil ist also ein lebendiger Verlauf oder ein Material, das allein dir gehört, sobald du ihn gesichert hast, und keine andere Vorlage sieht gleich aus. Worte können aufsteigen, aufploppen, hereinwischen oder sich eintippen, der Mark kann driften, fließen, atmen oder wirbeln, und mit Pro exportierst du nahtlose Loops von 5 bis 30 Sekunden als MP4, WebM oder GIF, jedes Format aus einem Design. Die vollständige Vorlagenbibliothek gehört zu Pro.

## FAQ

### Was sind Motion Graphics Vorlagen?

Vorab animierte Designs, bei denen du Worte, Farben und Medien änderst, während die Animation schon gebaut ist. Es gibt sie für After Effects, Premiere Pro, Final Cut Pro und Designtools im Browser.

### Kann ich Motion Graphics ohne After Effects machen?

Ja. Browserbasierte Designtools bieten animierte Vorlagen mit Hintergrundbewegung, Textauftritten und Seitenübergängen, exportiert als MP4 oder GIF, ganz ohne Keyframes.

### Was ist eine MOGRT Datei?

Eine Motion Graphics Template Datei für Adobe Premiere Pro. Sie wird meist in After Effects gebaut und bietet einfache Regler, etwa für Text und Farbe, zum Bearbeiten in Premiere.

### Wie lang sollte ein animierter Social Post sein?

Fünf bis fünfzehn Sekunden passen zu den meisten Posts und Stories. Lass die Worte mindestens zwei Sekunden stehen, damit man sie lesen kann.

### Wie verhindere ich, dass eine Motion Vorlage generisch wirkt?

Ersetze Hintergrund, Schriften und Farben durch deine eigenen, lösch dekorative Extras und verlangsame die Bewegung.