Vous souhaitez refaire votre site web ? Framer est une plateforme en ligne qui révolutionne la refonte de sites web. Sa promesse : démocratiser le développement web en s'adressant à des utilisateurs de tous niveaux. Son interface intuitive et ses outils no-code permettent de créer des sites web modernes et performants sans écrire une seule ligne de code.

Que vous souhaitiez refaire votre site WordPress, migrer depuis un CMS obsolète ou créer un nouveau site professionnel, Framer offre une solution complète pour la refonte de votre site web. Au-delà de cette volonté d'accessibilité, Framer s'adresse aussi aux designers et aux développeurs en proposant des fonctionnalités avancées et la possibilité de coder. Framer permet également de publier votre site directement via sa fonctionnalité d'hébergement intégré et de le mettre à jour grâce à son CMS.

Qu'est-ce que Framer ?

Framer, plus qu'un CMS un Visual Website Builder

Les Visual Website Builder sont un peu les WYSIWYG (What You See Is What You Get) des temps modernes.

À la croisée des chemins entre les outils de design moderne comme Figma et des CMS traditionnels tel que WordPress, la promesse de ce type de solution est de permettre la création et le design d'un site web complet depuis une interface accessible 100% en ligne.

Disponible en mode SaaS, l'objectif des Visual Website Builder : faciliter la vie des entreprises avec une offre tout inclus.

À ce titre, les Visual Website Builder viennent clairement bousculer la position des CMS dis low-code historiques.

Plusieurs acteurs se positionnent sur le marché : Webflow l'acteur historique, Wix Studio qui après avoir ciblé les particuliers s'attaque avec cette offre au marché des entreprises et Framer la solution qui connait actuellement le plus fort développement.

Framer, une solution Européenne à la conquête du monde

Fondé en 2014 - 2015 aux Pays-Bas, l'histoire de Framer a connu plusieurs rebondissements.

Pensée initialement comme une solution de prototypage pour les sites webs et applications mobiles, elle rencontre un certain succès auprès de la communauté des designers, mais les revenus ne suivent pas et après un pic en 2019, les revenus stagnent et diminuent progressivement.

En 2021, les deux cofondateurs de Framer (Jorn van Dijk and Koen Bok) décident de pivoter et réorientent la solution sur la réalisation de sites web complets. La promesse : une solution tout en un qui permet de designer des interfaces web mais aussi de générer et mettre en ligne le site.

Gardant son ADN et sa communauté de designer, Framer a rapidement évolué pour être aujourd'hui en mesure de concurrencer les mastodontes du marché Webflow et Figma.

Les fonctionnalités clés de Framer

Framer, une offre 100 % en ligne

L'hébergement, la sécurité, les montées de versions sont gérés par l'éditeur.

Plus besoin de trouver un hébergeur et une société chargée de l'infogérance. L'hébergement est inclus dans le coût des licences.

Plus de maintenance préventive et corrective pour, par exemple, réaliser des montées de version de la plateforme ou pour corriger les failles de sécurité. Les efforts peuvent se concentrer sur l'évolution du site, de son design, la mise à jour des contenus ou l'ajout de nouvelles fonctionnalités.

À l'inverse, cette offre 100% en ligne ne sera pas adaptée pour les entreprises qui souhaitent garder la main sur l'hébergement ou qui craignent de dépendre d'un éditeur.

Framer, une plateforme qui évolue à vitesse grand V

Dans un marché qui reste encore en forte évolution, la qualité du produit est un élément clef. Framer l'a parfaitement compris en mettant le poids du corps sur sa roadmap produit et en capitalisant sur une communauté de prescripteurs et utilisateurs grandissante.

Les évolutions du produit sont très fréquentes : plusieurs par mois et des annonces majeures sont faites lors de grands événements de type Keynote Apple une fois par trimestre.

Le plus bluffant les mises à jour annoncées sont disponibles dans les minutes suivantes sur vos environnements de travail.

À titre d'exemple pour retrouver les annonces du Framer Fall Event 2024 rendez-vous sur notre résumé ici.

Interface intuitive et outil no-code

L'interface de Framer reprend les codes de l'interface de Figma. La prise de l'outil pour les Designers ou les personnes familières de cet outil sera extrêmement simple.

Framer est un outil no-code qui remet au goût du jour le WYSIWYG. L'ensemble des éléments sont modifiables directement depuis l'interface tant sur le fond que sur la forme.

À noter, également, la possibilité d'accéder à plusieurs à l'interface, de voir les modifications réalisées, et même de commenter directement dans l'outil (là encore une fonctionnalité très appréciée dans Figma).

Prototypage interactif avec Framer

Framer offre une solution rapide et intuitive pour le prototypage de concepts interactifs adaptés à tout type de projet. Initialement pensé comme un outil de prototypage pour les sites webs et applications mobiles, Framer excelle dans cette discipline.

Le prototypage avec Framer permet de créer des maquettes interactives haute fidélité, de tester les interactions utilisateur et de valider les concepts avant le développement final. Cette approche accélère considérablement le processus de conception et permet d'itérer rapidement sur les designs.

Animations et interactions : créer des sites web interactifs

Framer permet de créer des effets, des transitions et des animations de haute qualité sans écrire une seule ligne de code. Cette capacité à créer des animations bluffantes est l'un des points forts de la plateforme, permettant de créer des sites web interactifs et des expériences utilisateur engageantes et modernes.

Intelligence Artificielle intégrée : Wireframer et Workshop

L'IA Framer est accessible et conviviale. Elle enrichit le processus créatif et améliore la qualité des créations en fournissant des suggestions précises. Elle permet aussi d'être plus efficace en automatisant certaines tâches répétitives.

Wireframer : Ce nouveau module propulsé par l'intelligence artificielle révolutionne la phase initiale de conception. Grâce à une vaste bibliothèque de composants et la possibilité d'utiliser des prompts textuels, Wireframer permet d'établir rapidement la structure d'une page ou d'un site entier avant de passer à la phase de design détaillé. Une approche qui accélère considérablement les premières étapes de tout projet web.

Workshop : Workshop introduit le concept novateur de "vibe coding" au cœur de Framer. Via une interface conversationnelle intuitive, les utilisateurs peuvent désormais créer des composants avancés et itérer sur les propositions générées. Le système conserve l'historique complet des versions, offrant la flexibilité de revenir à n'importe quelle étape du processus créatif. Cette fonctionnalité représente une véritable révolution dans la manière de concevoir des éléments d'interface complexes.

Le CMS de Framer : Une solution tout-en-un

Framer propose un Système de Gestion de Contenu (CMS en anglais : Content Management System). Le CMS est une interface qui permet de gérer le contenu de votre site sans compétences techniques en code.

Gestion facile, efficace et partagée : l'interface conviviale et intuitive du CMS de Framer permet de créer, modifier et publier du contenu sans avoir à coder. En quelques clics, vous pouvez par exemple gérer vos articles de blog ou vos offres d'emploi.

Depuis l'entrée CMS de Framer, il est possible de gérer des collections (type de contenus, par exemple article, news, etc.) et pour chaque collection de contribuer les contenus selon un modèle de donnée propre à chaque type de composant.

Structure et cohérence respectées : les pages CMS de Framer sont des modèles qui sont automatiquement appliqués à toutes les pages de votre site. Elles permettent ainsi de conserver l'architecture et respecter votre identité visuelle.

Collaboration facilitée : Le CMS de Framer permet une collaboration efficace entre les développeurs et les designers en centralisant le contenu et en fournissant un espace commun pour gérer et mettre à jour les éléments. Cela réduit les allers-retours entre les différentes équipes et améliore la cohésion du projet.

Une limite de Framer, la gestion des droits est limitée. Il ne sera pas, par exemple, possible de définir différents niveaux de contributeurs en fonction des types de contenus.

Analytics et A/B testing

L'évolution majeure du système d'analytics intégré permet désormais de suivre avec précision les actions des utilisateurs, notamment les clics sur les CTA et autres éléments interactifs. Cette amélioration réduit considérablement la dépendance aux solutions tierces comme Google Analytics ou Matomo, centralisant l'analyse directement au sein de l'écosystème Framer.

Framer intègre aussi nativement des fonctionnalités d'A/B testing. Cette nouveauté permet de comparer simplement différentes versions d'une même page et d'identifier celle qui génère les meilleures performances. Un atout considérable pour les sites à fort trafic ou ceux axés sur la conversion (prises de rendez-vous, inscriptions, achats).

Édition vectorielle intégrée

L'introduction d'outils d'édition vectorielle directement dans l'interface permet aussi de créer et modifier des éléments comme des logos, puis de les animer sans quitter l'environnement Framer. Un système de bibliothèques facilite également la gestion et la réutilisation de ces composants vectoriels à travers les projets, fluidifiant considérablement le workflow des designers.

Templates de Framer : Accélérateur de design web

Les templates ou "modèles" de Framer sont des ressources prêtes à l'emploi qui offrent des mises en page de base et des éléments réutilisables tels que des barres de navigation, des boutons, des formulaires, des carrousels, etc.

Ces templates représentent un point de départ et permettent de gagner du temps en vous évitant de concevoir une interface à partir de zéro. Vous pouvez ensuite les personnaliser pour correspondre aux besoins spécifiques de votre projet.

Framer propose une variété impressionnante de templates pour divers types de sites web, des plus simples aux plus complexes tels que des sites vitrines, des portfolios, des blogs, ou encore des sites vitrine élaborés.

Framer pour mobile : conception responsive simplifiée

La conception responsive ou "design responsive" permet aux sites web et aux applications mobiles de s'adapter à différents appareils et tailles d'écran, offrant ainsi une meilleure expérience utilisateur.

Framer simplifie la conception responsive grâce à différentes fonctionnalités telles que l'aperçu en temps réel qui permet de visualiser instantanément comment votre site apparaît sur différents type d'appareils.

Possibilités de coder dans Framer

Bien que Framer soit conçu pour créer des sites sans compétences en développement, il est tout à fait possible d'écrire du code (React) pour étendre les capacité de Framer et par exemple manipuler des données si nécessaire.

Framer offre ainsi une flexibilité supplémentaire pour les concepteurs ayant des compétences en programmation qui souhaitent aller au-delà des fonctionnalités de base proposées.

Dans quels cas d'usage choisir Framer pour refaire votre site web

Entreprises souhaitant refaire leur site web

Framer est idéal pour les entreprises qui souhaitent refaire leur site web obsolète ou qui ne répond plus à leurs besoins. Que vous ayez un site WordPress vieillissant (voir notre comparatif ici), un site statique qui nécessite une refonte complète, ou un site qui ne convertit plus, Framer offre une solution moderne pour refaire votre site web rapidement et efficacement.

Les avantages d'une refonte avec Framer :

• Une migration simplifiée depuis WordPress

• Une seule plateforme pour la refonte design et technique

• Pas de maintenance technique complexe après la refonte

• Une performance optimale dès la mise en ligne

• Une mise à jour du contenu simplifiée pour vos équipes

Startups, scale up, landing

Pour les entrepreneurs qui souhaitent lancer rapidement un site web professionnel sans avoir à gérer l'infrastructure technique, Framer est une solution idéale. L'hébergement inclus, la simplicité de mise à jour du contenu et les performances natives sont des avantages considérables.

Framer permet de concevoir des landing pages de manière rapide et efficace pour diverses campagnes ou événements. C'est un outil parfait pour créer rapidement des pages de destination performantes sans compétences techniques.

Quels sont les forces et faiblesses de Framer

Les avantages

La collaboration en temps réel est possible : Plusieurs personnes peuvent travailler simultanément sur un projet, voir les modifications en direct et commenter directement dans l'interface.

Une courbe d'apprentissage simple : Pour les designers familiers de Figma, la prise en main est quasi immédiate. Pour les autres, l'interface intuitive facilite l'apprentissage.

Création d'animations complexes : Framer excelle dans la création d'animations et d'interactions de haute qualité sans nécessiter de code.

Outils d'analyse intégrés : Analytics et A/B testing sont intégrés nativement, réduisant la dépendance aux outils tiers.

Performance gérée nativement : Les sites Framer sont hébergés sur AWS avec des performances optimisées par défaut.

Hébergement inclus : Plus besoin de gérer un hébergeur séparément, tout est inclus dans l'abonnement.

Évolutions fréquentes : La plateforme évolue rapidement avec des mises à jour régulières et des fonctionnalités innovantes.

IA intégrée : Wireframer et Workshop révolutionnent la création de sites web.

Les inconvénients

Fonctionnalités e-commerce non intégrées : Framer n'est pas optimisé pour les sites e-commerce complexes. Pour ce type de projet, des solutions comme Shopify ou WooCommerce peuvent être plus adaptées.

Impossibilité de créer des conditions de visibilité avancées : La gestion des droits et des permissions est basique comparée à d'autres CMS.

Dépendance à l'éditeur : L'hébergement et l'infrastructure étant gérés par Framer, vous dépendez entièrement de l'éditeur pour la disponibilité de votre site.

Coûts de licence : Contrairement à WordPress qui est gratuit (hors hébergement), Framer nécessite un abonnement payant.

Tarification de Framer : Quelle formule choisir ?

Le coût de Framer dépend principalement de deux éléments :

1. Les fonctionnalités attendus pour le site (le plan de base est lié à un site)

2. Le nombre d'éditeur nécessaire

Selon les fonctionnalités souhaitées différents plans existent :

• Basic

• Pro

• Scale

• Entreprise (tarif sur demande)

Formule Enterprise (sur devis)

Idéal pour : Grandes entreprises avec besoins spécifiques

• Limites personnalisées

• Sécurité entreprise

• Support dédié

• Facturation annuelle

• Options de facturation personnalisées (carte bancaire ou virement)

Quelle formule choisir ?

• Basic : Pour un site personnel, un portfolio professionnel ou un petit site vitrine (jusqu'à 30 pages)

• Pro : Pour un site d'entreprise avec plusieurs collections de contenu, besoin de staging, analytics avancés et collaboration d'équipe (jusqu'à 150 pages)

• Scale : Pour les sites à fort trafic nécessitant des limites flexibles, un CDN premium et un support prioritaire (jusqu'à 300+ pages)

• Enterprise : Pour les grandes organisations avec des besoins spécifiques en sécurité, limites et support

Note importante : Contrairement à WordPress qui est gratuit (hors hébergement), Framer nécessite un abonnement payant pour publier avec un domaine personnalisé. Cependant, la gestion de la maintenance est simplifiée : aucune montée de version technique à réaliser, et la contribution étant très simple, il ne sera pas nécessaire de repasser par des développements. La TMA peut être dédiée aux évolutions.

Collaboration : Les éditeurs additionnels sont facturés séparément (20$/mois pour Basic, 40$/mois pour Pro et Scale). Les Pro Experts bénéficient d'un accès éditeur gratuit aux projets clients.

Pourquoi refaire votre site web avec Framer ?

Refonte de site web : les avantages de Framer

Refaire votre site web avec Framer présente de nombreux avantages par rapport à une refonte traditionnelle :

1. Rapidité de mise en œuvre

• Refonte complète plus rapide qu'avec un CMS traditionnel

• Pas de développement backend complexe

• Design et développement dans le même outil

2. Coûts maîtrisés

• Pas de coûts d'hébergement séparés

• Maintenance simplifiée (pas de montées de version)

• Évolutions plus rapides et moins coûteuses

3. Performance optimale

• Sites hébergés sur AWS avec CDN intégré

• Performance native sans optimisation complexe

• Temps de chargement optimisés par défaut

4. Facilité de mise à jour

• Mise à jour du contenu sans compétences techniques

• Interface intuitive pour vos équipes

• Pas besoin de développeur pour les modifications courantes

5. Design moderne

• Animations et interactions de haute qualité

• Responsive design natif

• Interface utilisateur moderne et engageante

Comment migrer votre site vers Framer ?

Migrer votre site existant vers Framer est un processus structuré :

Étape 1 : Audit et stratégie

• Analyse de votre site actuel

• Définition de la nouvelle architecture

Étape 2 : Zoning

• Création des wireframe dans Figma

• Validation des parcours utilisateur

Étape 3 : Maquettage et intégration

• Création des templates, composants directement dans Framer

• Intégration des animations, transitions

Étape 4 : Migration du contenu

• Import des contenus dans le CMS Framer

• Restructuration si nécessaire

• Optimisation des contenus

Étape 5 : Mise en ligne

• Configuration du domaine

• Redirections SEO

• Lancement et suivi

La migration vers Framer nécessite une refonte complète du design et une réorganisation du contenu. La migration n'est pas automatique mais offre l'opportunité de moderniser complètement votre site web.

Framer introduit une nouvelle façon de développer un site

L'usage de plateforme comme Framer bouleverse aussi la façon de délivrer et d'organiser un projet web.

Faut-il passer par une phase de maquette lorsque l'on dispose d'une plateforme aussi complète ? Quelle articulation entre les équipes de design, l'UX, les développeurs / intégrateurs et les chefs de projets ?

Framer devient le lieu de RDV de l'ensemble des profils designers, intégrateurs, contributeurs, chef de projets, etc.

Abaissant la complexité de prise en main sur l'ensemble des dimensions (la contribution des contenus devient très simple, les templates et blocs à disposition facilitent le design global des interfaces, les compétences techniques nécessaires sont réduites, etc.), la tentation est forte de faire fi du partage traditionnel des tâches associées à un projet de développement web.

Conclusion : Framer pour refaire votre site web

En résumé, Framer se distingue comme une plateforme révolutionnaire qui répond à sa promesse : permettre à tout le monde de créer un site Internet quel que soit son niveau de compétences en code !

Framer est la solution idéale pour refaire votre site web grâce à son interface intuitive, ses outils no-code et ses fonctionnalités avancées. Son principal avantage représente sa capacité à offrir une solution complète, englobant la conception, la publication et la gestion de sites web, le tout sur une seule et même plateforme.

Que vous souhaitiez refaire votre site WordPress, migrer depuis un CMS obsolète, ou créer un nouveau site professionnel, Framer offre les outils nécessaires pour refaire votre site web avec style et efficacité. La refonte de site web avec Framer combine modernité, performance et simplicité de gestion.

Mais ce qui permet véritablement à Framer de se démarquer, c'est son IA intégrée qui révolutionne la création web. Que vous soyez designer, développeur ou entrepreneur, Framer est un outil no-code qui vous permet de créer des sites web interactifs et performants rapidement.

En bref, Framer incarne l'avenir du développement web, alliant accessibilité, polyvalence et innovation. Si vous souhaitez refaire votre site web, Framer est une solution moderne qui mérite d'être considérée.