In einem unserer letzten Artikel haben wir das CMS Statamic genauer betrachtet und festgestellt, dass es keinen visuellen Builder wie Elementor bietet. Das bedeutet, dass die Arbeit mit Statamic Programmierkenntnisse und Erfahrung als Entwickler voraussetzt.
Heute möchten wir uns jedoch auf ein anderes Tool für die Webentwicklung konzentrieren: Framer. Dieser visuelle Website-Builder kommt völlig ohne Programmierkenntnisse aus und ermöglicht es, Websites schnell und einfach zu gestalten.
Es ist kein Geheimnis, dass visuelle Builder und No-Code-Lösungen wie Wix, Webflow, Tilda und jetzt auch Framer immer beliebter werden. Doch können sie bewährte Plattformen wie WordPress ersetzen? (Spoiler: eher nicht).
Was macht Framer besonders, wie funktioniert es, und für wen ist es das ideale Tool? Schauen wir uns das genauer an!
Framers Popularität im Laufe des Jahres (Quelle: Google Trends)
Framer wurde 2014 von Koen Bok und Jorn van Dijk als Framer.js ins Leben gerufen – eine JavaScript-Bibliothek zur Erstellung von UI-Animationen. Ursprünglich für Entwickler konzipiert, die codebasierte Prototypen in ihre Projekte integrieren wollten, gewann Framer aufgrund seiner Flexibilität bei der Erstellung realistischer Interaktionen schnell an Beliebtheit.
Im Jahr 2017 entwickelte sich Framer weiter zu Framer Studio, einem eigenständigen Design-Tool, das visuelles Design und Code kombinierte. Damit richtete sich das Tool verstärkt an Designer, die interaktive Prototypen erstellen wollten, ohne tiefgreifende Programmierkenntnisse zu benötigen. Dieser Schritt machte Framer zugänglicher und wettbewerbsfähiger auf dem Markt der Design-Tools.
2019 erfolgte der Übergang zu einer vollständig No-Code-Plattform mit Framer X. Dieses Update brachte einen komponentenbasierten Ansatz, inspiriert von React, und sprach sowohl Designer als auch Entwickler an. Dadurch etablierte sich Framer als leistungsstarkes Werkzeug für die Erstellung hochauflösender Prototypen mit fortgeschrittener Interaktivität.
Seitdem entwickelt sich Framer kontinuierlich weiter und hat Funktionen wie kollaboratives Design und KI-gestützte Tools eingeführt, um mit führenden Design-Plattformen wie Figma und Adobe XD konkurrenzfähig zu bleiben.
Preise
Framer bietet mehrere Preismodelle, die sich an unterschiedliche Nutzergruppen richten – von Einzelanwendern bis hin zu Teams:
-
Free Plan
Der kostenlose Tarif umfasst grundlegende Funktionen und erlaubt das Erstellen eines Projekts mit Basis-Interaktivität. Perfekt für Einsteiger oder kleine Projekte, um das Tool kennenzulernen. -
Pro Plan (ca. 19 $ pro Monat, bei jährlicher Abrechnung)
Dieser Tarif bietet unbegrenzte Projekte, erweiterte Interaktivitätsfunktionen, Code-Export und Echtzeit-Kollaboration. Ideal für professionelle Designer und Entwickler. -
Team Plan (ca. 39 $ pro Benutzer und Monat)
Entwickelt für Teams und Agenturen, enthält dieser Plan zusätzliche Funktionen wie Versionskontrolle und Rechteverwaltung, um die Zusammenarbeit zu erleichtern.
Framer stellt damit sicher, dass für jeden Anwendungsfall – vom Einsteiger bis hin zu professionellen Teams – das passende Angebot verfügbar ist.
Vorlagenbibliothek
Die Framer-Vorlagenbibliothek bietet eine Vielzahl an vorgefertigten Designs und Komponenten, darunter Layouts für Landingpages, Blogs, Onlineshops und mobile Apps. Diese Vorlagen enthalten interaktive Elemente und Animationen, die es Designern ermöglichen, ohne jegliche Programmierkenntnisse schnell realistische Prototypen zu erstellen.
Die Vorlagen sind responsiv und leicht anpassbar, sodass sie für verschiedene Bildschirmgrössen – von Desktops bis hin zu mobilen Geräten – geeignet sind.
Der Zugriff auf die Vorlagen erfolgt entweder über den integrierten Katalog in Framer oder über den Online-Marktplatz, auf dem sowohl kostenlose als auch kostenpflichtige Optionen verfügbar sind, die von der Community erstellt wurden.
Die Vorlagenbibliothek spart Zeit und vereinfacht den Prozess der Erstellung interaktiver und responsiver Benutzeroberflächen erheblich.
Benutzeroberfläche
Die Benutzeroberfläche von Framer ähnelt stark der von Figma und richtet sich an Designer, die mit modernen Tools für Interface-Design vertraut sind. Wesentliche Elemente wie die Arbeitsfläche für Layouts, Werkzeugleisten zur Anpassung von Eigenschaften und wiederverwendbare Komponenten sind ähnlich organisiert, was den Umstieg leicht macht.
Wie Figma unterstützt Framer Ebenen, Gruppen und Komponenten sowie ein Eigenschaften-Panel für die Feinabstimmung jedes Elements. Der Fokus liegt jedoch auf Animationen und Interaktionen, wodurch interaktive Prototypen mit komplexen Übergängen erstellt werden können.
Figma-Vorlagen in Framer konvertieren
Eine der praktischen Funktionen von Framer ist die Möglichkeit, Vorlagen aus Figma mithilfe eines Plugins zu exportieren. Dieser Vorgang erfordert nur wenige Klicks und liefert auf den ersten Blick beeindruckende Ergebnisse.
Figma:
Framer:
Ergebnisanalyse:
Obwohl die ersten Ergebnisse vielversprechend waren, zeigte eine genauere Analyse der exportierten Seite einige erhebliche Schwächen:
- Chaotische Ebenenorganisation: Ähnliche Blöcke hatten unterschiedliche Strukturen, und die logische Reihenfolge der Blöcke fehlte.
- Post-Processing erforderlich: Das Plugin bestimmt nicht den Typ der Objekte, sondern überträgt einfach die Vorlage von Figma nach Framer. Dies erfordert eine umfassende Nachbearbeitung, wie die Erstellung von Menüs, Links, Hover-Zuständen und vielem mehr, was oft genauso viel Zeit in Anspruch nimmt wie das Erstellen der Vorlage von Grund auf.
- Manuelle Anpassung: Die exportierte Seite musste an verschiedene Anforderungen angepasst werden, was ebenfalls viel Zeit in Anspruch nahm.
- Designprobleme: Die Qualität des Exports hängt stark von der Organisation der Ebenen in Figma ab, was zu inkonsistenten Ergebnissen führt.
Trotz dieser Herausforderungen ist das Tool interessant, und bei richtiger Anwendung kann es erfahrenen Entwicklern viel Zeit sparen.
KI-Assistent
Vielleicht die coolste Funktion von Framer ist der integrierte KI-Assistent, der das Leben von Designern und Entwicklern – ob fleissig oder eher bequem – erheblich erleichtert.
Framer nutzt KI-Tools, um den Designprozess zu optimieren und für Designer schneller und intuitiver zu gestalten. Mit KI-gestützten Funktionen kann Framer repetitive Aufgaben automatisieren, Designelemente vorschlagen und sogar Code-Snippets für interaktive Komponenten generieren, wodurch der Bedarf an manueller Codierung reduziert wird. Dies ermöglicht es Designern, sich stärker auf Kreativität und Prototyping zu konzentrieren, während die KI Layouts optimiert, Eigenschaften anpasst und intelligente Designempfehlungen gibt.
Darüber hinaus vereinfachen die KI-Funktionen von Framer Workflows, indem sie smarte Vorschläge für Animationen, Interaktionen und Designverfeinerungen machen. Dies erleichtert die Erstellung hochwertiger, interaktiver Prototypen mit minimalem Aufwand. Framer wird so zu einem leistungsstarken Werkzeug nicht nur für das Design, sondern auch für schnelles Prototyping mit fortgeschrittener Interaktivität.
Unser Test der KI-Funktionalität
Wir haben beschlossen, die Funktionalität mit einem spezifischen Prompt zu testen:
Und das Ergebnis?
Nun, wir können nicht behaupten, dass es die Website unserer Träume war. Zwar vereinfacht die KI die Organisation von Inhalten erheblich, doch insgesamt war das generierte Ergebnis nicht überzeugend. Die Schriftarten waren unattraktiv, die Farben unharmonisch und der Inhalt unübersichtlich.
Dennoch wäre es falsch, den KI-Generator von Framer als schlecht oder nutzlos zu bezeichnen. Wir gehen davon aus, dass die besten Ergebnisse durch eine Kombination aus menschlicher Bearbeitung, mehreren Iterationen und gezielteren Eingabeaufforderungen erzielt werden können.
Fazit: Die KI von Framer hat Potenzial, kann jedoch erst in Verbindung mit menschlicher Expertise und Optimierungen ihre volle Leistungsfähigkeit entfalten.
Anwendungsbeispiele
Auf der offiziellen Website von Framer gibt es viele Beispiele für Websites, die mit dem Builder erstellt wurden. Diese Seiten sind aus designtechnischer Sicht sehr ansprechend.
Sie enthalten viele kreative Lösungen für Design und Animation, die mithilfe vorgefertigter Tools erstellt wurden. Obwohl keine Programmierung erforderlich ist, erfordert die Arbeit mit Framer dennoch hohe Fähigkeiten und Erfahrung, um Websites auf diesem Qualitätsniveau zu erstellen.
Zusammenfassung
Framer ist ein hervorragendes Tool für die Erstellung von Marketingseiten, Landingpages und einfachen Informationswebsites.
Es eignet sich ideal für Projekte, die keine allzu komplexe Funktionalität erfordern oder die nicht mehr als 100 bis 200+ Seiten umfassen. Für Blogs mit einem CMS ist Framer ausreichend, wenn auch nicht so stark wie WordPress.
WordPress hingegen ist ein vollwertiges Content-Management-System (CMS), das sich für eine Vielzahl von Websites eignet – von Blogs bis hin zu Onlineshops. Dank seiner riesigen Plugin-Ökosysteme bietet WordPress nahezu unbegrenzte Möglichkeiten zur Funktionserweiterung und Anpassung.
Framer richtet sich eher an Designer und ist besonders geeignet, um visuell ansprechende, animierte Seiten zu erstellen. Es eignet sich hervorragend für Prototyping und Präsentationen, weniger jedoch für komplexes Content-Management.
WordPress punktet zudem in den Bereichen SEO, Skalierbarkeit und Integration mit Drittanbieter-Services, insbesondere im E-Commerce dank des WooCommerce-Plugins. Framer hingegen bietet nicht die Vielfalt an Tools und Plugins wie WordPress, was es weniger flexibel für komplexe Funktionen macht. Für einfache, statische Seiten mit Fokus auf Design ist Framer jedoch eine ausgezeichnete Wahl.
