Avantages Webflow pour la conception Web sans code - Une étude de cas

D'innombrables modules complémentaires d'outils de conception ont été conçus pour faciliter la route cahoteuse de la collaboration concepteur-développeur. Pourtant, le flux de travail de conception Web typique continue d'être truffé d'inefficacités et d'étouffer la créativité. Une nouvelle génération d'outils de conception Web visuels sans code promet de libérer les concepteurs des chaînes créatives et de l'ennui du développement Web traditionnel.

De nombreuses plates-formes de développement Web sans code ont récemment atterri dans le paysage du design comme si elles étaient tombées du ciel. Les concepteurs désireux de « briser la barrière du code » sont enfin en mesure de reconnaître la réalité d'un avenir utopique sans code . Si les étoiles s'alignent, il ne sera plus nécessaire de confier les conceptions aux développeurs frontaux avec des spécifications détaillées. Les concepteurs auront la liberté d'organiser visuellement les éléments sur un plan de travail et de cliquer sur "publier" avec un soupir de soulagement.

Avant qu'aucun outil de conception de code n'apparaisse, les concepteurs devaient s'appuyer sur des développeurs frontaux pour tout implémenter. Changer un morceau de texte sur un site Web avec une taille de police différente peut prendre des jours. Même pour un petit site Web de marketing ou une simple page de destination, les concepteurs envoyaient les conceptions, s'asseyaient, croisaient les doigts et priaient pour que tout revienne au pixel près. Le processus était comme regarder la peinture sécher.

Sentant une opportunité, les constructeurs de sites Web "sans code" sont maintenant partout. Certains sont expérimentaux, et certains sont robustes et capables. Pourtant, beaucoup sont encore insuffisants lorsqu'il s'agit d'offrir un contrôle créatif illimité. Presque toutes sont des plates-formes rigides, basées sur des modèles, ciblant les petites et moyennes entreprises.

La plupart des concepteurs professionnels recherchent la possibilité de concevoir et de créer rapidement des sites réactifs, avec un contrôle créatif absolu et sans toucher au code. Ce jour approche peut-être rapidement car le champ de bataille pour la suprématie sans code regorge désormais d'une poignée de prétendants sérieux : Editor X, Bubble, Ceros et Webflow.

Webflow est entré dans la mêlée en 2013 et, au fil des ans, est devenu un produit mature. Lancé en tant que diplômé de l'accélérateur de démarrage de Y Combinator, Webflow espère perturber le paysage de la conception Web sans code et envisage un monde "où tout le monde peut créer des sites Web puissants et flexibles aussi facilement qu'ils créent des documents".

Comment obtenir l'adhésion des parties prenantes

Au fur et à mesure que les concepteurs découvrent les capacités de ces plates-formes, ils se rendent vite compte que les entreprises de toutes tailles peuvent bénéficier de l'adoption d'un outil de conception Web sans code. Les avantages pourraient être importants, en particulier pour les petites équipes aux ressources limitées. Pourtant, il ne suffit pas d'être entiché d'un nouvel outil de conception Web ; les parties prenantes doivent être persuadées d'approuver le changement.

Comment les designers y parviennent-ils ? J'étais designer produit dans une startup B2B avec un seul développeur concentré sur le produit principal. L'entreprise avait besoin d'un site Web marketing, mais ne disposait pas des ressources de développement. Nous étions confrontés à une énigme : comment créer un site Web sans développeur ? Après avoir exploré Webflow et m'y être familiarisé, j'ai réalisé que je pouvais le faire seul .

J'ai passé le week-end à mettre en œuvre des conceptions dans Webflow pour une réunion des parties prenantes lundi. Au cours de la réunion, j'ai décrit les avantages de Webflows et démontré à quel point il est facile de passer de la conception au code, de créer des conceptions réactives et de changer quelque chose rapidement. Concevoir et lancer des pages Web ne prendrait que quelques jours.

J'ai également présenté les capacités CMS de Webflow et la facilité avec laquelle le référencement pouvait être intégré. Ensuite, j'ai exposé les économies de coûts d' un seul concepteur mettant en œuvre tout sans le coût supplémentaire d'engager notre développeur. Ils ont été vendus.

C'était aussi l'occasion de reprendre le contrôle total de la création. Je n'étais plus seulement un designer créant des maquettes dans Sketch et transmettant des conceptions à un développeur. Ce nouveau paradigme m'a transformé en une centrale de développement Web : je pouvais concevoir, construire, tester, peaufiner, incorporer le référencement, tester A/B et publier le site. C'était stimulant et cela m'a donné une voix plus forte dans l'entreprise.

Étude de cas sur la conception de flux Web

Chez Upvest, parallèlement à la conception des produits phares de l'entreprise, j'étais également en charge du branding visuel. Cela comprenait le site Web réactif de l'entreprise, qui devait s'adapter aux mises à jour fréquentes. Upvest était une startup à un stade précoce et le produit évoluait encore. En tant que tel, nous devions créer et tester A / B diverses pages marketing en cours de route. Nous devions également publier des articles de blog à l'aide d'un système CMS et lancer des pages de destination dédiées aux différentes promotions des ventes.

De plus, ce qui a compliqué les choses, c'est que l'entreprise avait fait quelques pivots au cours des premiers jours. Cela est passé de la vente d'une API à la création de portefeuilles blockchain, en passant par l'offre de «tokénisation des actifs» aux sociétés immobilières. Par conséquent, au fur et à mesure que nous avancions, j'ai dû concevoir une variété de pages de destination dans Webflow.

Cliquez pour voir l'image en taille réelle.

Démarrer avec Webflow était relativement simple. Les tutoriels sont fournis par Webflow University. J'ai fait concevoir et construire la première version de notre site Web marketing en quelques jours. L'interface glisser-déposer était simple à utiliser et l'inspection de la conception pour différentes dimensions d'écran n'était qu'à un clic. En travaillant avec Webflow, j'ai également beaucoup appris sur l'assemblage correct des pages avec le modèle de boîte pour des mises en page réactives.

Une fois que tout le monde s'est mis d'accord sur l'image de marque visuelle du site Web, j'ai créé un guide de style dans Webflow que nous pouvions tous suivre. J'ai également mis en place diverses classes et symboles réutilisables pour les constructions de pages suivantes. Les symboles de Webflow fonctionnent de la même manière que les symboles de Sketch et les composants principaux d'Adobe XD. Lorsqu'un symbole est mis à jour, toutes les autres instances de ce composant dans le projet reflètent la mise à jour.

Après le lancement du premier site Web, je devenais de plus en plus à l'aise avec Webflow. Pour suivre diverses métriques, j'ai appris à installer des outils de mesure, tels que Google Tag Manager et Hotjar. La rapidité avec laquelle j'ai pu assembler différents actifs marketing s'est également améliorée. L'entreprise avait besoin de tester un assortiment de mises en page et de contenu au fur et à mesure de l'évolution du produit, et Webflow a permis de modifier les conceptions et de les mettre en ligne rapidement sans avoir à compter sur les développeurs.

Cliquez pour voir l'image en taille réelle.

Étant donné que Webflow fournit un lien de mise en scène pour prévisualiser le site, les parties prenantes peuvent vérifier l'évolution des conceptions et fournir des commentaires immédiats. Une fois les ajustements formalisés, je pouvais apporter des modifications directement dans Webflow - au lieu de revenir à un outil de conception comme Sketch - et publier le site en staging. La sortie est entièrement codée, publiée immédiatement sur le site de staging, prête pour une autre série de révisions. Quand tout allait bien, j'ai publié le site sur le domaine de l'entreprise.

Comme c'est le cas pour de nombreux autres designers, mon outil de conception préféré est Sketch. Une fois prêt, je partagerais les conceptions avec diverses parties prenantes pour examen. Une fois qu'ils les avaient approuvés, j'allais les mettre en œuvre dans Webflow. Au bout d'un moment, je me suis tellement familiarisé avec Webflow que je n'ai plus eu besoin d'utiliser Sketch. Chaque fois qu'il y avait un nouveau projet, j'allais directement dans Webflow. Ce nouveau flux de travail a fait économiser beaucoup de temps et d'argent à la startup à court d'argent. Par exemple, j'ai créé les pages de destination suivantes entièrement dans Webflow pour une campagne marketing visant à générer des prospects.

Pour les besoins de notre blog, j'ai partagé quelques bases de Webflow avec les parties prenantes et leur ai montré comment utiliser son CMS. Une fois qu'ils étaient à l'aise avec cela, ils téléchargeaient eux-mêmes des articles de blog. Profitant de la fonctionnalité CMS Collections de Webflow, j'avais déjà configuré le système; ils avaient juste besoin d'ajouter le contenu des articles et de les faire vivre.

Cliquez pour voir l'image en taille réelle.

Intégrer Webflow dans le processus de conception

L'intégration de Webflow dans un processus de conception est simple. De plus, de nombreuses étapes de conception traditionnelles peuvent être éliminées, en particulier à la fin. Il n'y a pas de transfert de développeur. L'élimination de cette dernière phase à elle seule permet de gagner un temps considérable - plus de "redlining" et de travail sur les spécifications.

Si les concepteurs sont habitués au wireframing, au prototypage et à la conception d'interface utilisateur avec Sketch/XD/Figma, ils se sentiront peut-être plus à l'aise avec ce flux de travail. Cependant, ils peuvent envisager d'aller directement dans Webflow , d'assembler des conceptions et de les tester en direct dans le navigateur avec le lien de mise en scène, en particulier pour les petits projets. Il s'agit d'équilibrer les besoins, car selon la portée, la création de projets dans Webflow peut prendre plus de temps qu'une autre méthode. Pour l'expérimentation de conception, telle que les tests A / B ou les tests multivariés, il peut également être judicieux d'aller directement dans Webflow - concevoir, construire et tester là-bas.

Les concepteurs peuvent démarrer rapidement des projets en choisissant parmi une multitude de modèles de flux Web différents et en les personnalisant. Tous les modèles sont créés à l'aide de Webflow sans écrire de code, et en tant que tels, ils sont entièrement personnalisables avec l'interface de développement visuel de Webflow.

Les composants qui composent une conception peuvent être transformés en symboles Webflow, qui peuvent être réutilisés pour assembler les pages suivantes en quelques minutes. Comme avec Sketch, les concepteurs peuvent configurer des symboles, créer des champs pouvant être liés à chaque composant et ajouter des remplacements de contenu sur chaque instance. Cela signifie que les concepteurs peuvent créer un composant avec un titre, une image et un bloc de texte et le réutiliser sur des pages avec un contenu différent.

Webflow est également un excellent outil pour créer des systèmes de conception. Avec la récente publication de remplacements de contenu pour les symboles, des systèmes de conception complets peuvent être créés pour aider les équipes à créer des conceptions plus rapidement, sans compromettre ni diluer l'identité visuelle ou les valeurs fondamentales de leur marque.

Aucun outil de code ne réduit le temps et l'expertise en codage nécessaires pour traduire une idée en quelque chose que les gens peuvent utiliser. Vous n'avez plus besoin de devenir programmeur pour créer des choses, ce qui permet à une nouvelle vague de créateurs d'horizons et de perspectives différents. Ryan Hoover, fondateur de Product Hunt, dans The Rise of No Code

Les avantages de Webflow pour la conception Web

La création de sites Web réactifs dans Webflow peut être rapide car l'interface intègre de manière transparente l'édition et la prévisualisation sur différents appareils. En un clic, les concepteurs peuvent voir comment les sites seront affichés sur le bureau, la tablette et le mobile, et ils peuvent ajuster les mises en page, les composants et les polices pour chaque écran.

Avantages du flux Web :

• Une chronologie compressée. Un chemin plus rapide de l'idée à la conception, au prototypage et aux MVP.
• Webflow comble le fossé entre la conception et le contenu. Il permet aux rédacteurs, aux éditeurs et aux spécialistes du marketing de mettre à jour instantanément le contenu sur les sites Web.
• Les concepteurs peuvent créer des prototypes basse ou haute fidélité dans Webflow, en ignorant Sketch ou un autre outil de prototypage. Une fois les prototypes testés, ils peuvent être rapidement transformés en produit final et mis en ligne sur le Web.
• Créez, hébergez et gérez plusieurs sites et pages de destination.
• Intégrez des outils de mesure, tels que Hotjar ou Google Tag Manager.
• Abaissez la barrière à l'entrée pour les spécialistes du marketing et les autres personnes non techniques.
• Modification facile du contenu par d'autres directement sur la page via l'éditeur de flux Web.
• Webflow Ecommerce permet une conception et une mise à l'échelle rapides des entreprises en ligne.
• Webflow offre une cohérence et une rapidité de conception avec les modèles d'équipe.
• Les concepteurs peuvent créer des sites avec un contenu réel et utiliser les collections CMS de Webflow, des modèles de contenu que d'autres équipes peuvent utiliser sans compétences techniques.
• Sauvegardes automatiques du site (versioning) et URL de staging.
• Les sites n'ont pas besoin d'être hébergés avec Webflow. Étant donné que tous les sites Web sont codés en HTML, CSS et JavaScript standard, les sites peuvent être exportés et téléchargés sur n'importe quel hôte.
• En quittant Webflow, on peut exporter la base de données pour une utilisation future, ainsi que les fichiers HTML et CSS.

Sommaire

D'innombrables avantages commerciaux peuvent être réalisés en supprimant le code pour le développement Web. S'élevant au-dessus des outils de conception Web de bricolage de qualité inférieure, Webflow fournit une solution convaincante qui convient à la plupart des besoins de conception Web professionnels. La plate-forme continue d'évoluer et d'autres développements passionnants sont en cours.

J'ai conçu et lancé à moi seul un site Web d'entreprise avec Webflow en moins de deux mois. Webflow a fourni une flexibilité sans précédent dans le processus de conception, offrant un contrôle plus créatif sans avoir à se soucier du code. Le flux de travail de conception Web rapide et sans code a permis d'accélérer le lancement et de réduire de moitié les coûts de production par rapport au développement Web traditionnel.

La courbe d'apprentissage n'est pas raide. En quelques semaines, tous les tenants et aboutissants de Webflow peuvent être suffisamment maîtrisés avec des didacticiels, suffisamment pour commencer à créer un site Web à part entière. Une fois que les concepteurs auront appris Webflow, ils ne reviendront peut-être jamais à la méthode traditionnelle de développement Web.

Aucun outil de conception Web de code n'est là pour rester. La valeur et la flexibilité qu'ils offrent sont incontestables. Le mouvement sans code repose sur la conviction fondamentale que la technologie doit permettre et faciliter la création, et non être une barrière à l'entrée. Webflow permet aux concepteurs de concevoir et de créer des produits élaborés en moins de temps. Il aide les concepteurs à suivre le rythme des affaires et ouvre un monde d'opportunités pour ceux qui ne savent pas coder. Il est peut-être temps de monter à bord.

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• L'animation Web à l'ère post-flash
• La simplicité est la clé - Explorer la conception Web minimale
• Conception réactive - Meilleures pratiques et considérations
• Conception Web brutaliste, conception Web minimaliste et l'avenir du Web UX
• Toutes les tendances en valent-elles la peine ? Les 5 erreurs UX les plus courantes commises par les concepteurs Web