Framer, Webflow ou Lovable : quel outil pour un site client ?

Framer, Webflow et Lovable ne répondent pas au même besoin. Pour choisir, partez du livrable à remettre au client : une vitrine visuelle, un site marketing alimenté par du contenu ou une application avec comptes, données et règles métier. Ajouter des intégrations à une vitrine ne transforme pas automatiquement celle-ci en application.

Comparatif documentaire mis à jour le 1er novembre 2026 : coûts d’édition, rendu SEO et portabilité vérifiés dans les sources officielles citées. Les cas et calculs sont fictifs ; les contrôles proposés ne sont pas les résultats de tests produits réalisés par Pharrell.

Framer, Webflow, Lovable : comparer les livrables

Framer privilégie le canvas visuel, les transitions et les animations. Il convient à une page de campagne, un portfolio ou une vitrine dont la qualité perçue repose sur la composition et le mouvement. Framer possède aussi un CMS, mais cela ne suffit pas pour lui confier une logique d’application avec authentification, données privées et workflows complexes.

Webflow est adapté lorsqu’un site marketing doit être administré dans la durée : collections CMS, modèles de pages, contenu éditorial, SEO et collaboration. Pour ce type de projet, concevez un système de contenu plutôt qu’une suite de maquettes : la personne qui publiera les prochaines pages doit pouvoir s’en servir sans reconstruire la mise en page.

Lovable permet de construire une application par itérations en langage naturel, avec du code synchronisable sur GitHub. Il devient pertinent lorsqu’un utilisateur doit se connecter, enregistrer une information, consulter des données ou déclencher une logique. Un prompt accélère le démarrage, mais il ne remplace ni la spécification des règles ni la recette.

Choisir selon ce que l’utilisateur peut faire sur le site

Une vitrine où l’image doit convaincre vite

Pour un studio vidéo fictif qui présente ses réalisations et propose un formulaire de brief, Framer est un candidat naturel. L’enjeu consiste à hiérarchiser les projets, soigner le responsive et rendre l’appel à l’action visible, sans transformer le site en logiciel. Une vitrine peut rester simple tout en utilisant un formulaire ou une connexion à un outil externe.

Sur une page marketing, le visiteur arrive par une publicité, un lien ou une recherche. Il parcourt rapidement la preuve visuelle et quitte la page si le chemin est flou. Avant de multiplier les effets, vérifiez donc la ligne de flottaison mobile : promesse lisible, preuve concrète, action immédiate, puis contenus secondaires. Cette organisation facilite aussi la maintenance, car l’équipe sait ce qui ne doit pas disparaître lors des retours.

Un site qui publie régulièrement

Pour un blog, des études de cas, des fiches services ou des pages locales, Webflow apporte une logique de contenu structuré. Le CMS évite de refaire une mise en page pour chaque publication. Modélisez toutefois les champs utiles avant l’intégration : auteur, catégorie, image, résumé, relations éventuelles et métadonnées. Sans cette préparation, un CMS devient un formulaire plus complexe, pas un véritable système éditorial.

Un espace client ou un produit à utiliser

Si les clients du studio doivent se connecter, valider des versions, accéder uniquement à leurs propres projets et recevoir des informations distinctes, chiffrez un livrable application. Lovable devient alors plus cohérent qu’un bouton ajouté à une vitrine. Base de données, authentification, droits d’accès, stockage et connecteurs doivent être définis, puis testés.

Avant de construire cet espace, dessinez les relations entre clients, projets et versions. Notre guide des bases de données relationnelles et des contrôles avant livraison propose un modèle de studio et six vérifications : doublons, droits entre clients, modifications simultanées et restauration. Le choix du générateur ne dispense pas de ces contrôles.

Webflow peut s’étendre avec des intégrations ou des fonctions cloud. Il ne faut donc pas le déclarer incapable de gérer une application. Son usage principal reste toutefois différent. Si le besoin évolue d’un formulaire de brief vers des comptes, des validations et des données séparées, le périmètre doit évoluer lui aussi.

SEO, formulaire et accès : la recette avant livraison

Framer permet de produire rapidement des pages visuelles et animées. Webflow propose une organisation par collections et gabarits pour les sites éditoriaux. Lovable permet d’intervenir dans le code généré, ce qui peut être utile lorsqu’une exigence technique ou une intégration doit être traitée au niveau applicatif. Aucun de ces choix ne garantit l’indexation. Une page doit rester accessible, cohérente et techniquement vérifiée.

Faites valider des actions, pas seulement des captures de la page d’accueil. Voici une grille à exécuter sur votre projet, avec des données fictives et les autorisations nécessaires. Consignez pour chaque ligne la date, le responsable, le résultat attendu, le résultat observé et la correction éventuelle.

Une fuite de données ou un formulaire qui perd les demandes bloque la livraison. Un contrôle rapide ne constitue pas un audit de sécurité complet : faites revoir les applications sensibles par une personne compétente avant leur mise en service. Pour le traitement des briefs après le formulaire, le guide n8n et sa recette des automatisations complète ces contrôles.

SEO : contrôler le site avant la livraison

Pour un site de services, un blog ou un catalogue, demandez une démonstration sur trois URL représentatives : l’accueil, une page de service et une fiche ou un article issu du CMS. Pour un portail privé, séparez les pages commerciales à référencer des dossiers clients à protéger. Une bonne note SEO sur l’accueil ne valide pas les autres modèles.

Pour Lovable, identifiez d’abord la version du projet. Sa documentation SEO indique un rendu serveur avec TanStack Start pour les nouvelles applications créées depuis le 13 mai 2026, ou le 22 juin pour Enterprise ; les anciennes applications React/Vite publiées bénéficient d’un prérendu pour les robots vérifiés. Le sitemap n’est toutefois pas systématiquement créé. Vérifiez le projet et son hébergement réels avant de conclure qu’il est « bon » ou « mauvais » pour Google.

1. Ouvrir chaque URL directement. Elle doit fonctionner sans passer par l’accueil ni se connecter. Vérifiez aussi une adresse inexistante : une fausse page d’erreur qui répond 200 mérite une correction.
2. Contrôler ce que Google peut lire. Dans le test en direct de Search Console, examinez le HTML rendu et la capture : titre, contenu principal et liens utiles doivent être présents. Un test réussi ne signifie pas que la page est indexée.
3. Relier les pages importantes. Un lien HTML avec une destination réelle doit mener de la rubrique à chaque page utile. Le sitemap complète ce parcours ; il ne remplace pas les liens.
4. Vérifier les indications techniques. Titre et description propres à la page, canonical cohérente, absence de noindex involontaire et données structurées conformes au contenu visible. Ne renseignez pas de notes clients ou d’avis qui n’existent pas.
5. Rejouer après la passation. Publiez une nouvelle fiche avec le rôle du client, puis répétez les contrôles. Vous vérifiez ainsi le fonctionnement du modèle, pas seulement les pages préparées par l’agence.

Ces vérifications s’appuient sur les consignes Google sur le référencement des sites JavaScript. Elles servent à réceptionner un livrable ; elles ne promettent ni indexation ni classement. Pour chaque URL, gardez une ligne avec la date, le statut HTTP, la canonical, le contenu vu dans le test Google, le lien entrant et l’anomalie à corriger. Les espaces privés exigent, eux, un contrôle d’accès : un noindex ne protège pas des données confidentielles.

Coût réel, transfert et portabilité du projet

Le coût ne se limite pas à l’abonnement. Chez Framer, les tarifs affichés en facturation annuelle indiquent Basic à 10 USD par mois et Pro à 30 USD par mois. La connexion d’un domaine personnalisé relève d’un plan payant ; ne la comptez pas une seconde fois comme option systématique. Vérifiez séparément l’achat ou le renouvellement du domaine, les sièges d’édition, les options, la période facturée et les taxes. Le transfert conserve le site et le domaine. L’ancien abonnement est annulé à l’acceptation, tandis que le crédit inutilisé reste à l’ancien propriétaire et que le destinataire choisit puis paie l’abonnement requis. Consultez la tarification Framer et la procédure de transfert.

Exemple de budget Framer, hors taxes : avec l’affichage annuel relevé le 1er novembre 2026, Basic revient à 120 USD sur douze mois et Pro à 360 USD. Un siège supplémentaire pour modifier le contenu est affiché à 10 USD par mois, contre 20 USD pour un éditeur complet. Sur douze mois, Basic plus un siège de contenu représente donc 240 USD, avant domaine, options et autres frais. C’est un calcul d’abonnement, pas le prix d’une prestation. Confirmez le rôle nécessaire et le cycle de facturation au paiement.

Pour Webflow, distinguez le Site plan, lié à l’hébergement, du Workspace, qui sert notamment à la collaboration et à l’export. L’export HTML, CSS, JavaScript et des actifs requiert un Workspace payant, pas seulement un Site plan. Il ne conserve ni CMS fonctionnel, ni formulaires, ni recherche, ni protection par mot de passe. Un CSV de contenu ne recrée pas un CMS opérationnel. Vérifiez les limites de l’export Webflow. Un Site plan actif peut être transféré au client depuis un Workspace Freelancer ou Agency, après son acceptation, selon les conditions de transfert.

Lovable peut synchroniser et exporter le code via GitHub. Sa documentation de portabilité distingue le code des services qui font fonctionner l’application. Une migration fonctionnelle impose aussi de reprendre les données, les services, les connecteurs, les secrets et l’hébergement. GitHub seul ne garantit donc pas la continuité. Les anciens projets React/Vite peuvent être servis comme fichiers statiques ; les projets TanStack Start nécessitent aussi un hébergement capable d’exécuter leur partie serveur. Faites confirmer cette différence avant de chiffrer une migration. La construction et l’exploitation peuvent consommer des crédits, en puisant dans les crédits généraux une fois les allocations spécifiques épuisées. Les allocations incluses sont limitées : distinguez le budget de construction de la consommation de l’application en service, même lorsqu’ils puisent dans le même solde. Consultez les informations sur la synchronisation GitHub et les crédits et leur utilisation.

La livraison client à prévoir avant la production

Chiffrez quatre blocs : production, retours, contrôle et passation. À titre d’exemple fictif, 24 heures à 50 EUR, auxquelles s’ajoutent 120 EUR de frais, représentent 1 320 EUR de coût de production. Avec 10 heures de reprises, ce coût atteint 1 820 EUR. À prix de vente constant, ces reprises réduisent la marge. Le taux de 50 EUR/h est ici un coût de temps fictif : ce n’est ni un tarif de marché ni un revenu net. Les abonnements récurrents, les impôts et la rémunération finale ne se déduisent pas de ce seul calcul.

Dans le devis, séparez aussi trois lignes : mise en place, exploitation mensuelle et sortie ou migration. Indiquez qui paie chaque abonnement et qui intervient si le formulaire, le stockage ou une API cesse de fonctionner. Un prix d’entrée logiciel ne couvre pas nécessairement l’ensemble.

• domaine, Workspace ou compte client, avec un payeur identifié ;
• rôles de l’agence, abonnements, dépendances, licences et sauvegardes ;
• notice de modification, limites de garantie et périmètre de maintenance ;
• exports et test de restauration, sans jamais placer les secrets dans un document public.

Au 1er novembre 2026, deux pages officielles Framer restent contradictoires : sa FAQ sur l’export HTML refuse cet export, alors que sa page de portabilité décrit le téléchargement du site publié et du contenu CMS. Récupérer des fichiers ne prouve pas que l’éditeur, les fonctions hébergées et les futures mises à jour suivront. Ne garantissez donc pas une sortie complète sans périmètre écrit et essai de reprise. Pour cadrer l’offre et les retours, vous pouvez aussi consulter ce guide sur une offre d’agence IA structurée.

Pour résumer, évaluez Framer pour une vitrine visuelle, Webflow pour un contenu marketing structuré et Lovable pour une application avec comptes, données et logique métier. Ce sont des orientations de livraison, pas des frontières absolues. Le bon choix est celui dont le périmètre, le coût récurrent et la reprise peuvent être expliqués au client avant la production.

Questions à trancher avant de choisir

Peut-on démarrer gratuitement un site client ?

Un accès gratuit peut servir à une maquette ou à un essai. Pour le livrable final, vérifiez le domaine, les rôles, les limites de contenu, la confidentialité et l’usage récurrent. Ne vendez pas un fonctionnement illimité parce qu’un prototype a pu être créé sans paiement.

Faut-il refaire un site existant sur un outil IA ?

Pas par principe. Listez d’abord les fonctions que le site actuel ne permet pas d’assurer et le coût de leur amélioration. Pour une migration, préservez les URL utiles ou préparez leur redirection, les contenus, les accès et les données. Une nouvelle interface ne justifie pas de perdre un historique exploitable.

Qui doit posséder les comptes à la fin ?

Définissez-le avant le début du projet. Pour une livraison autonome, le client doit pouvoir gérer son domaine et ses abonnements, récupérer ses données et retirer l’accès du prestataire. Si vous exploitez le site pour lui, documentez ce service et les conditions de sortie. Transférez les secrets par un canal adapté, pas dans un document public.

Vous avez défini le site à livrer ? Retrouvez dans Outils & Automatisation les guides complémentaires pour choisir le CRM, la facturation ou l’automatisation qui l’accompagneront. Ajoutez une intégration seulement lorsqu’un parcours client en a besoin.

Voir comment collaborer dans l’espace du client

La vidéo officielle Webflow The Smarter Way to Collaborate with Clients in Webflow montre le principe des rôles invités. Elle est en anglais et son interface peut différer de la version actuelle. Utilisez-la pour comprendre la collaboration, pas pour retenir un tarif ou une condition de transfert sans vérifier la documentation.

Photographie de couverture : Michael Burrows / Pexels, sous licence Pexels. Elle illustre la préparation de contenus par un indépendant ; ce n’est ni une capture des logiciels comparés ni un client présenté comme utilisateur de ces outils.