3D Animationen für Produkte und Webseiten

3D Animationen gibt es schon sehr lange. Beginnend mit Computer Animationen am PC bis zu 3D Animationen auf Webseiten.

Die wohl meistverbreitete Animation weltweit ist eine, die kaum jemandem auffällt: Das sogenannte Burger-Menu, das auf nahezu jeder Webseite seit einigen Jahren eingebaut wird, um ein Menu ein- und ausklappen zu können (siehe Animation oben).

‍

Eine Animation ist im Grunde nichts anderes als sich verändernde Grafiken durch eine (oft durch mit Hilfe eines Computers) gestaltete Abfolge von Bildern. 

Im Internet hat dabei alles mit der Einführung des Dateiformats GIF 1987 begonnen, das immer noch ein beliebtes Format für die Einbettung von animierten Bildern ist. Unternehmen haben bereits früh versucht, sich auf diese Weise vom Wettbewerb abzuheben, indem sie ihr Logo als 3D Animation im Internet darstellen.

Im Laufe der Zeit entwickelte sich Adobe Flash zu einem der meistgenutzten Formate, um interaktives Web Design und Animationen zu ermöglichen. Der Flash Player und das Flash Format wurden allerdings nach seinem Boom Anfang der 2000er Jahre insbesondere durch das Aufstreben von Apple wieder verdrängt.
Denn Apple und die neu auf den Markt gekommenen Iphones unterstützten den Flash Player nicht. Die damalige Begründung von Apple-CEO Steve Jobs wurde zunächst noch kritisch bewertet. 2017 wurde der Adobe Flash Player dann offiziell eingestellt. 

Währenddessen hatte sich der universelle Standard HTML5, der 2008 eingeführt wurde, allmählich durchgesetzt.

‍

Heute sind Web Animationen und 3D Animationen durch HTML5 und CSS3, Lottie und JavaScript sowie auch SVG Animationen sehr weit verbreitet. 

Grundsätzlich sind Animationen eine Teildisziplin von Motion Design. Denn Motion Design ist eine umfassendere Disziplin, die nicht nur die Animation, sondern auch die Gestaltung und Choreografie visueller Elemente in einem bestimmten Raum oder Kontext einschließt.

‍

Was ist eine 3D Produkt Animation?

‍

3D Animationen von Produkten auf Webseiten sind entweder interaktiv und können vom Nutzer selbstständig in jeder Achse bewegt werden. Oder es sind vordefinierte Bewegungen des Produktes in Form von Video-, GIF- oder Lottie-Animationen.

Im Kern sind alle Produktanimationen dynamische Bilder, die ein Produkt aus jedem Blickwinkel zeigen sollen oder in Form von Querschnitten bzw. Explosions-Ansichten Details und Verborgenes sichtbar machen.

Der Vorteil von mittels 3D Visualisierung erstellter Produktanimationen ist die Tatsache, dass es sich um CGI (computer generated imagery) handelt: Der Kreativität und Darstellungsform sind damit keine Grenzen gesetzt.

‍

Welche Animationen werden auf Webseiten genutzt?

‍

Auf Webseiten gibt es eine Vielzahl an Möglichkeiten, mit Bewegungen und Animationen ein besonderes Nutzererlebnis zu schaffen.

Als Betreiber einer Webseite sollten diese 13 Methoden für Animationen bekannt sein:

‍

1. Übergänge: Übergangsanimationen werden verwendet, um sanft von einem Zustand in einen anderen zu wechseln, z. B. wenn man den Mauszeiger über eine Schaltfläche bewegt oder zwischen Seiten navigiert. Sie sorgen für eine ausgefeiltere und benutzerfreundlichere Oberfläche.

‍

2. Bildlauf-Animationen: Diese Animationen werden ausgelöst, wenn Benutzer eine Webseite nach unten scrollen. Sie können Parallaxen-Effekte beinhalten, Elemente ein- oder ausblenden oder Objekte animieren, wenn sie ins Blickfeld kommen. Scroll-Animationen sorgen für visuelles Interesse und führen den Benutzer durch den Inhalt.

‍

3. Hover-Animationen: Hover-Animationen reagieren auf Mausinteraktionen und bewirken, dass Elemente ihr Aussehen ändern oder animiert werden, wenn der Benutzer mit dem Mauszeiger darüber fährt. Dies sorgt für Feedback und Interaktivität.

‍

4. Hintergrund-Animationen: Animationen, die auf den Hintergrund einer Webseite angewendet werden, wie z. B. bewegliche Muster, Videos oder interaktive Hintergründe, können die Seite optisch ansprechender machen.

‍

5. SVG-Animationen: Bei SVG-Animationen (Scalable Vector Graphics) werden Vektorgrafiken mit CSS oder JavaScript animiert. Sie werden häufig für Logos, Icons oder Illustrationen verwendet, um statischen Bildern ein dynamisches Element hinzuzufügen.

‍

6. GIFs und Videoclips: Animierte GIFs und Videoclips können in Webseiten eingebettet werden, um Produktfunktionen zu präsentieren, Prozesse zu veranschaulichen oder ansprechende Inhalte zu erstellen.

‍

7. Modale und Popup-Animationen: Animationen können zum Öffnen und Schließen von modalen Fenstern oder Popups verwendet werden und sorgen für einen sanften und visuell ansprechenden Übergang.

‍

8. 3D- und WebGL-Animationen: Fortgeschrittene Webanimationen können 3D-Grafiken und WebGL nutzen, um immersive und interaktive Erlebnisse zu schaffen, wie z. B. interaktive 3D-Produktansichten oder Spiele.

‍

9. Charakter- und Storytelling-Animationen: Animierte Charaktere oder Szenen können verwendet werden, um eine Geschichte zu erzählen, ein Konzept zu erklären oder Benutzer durch eine Website zu führen.

‍

10. Interaktive Animationen: Diese Animationen reagieren auf Benutzerinteraktionen, geben Feedback oder ermöglichen es den Benutzern, Elemente auf der Seite zu manipulieren. Zum Beispiel interaktive Infografiken oder interaktive Produktkonfiguratoren.

‍

11. Partikel-Animationen: Partikelanimationen beinhalten die Bewegung und Interaktion von kleinen, individuellen Partikeln, um dynamische und visuell beeindruckende Effekte zu erzeugen.

‍

12. CSS-Animation: Mit Cascading Style Sheets (CSS) lässt sich ein breites Spektrum an Animationen erstellen, darunter Übergänge, Keyframe-Animationen und komplexere Effekte. CSS-Animationen sind leichtgewichtig und browserfreundlich.

‍

13. Canvas-Animationen: HTML5 Canvas ermöglicht die Erstellung von Animationen, die in hohem Maße anpassbar sind und für Spiele, Simulationen und interaktive Grafiken verwendet werden können.

‍

Vorteile von Animationen gegenüber Videos

‍

Das Cambridge Dictionary definiert eine Animation als “bewegte Bilder, die auf der Grundlage von Zeichnungen, Modellen usw. entstehen, die fotografiert oder mit dem Computer erstellt wurden”.

Danach fangen Videos also Szenen aus dem wirklichen Leben ein, während eine Animation eine gestaltete Abfolge von Bildern ist, die oft fiktive oder abstrakte Inhalte darstellen. 

Kurz: Videos zeichnen die Realität auf, Animationen sind künstliche Kreationen.

Die größten Vorteile für das Produkt Marketing ergeben sich daraus in diesen Punkten:

‍

• Interaktivität: Video können vorgespult und zurückgespult werden. Bei Animationen sind die Möglichkeiten wirklich interaktiv und können gleichzeitig in kürzerer Zeit für den Betrachter viel mehr erzählen und vermitteln.

• Oft geringere Kosten: Da der Aufwand für eine Location, für entsprechendes Personal vor Ort und für die oft kostenintensive Ausrüstung wegfallen, sind auch die gesamten Produktionskosten bei Animationen oft geringer.

• Wiederverwendbare Assets: Bei Animationen werden oft digitale Assets erstellt, die in zukünftigen Projekten wiederverwendet werden können, was langfristig Kosten spart. Der digitale Zwilling des eigenen Produktes ist das beste Beispiel dafür. Hinzu kommen ganze Szenen und Props, die jederzeit und effizient wiederverwendet werden.

• Konsistenz: Gerade für Brands ist es wichtig, konsistent über alle Kanäle hinweg aufzutreten. Mit Animationen, die auf CGI beruhen, ist es besonders einfach, visuell einheitlich aufzutreten. Nachdrehs oder Korrekturen aufgrund von Abweichungen in Live-Action-Szenen braucht es nicht.

‍

8 Vorteile von 3D Produkt Animationen

‍

1. Visuelle Anziehungskraft: 3D-Animationen sind visuell fesselnd und können Produkte aus verschiedenen Blickwinkeln und Perspektiven zeigen. Dieser visuelle Reiz kann sofort die Aufmerksamkeit des Betrachters erregen und das Produkt verlockender machen.

‍

2. Mehr sehen als in der Realität: 3D-Animationen können eine unglaublich detaillierte und realistische Darstellung eines Produkts liefern. Sie können sogar mehr zeigen als in der Realität möglich wäre zu sehen. Bei komplexen Produkten oder solchen mit einzigartigen Funktionen können 3D-Animationen das Verständnis dadurch erleichtern. Funktionen, Montageanleitungen oder die Verwendung kann mit Hilfe von Animationen einfach demonstriert werden.

‍

3. Weniger Retouren: Alles, was einem potenziellen Käufer hilft, vor dem Kauf sämtliche Eigenschaften des Produktes zu verstehen, kann zu weniger Retouren führen. Dass die Art der Produktbilder die Anzahl von Rücksendungen positiv beeinflusst, ist inzwischen in vielen Studien und Umfragen hinreichend belegt. 3D Animationen sind hier eine besondere Form der Produktdarstellung, um die Retourenquote positiv zu beeinflussen.

‍

4. Einheitlicher Markenauftritt: 3D-Animationen lassen sich leicht an das Branding und die Marketingstrategie eines Unternehmens anpassen. Dies ermöglicht ein einheitliches Messaging und Branding über verschiedene Marketingkanäle hinweg.

‍

5. Kostenersparnis: Die Erstellung einer qualitativ hochwertigen 3D-Animation erfordert zwar eine Anfangsinvestition, kann aber im Vergleich zu herkömmlichen Methoden wie physischen Prototypen oder aufwendigen Fotoshootings langfristig kostengünstiger sein. Auch das Aktualisieren und Ändern von Animationen ist relativ unproblematisch und bei größeren Produktportfolios und ähnlichen Produkten ein signifikanter Hebel in der Kostenersparnis.

‍

6. Interaktive Funktionen: Einige 3D-Animationen können interaktiv sein und dem Betrachter die Möglichkeit geben, das Produkt selbst zu erkunden. Damit wird das Verständnis und das Interesse des Betrachters für das Produkt gesteigert. Das Engagement mit dem Produkt wird deutlich erhöht.

‍

7. Wettbewerbsvorteil: Der Einsatz von 3D-Animationen kann ein Unternehmen von Konkurrenten abheben, die noch auf traditionelle Marketingmethoden setzen. Brands können sich damit gleichzeitig als innovativ und kundenfreundlich positionieren.

‍

8. Geringere Umweltbelastung: Weniger physische Prototypen, weniger Retouren, weniger Logistik, weniger gedrucktes Material und weniger manueller Aufwand tragen dazu bei, Ressourcen zu sparen. Abfall und Emissionen können mit 3D Animationen im Vergleich zu Videografie und Fotografie gespart werden.

‍

Tipps für optimale Web Performance von 3D Animationen

‍

Wenn man als Produktmarketing Manager mehr als nur statische Produktbilder oder eingebettete Videos auf seinen Produktseiten anbieten will, sind Animationen ein sehr gutes Mittel. 

Obwohl es inzwischen kein Problem mehr sein sollte, mit jeglichen Geräten auch umfangreiche Webseiten zu laden und flüssig zu scrollen, gibt es einige Tipps und Tricks, die es zu beachten gilt. Im Zweifel weiß der Website-Verantwortliche ohnehin darüber Bescheid, hier gibt es die wichtigsten Tipps für die optimale Web Performance von 3D Animationen im Überblick:

‍

3D-Modelle optimieren: Die Anzahl der Polygone für ein 3D Modell des Produktes kann reduziert und die verwendeten Texturen optimiert werden, um die Größe von 3D-Assets zu minimieren.

‍

Effiziente Dateiformate verwenden: Wenn möglich, unbedingt schlanke Dateiformate wie glTF für 3D-Modelle verwenden.

‍

LOD (Level of Detail) implementieren: Mit LOD-Techniken können einfachere 3D-Modelle aus der Ferne und detaillierte aus der Nähe geladen werden.

‍

Caching: Mit Browser-Caching für 3D-Assets lassen sich redundante Downloads vermeiden.

‍

Komprimierung: Ggfs. lassen sich Texturen und 3D-Assets komprimieren, um die Dateigröße zu verringern, ohne die Qualität zu beeinträchtigen.

‍

Responsives Design: 3D-Animationen sollten responsive implementiert werden und sich an unterschiedliche Bildschirmgrößen und Auflösungen anpassen.

‍

Testen: 3D-Animationen sollten vorab gründlich auf verschiedenen Geräten und Browsern getestet werden, um Kompatibilität und Leistung sicherzustellen.

‍

Leistung überwachen: Um ein gutes Nutzererlebnis mit 3D Animationen dauerhaft zu gewährleisten, sollte die Leistung der Produktseite kontinuierlich mit Tools wie Google Lighthouse oder WebPageTest kontrolliert werden.

‍

Content Delivery Network (CDN): Ein CDN kann verwendet werden, um 3D-Assets von Servern zu verteilen, die geografisch näher am Benutzer liegen, um die Ladezeiten zu verkürzen.

‍

Fallbacks: Für Benutzer mit älteren Browsern oder Geräten, die 3D-Grafiken nicht unterstützen, können sogenannte Fallbacks, also Platzhalter, eingestellt werden.

‍

Einstellungen für Benutzer: Damit bspw. auf individuelle Ladegeschwindigkeiten Rücksicht genommen werden kann, ist es möglich, ein Bedienfeld für Einstellungen zu implementieren- Damit können Benutzer die Qualität oder Komplexität von 3D-Animationen kontrollieren und anpassen, falls erforderlich.

‍

Wie die Profis: Fotorealistische 3D Animationen für Produkte

‍

Der unglaubliche Realismus, der durch 3D-Animationen erreicht wird, beruht auf modernster Technologie und akribischer Detailgenauigkeit. Fortschrittliche Rendering-Techniken, Physiksimulationen und naturgetreue Texturen tragen zur Authentizität der Animationen bei. Vom subtilen Spiel des Lichts auf Oberflächen bis hin zur akkuraten Darstellung von Materialien können 3D-animierte Produkte mit dem realen Bildmaterial konkurrieren, so dass es schwierig ist, zwischen der Animation und dem tatsächlichen Filmmaterial zu unterscheiden.

‍

RenderThat: Spezialist für alle Produkte und alle Content Formate durch 3D Visualisierung

‍

Seit über 10 Jahren produziert RenderThat fotorealistischen und professionellen Content für namhafte Hersteller und Händler. Und zwar auf Basis von 3D Technologien.

‍

Da wir sehr viel Erfahrung mit 3D Animationen haben, glauben wir: Auch du zahlst zu viel für Bewegtbild deiner Produkte.
Nicht, weil Video Agenturen oder Fotografen zu viel Geld verlangen.

Sondern, weil statische Bilder und Videos einfach nicht mehr zeitgemäß sind.

Schau dir in dieser Story an, warum das so ist:

‍