Comment développer avec productivité sur Webflow ?

La façon dont j'organise mon temps a un impact direct sur la vitesse à laquelle je vais développer mes projets Webflow.

Pour un site web équivalent en termes d'animations, taille du cms et nombre de pages, le temps passé à le développer peut varier jusqu'à un coefficient 2.

Ce résultat est le facteur de :

1. La qualité de la préparation (en amont) de la maquette
2. Ma concentration lors du développement
3. Les ressources déjà créées disponibles sur le web
4. Les difficultés que je vais rencontrer (les ai-je déjà connues ou pas ?)

Voici, à date, la méthode (qui évolue encore quotidiennement) que je trouve la plus efficace, pour développer, vites et bien, mes sites webflow.

Une bonne préparation de projet

Comme dans le sport, une bonne préparation est un avantage considérable.

Pour développer un site avec l'outil no-code webflow, c'est pareil. Il est essentiel de bien préparer son développement.

Suivre ces étapes, vous fera gagner du temps  :

1. Vérifier avec le designer que l'ensemble des éléments de la maquette soient complétés (design system, style guide, visuels, iconographie, etc..)
2. Télécharger l'ensemble des polices et des visuels dont j'aurai besoin pour la création de mon site
3. Cloner le style guide client-first de Finsweet
4. Importer l'ensemble des visuels, l'iconographie et les polices aux formats adaptés
5. Personnaliser le style guide avec la charte graphique du client (bouton, couleurs, text, etc...)
6. Créer les éléments globaux et les transformer en symbols (barre de navigation, footer, sections call to action, etc...)
7. Créer les collections et leurs champs
8. Remplir les collections de quelques exemples

Une fois ces 8 étapes réalisées le plus dur est passé (normalement 😅). Vous avez maintenant une bonne base pour développer le design et créer avec l' outil no-code Webflow.

Améliorer votre concentration !

C'est le levier le plus important pour développer plus rapidement. Il faut que je sois concentré.

Loi de Carlson : comment améliorer ma productivité ?

Pour créer un terrain favorable à la concentration dans un monde de distractions et être dans le fameux et recherché état de « flow », je choisis des heures stratégiques, généralement le matin, où je coupe :

• l'ensemble de mes notifications sonores (slack, téléphones, mails, réseaux...),
• n'est pas mon téléphone sur moi : il y a une vrai différence quand le téléphone n'est pas accessible à porté de main (⚠️ pour que cette méthode soit efficace, il faut que l'accès à votre téléphone demande un effort d'au moins 20 secondes),
• n'accepte ni call ni réunion sur ces plages horaires,
• ne regarde surtout pas mes mails,
• lance et laisse défiler une playlist de musique dans mes airpods...

Et je laisse la magie opérer. Si nécessaire, je prends le temps de faire une pause café, puis je me remets au travail sur mon projet.

Limiter la multiplicité de projets en simultanés

Si vous n'avez pas travaillé sur ce projet webflow depuis un certain temps, vous avez besoin de quelques minutes voir quelques heures pour vous replonger dans la structure de ce site.

J'essaie donc de limiter le nombre de sauts entre les différents projets webflow sur lesquels je travaille. Parce que lorsque je travaille simultanément sur seulement, un ou deux projets, j'ai en mémoire toutes les informations des éléments globaux tels que mes ;

• Symbols
• Nomination de vos classes CSS
• Nomination de vos champs dynamiques CMS

Et machinalement, je développe avec automatisme et productivité.

PRO TIPS : bien sûr, le temps de ré-adaptation d'un projet webflow est réduit si vous utilisez la méthodologie Client-First pour créer vos sites web.

Les ressources qui améliorent la productivité sur Webflow

1. Extensions Chrome à utiliser

J'utilise 2 extensions chromes qui débloquent des fonctionnalités qui m'aident à gagner du temps !

• Finsweet chrome extension
• Flowbase extension

En savoir plus en regardant cette vidéo

2. Ne créez pas de zéro : Gagnez du temps avec les components

Arrêtez de construire "from scratch".

Comment ? Grâce à la fonctionnalité magique du copier/coller. De nombreuses bibliothèques vous permettent désormais d'utiliser des éléments préconstruits. Ces librairies sont très utiles pour transformer rapidement vos maquettes Figma en site Webflow, en un temps record !

Voici quelques-unes des librairies les plus connues ;

• Flowbase
• Relume library (recommandée par Digidop ✅)
• Finsweet client-first wireframe (recommandée par Digidop ✅)

Apprendre à créer des components dans Webflow

Aide de la communauté no-code

Il arrive de rester bloqué. Une section, une animation... Ce blocage peut durer 10 minutes ou bien 3 jours. Si je devais vous partager un seul conseil :

N'ayez pas peur de demander de l'aide !

Comme vous, on a tous été dans cette situation sur Webflow. Et la communauté s'en rappelle et vous aidera. C'est ce que j'appelle le no-code spirit.

Better call Thibz

Si vous êtes dans une agence, n'hésitez pas à demander de l'aide à votre équipe. C'est perso, mon premier réflexe lorsque j'ai une question.

"Hey Thibz, t'as une idée ? 👋"

(1+1 = 3.... et en bonus ça crée des bons souvenirs. N'est-ce pas Thibz ? )

Demander de l'aide à Thibaut sur linkedin

Demander de l'aide à Flo sur Linkedin

Les channels Slack (webflow, no-code ...)

Il y a de nombreux channels slacks avec un contenu de qualité

Découvrez dans cet article ma sélection de channels slacks pour trouver de l'aide sur Webflow

Last, but not least

Pour finir, avant de lancer en ligne son nouveau projet Webflow je suis la checklist SEO webflow de Digidop, pour être sur de n'avoir raté aucun point avant le rendu final !

Et la suite ... ?

J'espère que cet article va, ou vous a, aidé à trouver votre méthode de travail sur l'outil webflow !

Si vous avez des tips, qui peuvent m'aider à améliorer ma méthode, j'adorerais les connaître ! N'hésitez pas à m'envoyer un message sur Linkedin. Je suis toujours à la recherche de nouvelles méthodes de travail.

Sinon, vous pouvez retrouver plus d'astuces sur Webflow, en suivant notre chaîne Youtube !

À bientôt !