Webflow, le CMS du Designer en 2020 ?

‍

‍

Aujourd’hui, Ophélie, jeune designer freelance de la communauté de Talents dgitags.io et formée à l’HETIC nous donne son avis sur Webflow, le CMS de nouvelle génération, qui permet aux utilisateurs de créer et de lancer rapidement des sites Web. Encore peu connu à ce jour en France, cet outil a tous les atouts pour séduire, et peut-être même devenir le CMS favori des designers en 2020 et beaucoup d'entrepreneurs français, freelances ou non. Ophélie accompagne ses clients en freelance en design, en stratégies de webmarketing et en création de site internet.

‍

‍

‍

‍

Webflow est un CMS fondé en 2013 en Californie par trois frères passionnés par la technologie et l’internet,  Sergie Magdalin, Vlad Magdalin et Bryant Cho, et pionniers du mouvement “No Code”.

Contrairement aux plateformes comme Weebly, Wox, ou encore Shopify, Workflow permet à ses utilisateurs de construire un site Web très simplement, sans avoir besoin de connaissances préalables en code. C’est un outil pensé et conçu pour webdesigners, qu’ils soient débutants ou experts.

La promesse de Webflow ? : Design.Build.Launch. 

‍

C'est tout..

‍

‍

‍

‍

Je m'appelle Ophélie, je suis une jeune web designer depuis maintenant 2 ans, et après avoir beaucoup utilisé Wordpress et d’autres CMS, je cherchais une manière plus intuitive de concevoir et d'exprimer ma créativité en ligne.  Il y a quelques mois, j’ai découvert Webflow dont je suis suis totalement tombée amoureuse ! 

Webflow est un outil très simple d’utilisation. Même si vous n'avez aucune expérience pratique en développement Web, vous pouvez facilement en comprendre et maîtriser les fonctions de base. Je ne suis pas encore tout à fait une développeuse, mais utiliser un logiciel comme Webflow me permet de rester créative tout en produisant des sites web parfaitement fonctionnels. 

Le code est propre et exportable, et les sites sont réactifs avec la possibilité de gérer, ré-organiser, et enregistrer le contenu pour chaque type d’appareils, le tout, en live. 

‍

Un Gain de temps très important

La majorité des équipes produits cherchent à minimiser le temps nécessaire pour passer de l'idée à un produit prêt à l'emploi, sans en sacrifier la qualité de la conception en cours de route. Webflow permet de répondre en grande partie à cette problématique. Grâce à cet outil, je peux créer des concepts de sites Web vitrines entiers, ou des landings pages performantes en seulement quelques jours, et ce, sans recourir à un développeur.
C’est donc un réel gain de temps et d’argent, autant pour mes clients que pour moi-même. 

Souvent les designers aiment créer de beaux effets dans les prototypes que les développeurs auront du mal à les reproduire dans le code. Avec Webflow, j’ai pu éviter un cycle supplémentaire avec ces derniers, et commencer à créer moi-même des interactions complexes (en particulier les transitions animées, du parallax).

Webflow tente de simplifier le processus de conception Web en vous permettant de concevoir et de développer en même temps.

De nombreuses ressources pour vous former 

‍

‍

Certes moins intuitif d’utilisation au premier abord que ses concurrents, Webflow dispose cependant de tutoriels, disponibles dans “La Webflow University”, qui sont faciles à suivre et à comprendre. 

L’outil étant encore peu connu en France, ces formations sont pour l’instant seulement en anglais. 

Comme la plupart des autres constructeurs de sites Web, il existe des centaines de modèles conçus par des professionnels parmi lesquels vous pouvez choisir. Même si en tant que Designer, nous créerons entièrement notre Design, cela reste intéressant de voir quelles sont les possibilités qu’offrent ce CMS. 

En plus de tutoriels, Webflow propose aussi des Uses Cases et des vidéos pour se former.

Par ailleurs, comme vous pouvez le voir ci-dessous, Webflow permet également de créer des blogs et des sites e-commerce, et offre donc les mêmes fonctionnalités que Shopify, par exemple. 

Pour aller plus loin sur la partie e-commerce, je vous laisse le lien de la page Webflow. 

Le Responsive et l’ajout de contenu ultra simplifié 

Depuis son interface de conception , Webflow permet au Designer de visualiser et de modifier en live le rendu de son site sur un grand écran, un ordinateur portable, une tablette ou un mobile tout en basculant d’un mode à un autre très facilement. 

‍

‍

‍

Webflow affirme que l'ajout de contenu est aussi simple que de remplir un formulaire, et chaque fois que vous êtes prêt à publier vos modifications, vous pouvez le faire en un seul clic. Grâce à l’aperçu en direct, sur un environnement de pré prod inclu sur la plateforme, vous ne verrez aucune surprise une fois votre contenu publié.

Vous pouvez également collaborer avec vos collègues sur tout ce que vous créez, et l'historique détaillé des versions permet de voir et suivre toutes vos modifications. 

De plus, ce que j’apprécie est de pouvoir également héberger un site sur Webflow. 

‍

‍

Pauline, Designer UX UI, actuellement en mission pour dgitags.io au sein d'un Grand Compte, nous donne son avis :

‍

‍

J'ai découvert Webflow récemment. L'interface est intuitive, l'outil permet d'avoir un aperçu en temps réel des maquettes en responsive. Une large possibilité d'animations et d'interactions, délivrant un code source de qualité. Code source généré grâce à la gestion des données, intégrée à la phase de réalisation des maquettes. Une approche intéressante pour la création de portfolio et sites informatifs avec des attentes en terme d'intégrations et de rendu graphique, mais à mon sens moins adapté pour la mise en place de sites beaucoup plus conséquents, type plateforme complexe. Mais cela répond déjà à la plupart des usages actuels.

‍

Vos Tools SEO directement inclus 

‍

‍

Le référencement (SEO) est un des sujets les plus évoqués dans les avis sur Webflow - c’est une partie cruciale dans un constructeur de sites Web, et je trouve qu’ils l’ont plutôt simplifiée. Le but du référencement est de générer du trafic vers votre site via des mots clés spécifiques, d'où l’importance de ne pas le négliger. 

‍

L’outil vous permet de personnaliser, pour chaque page, la balise Title et la Meta Description sans avoir à installer de plugin supplémentaire (contrairement à Wordpress). Vous pouvez aussi, pour chaque image, renseigner la balise ALT directement depuis l’interface. De plus, Webflow génère automatiquement le sitemap du site.

‍

Le code, de ce que j’ai pu voir, est très propre, ce qui a un impact positif sur le référencement. De même, le temps de chargement des pages est rapide. 

Si le référencement est important pour vous, je pense que vous allez apprécier Webflow. 

‍

Déroutant pour un non designer

‍

‍

Là où Webflow se différencie de la plupart des CMS, c’est qu’il s’adresse principalement à des designers.

Pour les non professionnels et débutants, l'interface sera sûrement plus difficile d’accès par rapport à d’autres logiciels tels que Wix, Weebly voir Shopify. Mais comme mentionné précédemment, Webflow permet une courbe d'apprentissage rapide grâce à leurs ressources de formation. 

En résumé, Webflow reste un outil professionnel de design, comme sketch.

C’est un outil pensé par et pour des Designer. Mieux encore, si vous avez des connaissances en développement, vous en tirez encore plus d'atout. Diarmuid, notre expert maison, vous en parlera en conclusion de cet article.

Le principal bémol : des plans de tarifications pas assez clairs

‍

C’est le plus gros problème que je rencontre avec Webflow. Je trouve que la structure de prix prête à confusion, avec différents plans pour les sites et les comptes.

Webflow comporte deux niveaux de tarification : les plans de compte et les plans de site.

Les plans de compte : déterminent le nombre de personnes de votre équipe pouvant utiliser Webflow, et le nombre de projets.

Les plans de site : débloquent des capacités de trafic et de commerce électronique plus élevées. Par exemple, si vous souhaitez héberger, créer, ou gérer 3 sites Web, vous aurez besoin d'un plan de compte, et 3 plans de site.

Je n’ai pas encore entièrement compris toutes ces fonctionnalités, et il m’est parfois difficile de m’y retrouver dans ce qui est nécessaire. A priori je ne suis pas la seule :)

Webflow, l’allié de vos équipes Design et Marketing 

S’il reste un logiciel professionnel à utiliser par des personnes formées, Webflow constitue néanmoins un excellent outil pour créer des prototypes de haute qualité.
Vos utilisateurs pourront directement manipuler votre prototype, sans avoir besoin d’imaginer comment le produit fini se comportera. Ils pourront ainsi le découvrir quasiment instantanément ! 

L'outil simplifie la transition d'un prototype vers une interface utilisateur finalisée, car vous concevez des produits avec du vrai code, au lieu de créer des maquettes cliquables dans  tout autre outil de prototypage comme Sketch ou Invision. Webflow résout ce problème pour vous, ce qui est un réel atout pour une équipe Design.
Certes, il ne doit pas remplacer tout le reste, mais c’est un vraie valeur ajoutée.  

De plus, ne pas devoir solliciter un développeur ou une équipe SI permet à un service Design de gagner beaucoup de temps sur d’autres projets ou prototypes, ou bien lors d’échanges, ou d’ateliers avec le client.

Workflow, c’est aussi l’allié de vos équipes marketing, pour produire et tester rapidement des concepts : c’est le principe du Build & Launch sur lequel repose le CMS. 

Les équipes de dgitags.io utilisent au quotiden cet outil pour leurs projets, en s’appuyant notamment sur des designers qui le maîtrisent davantage, comme Diarmuid, et qui peuvent aller jusqu’à coder et automatiser certaines tâches. 

‍

‍

Diarmuid, le responsable du Studio  NoCode de dgitags.io, m’a donné son avis pour cet article  :

‍

Pour Diarmuid, designer et dévelopeur de formation, Webflow est un game changer notamment grâce à ces API's. 

‍

‍

‍

Webflow is a dream come true for designers, businesses and entrepreneurs. It is the latest and greatest visual design, no-code tool. It allows designers to create production-ready, pixel-perfect, database-driven websites. Designers can follow their natural design instincts and ideas and bring them to life within Webflow - not limited by templates, content management systems or prohibitively expensive developer costs.

For brands looking to create bespoke online experiences and eCommerce stores - it is revolutionary, a game-changer. Businesses are harnessing the power of Webflow to communicate visually exactly who they are and how they can help their customers - without their website feeling like just another Squarespace, Shopify or Wordpress template.

With the “no-code” movement gathering momentum, the power and possibilities of Webflow are advancing rapidly. Webflows API means that it can be integrated with tools such as Zapier to extend its capabilities almost infinitely by automating workflows between apps - from CRMs like Hubspot, databases in Google Sheets and Customer Support from Intercom. All without writing a single line of code. For example, dgitags.io website and platform behind has been created with webflow & zapier.

A recent and exciting newcomer into the no-code world is Memberstack. Built specifically for Webflow, Memberstack allows businesses to enable memberships and accounts on their websites. With zero coding, websites can create user accounts and member-only content - with an option to accept payments and subscriptions.

As Webflow evolves, it continues to create possibilities and opportunities for those positioned and ready to harness its power. 

En conclusion, son avis reflète bien l'intérêt et la puissance d'un tel outil mais pour l'exploiter pleinement il est nécéssaire d'être très bien formé.  Seul on peut faire beaucoup de choses mais une équipe bien formée comme notre studio spécialisé par exemple, peut aller beaucoup plus loin. 

‍

C'est sur son avis que je vous propose de vous laisser. 

Et vous, connaissez vous cet outil ? En avez vous entendu parler ?

N'hésitez pas à nous contacter pour en discuter. 

‍

J'espère que cet article vous aura plu et vous donnera envie d'aller plus loin !

‍

‍

‍

‍