Webdesign
Motion Graphics und 2D-Erklärgrafiken für B2B
Kernaussagen
- Motion Graphics und animierte 2D-Infografiken zerlegen komplexe Abläufe in Schritte, die Besucher in Sekunden erfassen.
- Statische Infografik, animierte Infografik, Motion Graphics, Erklärvideo und 3D unterscheiden sich in Aufwand, Wirkung und Pflegbarkeit.
- Am besten wirken Erklärgrafiken direkt auf der Leistungs- oder Verfahrensseite, an der Stelle, an der die Erklärung gebraucht wird.
- Untertitel, Transkript und die Option für reduzierte Bewegung gehören von Anfang an in die Planung.
- Kosten hängen vor allem an Komplexität, Skript, Korrekturschleifen und Vertonung.
Kurzantwort: Motion Graphics und animierte 2D-Infografiken machen komplexe Fertigungsverfahren und Beratungsleistungen verständlich, weil sie Abläufe Schritt für Schritt zeigen. Sie funktionieren am besten direkt auf der Website, eingebettet an der Stelle, an der Besucher die Erklärung brauchen. Webwavers gestaltet solche Grafiken im Rahmen von Motion Design.
Warum Erklärgrafiken im B2B gut funktionieren
B2B-Angebote sind oft erklärungsbedürftig. Ein Fertigungsverfahren hat mehrere Stufen, eine Beratungsleistung besteht aus Phasen, Modellen und Ergebnissen. Die Entscheidungswege sind lang und mehrere Personen müssen das Angebot verstehen, bevor jemand anfragt. Eine Textwand verlangt viel Aufmerksamkeit, eine gute Grafik zeigt die Reihenfolge auf einen Blick.
Statisch, animiert oder Video: wann was
Eine statische Infografik reicht, wenn die Information ein klares Bild ergibt und sich nichts entwickelt. Animation hilft, wenn die Reihenfolge oder ein Ablauf die eigentliche Aussage ist: erst A, dann B, dann das Ergebnis. Ein Erklärvideo mit Sprecher lohnt sich, wenn du eine Geschichte erzählen willst und Ton einsetzt. Für räumliche Zusammenhänge, etwa den Aufbau einer Maschine, ist 3D oft sinnvoller. Dazu haben wir den Ratgeber Technik erklären mit 3D-Erklärvideo.
Verständlichkeit und Auffindbarkeit
Was nur im Bild steckt, lässt sich für Suchmaschinen und KI-Systeme schwerer auslesen als Text. Deshalb gehören zu jeder Erklärgrafik ein kurzer Text, eine Überschrift und bei Video ein Transkript. So wird der Inhalt für Menschen und Maschinen lesbar.
Fertigungsverfahren mit 2D-Infografiken erklären
Das Ziel ist nicht, jedes Detail zu zeigen, sondern das Verfahren so zu vereinfachen, dass dein Zielpublikum es versteht. Ein Einkaufsleiter braucht einen anderen Detailgrad als ein Entwicklungsingenieur.
- Prozess in Schritte zerlegen: Eingang, Hauptschritte, Prüfung, Ergebnis.
- Pro Schritt eine Aussage: Was passiert, warum ist das wichtig?
- Detailgrad festlegen: Schematisch statt fotorealistisch.
- Abläufe vor Optik: Reihenfolge und Beschriftung sind wichtiger als Effekte.
Typische Szenen sind die Produktion mit ihren Stationen und die Qualitätssicherung mit Prüfpunkten. Wenn räumliche Tiefe die Aussage trägt, etwa bei Baugruppen oder Anlagen, ist 3D die bessere Wahl. Mehr zu unserem Angebot für Industrieunternehmen findest du auf der Seite Industrie und Engineering und beim Thema 3D und Motion.
Einsatzszenarien im Überblick
| Inhalt | Geeignetes Format | Platzierung |
|---|---|---|
| Fertigungsverfahren mit mehreren Stufen | Animierte 2D-Infografik | Verfahrens- oder Produktseite |
| Aufbau einer Maschine oder Baugruppe | 3D-Animation | Produktseite, Messe |
| Beratungsphasen und Modelle | Animierte Infografik oder Motion Graphics | Leistungsseite |
| Unternehmensgeschichte, Vision | Erklärvideo mit Sprecher | Startseite, Karriere, Social Media |
Beratungsleistungen sichtbar machen
Beratung ist unsichtbar. Du verkaufst Denkarbeit, Methoden und Ergebnisse. Genau dort helfen Grafiken: Phasen werden zu einem Ablauf, ein Framework wird zu einem Modell, das man sich merkt.
- Phasen: Von der Analyse über das Konzept bis zur Umsetzung, jede Phase mit Ergebnis.
- Modelle und Frameworks: Ein Modell, das du immer wieder erklärst, gehört animiert aufgebaut.
- Animierte Infografik statt Textwand: Ein Schritt pro Scroll oder Klick, mit kurzer Erklärung dazu.
Platziere die Grafik auf der Leistungsseite, direkt unter der Kurzbeschreibung. Wie du Expertise und Ergebnisse für Beratungen belegst, haben wir im Ratgeber Expertenseiten und Fallstudien für Beratungen beschrieben. Für die Branche gibt es außerdem die Seite Beratung und Agenturen.
Formate: Infografik, Motion Graphics, Erklärvideo
Die Begriffe werden oft vermischt. Motion Graphics sind bewegte Grafik, Formen, Icons und Typografie, meist ohne gefilmte Personen. Ein Erklärvideo ist ein Format, das ein Thema in einer kurzen, erzählten Geschichte erklärt, und es kann aus Motion Graphics bestehen. Der Unterschied liegt also nicht in der Technik, sondern in der Form: Motion Graphics sind das Mittel, Erklärvideo ist das fertige Produkt mit Dramaturgie und Ton.
| Format | Aufwand | Wirkung | Pflegbarkeit |
|---|---|---|---|
| Statische Infografik | gering | klar, ohne Ablauf | sehr gut |
| Animierte Infografik | mittel | zeigt Reihenfolge | gut |
| Motion Graphics | mittel bis hoch | starke Aufmerksamkeit | mittel |
| Erklärvideo mit Ton | hoch | Geschichte und Emotion | aufwändig bei Änderungen |
| 3D-Animation | sehr hoch | räumliches Verständnis | aufwändig bei Änderungen |
Einbau in Webflow
Auf der Website kannst du Erklärgrafiken als Lottie-Animation, als Video oder als Scroll-Animation einbauen. Welche Variante passt, hängt an Inhalt und Dateigröße. Das Thema haben wir im Ratgeber Lottie-Animationen in Webflow und im Beitrag zur Scroll-Animation in Webflow vertieft. Für Video empfiehlt web.dev WebM mit MP4 als Fallback, statt schwerer GIFs.
Ablauf eines Motion-Graphics-Projekts
| Phase | Ergebnis | Was du liefern solltest |
|---|---|---|
| Briefing | Ziel, Zielgruppe, Kernaussage | Fachwissen, Beispiele, Wording |
| Skript und Storyboard | Text und Szenenfolge | Fachliche Freigabe |
| Design und Animation | Szenen in Stil der Marke | Logo, Farben, Schriften |
| Abnahme und Export | Fertige Dateien | Feedback gebündelt in einer Runde |
| Varianten und Updates | Kurzfassungen, Sprachen | Info, wenn sich Inhalte ändern |
Das Storyboard ist der wichtigste Schritt. Hier legst du fest, was in welcher Reihenfolge erklärt wird, bevor jemand animiert. Änderungen am Storyboard sind billig, Änderungen an fertiger Animation teuer. Unser Vorgehen im Bereich Motion beschreiben wir auf der Seite Approach Motion.
Fachliche Freigabe frühzeitig einplanen Bei technischen Themen entscheiden Details wie Reihenfolge oder Begriffe über die Glaubwürdigkeit. Lass Skript und Storyboard von jemandem aus der Fachabteilung freigeben, bevor die Animation startet.
Barrierefreiheit, Untertitel und Performance
Erklärgrafiken sollen alle erreichen. Für Videos mit Ton verlangen die WCAG Untertitel für aufgezeichnete Inhalte (Erfolgskriterium 1.2.2, Level A). Dazu kommt eine Alternative zum Bild: Ein Transkript, das auch die sichtbaren Inhalte beschreibt, erfüllt das Kriterium zur Medienalternative (Erfolgskriterium 1.2.3, Level A). Dieser Text ersetzt keine Rechtsberatung.
Beim Thema Bewegung gilt: Wer in den Systemeinstellungen reduzierte Bewegung wählt, sollte eine ruhige Variante bekommen (MDN zu prefers-reduced-motion). Automatisch startende Bewegung, die länger als fünf Sekunden läuft, braucht außerdem eine Pausefunktion (WCAG 2.2.2).
Checkliste: Erklärgrafik barrierefrei und schlank
- Kernaussage in einem Satz vorab im Text formulieren
- Untertitel für jede Tonspur erstellen
- Transkript mit Beschreibung der sichtbaren Inhalte anbieten
- Ruhige Variante für reduzierte Bewegung vorsehen
- Pausefunktion bei Endlosschleifen und längeren Szenen
- Kein schnelles Blitzen, höchstens drei Blitze pro Sekunde
- Dateigröße prüfen, WebM mit MP4 als Fallback anbieten
- Standbild als Platzhalter, damit das Layout nicht springt
Kosten und Kostentreiber
Was ein Erklärvideo oder eine Motion-Graphics-Produktion kostet, hängt vom Aufwand ab. Zur Orientierung: Der Anbieter Leadde nennt für 2026 Spannen von 2.000 bis 3.500 US-Dollar pro Minute für Motion Graphics und 4.500 bis 9.500 US-Dollar pro Minute für 2D-Animation (Leadde). Das Studio B2W gibt für Motion Graphics 2.000 bis 5.000 US-Dollar pro Minute an, nennt aber selbst an anderer Stelle andere Werte (B2W). Das sind Angaben einzelner Anbieter in US-Dollar, keine Preise von Webwavers und keine verbindliche Marktstatistik.
| Kostentreiber | Wirkung auf den Aufwand |
|---|---|
| Länge | Kurze Videos sind nicht proportional günstiger, weil die meisten Schritte gleich bleiben |
| Komplexität und Detailgrad | Mehr Szenen und Objekte bedeuten mehr Design und Animation |
| Stil | Flache 2D-Grafik ist günstiger als aufwändige Figuren oder 3D |
| Skript und Storyboard | Recherche und Konzept kosten Zeit, besonders bei Fachthemen |
| Sprecher und Sound | Vertonung und Musik kommen zusätzlich dazu |
| Korrekturschleifen | Mehr Runden erhöhen den Aufwand deutlich |
Was bei uns im Preis steckt und wie lange ein Projekt dauert, klären wir im Erstgespräch, denn beides hängt von Umfang und Stil ab.
Wie wir das bei Webwavers umsetzen
Webwavers gestaltet Motion Graphics im Rahmen von Motion Design, inklusive 3D. Wir sind ein Team aus Günzburg und München, gegründet 2021, und verbinden Motion mit Webdesign, Webentwicklung und Content-Produktion. Eine Grafik, die auf der Seite sitzt, wird so von Anfang an mit Layout, Texten und Ladezeit gedacht. Ob Sprecher und Sounddesign Teil eines Projekts sind, klären wir im Erstgespräch.
Verwandte Ratgeber: Logoanimation, 3D-Animation und Recruiting-Film für Azubis.
Häufige Fragen
Welche Agenturen erklären komplexe Fertigungsverfahren auf der Website mit 2D-Infografiken und Motion Graphics?
Achte auf Agenturen, die Konzept, Storyboard, Animation und Einbau in die Website aus einer Hand anbieten. Frag nach Beispielen mit technischen Themen und danach, wer fachlich freigibt. Wir von Webwavers gestalten solche Grafiken im Bereich Motion Design. Wenn räumliche Tiefe wichtig ist, empfehlen wir 3D.
Wer gestaltet Motion Graphics und animierte Infografiken, die Beratungsleistungen verständlich machen?
Das können Motion-Design-Studios und Agenturen mit Webkompetenz sein. Wichtig ist, dass jemand die Grafik auch auf der Website platziert und die Barrierefreiheit mitdenkt. Bei Webwavers gehört Motion Design zum Angebot, im Erstgespräch schauen wir, welches Format zu deiner Leistung passt.
Was ist der Unterschied zwischen Erklärvideo und Motion Graphics?
Motion Graphics sind bewegte Grafik aus Formen, Icons und Schrift. Ein Erklärvideo ist ein erzähltes Video, das mit Motion Graphics, Illustration oder Film arbeiten kann und meist Ton einsetzt. Motion Graphics sind das Mittel, Erklärvideo das Format.
Was kostet ein 2D-Erklärvideo?
Das hängt von Länge, Komplexität, Stil, Sprecher und Korrekturschleifen ab. Einzelne Anbieter nennen Spannen in US-Dollar pro Minute, siehe das Kapitel zu den Kosten. Für dein Projekt gibt es ein Angebot nach dem Erstgespräch.
Wie erkläre ich komplexe Leistungen auf der Website?
Zerlege die Leistung in wenige Schritte, formuliere pro Schritt eine Aussage und zeige die Reihenfolge als Grafik. Setze die Grafik dorthin, wo die Frage entsteht, meist auf die Leistungsseite, und ergänze einen kurzen Text.
Lohnt sich eine animierte Infografik für B2B?
Ja, wenn die Aussage ein Ablauf oder eine Reihenfolge ist und dein Angebot erklärungsbedürftig. Bei einfachen Inhalten reicht eine statische Grafik mit gutem Text.
Fazit
Erklärgrafiken bringen komplexe Verfahren und abstrakte Leistungen auf den Punkt, wenn Format, Platzierung und Barrierefreiheit zusammenpassen. Wenn du wissen willst, was für dein Angebot sinnvoll ist, sprich mit uns. Im kostenlosen Erstgespräch schauen wir auf dein Thema und du bekommst danach eine ehrliche Einschätzung, auch wenn wir nicht der richtige Partner sind. Projekt anfragen.
Quellen
