Webflow : Certes, la création d’un site n’a jamais été aussi facile, mais je pense que ce n’est pas fait pour tout le monde. Seuls ceux qui ont la motivation et persévérance pour devenir webdesigners pourront le faire, à mon avis. Et si tu crois que tu peux le faire, c’est amplement suffisant.
Il existe actuellement une panoplie d’outils qui permet de réaliser des sites performants facilement, y compris Webflow. Ce dernier se démarque d’ailleurs des autres par sa facilité d’utilisation. Tu verras, après que tu aies lit ce guide jusqu’à la fin, tu auras une idée de ce qui t’attend réellement ainsi que des avantages que tu gagneras en utilisant Webflow.
#webflow #wordpress #squarespace #shopify #wix
🌈 Sondage
Tu utilises quoi pour créer des Sites Web ?
Wix, Squarespace, Wordpress, Shopify, ou Manuellement ?
Donne-moi ton avis en commentaires !
Sommaire
1- à réaliser un design de site web
2- à gérer des contenus textes
3- à tester et publier ton site
4- à ouvrir une boutique en ligne
- Combien coûte Webflow ?
- Webflow et ses inconvénients ?
- Pourquoi utiliser Webflow ?
- Et toi ? Devrais-tu utiliser Webflow à ton avis ?
- Quels sont les avantages d’utiliser Webflow par rapport aux autres ?
- Quel est le niveau de personnalisation de Webflow ?
- Quel est le gain de temps pour la création d’un Site Web Webflow ?
- Quels sont les intégrations Webflow ?
- Comment se passe la mise en ligne d’un Site Web Webflow ?
- La collaboration en équipe sur Webflow
- La Communauté francophone grandissante (et le groupe Webflow entraide)
Vidéo
Qu’est-ce que la plateforme Webflow ?
Webflow a fait surface en 2013, et ses auteurs ne sont autre que deux frères passionnés de technologie et d'Internet et un associé. Voici un lien qui parle d’eux
Webflow est un outil de création de sites web. Il ressemble à Wix par le fait qu’on peut y créer des sites facilement, par l’outil glisser-déposer, et donc sans code (mais évidemment, en mieux) ; et à Wordpress parce qu’il est possible de gérer les contenus de son site ou blog via Webflow.
Je suis conscient que cette définition risque de ne pas te suffire. C'est d'ailleurs pour cette raison que j'ai écrit ce guide complet sur Webflow.
Comme il s’agit d’une plateforme, il faut créer un compte gratuit qui te permet de créer 2 projets. C’est parfait pour commencer à maîtriser l’outil. Clique ici pour créer un compte Webflow
Premier pas sur Webflow ?
La première chose à faire si tu veux débuter sur Webflow est de t’inscrire sur la plateforme. Pour cela, il ne te faut que quelques coordonnées : ton adresse email et ton mot de passe. Il en te reste plus qu’à attendre quelques minutes pour que ton inscription soit validée, et hop, le reste s’ouvre à toi !
Connecte-toi donc. Tu as enfin sous tes yeux l’interface de Webflow. Tu as aussi accès à différents modèles de sites prêts à être utilisés sur Webflow (et il y en a pour tous les goûts), mais heureusement pour toi, une personnalisation est encore possible :) Il peut arriver qu’aucun des modèles ne t’aille. C’est là que tu dois utiliser tes compétences créatives et ainsi, créer ton propre design. D’ailleurs, l’interface est facile à comprendre. Essaie par toi-même ; tu verras que la fonctionnalité glissée-déposée est très facile.
Supposons que tu as fini ton projet, que tu es assez satisfait de ton travail. La dernière étape est de publier le site. Sur ce bouton, d’autres fonctions sont aussi possibles : ajout de page, exportation de codes, prévisualisation du design…
À quoi sert Webflow ?
Ce guide ne suffira pas si j’écrivais un manuel d’utilisation de Webflow. Par contre, je peux affirmer que Webflow est facile d’utilisation, à condition que tu te sois bien familiarisé avec ce créateur de site. J’irais même jusqu’à dire que l’expérience utilisateur avec Webflow est le plus fluide de tous les autres CMS que je n’ai jamais connu.
Alors, quel est le rôle de Webflow ? En voici 4 :
- à réaliser un design de site web
- à gérer des contenus textes
- à tester et publier ton site
- à ouvrir une boutique en ligne
1. À réaliser un design de site web
Sur l’interface de Webflow, tu verras une fenêtre presque similaire à celle de Photoshop (mais évidemment, elle ne sert pas à modifier ou à traiter une image). Il s’agit d’un outil d’automatisation HTML/CSS. Sur cette barre, tu pourras écrire, personnaliser… des codes dans le but de rendre ton site encore plus beau. Mais évidemment, ce n’est pas obligatoire. Tout peut être modifié à partir de la page elle-même, visuellement.
Si cette fenêtre existe, c’est pour que tu puisses comprendre leur fonctionnement, et cela est valable même pour ceux qui ne savent rien des codes. Au fil du temps, à force de côtoyer ce monde, tu finiras par les comprendre.
Même si Webflow permet de créer un site sans toucher aux codes, ne t’attends pas à voir une fenêtre vide (à moins qu’il n’y a rien sur la page). En effet, il existe un système sous-jacent à Webflow qui permet de générer automatiquement ces codes. À la moindre modification de la page, les codes sont modifiés.
Créer un design à partir de modèles prédéfinis ou d’une page blanche
Tu as le choix entre travailler sur une page vide ou utiliser un modèle prédéfini. Certains sont gratuits, d’autres sont payants. En voulant quelque chose de plus original, tu ferais mieux de te tourner vers les modèles premium (ils sont par centaine dans la bibliothèque de modèles). Leur prix se situe entre 40 et 80 dollars.
D’où viennent ces modèles ? Telle est la question. Contrairement à ce que certains pourraient penser, ils ne proviennent pas de Webflow. Au contraire, ils ont été créés par des personnes extérieures à l’entreprise. Elles ont formés une communauté Webflow, composée de designers et développeurs web professionnels.
Bref, si tu as des compétences approfondies (tant sur les codes que sur Webflow), je te conseille de partir d’une page vide. Les modèles prédéfinis sont plutôt faits pour se familiariser avec l’outil, et donc pour les débutants. Rien n’empêche toutefois les expérimentés d’y avoir recours de temps en temps.
Créer un design interactif
L’une des choses qui démarquent Webflow le plus de tous les autres outils de création de sites est la possibilité de créer des animations (transitions, transformations d’un élément, etc.). Avec des outils plus traditionnels, cette tâche paraît impossible à réaliser ! Mais encore, si tu en as réussi, tu sais qu’un travail colossal se cache derrière ; tu aurais dû écrire de longues lignes de code.
Alors, si je te demandais de choisir entre un travail colossal et quelques clics pour aboutir au même résultat, qu’aurais-tu pris ? Je pense savoir la réponse. Alors, pour ce faire, rends-toi dans le panneau interactions, puis clique sur l’icône éclair. Une large gamme de choix en fonction de l’état de la page à modifier y est disponible.
2. À gérer des contenus (CMS)
Depuis la page à designer, une modification en direct des contenus est possible sur Webflow, que ce soit des articles de blog, de section membre d’une équipe ou encore témoignages de clients…
Mais comment les modifier ? Il suffit de se rendre sur l’onglet qui se situe à gauche de l’écran, après que tu aies ajouté un champ de contenu. Voilà pour ce qui est du CMS back-end.
Sais-tu qu’il existe aussi l’éditeur webflow ? Celui-ci te permet de publier de nouveaux contenus sur une page déjà existante (statique ou dynamique soit-elle). Il est très prisé à la fois par les créateurs de site que par leurs équipe et client, notamment par sa facilité d’utilisation. Aucun plug-in requis, contrairement à d’autres outils de création de CMS comme WordPress.
Avant, la création d’un site multilingue semblait impossible sur Webflow. Heureusement que cela a changé grâce à l’apparition d’une extension tierce : Weglot. D’ailleurs, moi aussi je l’utilise pour mon site et ceux de mes clients.
3. À héberger et développer ton site
Maintenant que tu as choisi le design qui te plaît et que tu as ajouté tous les contenus intéressants, il ne reste plus qu’à publier le site. C’est simple ! D’ailleurs, cela n’a jamais été aussi simple. Il suffit de cliquer sur publier et une liste déroulante s’affiche. On te demande de choisir entre le sous-domaine de webflow.com et ton domaine personnalisé. Pour une première publication, il serait toujours plus judicieux de publier sur le sous-domaine. Une fois que tu as fini de tester l’ensemble du site, tu es enfin libre de publier sur ton domaine en question.
Comment cela se passe-t-il précisément ? J’ai frôlé un bout de sujet tout à l’heure, mais à titre de rappel, tu dois procéder de cette manière :
- Pour le plan gratuit, tu auras droit à 2 pages statiques à publier. Ici, tu n’as encore droit qu’à un seul sous domaine nomdusite.webflow.com. Si tu veux passer à une étape supérieure, il suffit de mettre à niveau ton offre d’hébergement.
- Tu auras alors un plan premium. Là enfin, tu pourras publier sur ton domaine personnalisé.
Pour résumer, Webflow propose un hébergement en interne. Cela évite aux utilisateurs de se casser la tête sur les différents types d’hébergement sur le marché. D’autant plus que d’autres avantages sont présents :
- Tu es épargné des tâches manuelles liées aux hébergements, comme le fait de le mettre à jour manuellement. En effet, Webflow collabore avec des fournisseurs puissants tels que Amazon Cloudfront et Fastly.
- Le content delivery network (CDN) est tout de suite disponible dans les plans proposés ; une fonction qui permet aux internautes qui naviguent sur votre site d’y accéder sans le moindre problème, où qu’ils soient (en termes de géographie). Les paiements supplémentaires sont donc inutiles.
- Le temps de chargement est rapide.
- Le taux de disponibilité du site est élevé, presque 100 %, quels que soient le pic de trafic du site ou les tentatives de cyberattaques.
- Un certificat SSL (secure sockets layer) est aussi intégré.
Ce type d’hébergement est prêt à l’usage. Si toutefois tu préfères exporter les codes pour les importer vers un autre hébergement, tu es libre de faire ton choix.
4. À exercer une activité de e-commerce
La version e-commerce n’existe que depuis peu sur Webflow, mais je te promets qu’il en vaut la peine ! Ses fonctionnalités sont très complètes :
- inventaires des produits
- gestion des produits
- paniers
- paiement
- mails clients
- page de paiement autohébergé…
Mieux encore, pour chacune de ces fonctionnalités, une personnalisation est possible ; évidemment, tu n’auras même pas besoin d’avoir des compétences en HTML ou CSS pour la réussir.
Cependant, les prix sont différents.
Si tu utilises déjà le Webflow e-commerce, tu es le mieux placé pour savoir que l’équipe ne cesse d’essayer d’améliorer le tout. Leur but est sûrement de concurrencer les plus grands outils tels que Shopify.
Combien coûte Webflow ?
Ce serait long à expliquer, mais pour t'aider à mieux comprendre, j'ai catégorisé les plans comme suit :
Le plan gratuit
Bien que gratuit, ce plan offre les fonctionnalités complètes de Webflow. Le seul hic est que tu dois travailler sur un sous-domaine (nomdusite.weblow.com). Pour un domaine personnalisé, et donc, sans cette extension webflow.com, tu n'as d’autre choix que de souscrire à l’un des plans payants que je vais t'expliquer dans les paragraphes suivants.
Quoi qu'il en soit, si tu comptes te mettre au webdesign, mais que tu ne prends connaissance de Webflow que maintenant (ou tout récemment), ce plan gratuit est fait pour toi. Il t'aide à te familiariser avec la plateforme et tester si sa performance répond à tes attentes. 2 pages seront à ta disposition, ce qui est largement suffisant pour un premier apprentissage. Ce sont de pages statistiques. Une fois que tu te sens prêt pour te lancer, tu sais ce qu'il te reste à faire : choisir un plan payant adapté à ton projet.
Une fois que le plan gratuit ne te suffit plus, tu vas devoir prévoir 2 paiements.
Le premier consiste à payer pour la plateforme Webflow et l’utilisation de ci. Et le deuxième consiste à payer pour l’hébergement du Site Web créé sur la plateforme.
Voici le tarif en détail
1. Designer plan
Celui-ci te permet de gérer plusieurs projets en même temps. Il se divise aussi en 3 sous-catégories. À toi de trouver celui qui t'intéresse.
Le starter
Elle est gratuite, mais contrairement à celle proposée par le Hosting Plans, l’hébergement de ton site (si tu optes pour cette offre) revient à Webflow lui-même.
Offre lite
16 $ te seront déboursés pour l'offre Lite. Son avantage ? Tu peux gérer 10 projets en simultané.
Offre Pro
Il coûte 35 $, ce qui est peu pour un professionnel. Les avantages ne sont pas des moindres : le nombre de sites auxquels tu as accès est illimité.
Le travail en équipe, ça te dit quelque chose ? En fait, c'est permis pour l'offre pro. Peut-être même que tu souhaites que ton client ait un aperçu du projet avant livraison.
Team plans
Enfin, j'ai gardé la meilleure pour la fin : le team plans. D’habitude, ce sont les agences ont recours à cette offre, mais cela ne t’empêche pas de l’utiliser si tu t’occupes d’un grand projet. Tu auras certainement une équipe avec qui tu travailles : d’autres designers comme toi, des développeurs, des rédacteurs… Bref, une équipe de freelances. Mais encore, ce plan se divise en deux.
Offre Team
35 $ est-ce qu’il te faut. Tout comme le plan designer, tu peux inviter tes collègues ou clients sur le projet en question. Mais voici les fonctionnalités en plus : il y aura un dashboard (tableau de bord) depuis lequel tu peux gérer l’équipe.
Offre Large Team
Les avantages sont plutôt les mêmes que ceux de l’offre précédente, à la seule différence que celui-ci est plus adapté pour les travaux de grande envergure.
Bref, si je devais résumer ces plans, je les catégoriserais en deux, comme suit :
- Offre en fonction du compte : le choix repose principalement sur le nombre de personnes de ton équipe qui pourra utiliser Webflow.
- Offre en fonction de l’usage du site : celui-ci est surtout adapté à ceux qui ont de gros projets de e-commerce, et ainsi, s’attendent à un trafic important sur leur site.
2. Hosting plan
Tu devras encore choisir entre 3 sous-catégories. Commençons par le basic Hosting, qui est disponible à un tarif de 12 $ par mois. Comme il est la base, les fonctionnalités élémentaires proposées sont les suivantes : 500 soumissions de formulaires et 25 000 visites mensuelles.
Le deuxième choix est le CMS Hosting? Son tarif est légèrement plus élevé, car il est de 16 $. Il se différencie du premier par la présence de 2 000 outils CMS à ta disposition. Le nombre de soumissions de formulaire est quant à lui de 1 000 et pour le nombre de visite mensuelle, il peut s’élever à 100 000. Aussi est-il possible d’accéder à un CMS API grâce au CMS Hosting. Enfin, tu auras à ta disposition 3 différents éditeurs de création.
Enfin vient le business Hosting. Un peu plus cher, il est de 36 $, avec 1 000 outils CMS, 10 éditeurs de création et un nombre illimité de soumissions de formulaire. Les visites mensuelles peuvent atteindre les 1 000 000.
Un plan gratuit est disponible ici, sauf que si tu t'y lances, tu devras choisir un hébergement extérieur à Webflow.
Le fait que tu choisisses une offre compte ne signifie pas que tu ne peux plus le combiner à l’autre formule. Au contraire, tu peux en prendre deux.
En tout cas, je te conseille de consulter la page source de ces tarifications Webflow avant de prendre ta décision finale.
Webflow et ses inconvénients ?
Je ne vais pas te mentir : Webflow n’est quand même pas dénué d'inconvénients. Comme on dit : rien n’est parfait… :
- Si tu n’as jamais créé un site auparavant, tu devras prendre le temps de te familiariser avec l’interface. D’ailleurs, rien ne presse. Seulement, une fois que tu as fait le tour, tu verras que rien n’est difficile !
- J’ai un tout petit peu frôlé le sujet tout à l’heure. Pour un site multilingue, tu devras passer par une extension externe (mais c’est la seule, ne t’inquiète pas !). Webflow est en effet limité, de ce côté-là.
- Je pense que sans l’image de résumé des tarifications, tu serais perdu. La structure de tarification s’avère complexe.
Quoi qu’il en soit, les inconvénients sont moins nombreux que les avantages.
Pourquoi utiliser Webflow ?
Compte tenu de son prix et des quelques inconvénients que je viens d’énumérer, y a-t-il d’autres raisons pour lesquelles tu dois utiliser Webflow ? Voici 11 bonnes raisons d’utiliser Webflow aujourd’hui.
- Il est économique. Pour une première utilisation, tu n’as pas besoin de payer quoi que ce soit. Un plan gratuit est proposé par Webflow, et ce, pour les différents plans. D’autant plus qu’il n’y a pas de délai d’usage gratuit. C’est permanent.
- Il est facile, car personne n’a besoin de maîtriser les codes HTML ou CSS pour pouvoir l’utiliser. La fonction glisser-déposer est très intéressante.
- Par ailleurs, la gestion et l’édition de contenus sont possibles. Ils sont même très intuitifs.
- Côté SEO, il n’y a rien à craindre. Tous les sites hébergés sur Webflow peuvent être facilement référencés sur le web. Mieux encore, pour les plans premiums, il est possible d’avoir des outils de gestion SEO supplémentaires.
- Toute une panoplie de templates est disponible sur Webflow ; ils pourront servir de base pour les débutants, rendant ainsi plus faciles l’apprentissage et la familiarisation. Pour les plus professionnels, ils seront une source d’inspiration de design ?
- Toujours en termes de design, tu fais d’une pierre deux coups. En effet, tu n’as qu’à réaliser le design sur desktop ; celui sur mobile est créé automatiquement. N’empêche que tu pourras toujours le personnaliser.
- N’oublions pas le point qui démarque particulièrement Webflow des autres outils : il permet un site avec des animations personnalisées.
- Tous les codes qui sont automatiquement créés lors de la conception du site peuvent être exportés.
- Webflow est très pratique. Une fois le site terminé, tu es en mesure de le tester pour voir s’il fonctionne réellement. Pour cela, il n’y a qu’à le publier sur le sous-domaine. Cela se fait en deux clics maximum.
- Avec Webflow, tu peux créer toutes sortes de choses, allant des contenus statiques aux dynamiques : pages, articles de blog, avis, présentation de membres d’une équipe, etc.
- L’hébergement de tous les sites créés sur Webflow est assuré par Amazon Cloudfront. Sois sûr que la navigation sur ton site se fera rapidement, ce qui a un impact positif sur le SEO.
Et toi ? Devrais-tu utiliser Webflow à ton avis ?
Compte tenu de tout ce qu’on vient de voir sur Webflow, il est fait pour tous créateurs de site qui veulent allier flexibilité et efficacité. En effet, grâce à Webflow, tu peux non seulement créer un site design, mais tu peux aussi gérer des contenus facilement. L’hébergement étant gratuit et interne, il te donne beaucoup d’avantages. Les internautes qui te suivront tireront aussi leur profit. Enfin, la version e-commerce de Webflow est tout simplement géniale ! Les fonctionnalités sont complètes (ou presque). En tout cas, l’équipe ne cesse de l’améliorer de jour en jour.
Pour prendre goût à ce que Webflow propose, que dis-tu de l’essayer par toi-même. En effet, un essai gratuit est possible.
Quels sont les avantages d’utiliser Webflow par rapport aux autres ?
Son premier atout réside dans le fait qu'il est intuitif.
C'est ce que son interface familière pour les graphistes prouve : un look Photoshop qui permet de créer un Site Web. Si tu as déjà eu l’occasion d’utiliser Photoshop tu vas vite pouvoir t’y retrouver.
Webflow est donc un outil Pro pour les Web designer (ou en devenir) car il permet de faire à peut près tout ce que tu veux. Il ne faut par contre pas le confondre avec des outils glisser-déposer comme Wix ou encore Sketch, Adobe xD ou Figma.
Webflow c’est du code html, css et Javascript créé de manière visuelle avec les contraintes du vrai “Code”; Mais beaucoup plus agréable car il est 100% visuelle.
Pas besoin donc d’écrire des lignes de code pour créer un Site Web Pro.
Quel est le niveau de personnalisation de Webflow ?
Créer un site avec webflow, c'est créer un site sur-mesure. Il est effectivement doté de plusieurs fonctionnalités qui permettent l'obtention d'un site original et surtout, 100% adapté aux attentes de tes clients !
Pour mener quelques modifications sur l'architecture du site, tu n’as qu'à cliquer sur les éléments concernés. D'autant plus que de nombreux formats, styles, couleurs, polices, etc. sont de base disponible sur Webflow.
La personnalisation est infinie car tu vas créer une structure à partir d’un dessin que tu auras réalisé sur Sketch, Adobe xD, Figma ou dans un simple cahier.
Encore une fois, la connaissance du code n'est pas requise.
Quel est le gain de temps pour la création d’un Site Web Webflow ?
Une chose entraîne une autre : facilité d'utilisation est donc synonyme de gain de temps sans pareil ! Une fois que tu as la plateforme en mains, tout devient très vite intuitif et te permettra de gagner un temps fou.
Une page Web sur Webflow peut être réalisé en 1 heures selon tes compétences et le design à réaliser.
Si tu préfères démarrer à partir d’un Thème, Webflow propose un large catalogue de Thème prêt à l’emploi
De plus, si tu fais partie de ceux qui savent coder, tu pourra y ajouter du code manuellement cette fois pour aller au delà des fonctionnalités de base de Webflow.
Quels sont les intégrations Webflow ?
Je pourrais écrire un article complet pour ce point-là, ce qui sera le cas d’ici peu ! Il va sans dire que Webflow est super connecté à tous les logiciels moderne actuelle.
Ca veut donc dire que tu peux intégrer quasi n’importe quel outil et logiciel No code.
Une méthode simple est par exemple d’utiliser Zapier pour connecter Webflow à un autre logiciel sans devoir écrire une ligne de code.
Comment se passe la mise en ligne d’un Site Web Webflow ?
Comme Webflow se charge de la partie hébergement, il y a plus qu’à connecter ton nom de domaine à la plateforme. Cette procédure n’est pas compliqué et ne dure que quelques minutes.
Il se peut que la première fois ce soit un peut plus compliqué que prévu, c’est pourquoi voici un petit récap pour la manoeuvre:
1- Copier les 2 A record que Webflow te donner dans les paramètres
2- Les coller dans la partie DNS de ton hébergeur.
3- Ensuite Copier le CNAME que te donne Webflow
4- Et puis le coller également dans la partie DNS de ton hébergeur.
Ensuite il faut patienter parfois 1h, ça dépend de ton hébergeur.
Une fois que tu côté Webflow tout passe au vert, il ne reste plus qu’à publier.
La collaboration en équipe sur Webflow
La collaboration sur Webflow est également possible. Imaginons que tu veux travailler avec un coéquipier sur le même projet en même, c’est possible.
Il faut pour cela prendre la formule “Team Plan” qui aura un plan tarifaire séparé du plan Solo et le montant sera alors majoré en fonction du nombre de coéquipier
Ce qui est vraiment pratique, c’est que la sauvegarde se fait automatiquement, ça veut donc dire qu’il n’y a aucune risque de perdre des données.
La Communauté francophone grandissante (et le groupe Webflow entraide)
Si tu veux commencer sur Webflow, tu vas probablement avoir besoin d’aide surtout au début. C’est la raison pour laquelle tu peux adhérer au groupe privé Facebook “Webflow entraide” pour discuter et partager ton expérience.
Il y a toujours quelqu’un pour répondre à tes demandes (dont moi aussi) et c’est donc un bon moyen pour commencer l’aventure.
Conclusion
Finalement, tout ce dont tu as besoin est d’une bonne volonté d’y arriver et une dose de motivation pour lire et analyser ce guide complet :)
Et je peux aussi t’affirmer que depuis toutes ces années où j’ai utilisé Webflow, il est de plus en plus facile. Non seulement les fonctionnalités se complètent au fur et à mesure, mais elles sont super intuitives.
Tout cela t’aidera à créer des sites professionnels, personnalisés et uniques en leur genre, pour toi ou tes clients, que tu travailles seul ou en équipes.
