Magazin
Artikel
October
2023

Wie die Spline-Integration in Webflow eine neue Welt interaktiver Web Experiences öffnet

Jakob Wiemer
ein Artikel von
Jakob Wiemer
Wie die Spline-Integration in Webflow eine neue Welt interaktiver Web Experiences öffnet

Einleitung

Webflow hat schon immer die Brücke zwischen Design und Code geschlagen. Und der ganze Spaß wird jetzt sogar noch besser. Auf der Webflow Conf 2023 wurde ein neues, fantastisches Feature eingeführt: Die Integration von Spline. Jetzt fragst du dich bestimmt: “Was zum Geier ist Spline?”. Lehn dich zurück und lass mich dich in die wundersame Welt von web-basiertem 3D-Design einführen. Zudem klären wir die Frage, wie diese Integration die Zukunft der Webentwicklung mit Webflow beeinflussen wird.

Was ist Spline?

Spline ist ein ziemlich interessantes Design-Tool, das sich auf die Erstellung interaktiver 3D-Grafiken für das Web spezialisiert hat. Im Gegensatz zu herkömmlichen 3D-Programmen ist Spline speziell für Designer konzipiert und ermöglicht durch einfache Handhabung, beeindruckende 3D-Erlebnisse auch ohne tiefe Kenntnisse der 3D-Modellierung zu kreieren.

Wie funktioniert die Integration bei Webflow?

Die Spline-Integration bei Webflow ist entspannter als ein Flat White am Sonntag. Mit wenigen Klicks kannst du deine in Spline erstellten 3D-Designs direkt in deine Webflow-Projekte importieren. Das spart nicht nur Zeit, sondern auch den Aufwand, mit komplizierten Export- und Importoptionen zu jonglieren.

Der Prozess ist extrem einfach:

  1. Erstelle dein 3D-Objekt in Spline oder greife auf eins der vielen Presets zurück
  2. Klick auf “Export” in der Toolbar, wähle “Viewer aus” und kopiere die URL
  3. Spring in Webflow rein und ziehe das Objekt “Spline Scene” in deinen Canvas
  4. Füge die URL ein
  5. Done

Jetzt kannst du die nativen Webflow Interactions nutzen und dich kreativ austoben. Was ein wildes Feature - Realtalk! Ich habe hier mal eine kleine Beispiel-Demo erstellt - das ganze hat ca. 3min gedauert. Wer ein bisschen tiefer eintauchen möchte, kann sich das Projekt threedimensions von meinem geschätzten Webflow Dirk Lach anschauen. Er hat das Feature mal richtig zum glühen gebracht und eine wunderbare kleine Case Study damit gezaubert.

Die Zukunft der Webentwicklung mit Webflow

Kein anderer Page Builder bietet derzeit ein vergleichbares Feature. Damit wird Webflow zur zentralen Anlaufstelle für Webdesigner, die ihren Kunden neue, aufregende Web Experiences bieten möchten. Spline öffnet Türen zu völlig neuen Möglichkeiten. Darunter 3D Animationen, die zuvor nur schwer und mit viel Aufwand realisierbar waren.

Ich selbst bin mit meinem Kollegen Tobias Peil diesen harten, steinigen Weg für unsere Audio Pro Case Study gegangen. Am Ende hat’s sich gelohnt, wir haben ja schließen einen Webdesign Award damit gewonnen. Aber die Spline Integration wäre damals schon echt praktisch gewesen.

Zudem zeigt diese Entwicklung, dass Webflow ein hohes Engagement hat, sein Tool in eine leistungsstarke Plattform zu transformieren auf der Drittanbieter wie Spline aufsetzen können. Für mich ist es auch nur noch eine Frage der Zeit, bis man mit Webflow zum Beispiel Frontends für Shopify entwickeln kann. Aber das ist ein anderes Thema!

Fazit: Die Ära der 3D-Webentwicklung hat gerade erst begonnen

Spline und Webflow ergeben das dynamische Duo, das mir als Webdesigner das Herz aufgehen lässt. Mit dieser mühelosen Integration und dem Potential von 3D steht uns eine spannende Zeit in der Webentwicklung bevor.

Für uns Designer bedeutet das, dass wir nicht nur flache Interfaces gestalten, sondern immersive 3D-Erlebnisse kreieren können, die unsere Kunden und deren Nutzer begeistern. Ich habe schon immer gesagt, dass man mit Webflow 1:1 die Website von Apple bauen kann. Mit Spline wird das Ganze sogar noch einfacher und interaktiver!

Webflow und Spline ist genau das, wonach du gerade suchst? Dann buch dir gern ein kostenloses Strategiegespräch bei mir. Wir schauen gemeinsam, wie wir für deine Kunden ein einzigartiges Web Erlebnis schaffen können.

Weitere Ressources rund um Spline und Webflow: