Webflow : l’outil no-code pour les UX Designers
En tant que UX Designer, votre objectif est d’offrir la meilleure expérience utilisateur à votre public à travers les éléments visuels, le contenu, la structure et la navigation d’un site web.
Lorsqu’il s’agit de créer un site web, les équipes utilisent différents outils: un outil pour les éléments graphiques et la conception visuelle, un autre pour le prototypage et un autre pour le codage.
Mettre en place l’interface de sa plateforme web tout en prenant en compte les besoins des utilisateurs n’est pas chose facile, c’est pour cela que Webflow est un outil qui tente de simplifier le processus de conception web en vous permettant de concevoir et de développer en même temps ( sans l’obligation d’être développeur ou de savoir coder).
Dans cet article, découvrez pourquoi Webflow pourrait être une excellente solution pour votre entreprise.
Qu’est-ce que Webflow ?
Webflow fût commercialisé en 2013, et a évolué au fil des années. Il a pour objectif de normaliser la conception web sans code et envisage un monde où tout le monde est libre de créer des sites web puissants et flexibles de manière facile.
Tout comme WordPress et SquareSpace, Webflow sert à créer des sites web no-code.
Webflow vous offre l’opportunité de concevoir, de créer et de lancer des sites web réactifs de manière visuelle. Il s’agit essentiellement d’une plateforme de conception tout-en-un que vous pouvez utiliser pour passer d’une idée initiale à un produit final.
En d’autres termes, cette interface reprend les principes fondamentaux du code et les traduit en solutions simples de type glisser-déposer, ce qui permet aux créateurs de concevoir des applications et des sites web modernes de manière visuelle.
Webflow est donc un outil “no code” c’est-à-dire un outil de développement web qui permet aux non-programmeurs de créer des logiciels à l’aide d’une interface utilisateur graphique, au lieu de coder.
5 éléments qui rendent Webflow attractif
La conception et l’édition
Webflow est une interface un peu comme Photoshop, elle vous permet de générer de façon automatique du balisage sémantique en faisant “glisser et déposer” des éléments HTML sur un canevas et en déterminant des propriétés CSS.
À l’opposé d’autres outils, Webflow exporte un code conformément aux normes W3C pouvant être utilisé tel quel ou transmis à des développeurs pour une personnalisation plus détaillée.
L’interface est certes complexe, notamment pour des personnes n’ayant aucune connaissance préalable du développement de base mais il est toujours possible d’apprendre grâce à Webflow University, un site mettant à disposition des tutoriels.
Consultez leur chaîne youtube pour en savoir plus.
Le système de gestion du contenu (CMS)
L’autre caractéristique clé de Webflow est son système de gestion de contenu (CMS) qui est entièrement intégré à la plateforme. Le CMS de Webflow permet de rationaliser encore plus le développement des sites Web et des blogs en adoptant une approche “content first” (le contenu d’abord), ce qui permet de combler le fossé entre la conception et le contenu.
Le CMS sur Webflow est décrit comme “le premier système de gestion de contenu visuel au monde”. Il permet aux concepteurs de définir une structure, un style et de créer un contenu dynamique sans avoir à penser aux plugins, au PHP ou aux bases de données. Il peut donc être créé manuellement, importé à partir d’un fichier CSV ou être ajouté via l’API CMS de Webflow.
L’avantage de cet outil est que vous pouvez créer des collections et des modèles réutilisables. Par exemple, votre site web peut présenter des collections d’articles de blog ou de produits, de catégories, etc. En fait, Webflow c’est comme avoir tous les avantages de l’utilisation d’une base de données mais sans avoir à gérer une base de données vous-même et ça c’est pas plutôt pas mal.
Nous allons illustrer l’efficacité du CMS de Webflow par un exemple :
Supposons que vous avez une pâtisserie spécialisée dans les cheesecakes et que vous proposez actuellement quatre saveurs différentes. Sur votre site web, vous avez la page de présentation de votre pâtisserie, puis une page dédiée à chaque cheesecake d’une saveur différente.
Une fois avoir conçu le CMS, la page de présentation et les autres pages, vous souhaitez ajouter deux autres pages car vous avez deux nouvelles saveurs. Avec le CMS de Webflow, c’est très simple. Il vous suffit d’ajouter votre texte et vos images et de les appliquer à votre CMS. Votre page de présentation est alors mise à jour et les deux nouvelles pages présentant les nouvelles saveurs de vos cheesecakes sont automatiquement créées.
Interactions 2.0
Interactions 2.0 permet aux concepteurs de créer des transitions CSS personnalisables et des animations JavaScript.
La création d’interactions Webflow est beaucoup plus facile que l’écriture d’animations JavaScript personnalisées.
Le déploiement et l’hébergement
C’est Amazon Web Services (AWS), la plateforme de cloud computing qui assure l’hébergement de Webflow, ce qui fait que les chargements des pages sont très rapides et que vous n’avez pas à penser à une possible maintenance du serveur ou une mise à jour de PHP.
La totalité des plans d’hébergement sont dotés de certificats SSL gratuits, conformes HTTP/2, du contrôle des formulaires, de la recherche de sites, d’une protection par mot de passe, d’un plan de site et de sauvegardes automatiques.
L’avantage de l’hébergement chez Webflow est que vous n’avez pas besoin d’exporter le code lors des mises à jour. Avec certaines plateformes, vous devez en fait exporter le code et faire héberger le code du site ailleurs. Avec Webflow, il n’y a pas besoin d’exporter le code.
Si vous souhaitez mettre à jour votre site web, Webflow est une excellente option pour vous.
Mais cela a un prix, en effet il existe plusieurs offres par mois : Le plan d’hébergement “Basic” coûte 15 $, soit environ 13 euros par mois et comprend la majorité des fonctionnalités. Mais pour utiliser Webflow CMS, il faut compter 20 $ par mois, environ 18 euros.
Le E-Commerce
Disponible depuis Novembre dernier, le E-commerce de Webflow permet une personnalisation totale des composants visuels comme une boutique en ligne lambda.
Les options proposées sont :
- des pages de produits
- des galeries et des pages de catégories
- des paniers d’achat
- des pages de paiement.
Avec Webflow, vous ne serez pas limité à une structure prédéfinie.
De plus, vous aurez aussi la possibilité de gérer des fonctions administratives complexes comme le calcul des taxes et la gestion des stocks et des commandes.
Étant encore en version bêta, Webflow E-commerce ne dispose pas encore de certaines fonctionnalités de base que l’on pourrait attendre d’une solution de E-commerce.
Pourquoi choisir Webflow en tant que UX Designer plutôt qu’une autre plateforme ?
Pour sa simplicité
Webflow présente de nombreux aspects qui constituent une plateforme plus avantageuse pour développer votre site web. À commencer par la simplicité. Disposer d’une plateforme simple qui permet même aux développeurs moins expérimentés de créer un site web avec une connaissance minimale du codage est un plus.
L’outil simplifie la transition d’un prototype à une interface utilisateur entièrement finie, car vous concevez des produits avec du codage réel, par opposition à la création de maquettes cliquables dans Sketch ou tout autre outil de prototypage. Vous ne perdrez pas de temps à utiliser un logiciel pour créer des prototypes et un autre pour transformer ces prototypes en produits réels. Webflow le fait pour vous.
Pour ses fonctionnalités
On sait aujourd’hui que la majorité du trafic web provient d’appareils mobiles. Il est donc crucial d’avoir un site web responsive.
Webflow permet non seulement de créer facilement un site mobile, mais vous pouvez également créer une vue personnalisée pour les tablettes et les écrans surdimensionnés. Cela signifie que, quelle que soit la façon dont vos clients découvrent votre entreprise, vous pouvez leur offrir une expérience étonnante qui s’adapte à leurs appareils.
Vous pouvez donc basculer entre les différentes tailles d’appareils et ajuster vos conceptions comme si vous étiez dans un fichier Photoshop. Sauf que cette fois, au lieu d’enregistrer et d’exporter un tas de fichiers pour réaliser un prototype, vous publiez un projet et il répond déjà à la taille de votre navigateur d’un simple clic.
De plus, il vous permet de réutiliser les classes CSS: Une fois avoir défini une classe, vous pouvez l’utiliser pour tous les éléments qui doivent avoir le même style ou l’utiliser comme point de départ pour une variation (classe de base).
Parce qu’un UX designer n’est pas un développeur
Être UX Designer c’est être responsable de l’ensemble du système qui permet les expériences des utilisateurs et c’est donc posséder un ensemble de compétences diverses.
Dans l’ensemble, la compétence essentielle d’un UX Designer est la capacité de percevoir et d’analyser les objectifs d’un utilisateur par la recherche et l’empathie, ce qui lui permet de concevoir un système qui permet à l’utilisateur d’atteindre ses objectifs.
Webflow accélère le développement d’un site web car il permet de réaliser simultanément le prototypage et le développement. Le fait d’avoir cette fonctionnalité est certainement quelque chose qui va non seulement aider à la livraison du site web au client, mais aussi à la confiance qu’il va avoir en vous pour effectuer le travail rapidement, intelligemment, avec une haute qualité, et selon ses spécifications et ses visions.
Webflow est une plateforme visuelle, qui permet au concepteur de faire ce qu’il fait de mieux c’est à dire concevoir. Souvent, les concepteurs remettent leurs prototypes et attendent que les développeurs codent. Aujourd’hui, un concepteur peut confortablement construire des sites web complexes avec les outils familiers de la plate-forme Webflow.
Tout cela contribue à réduire l’écart entre le concepteur et l’équipe de développement et donc offrir un meilleur service.
En résumé, grâce à Webflow, vous allez pouvoir fournir vos prototypes plus rapidement aux clients et leur offrir une expérience complète puisqu’ils n’auront pas besoin d’imaginer comment le produit final sera.
Ce que les UX Designers doivent savoir avant d'utiliser Webflow
En tant que UX Designer et si vous souhaitez utiliser Webflow, il est nécessaire d’avoir des connaissances sur CSS et HTML. Comme nous l’avons mentionné un peu plus haut, grâce à Webflow vous n’avez pas besoin de savoir comment coder mais il est conseillé d’avoir quelques bases quand même.
Ce sont donc les bases que vous devez connaître pour élaborer un site avec Webflow. Si vous souhaitez créer des sites web plus sophistiqués avec des éléments tels que des animations et des modèles 3D, il est préférable d’en apprendre davantage à ce sujet.
Vous n’avez pas besoin de connaître le codage, mais vous devez savoir pourquoi vous faites ce que vous faites. Dans le cas où vous rencontrez des problèmes lors de la conception de votre site web vous aurez alors les connaissances nécessaires pour les résoudre.
Mot de la fin
Webflow facilite les besoins professionnels en termes de conception et de développement de sites web complets et performants, sans avoir besoin d’apprendre à coder ou de faire appel à des développeurs.
Malgré une interface d’animation peu intuitive et une fonctionnalité de E-commerce limitée, il s’agit de la meilleure plateforme de conception actuellement sur le marché.
Webflow démontre qu’un site web complexe peut être construit de manière très simple.
Cette plateforme permet aux UX Designers de mettre en œuvre leurs idées et de les transmettre plus facilement aux autres équipes, ce qui réduit également les délais d’exécution.
Le mouvement no-code repose sur la conviction fondamentale que la technologie doit permettre et faciliter la création, et non constituer un obstacle. Webflow permet de concevoir et de réaliser des produits élaborés en un temps moindre. Il ouvre un monde d’opportunités pour les personnes qui ne savent pas coder.
Aujourd’hui la plateforme ne cesse d’évoluer. Que vous soyez un UX Designer professionnel ou un amateur en quête d’une solution plus puissante et plus personnalisable, Webflow est fait pour vous.
by 
