Fasziniere deine Nutzer mit 3D-Designs auf deiner Website und steigere die Konversionsrate. 3D-Webdesign kann dir helfen, dich von der Masse abzuheben, ansprechende Benutzeroberflächen zu schaffen und Emotionen zu wecken, aber es muss verantwortungsvoll eingesetzt werden, um Leistungsprobleme zu vermeiden. Erfahre wie.
3D oder nicht 3D? Das ist eine Frage, die wir uns stellen müssen.
3D-Technologie und -Design sind zu einem festen Bestandteil unseres Lebens geworden. Es gibt sie in Filmen, Spielen, Fernsehsendungen, Smartphones, Druckern, AR und VR.
Aber hat sie auch einen Platz im Webdesign? Und wenn ja, in welchem Ausmaß? Würden wir eine Website komplett in 3D erstellen? Wahrscheinlich nicht.
Zunächst einmal sollten sich die meisten Websites nicht wie immersive Welten anfühlen, in denen man sich verlieren kann. Wenn das Ziel darin besteht, die Besucher zum Handeln zu bewegen, dann musst du ihnen einen unkomplizierten Weg weisen.
Und dann ist da noch die Frage der Leistung. Dein Fernseher wird durch 3D vielleicht nicht überlastet, aber es kann das Webhosting belasten – vor allem, wenn die 3D-Renderings von einem externen Plugin oder einer API generiert werden. Und wenn es um deine Besucher geht, zählt jeder Bruchteil einer Sekunde, so die jüngsten Daten.
Das bedeutet aber nicht, dass 3D keinen Platz im Webdesign hat. Tatsächlich gibt es viele Möglichkeiten, 3D zu nutzen, und viele verschiedene Richtungen, die man damit einschlagen kann.
Werfen wir einen Blick darauf, welche Arten von 3D sich am besten für das Web eignen, wie man damit arbeitet, und sehen wir uns dann 10 großartige Beispiele von Websites an, die heute 3D verwenden.
Inhaltsverzeichnis
- Was ist 3D im Webdesign?
- Die Geschichte des 3D-Webdesigns
- Die Vorteile von 3D im Webdesign
- 10 verblüffende Beispiele für 3D im Webdesign
Was ist 3D im Webdesign?
Alles, was 3D-Webdesign bedeutet, ist, dass wir Objekte entlang der x-, y- und z-Achse platzieren.
Die gängigste Interpretation von 3D-Design ist die, die wir auf der Apple-Website sehen:

Die iPhone 12 Styles in diesem Heldenbild existieren in drei Dimensionen. Die Grafiken bewegen sich nicht und haben dennoch eine gewisse Tiefe.
Das Heldenbild auf der Website von Richard Sancho zeigt ebenfalls, wie 3D-Webdesign aussieht:

Es gibt keine sichtbaren 3D-Objekte. Es ist jedoch klar, dass die schwebenden (und interaktiven) Farbkugeln hinter dem Text sich auf einer anderen Ebene (oder Ebenen) bewegen.
Im Gegensatz zum 2D-Webdesign, bei dem du deine Designs und Objekte breiter oder höher machst, kannst du ihnen beim 3D-Webdesign Tiefe verleihen und sie vorwärts und rückwärts bewegen.
Die Geschichte des 3D-Webdesigns
In den 1950er und 60er Jahren gab es eine Reihe von Computerprogrammen, die 3D-Computermodellierung ermöglichten. Die Software Robot Draftsman von Ivan Sutherland, auch bekannt als Sketchpad, war das erste Programm, das eine grafische Benutzeroberfläche (GUI) verwendete, und war wegweisend für das computergestützte Design (CAD).
Obwohl CAD heute hauptsächlich zur Erstellung von 3D-Renderings von Gebäuden, Produkten und anderen physischen Objekten verwendet wird, ist es leicht zu erkennen, wie diese früheren Technologien den Weg für das moderne 3D-Webdesign geebnet haben.
Einer der Gründe, warum 3D noch nicht die Listen der Webdesign-Trends dominiert, ist, dass es nicht immer so einfach zu erstellen war.
1994 – Die Virtual Reality Markup Language (VRML) wird eingeführt
VRML kam in den frühen Tagen des Internets auf die Bildfläche. Es handelt sich um ein Dateiformat, das auch als „Welt“ (.wrl) bezeichnet wird und mit dem Designer 3D-Objekte und -Szenen erstellen können.
1997 – Flash tritt auf den Plan
Um Flash-3D-Grafiken und -Animationen auf einer Website zu ermöglichen, musste ein Entwickler eine Lizenz für die Flash-Software erwerben, sie mit ActionScript kodieren und sie dann in die Website einbetten. Das war sehr arbeitsaufwändig und verlangte auch einen hohen Tribut an die Ladezeiten der Website, vor allem in den Zeiten der Einwahl.
2001 – X3D wird der Nachfolger von VRML
Heute ist X3D ein lizenzfreier offener Standard, der vom Web3D Consortium gepflegt wird. Er kann für eine Vielzahl von 3D-Anwendungen verwendet werden: CAD, Geodaten-Visualisierung, Animation von Menschen, AR, VR, 3D-Druck, medizinische Ausbildung und natürlich Web-Design. Darüber hinaus ist es nicht auf ein Plugin angewiesen, um im Browser zu laufen.
2010 – Skeuomorphismus wird immer beliebter
Skeuomorphismus war ein Designtrend, der dazu diente, Schnittstellen und/oder ihre Elemente wie die realen Objekte aussehen zu lassen, auf denen sie basieren. Dieser Trend hielt sich nicht lange, da er außer einem coolen Aussehen nicht viele zusätzliche Vorteile bot. Infolgedessen dominierte das flache Design die Webdesign-Trends für die nächsten Jahre.
2011 – WebGL wird eingeführt
WebGL ist eine lizenzgebührenfreie API, mit der Designer und Entwickler 3D-Grafiken erstellen können, die in den meisten modernen Webbrowsern funktionieren. Das einzige Problem mit WebGL ist, dass es schwierig zu benutzen ist. Du musst JavaScript, Java oder Objective C zusammen mit GLSL verwenden, um deine 3D-Grafiken zu programmieren.
2012 – Der NYT-Artikel Snow Fall wird veröffentlicht
Das Parallaxen-Webdesign wurde schon lange bei der Entwicklung von Videospielen eingesetzt. Aber erst 2012, als die New York Times ihren multimedialen Snow Fall-Artikel veröffentlichte, setzte sich der Fake-3D-Scroll-Effekt im Web durch.
2014 – Google entwickelt sein Material Design System
Material Design wurde aus einer Reihe von Gründen entwickelt. Einer seiner größten Beiträge zum Webdesign war jedoch, dass es der Seite Tiefe und Taktilität verlieh, was zur Verbesserung der Benutzerfreundlichkeit beitrug. Obwohl das Designsystem seine Probleme hatte, hinterließ es einen bleibenden Eindruck in der Welt des Webdesigns, und Teile davon sind noch heute in den Schichten und Schattierungen von Flat Design 2.0 zu sehen.
2021 – Wähle dein Gift
Heute gibt es eine Reihe von Anwendungen, mit denen Webdesigner individuelle und komplexe 3D-Designs erstellen können:
- AutoCAD
- Blender
- SketchUp
- Vectary
Es gibt auch eine Vielzahl von AR- und VR-Technologien, mit denen du 3D-Renderings für diese speziellen Anwendungsfälle erstellen kannst.
Wenn du nicht versuchst, ganze 3D-Welten zu erstellen, kannst du die Stil-Tools von Elementor verwenden, um deinen Website-Komponenten Tiefe zu verleihen, und Motion Effects, um deine Designs zum Leben zu erwecken.
Die Vorteile von 3D im Web-Design
Designtrends kommen und gehen. Du musst dich also fragen – ist 3D eine Designtechnik oder ein Trend, in den es sich lohnt zu investieren?
Hier sind einige Gründe, warum du diese Technik bei deiner Arbeit einsetzen solltest:
Es hebt sich vom flachen Design ab
In einer Zeit, in der die meisten Websites flach sind, hebt sich eine Website mit 3D-Funktionen sofort ab.
Achte nur darauf, dass es geschmackvoll und im Einklang mit den Grundsätzen des Webdesigns geschieht. Wenn die 3D-Szenen oder -Objekte bedeutungslos sind und nur dazu dienen, die Aufmerksamkeit auf sich zu ziehen, wird sich deine Website dadurch abheben – nur aus den falschen Gründen.
Du kannst ansprechendere Interfaces erstellen
Es gibt verschiedene Möglichkeiten, wie du 3D im Webdesign einsetzen kannst. Zum Beispiel:
- Du kannst eine immersive Welt schaffen, in die Besucher eintauchen, wenn sie die Seite zum ersten Mal betreten
- Um deine wichtigsten Grafiken zum Leben zu erwecken
- Um den Besuchern aufwändigere Rundgänge oder 360-Grad-Produktansichten zu bieten
Indem du die richtigen Elemente deines Webdesigns in eine dritte Ebene verschiebst, schaffst du ein fesselnderes Erlebnis für deine Besucher.
Indem du die Sinne der Besucher ansprichst, sprichst du ihre Emotionen an
Unsere Sinne sind eng mit unseren Emotionen verbunden, und der Tastsinn ist nicht anders. Obwohl Besucher eine 3D-Website natürlich nicht anfassen können, bietet sie dennoch ein Gefühl der Taktilität, das ein flaches Design nicht bieten kann.
Da der Tastsinn oft dazu beiträgt, dass sich Menschen mit anderen verbunden fühlen und ihre Erfahrungen mit der Welt vertiefen, können wir annehmen, dass die Interaktion mit 3D-Elementen auf einer Website die Besucher auch näher an die Marke heranführen könnte. Selbst wenn dies nicht der Fall sein sollte, wird die taktile Beschaffenheit des Designs einen bleibenden Eindruck bei ihnen hinterlassen.
Es kann deine Conversion-Rate-Optimierung verbessern
3D-Webdesign hat eine Menge praktischer Anwendungen. Du kannst zum Beispiel 3D-Renderings von Produkten, Immobilien und Veranstaltungen zu einer Website hinzufügen.
Wir wissen bereits, wie schwierig es für Verbraucher sein kann, bestimmte hochpreisige Produkte online zu kaufen, ohne sie vorher persönlich gesehen zu haben. Durch das Hinzufügen lebensechter Renderings auf der Website kannst du dazu beitragen, dass der Entscheidungsprozess viel schneller und reibungsloser verläuft. Und wenn die Käufer zuversichtlicher und zufriedener sind, wirst du wahrscheinlich auch mehr Umsätze erzielen.
10 Erstaunliche Beispiele für 3D im Webdesign
Auch wenn 3D-Design noch nicht überall im Web zu finden ist, ist es definitiv ein lohnender Trend, wenn du den richtigen Weg findest, ihn für die Website deines Kunden umzusetzen.
Wenn du auf der Suche nach Inspiration bist, schau dir die folgenden kreativen Beispiele für 3D im Webdesign an. Wenn du fertig bist, schau dir unsere Übersicht über animierte Websites an. Nicht alle Beispiele dort verwenden 3D, aber die, die es tun, solltest du dir nicht entgehen lassen!
1. Robert Bürgel
Dies ist das zweite Mal, dass wir die Grafikdesign-Agentur von Robert Bürgel in diesem Blog vorstellen. Das erste Mal erschien sie auf unserer Liste der besten Portfolio-Websites. Dieses Mal ist es wegen des originellen Heldenbildes auf der Startseite.
Das schwarze Banner hat Ausschnitte, die Roberts Namen buchstabieren. Diese Buchstaben werden erst sichtbar, wenn die Neonfische im Hintergrund schwimmen. Das gibt dem Heldenbild das Gefühl, als würde man ein Fischglas betrachten, und es ist ein Design, das man nicht so schnell vergessen wird.
2. Flux-Akademie
Die Flux Academy ist ein Ort, an dem Webdesigner lernen, wie man gestaltet, und ihre Fähigkeiten in Kursen perfektionieren. Die Homepage enthält zwar eine Reihe von 3D-Grafiken, aber die erste ist die interessanteste.
Wenn der Besucher auf der Seite nach unten scrollt, fallen die schwebenden Design-Symbole alle nach unten in den Kopf der Statue. Das ist eine wirklich gelungene Metapher für das, worum es dem Unternehmen geht.
Bemerkenswert an diesem Beispiel ist auch, dass die 3D-Grafiken relativ einfach sind. Flache Icons. Eine Statue. Illustrierte Kugeln und Gesichter. Das zeigt, dass man mit den richtigen Schattierungen und Bewegungseffekten ein sehr interessantes 3D-Erlebnis schaffen kann.
3. Dasher & Crank

Nicht nur Kreativagenturen können 3D nutzen. Werfe einen Blick auf das Hauptbild der Website von Dasher & Crank.
Auf den Websites von Restaurants werden die Gerichte und Produkte oft von oben fotografiert, was ihnen ein flaches Aussehen verleiht. Selbst die Seitenansichten haben oft keinen greifbaren Realismus, weil sie im Kontext der Hände einer Person, eines Tellers oder der Restaurantkulisse fotografiert werden.
Mit dem rosafarbenen Hintergrund heben sich die Eiscreme-Sandwiches jedoch wunderbar als 3D-Objekte ab – und sehen so gut aus, dass man sie in die Hand nehmen und hineinbeißen möchte.
4. Contra „Der Stand der Unabhängigkeit 2021“
Denke an das letzte Mal, als du dich hingesetzt hast, um einen Bericht oder ein ebook online zu lesen. Es kann mühsam sein, sich durch einen Absatz nach dem anderen zu quälen, um die Daten zu finden, die für dich am wichtigsten sind. Außerdem sind viele dieser Berichte als PDF-Dateien gespeichert, bei denen man sich nicht sicher sein kann, ob sie gut oder schlecht sind.
Der Contra-Bericht „The State of Independence 2021“ ist jedoch ein großartiges Beispiel dafür, wie 3D das Lese- und Bildungserlebnis verändern kann, wenn man nur genug davon einsetzt.
Es gibt überall kleine Mengen an 3D-Objekten – wie Kleckse und Münzen – zu sehen. Der Großteil der 3D-Renderings wird jedoch zur Darstellung von Datenvisualisierungen und Zitaten von Freiberuflern im Bericht verwendet.
5. Samsung
Apple ist nicht der einzige Smartphone-Hersteller, der 3D einsetzt, um seine Produkte ins rechte Licht zu rücken. Samsungs Landing Page für das Galaxy Z Fold erweckt das Produkt bereits beim Betreten der Website zum Leben.
Die Grafik auf der Startseite ist eine rotierende 3D-Illustration des Telefons. Beim Betreten der Website sehen die Besucher das eigentliche Telefon aus jedem Blickwinkel und können sehen, wie es sich auf- und zuklappen lässt.
Kunden, die sich fragen, wie ein faltbares Smartphone aussehen würde, brauchen nicht in den Laden zu gehen, um es herauszufinden, da die 3D-Renderings eine hervorragende Arbeit leisten, sie darzustellen.
6. Das Museum der Welt
Das British Museum hat sich mit dem Google Cultural Institute zusammengetan, um diese Microsite für das Museum of the World zu erstellen. Sie wurde von WEIR+WONG unter Verwendung von WebGL gestaltet und ist eine wirklich einzigartige Möglichkeit, eine Zeitleiste visuell zu gestalten und viele Daten darin unterzubringen.
Das Museum hat immer noch seine reguläre Website, auf der Besucher mehr über seine Sammlungen und Exponate erfahren können. Anstatt jedoch die Sammlungsgegenstände auf der Website zu zeigen, werden sie in dieser 3D-Zeitleiste in die Kategorie und den Zeitraum eingeordnet, aus denen sie stammen.
Anstatt den Besuchern zu überlassen, passiv einer Zeitleiste zu folgen oder einen Blick auf dein Inventar zu werfen, wird eine 3D-Darstellung wie diese zu einer aktiveren Erfahrung.
7. KITKAT-Schokoladenladen
Das KITKAT Chocolatory ist eine unterhaltsame und fesselnde 3D-Website. Und sie ist ganz anders als die anderen Websites von KITKAT. Warum ist das so? Nun, dies ist keine Website für Leute, die mehr über die Marke KITKAT und ihre Produkte erfahren wollen.
Brasilianische Kunden, die KITKAT-Produkte lieben, sind eingeladen, die neuesten Pralinen des Süßwarenherstellers zu entdecken und zu bestellen. Du kannst auch die Verpackung deiner Produkte mit deinen eigenen Fotos gestalten.
Eine Marke und ein Erlebnis wie dieses verdienen eine einzigartige 3D-Welt.
8. Capsul’in Zero Impact
Es ist von Anfang an klar, dass wir der Illustration und der handgezeichneten Skizze der Kaffeekapsel folgen sollen, während sie auf der Capsul’in Zero Impact Website herunterfällt. Es handelt sich um eine brillante 3D-Darstellung, die von den Designern von Index geschaffen wurde.
Wir sehen sie zunächst als illustrierte Kaffeekapsel. Wenig später entfernt der Designer ihre Markierungen und zerlegt sie schließlich in ihre Einzelteile. Anstatt die 3D-Kapsel als eine Art Gimmick zu verwenden, ändert sich ihr Aussehen, während die Geschichte und die Spezifikationen des Produkts auf der Seite enthüllt werden.
9. TAG Heuer
TAG Heuer ist eine Marke, die für ihre stilvollen Zeitmesser bekannt ist. Es gibt zwar viele Möglichkeiten, eine Website stilvoll und elegant zu gestalten, aber nichts ist besser, als die Produkte in ihrer ganzen Pracht in 3D zu präsentieren. Und genau das hat TAG Heuer hier getan.
Auf diesen Fotos sehen wir die wunderschönen Zeitmesser eingerahmt vor streng weißen und schwarzen Hintergründen. In einigen Fällen handelt es sich nur um ein Foto der Uhr. In anderen Fällen ist ein leichter Parallaxen-Effekt im Spiel. Es gibt auch Momente, in denen wir die Uhr in Bewegung sehen, z. B. wenn sich die Schließe öffnet und schließt.
Dies ist keine 3D-Technik, die nur von Luxusmarken verwendet werden kann. Auch kleinere Marken können 3D-Produktvisualisierungen nutzen, um ihre Produkte online effektiver zu verkaufen.
10. Mazda
Was Mazda hier getan hat, ähnelt sehr dem, was E-Commerce-Unternehmen tun, wenn sie die Farben von Produktfotos je nach Auswahl des Kunden ändern. Allerdings ermöglicht Mazda seinen Kunden nicht nur, ihre Anpassungen auf einem 2D-Modell zu sehen.
Bei dieser 3D-Darstellung können sich die Kunden außen um das Fahrzeug herum bewegen und im Innenraum herumschwenken, um das Modell und die Auswirkungen ihrer Farbwahl genauer zu betrachten.
Wenn du eine Website hast, auf der ein teures Produkt verkauft wird, oder auch nur ein Produkt, das der Kunde vor dem Kauf unbedingt ausprobieren muss, wäre ein 3D-Shopping-Tool wie dieses ein großer Gewinn.
Setze 3D-Webdesign sinnvoll ein, um deine Besucher zu beeindrucken
Es spielt keine Rolle, wie groß oder klein deine 3D-Designs sind. Das Wichtigste beim Einsatz von 3D im Webdesign ist, dass es das Erlebnis verbessert. Du möchtest, dass deine Besucher von dem, was sie gesehen haben, begeistert sind und sich nicht fragen, warum sie minutenlang die 3D-Animation angeschaut haben, nur um dann festzustellen, dass sich die wichtigen Dinge auf der Website befinden.
Achte auch darauf, wie sich 3D auf die Leistung deiner Websites auswirkt. Wenn die Besucher mehr als ein paar Sekunden warten müssen, bis die Website alle 3D-Inhalte geladen hat, werden sie sie vielleicht nie zu Gesicht bekommen.
Abgesehen davon haben wir heute schon einige erstaunliche Beispiele für 3D-Webdesign gesehen. Lassen Sie sich davon inspirieren, und Sie sollten in der Lage sein, etwas wirklich Großartiges für Ihre Kunden und etwas Nützliches und Unterhaltsames für deren Besucher zu entwickeln.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro: