Eine Plattform, zwei Welten, ein Auftritt im Apple-Standard.

Die Ausgangslage

FRAMEN verbindet Bildschirme an Orten wie Fitnessstudios, Hotels und Coworking-Spaces mit Werbetreibenden. Die Plattform hat damit zwei Kundengruppen, die fast nichts gemeinsam haben: Locations, die ihre Screens bespielen und vermarkten wollen, und Advertiser, die Reichweite buchen.

Die alte Website sprach beide gleichzeitig an und erreichte keine richtig. Dazu kamen gewachsene technische Strukturen und eine Mehrsprachigkeit, deren Übersetzungen für Suchmaschinen unsichtbar waren. Die Sprachfassungen hatten keine eigenen URLs.

Wir starteten mit einem Kickoff auf Führungsebene. Danach haben wir uns in das Produkt eingearbeitet: eigene Accounts im Ads-Manager und im Screen-Manager, eine Auswertung der Analytics und eine Wettbewerbsanalyse für beide Welten.

Was wir gemacht haben

Zwei Welten, getrennte Funnels

Wir haben die Funnels konsequent getrennt. Locations und Advertiser bekommen jeweils eine eigene Welt mit eigener Ansprache. Für Locations gibt es zusätzlich eigene Strecken nach Branche, etwa für Gyms, Hotels und Coworking. Die Branchenseiten kommen aus einem eigenen CMS-Template, neue Branchen legt FRAMEN selbst an.

Rund um die beiden Welten stehen Pricing, Success Stories, About, Presse, Media, Events, Blog, Kontakt, Speaker-Profile und die Rechtsseiten.

Design im Apple-Standard

In der ersten Designpräsentation hat FRAMEN mehrere Hero-Varianten nebeneinander gesehen, nicht eine. Daraus entstand ein minimalistischer Auftritt mit Fullscreen-Visual, viel Ruhe und klarer Typografie.

Mobil ist kein verkleinerter Desktop. Wir haben ein eigenes Mobile-Design gebaut und die Seite konsequent mobile-first umgesetzt.

Video und Motion

Die Produktwelt zeigen eigene Video-Renderings, die wir mit KI produziert haben. Dazu kommen Hero-Animationen nach dem Vorbild von Apple TV, Sticky-Scroll, Marquee, Rive-Animationen für die Benutzeroberfläche und Lottie.

Seitenwechsel laufen über Barba.js: auf den Kernseiten Home, For Venues, For Advertisers, Pricing und Industries mit einem Slide-up, sonst mit einer Überblendung. Videos spielen auch auf iPhones im Stromsparmodus.

Success Stories mit eigener URL

Die Success Stories öffnen sich als Pop-up, damit niemand die Übersicht verlassen muss. Jede Karte ist trotzdem ein echter Link auf eine eigene Detailseite. Ein normaler Klick öffnet das Pop-up, Cmd, Strg oder die mittlere Maustaste öffnen die Seite. So bekommt jede Story eine eigene Adresse und einen Eintrag in der Sitemap.

Übergabe an das eigene Team

Wir haben die fertige Seite in den Webflow-Workspace von FRAMEN übertragen, mit Style Guide direkt in Webflow. Dazu kamen die Quelldateien für die eigenen Designer: Design und Bild-Hub in Figma, ein Video-Hub mit allen Renderings.

Den Custom Code haben wir so kommentiert, dass ihn auch in zwölf Monaten jemand versteht. Kleine Dinge gehörten auch dazu, etwa eine statische 404-Seite im FRAMEN-Branding mit klarem Weg zurück.

Technik und Anbindung

Webflow mit System

Die Seite läuft in Webflow auf einem dokumentierten, skalierbaren Style-System. Inhalte, die sich ändern, liegen in CMS-Collections mit Referenzen untereinander.

• Success Stories, Business Types, Logos und Testimonials als eigene Collections
• Logo-Slider mit Kategorie-Filter, Geschwindigkeit als CMS-Wert und unabhängig von der Zahl der Logos
• vier Varianten einer Section mit Conditional Visibility statt Filter-Logik, nicht angezeigte Varianten landen gar nicht erst im DOM
• Testimonial-Slider mit Kategorien, FAQ mit Filter

Custom Code außerhalb von Webflow

Seitenübergänge und Animationen laufen über Barba.js, GSAP, Lenis, Swiper und Lottie. Der eigene Code liegt versioniert in einem Git-Repository und wird über das jsDelivr-CDN ausgeliefert. Welche Seiten welchen Übergang bekommen, steuert eine einfache Liste von Slugs.

Mehrsprachigkeit für Suchmaschinen

Die Sprachfassungen haben jetzt eigene URLs, die deutsche Fassung zum Beispiel unter /de/. Damit kann eine Suchmaschine jede Sprache einzeln finden und ausspielen.

Das Ergebnis

framen.com ist seit Mai 2026 live. FRAMEN pflegt die Inhalte seitdem selbst in Webflow.

Trotz Video auf fast jeder Seite besteht die Seite im PageSpeed-Test vom 21. Oktober 2026 die Core Web Vitals auf Mobil und Desktop. Der Largest Contentful Paint liegt mobil bei 2,4 Sekunden und auf dem Desktop bei 1,4 Sekunden, die Layout-Verschiebung bei 0,01 und 0,03.

Mobil

So sieht die Website auf dem Smartphone aus.

Messwerte

Gemessen mit Google PageSpeed Insights am 21. Oktober 2026. Bericht ansehen

Projektdetails

Kunde

FRAMEN GmbH

Branche

Software & IT

Jahr

2026

Leistungen

UI/UX Design, Mobile Design, Webflow Development, CMS-Architektur, Motion Design, Video-Renderings, Mehrsprachigkeit und SEO

Technik

Webflow, GSAP, Barba.js

Team

Management: 1x Project Manager · Creative Direction: 1x Creative Director · Design: 2x Senior Designer, 1x Junior Designer · Development: 1x Development Lead, 1x Senior Webflow Developer · Animation: 1x Motion Designer, 1x Generative Animator