Close Menu Navigation
Open Categories MenuFramer : que vaut ce constructeur de site no-code ?
- 15 avril, 2024 -
- Classé dans WebMarketing
Framer est un CMS bien fait et puissant qui te permet de facilement créer un site web, même sans aucune connaissance technique. Ce constructeur de site no-code est parfait pour créer des sites très réussis, en responsive design avec de belles animations et de bonnes performances SEO.
Framer, c’est le pont qui relie deux mondes souvent opposés : le design et le développement. Si tu es un web designer qui a envie de donner vie à ses créations, tu peux utiliser Framer. À l’inverse, si tu es un développeur souhaitant apporter une touche créative à son code, tu peux toi aussi passer par ce logiciel.
La grande force de Framer, c’est que tout un chacun peut s’en servir pour créer un site web au rendu professionnel sans trop se prendre la tête. Même si ça demande quand même un peu de patience, surtout au début, le temps de comprendre comment tout ça fonctionne.
Pour la faire courte, Framer semble cocher toutes les cases.
Mais est-ce que Framer est le bon CMS pour toi ?
Avantages et inconvénients, prix, fonctionnalités, alternatives… On va passer tout ça à la moulinette pour essayer de répondre à cette question. Framer n’aura bientôt plus aucun secret pour toi.
Quels sont les points forts et les points faibles de Framer ?
Points forts
Le gros point fort de Framer, c’est sa facilité de prise en main. Si tu n’as jamais créé de site internet, tu pourrais passer un peu de temps à saisir toutes les subtilités de l’éditeur. Quand bien même, le CMS te donne accès à une interface relativement simple à comprendre et à utiliser, surtout si tu as déjà utilisé Figma.
L’autre grand avantage de Framer, c’est le niveau de liberté qu’il offre en matière de webdesign. On peut vraiment faire de belles choses avec ce constructeur de site. Et je pense que ça plaira à toutes celles et ceux qui ont envie de créer un site visuellement attractif.
On apprécie également l’existence de la version gratuite. Même si elle est assez limitée, elle permet tout de même de bien tester le CMS avant d’éventuellement passer à une formule payante.
Points faibles
Ce qu’on apprécie un peu moins avec Framer, ce sont les limitations imposées sur les différentes formules : nombre de visiteurs mensuels, nombre de pages, recherche interne, analyse de trafic…
Si tu as envie de créer un site pro tout en accédant aux fonctionnalités les plus importantes, tu dois obligatoirement choisir l’une des formules les plus chères. Un bon exemple, ce sont les fonctions d’analyse du trafic qui ne sont disponibles qu’à partir de la 3ème formule payante.
En plus de ça, tu pourrais avoir besoin d’acheter des extensions pour débloquer des fonctionnalités supplémentaires : traduction du site, augmentation du nombre de visiteurs mensuels, augmentation de la bande passante disponible…
Tout mis bout-à-bout, je trouve que ça commence à faire un peu cher.
Quel est le prix de Framer ?
Framer est un CMS qui propose une formule gratuite et plusieurs plans payants.
Voici les tarifs pour utiliser Framer :
- Free : gratuit
- Mini : 10 € / mois
- Basic : 20 € / mois
- Pro : 40 € / mois
- Enterprise : prix sur demande
Le plan gratuit est une bonne option pour tester le CMS ou créer un site perso. Il inclut un sous-domaine Framer et affiche une bannière Framer sur toutes les pages.
En passant au plan Mini, tu peux commencer à créer des sites web assez simples qui arborent ton propre nom de domaine. Mais tu es limité à 1 000 visiteurs par mois.
Le plan Basic permet de créer des sites de 150 pages maximum avec des fonctions de protection par mot de passe et une limite de 10 000 visiteurs par mois.
Avec le plan Pro de Framer, tu débloques la plupart des fonctionnalités les plus populaires : site de 300 pages, analyse du trafic, gestion des cookies, 200 000 visiteurs par mois…
Enfin, le plan Enterprise s’adresse aux sociétés qui ont besoin besoin d’une solution avancée et sécurisée : hébergement personnalisé, uptime garanti, infrastructure de serveurs dédiée…
Les extensions Framer (plan Pro et Enterprise)
En parallèle de ces différentes formules, tu peux obtenir des fonctionnalités supplémentaires en achetant des extensions (disponibles uniquement pour les utilisateurs des plans Pro ou Enterprise).
Au total, Framer propose 8 extensions différentes :
- Pro locale à $40 / mois : traduction de site jusqu’à 50 000 mots
- Unlimited search à $20 / mois : recherche avancée sur le site
- CMS upgrade à $90 / mois : augmentation des limites du CMS
- Bandwidth à $100 / mois : jusqu’à 500 000 visiteurs mensuels
- Bandwidth ultra à $200 / mois : jusqu’à 750 000 visiteurs mensuels
- Custom proxy setup à $350 / mois : configuration de proxy personnalisé
- Accelerated hosting à $150 / mois : hébergement web plus puissant
- Workspace SSO : prix sur demande
partner25proyearly
Framer, c’est fait pour qui ?
Framer est un constructeur de site no-code. C’est donc un CMS qui se veut à la fois assez simple à utiliser tout en proposant un haut niveau de liberté en matière de design.
Framer s’adresse à plusieurs profils de personnes, à commencer par les webdesigners. Si tu veux donner vie à tes idées de design web avec un CMS puissant mais simple à utiliser, alors tu devrais essayer ce logiciel. Le nombre d’options disponibles est assez bluffant : tu peux donc personnaliser ton site jusque dans les moindres détails.
Framer peut aussi très bien convenir aux entrepreneurs, que ce soit des freelances, des agences ou des startups ayant besoin de mettre en avant leurs services ou des équipes marketing qui souhaitent créer des landing pages pour leurs différents projets.
Avec sa formule gratuite, Framer se présente aussi comme une bonne option auprès des blogueurs et des créateurs de contenu, qu’ils soient amateurs ou professionnels. Le logiciel est bien adapté à la création de sites web personnels, de portfolios, etc. Il faut simplement savoir que la prise en main pourrait prendre un peu de temps si tu n’as pas d’expérience dans ce domaine.
Les meilleures fonctionnalités de Framer
Framer est un CMS qui permet de créer des sites internet sans jamais avoir à toucher à la moindre ligne de code. Le but, c’est de t’aider à concrétiser ta vision du site parfait, même sans aucune connaissance en développement web.
Au départ, Framer servait uniquement à réaliser des prototypes de sites. Les pros du marketing pouvaient donc créer le visuel de leur site avant d’envoyer le prototype à des développeurs.
Aujourd’hui, Framer a comblé le vide entre le prototype et la réalité en devenant un CMS complet avec des fonctionnalités simples à utiliser et de puissantes et d’excellentes capacités créatives.
En gros, Framer te permet de créer le site web dont tu as toujours rêvé en te donnant un max de liberté en matière de design sans te soucier du code HTML.
Voyons d’un peu plus près ce que Framer propose en termes de fonctionnalités.
Créer un site avec Framer
Framer propose tout ce que l’on peut attendre d’un CMS avec un éditeur en drag and drop.
L’interface te permet de créer une page d’accueil et des pages supplémentaires (selon la formule choisie). Tu peux ensuite modifier chaque page de façon indépendante en déterminant la disposition, les éléments de contenu, les textes, les images…
Globalement, l’utilisation de Framer est donc fidèle à sa promesse : c’est plutôt assez à prendre en main, même si ça demandera un peu plus de travail à ceux qui débutent en la matière.
Un point dont il faut avoir conscience avant de se lancer avec Framer, c’est la configuration du responsive design. Tu sais ? C’est ce qui permet à ton site de s’afficher aussi bien sur ordinateur que sur mobile.
Obtenir un site web parfaitement responsive pourrait demander un peu de temps car Framer offre beaucoup de possibilités sur ce point.
Tu peux vraiment configurer ton site et son apparence exactement comme tu l’entends sur chaque appareil en déterminant avec précision les points de rupture et l’affiche des éléments selon la taille de l’écran.
Mais une fois que tu as pris le coup de main, Framer ne devrait plus poser la moindre difficulté. Le CMS est globalement bien fait et te permet d’ajouter de belles animations lorsque l’internaute scroll la page ou lorsqu’il utilise sa souris.
Et tu peux évidemment gérer le style du site de A à Z : typographies, couleurs, tailles de police, arrière-plan, etc.
Utiliser l’intelligence artificielle (IA)
Framer intègre une fonctionnalité basée sur l’intelligence artificielle. Elle permet à l’utilisateur de créer un site web rapidement, sans expérience en codage, simplement en décrivant avec ses propres mots le site dont il a besoin.
En s’appuyant sur les informations que tu lui donnes, Framer va générer un site web tout entier. Ça permet de créer une base solide sur laquelle tu pourras travailler afin de réaliser un site correspondant exactement à tes attentes.
Utiliser un template de site prêt à l’emploi
Comme tout logiciel de création de site qui se respecte, Framer permet de partir de rien ou de personnaliser un modèle existant. Ça peut être un très bon moyen de gagner du temps sans faire l’impasse sur la qualité.
Framer propose une bibliothèque avec de nombreux modèles de sites gratuits ou payants.
Les templates sont triés par catégories :
- 3D
- Agency
- Blog
- Ecommerce
- Landing Page
- Membership
- Portfolio
- Web3
- Etc.
Chaque template comporte des animations et des effets, des composants et des styles que l’on peut directement appliquer à son propre site avant de les personnaliser.
Les prix des templates payants oscillent entre $29 et $100.
Certains sont proposés par l’équipe de Framer, d’autres ont été créés par des développeurs indépendants. Tu peux acheter uniquement le modèle à importer dans Framer ou acheter un pack contenant aussi les fichiers pour éditer le template dans Figma (un logiciel de design collaboratif permettant de créer des frameworks pour des sites web).
Gérer du contenu (le CMS à proprement parler)
Framer est un constructeur de site. On a donc vite fait de le qualifier de CMS (moi le premier). Et c’est le cas.
Mais il faut savoir que dans l’interface, les fonctionnalités de CMS ne représentent qu’une partie des outils proposés par Framer. Exactement comme les fonctions de design, celles du CMS ont droit à leur propre rubrique.
Dans cette rubrique, on retrouve toutes les différentes pages qui composent notre site. Et pour chaque page, on accède à une liste d’éléments de contenu : titre de la page, slug, image de couverture, titres et paragraphes, catégories, contenus dynamiques et conditionnels…
Lorsque tu modifies une page (URL, nom, emplacement…), Framer met automatiquement le reste du site à jour et crée lui-même les redirections si nécessaire. C’est pratique car tu n’as pas à te soucier de tout mettre à jour à la main en cas de changement.
Une fois que tu as créé la structure de tes pages, il ne te reste plus qu’à insérer et agencer les différents types de contenu via le CMS.
Tu peux aussi créer tes propres collections de contenus dans Framer. Chaque collection étant comme une petite base de données indépendante qui rassemble des éléments qui se mettent automatiquement à jour sur toutes les pages lorsqu’on les modifie.
Une fois que le site web est terminé, il ne te reste plus qu’à le publier. Avec le plan gratuit, tu obtiens un sous-domaine Framer. Il faut passer à l’un des plans payants pour connecter ton site à un nom de domaine personnalisé.
Gérer le site dans le back-office
Framer conserve un historique de toutes les modifications apportées sur le site. En cas de fausse manip’, tu peux facilement revenir en arrière et corriger les erreurs.
Si tu travailles en équipe, Framer permet d’attribuer des rôles d’utilisateurs et des permissions à chaque membre de la team. C’est pratique pour permettre à chacun de se concentrer sur ses propres tâches, éviter les erreurs et contrôler les modifications avant de les déployer.
Si besoin, sache aussi que Framer propose des fonctionnalités avancées de staging, de retour en arrière et de mise en production. C’est indispensable pour tester des modifications avant de les déployer sur le site web final. Grâce à l’historique, tu peux facilement faire un rollback et voir qui a fait quoi sur le site.
Référencement naturel (SEO) et performances
La plupart du temps, les CMS de ce type ne sont pas ce qu’il y a de mieux pour gérer et améliorer le référencement naturel d’un site.
Sachant qu’on n’a pas accès au code du site, il faut que Framer génère un HTML bien construit : ça pose les bases d’un site performant que les moteurs de recherche pourront facilement scanner.
Alors, comment s’en sort Framer sur ce point ?
Pour commencer, Framer affirme générer un code performant par défaut, quel que soit le type de site créé. Dans une certaine mesure, c’est vrai. Mais il faut un peu nuancer.
Framer génère le code à ta place. C’est tout l’intérêt de ce genre de logiciel. Le souci, c’est que le code généré n’est pas toujours le plus performant du monde.
Sans entrer dans des détails trop techniques, Framer va très souvent te créer des <div> dans des <div> dans des <div> pour coder ton site. Idem pour les images où Framer va souvent créer des conteneurs en cascade.
Ce n’est pas dramatique, mais ça a un petit impact sur les perfs. C’est le prix à payer pour avoir un outil no-code.
Au niveau du contenu en lui-même, Framer permet de modifier toutes les balises les plus importantes pour le SEO (meta title, meta description, alt). Le site builder te permet aussi de choisir les bons titres Hn et les structures HTML les plus adaptées (div, section, content, etc.).
Et le CMS génère automatiquement un sitemap pour les robots d’indexation.
Concernant les performances des serveurs, Framer propose le SSR (Server Side Rendering) et utilise AWS (Amazon Web Services) comme infrastructure. Des serveurs puissants qui chargeront tes pages rapidement en toutes circonstances.
En bref, Framer met à disposition de l’utilisateur tous les outils pour atteindre de bonnes performances et améliorer le référencement. On apprécie particulièrement l’optimisation automatique des images et la mise en cache par défaut.
Évidemment, même si Framer fait le maximum pour te mâcher le travail, il faut tout de même suivre les bonnes pratiques en matière de SEO pour espérer atteindre de bonnes positions dans les pages de résultat.
partner25proyearly
Tutoriel pour utiliser Framer
Ce qui est sympa avec Framer, c’est que tu peux utiliser la version gratuite pour tester le logiciel. Ça permet de voir comment tout fonctionne avant de peut-être passer à un plan payant pour débloquer d’autres fonctionnalités.
Active les sous-titres et la traduction auto en français dans les paramètres de la vidéo.
Découverte de l’interface
Pour commencer à utiliser Framer et travailler sur ton premier site, il suffit de créer un compte client. Tout ce dont tu as besoin, c’est d’une adresse email, d’un prénom et d’un nom.
Une fois le compte créé, tu atterris directement dans l’éditeur.
On retrouve au centre une prévisualisation de la page web. Sur la gauche, il y a une barre latérale comportant les principales options et rubriques :
- Pages
- Sections
- Navigation
- Menus
- Collections de contenus
- Éléments de contenus : images, stickers, widgets, vidéos, intégrations, formulaires, icônes, bannières, cookies, carrousels, réseaux sociaux, iframes…
C’est par exemple dans la rubrique Collections que tu vas pouvoir créer un blog. Tu peux ajouter des contenus depuis un fichier tableur ou créer le blog directement dans Framer.
En haut de l’écran, on retrouve plusieurs onglets pour insérer des éléments supplémentaires dans la page :
- Dispositions prêtes à l’emploi (modèles de pages)
- Colonnes, lignes ou grilles
- Titres et textes
Voilà à quoi ressemble ma page vierge après avoir ajouté un template de page via l’onglet Insert de la barre supérieure de l’éditeur :
En cliquant sur chaque élément de la page, je peux modifier les informations qui apparaissent : texte, image, etc. En cliquant sur un élément, les options correspondantes s’affichent automatiquement à droite de l’écran, comme tu peux le voir ci-dessous.
Enfin, Framer affiche en haut à droite plusieurs boutons pour gérer son compte, gérer le site, prévisualiser la page ou publier notre création.
Créer son premier site
En partant de zéro, tu peux assez rapidement créer un site web avec Framer. Il faut simplement bien comprendre comment fonctionne l’interface.
Comme tu as pu le voir, on se retrouve d’abord sur une page blanche. On peut donc laisser libre court à notre imagination. Pour ajouter du contenu à notre page blanche, il faut commencer à sélectionner l’onglet Insert.
Depuis cet onglet, on va pouvoir ajouter tout ce qu’on veut à notre page. Du simple texte aux formulaires en passant par les images et les autres médias.
En l’espace de quelques secondes, voilà ce que j’ai réussi à créer avec Framer :
Certaines fonctionnalités ne sont pas les plus évidentes à prendre en main. Il faut parfois un peu chercher, même pour des fonctions basiques. Mais avec un peu de patience et de pratique, tu peux assez rapidement créer plusieurs pages avec un très bon rendu.
Créer un site avec l’intelligence artificielle
Si tu as la flemme, tu peux aussi utiliser l’intelligence artificielle pour créer ton site. Tout ce que tu as à faire, c’est décrire ton besoin à l’IA qui va s’occuper de générer le code à ta place.
Pour utiliser l’IA dans Framer, direction l’onglet Actions de la barre supérieure. Dans le menu déroulant, sélectionne l’option Generate Page.
Voilà ce qui devrait apparaître à l’écran :
La petite fenêtre volante au milieu de l’écran est l’endroit où tu peux décrire ton site à l’IA de Framer. L’interface du logiciel étant uniquement disponible en anglais, il faut rédiger ta demande dans la langue de Shakespeare.
Voilà ce que l’IA de Framer génère quand je lui envoie la consigne suivante : « A website to sell surfoards to young adults living in France, near the Atlantic Ocean » (un site pour vendre des planches de surf à de jeunes adultes vivant en France, près de l’Océan Atlantique).
Comme tu peux le voir, c’est loin d’être parfait. Mais avec un peu de travail et en reformulant certaines choses, tu peux assez rapidement générer une base à personnaliser.
Évidemment, tout ce que génère l’IA de Framer est entièrement modifiable, que ce soit les textes, les couleurs, les images, les typos…
Choisir un template
Mais je pense que le moyen le plus rapide de créer un site vraiment quali avec Framer, c’est d’utiliser les modèles prêts à l’emploi.
Tu peux commencer par consulter les modèles de pages dans l’onglet Insert de l’éditeur. Les templates apparaissent sur la gauche de l’écran :
Il suffit de sélectionner le template qu’il te faut pour l’insérer dans la page. Tu peux ensuite le modifier à ta guise.
Pour aller encore plus loin, tu peux directement parcourir la bibliothèque de templates de Framer (la Marketplace). De là, tu peux ajouter un modèle de site en 2 clics de souris.
Voilà à quoi ressemble l’éditeur après avoir créé une copie d’un template gratuit trouvé sur la marketplace de Framer :
Il ne te reste plus qu’à personnaliser tout ça pour rendre ton site unique.
partner25proyearly
Quelles intégrations avec Framer ?
Le CMS est compatible avec un certain nombre d’applications tierces. Ces intégrations avec Framer se font sous forme de plugins. Il n’y en a pas beaucoup mais ils sont très bien faits.
Voici la liste des intégrations (plugins) disponibles avec Framer :
- Formspark : création de formulaires en drag and drop pouvant se connecter à Slack, Zapier ou Make pour gérer les messages entrants, faire de la CRM ou du service client.
- HubSpot : intégration du créateur de formulaire HubSpot directement dans les pages de ton site en respectant la charte graphique.
- Intercom : création de tickets et de chatbots intégrables sur ton site web Framer.
- Logo : un plugin pour aller chercher les logos de milliers d’entreprises afin de les ajouter rapidement sur ton site (pratique pour les afficher dans les témoignages ou une page présentant tes partenaires.
- Lottie : intégration de la bibliothèque d’animations gratuites de Lottie afin de rendre ton site Framer plus attractif.
- Mailchimp : permet d’ajouter les formulaires Mailchimp dans les pages de ton site web tout en respectant ta charte graphique.
- Typeform : création de formulaires, de sondages et de demandes d’assistance en drag and drop.
- YouTube : pour intégrer n’importe quelle vidéo YouTube dans tes pages à partir d’une simple URL.
Même si on ne peut pas tout à fait parler d’intégrations, l’éditeur de Framer arbore aussi des éléments de contenus tiers prêts à l’emploi : Gumroad, The Fork, Eventbrite…
Comment contacter le service client de Framer ?
Il est possible de contacter le service client Framer en passant par le site officiel. Un formulaire permet de créer un ticket pour demander de l’aide (remontée de bug, facturation, gestion de compte…).
Tu peux aussi compter sur la communauté d’utilisateurs de Framer. Le constructeur de sites propose un canal Discord très actif où les membres peuvent discuter du CMS, partager leurs créations et s’entraider.
Framer a aussi mis en ligne un centre d’aide assez complet avec des dizaines d’articles : SEO, publication de site, performances, gestion du site, accessibilité…
Enfin, les FAQ de Framer sont une vraie mine d’or pour trouver des réponses détaillées aux questions les plus couramment posées par les utilisateurs.
Les avis des utilisateurs de Framer
Ailleurs sur le web, Framer a plutôt bonne réputation même s’il compte assez peu d’avis d’utilisateurs (le logiciel est plutôt récent).
Sur Capterra, Framer obtient par exemple la note de 4.4/5. Même chose sur G2 avec 4.5/5.
Les utilisateurs apprécient la facilité d’utilisation de Framer. Créer tout un site web en drag and drop reste son principal atout. Les habitués du logiciel de design Figma sont aussi très satisfaits car ils peuvent facilement donner vie à leurs projets grâce au CMS.
Parmi les points négatifs, les utilisateurs trouvent que le prix à payer pour débloquer les fonctionnalités les plus importantes est trop élevé. D’autres utilisateurs se plaignent aussi de la courbe d’apprentissage est assez raide. Notamment pour les fonctions de développement les plus techniques qui demandent à l’utilisateur de s’y connaître en web design.
Quelle alternative à Framer en [year] ?
Framer n’est pas un constructeur de site comme les autres. Il a des spécificités qui peuvent plaire ou non. Ce qui est cool avec le marché des CMS, c’est qu’il existe beaucoup d’autres solutions.
Si tu es à la recherche d’une bonne alternative à Framer, voici les 3 CMS que je recommande :
1. WordPress
WordPress est de loin le CMS le plus populaire au monde. Si tu as besoin d’un logiciel capable de tout faire en matière de sites web, c’est une excellente alternative à Framer.
En utilisant les bons thèmes et plugins (Elementor, Divi…), tu peux retrouver une expérience utilisateur très similaire pour créer le site internet de tes rêves.
2. Webflow
Webflow est une autre très bonne alternative à Framer. Cette plateforme de constructeur de sites est puissante tout en restant facile à utiliser, même sans expérience.
Tu peux t’en servir pour créer un site vitrine, des landing pages ou un ecommerce. Tout comme Framer, Webflow propose une belle bibliothèque d’animations et de nombreuses automatisations.
3. SquareSpace
Cette dernière alternative à Framer est idéale pour ceux qui recherchent un CMS simple, capable de créer de beaux sites et intégrant des fonctionnalités de marketing avancées. Squarespace, c’est le top pour rapidement créer un joli site grâce à ses nombreux modèles de qualité.
Ici, on ne croûle pas sous les fonctionnalités : on retrouve l’essentiel pour se lancer sans attendre. Par contre, les possibilités en termes de personnalisation sont un peu limitées en comparaison de Framer.
Avis Framer [year] : est-ce que ça vaut le coup ?
Framer est un outil puissant qui permet de créer des sites de grande qualité, personnalisables jusque dans les moindres détails. La plateforme a réussi à se créer une belle place sur le marché en proposant une solution qui répond aussi bien aux besoins des designers qu’à ceux des développeurs web.
Framer n’est pas parfait mais il propose des fonctionnalités vraiment bien faites pour celui qui sait les utiliser. C’est un outil innovant qui propose quelque chose de différent. Et ça apporte un joli vent de fraîcheur dans le monde des CMS.
Si l’outil t’intéresse, je t’invite à l’essayer avec la formule gratuite. Et si tu penses passer à un plan payant, n’hésite pas à utiliser notre coupon pour obtenir un tarif réduit !
partner25proyearly
Mis en ligne grâce à Wordpress -