Les coulisses du développement du nouveau site Webflow de Digidop

Dans cet article, plongez dans les coulisses du développement du nouveau site Webflow de Digidop. Nous vous dévoilons comment notre équipe a relevé le défi de développer une architecture web complexe et évolutive, comprenant :

• Plus de 60 pages statiques,
• Plus de 25 collections CMS webflow,
• Plus de 30 components !

1. Présentation du projet

Thibaut et moi avons collaboré en suivant un processus structuré pour mener à bien ce travail de développement en tirant parti du plan workspace de Webflow.

A. Les objectifs du nouveau site Webflow de Digidop

• Développer l'ensemble du site en Client-First V2
• Créer une plateforme centralisant l'ensemble des contenus Digidop sur notre site web
• Donner vie à la nouvelle direction artistique de Digidop
• Créer une plateforme évolutive, facilement administrable par l'ensemble de l'équipe Digidop depuis le mode éditeur de Webflow
• Un site respectant toutes les meilleures pratiques web (SEO, accessibilité, temps de chargement, etc.)
• Un site multilingue Français - Anglais
• Un site responsive adapté à tous les appareils (tablette & mobile)

B. Les défis et les enjeux

Avec plus de 60 pages statiques, 25 collections CMS et 30 composants, le fichier Figma était bien... 💪. Les challenges de cette passation Figma to Webflow était :

• Reproduire fidèlement (pixel - perfect) la maquette Figma sur Webflow
• Utiliser une nomenclature de nomination des classes CSS (Client-First) pour créer un site web facilement compréhensible par Thibaut et moi
• Développer un maximum de sections en collection CMS pour faciliter la création de contenu par l'équipe Digidop !
• Travailler à deux développeurs en simultané, souvent sur les mêmes créneaux horaire
• Respecter une date de publication fixée à un mois et demi : le 19.04.2023

2. Le processus de développement

No-code ou pas, pour développer un site web de cette taille, il n'y a pas de secret : il faut un processus bien défini.

A. La répartition des tâches pour le développement webflow

Pour assurer une progression efficace et ordonnée du projet, nous avons commencé par répartir les tâches (pages/sections) à développer entre Thibaut et moi.

Nous avons utilisé Figma comme plateforme principale pour suivre l'avancée du projet et du développement, où nous avions attribué des toggles "Work in Progress" sur les pages et les éléments de design propre à chacun.

Aussi, nous sommes restés en communication permanente pour discuter de l'état d'avancement du projet, résoudre les problèmes éventuels et ajuster notre planification si nécessaire.

B. Travailler avec le maximum de components !

L'utilisation de composants a été un aspect essentiel du développement de notre site Webflow, qui compte plus de 80 pages. Les composants nous ont permis de créer des éléments facilement réutilisables pour le site.

En utilisant un maximum de composants, nous avons pu :

1. Assurer la cohérence du design : Les composants nous ont aidés à maintenir une apparence et un style uniformes sur l'ensemble du site, tout en garantissant que les modifications apportées à un composant se répercutent sur toutes les instances de ce composant.
2. Réduire le temps de développement : En créant des composants réutilisables, nous avons pu réduire considérablement le temps nécessaire pour concevoir et développer des pages et des fonctionnalités similaires. Cela a également facilité la maintenance et la mise à jour du site à long terme.
3. Faciliter la collaboration : Les composants ont rendu la collaboration entre Thibaut et moi plus simple et plus fluide, car nous pouvions facilement partager et réutiliser des éléments de design sans avoir à les recréer à chaque fois.

Vous l'avez compris, les components (ex symbols webflow) ont grandement simplifié le processus de développement de notre site web et optimiser la qualité de notre travail.

⚠️ Il est important de bien nommer vos components pour pouvoir les réutiliser rapidement si besoin, surtout lorsque vous développez un site en équipe.3. Retour d'expérience et leçons tirées

A. Les réussites et les points d'amélioration

Travailler à deux sur le développement du site Webflow de Digidop a souligné des réussites et des points d'amélioration (sur le point de vue technique des plans workspace de Webflow) :

Réussites :

• Collaboration efficace : Nous avons réussi à communiquer et à collaborer efficacement sur un développement d'ampleur, ce qui a permis d'accélérer notre rythme de travail, tout en ayant un résultat conforme à la Digicalidad.
• Gestion du temps : Nous avons respecté le délai d'un mois et demi pour le développement du site, ce qui montre notre capacité à travailler ensemble de manière productive et à respecter les échéances.

Points d'amélioration :

• Collaboration en temps réel : Bien que nous ayons pu travailler ensemble efficacement, il est regrettable que le mode workspace de Webflow n'offre pas la posibilité de "designer à deux" en temps réel. Cette fonctionnalité, réservée aux forfaits entreprise, aurait facilité encore davantage notre collaboration en temps réel et nous aurait permis de travailler simultanément sur le développement de nouvelles sections et éléments du site.

B. Les outils et les méthodes ayant contribué à notre succès

Pour mener à bien le développement du nouveau site Webflow de Digidop, nous avons utilisé une combinaison d'outils et de méthodes qui nous ont permis de travailler efficacement et de suivre l'avancée du projet. Voici un aperçu de ces outils et les raisons pour lesquelles nous les avons choisis.

1. Webflow

Webflow est un outil de design web et de développement de sites internet sans code, qui nous a permis de construire une architecture web complexe et évolutive tout en gérant les différentes collections CMS. Il nous a également facilité la collaboration grâce au plan workspace, qui offre des fonctionnalités pour travailler simultanément sur un même projet.

2. Figma

Figma est un logiciel de prototypage et de design d'interface utilisateur qui a été essentiel pour la création des maquettes de notre site. Il nous a permis de travailler ensemble sur les designs et d'assurer un suivi précis de l'avancée de chaque page. Figma facilite la collaboration entre les membres de l'équipe en offrant un espace de travail partagé où chacun peut apporter ses contributions et visualiser les modifications en temps réel.

3. Slack

Slack est une plateforme de communication et de collaboration qui nous a aidés à rester connectés tout au long du projet. Grâce à ses différentes fonctionnalités, telles que les canaux de discussion, les appels vidéo et le partage de fichiers, nous avons pu échanger rapidement et efficacement sur les progrès du projet, les défis rencontrés et les solutions à apporter.

4. Google Meet

Google Meet est un service de visioconférence qui nous a permis de tenir des réunions en ligne pour discuter des étapes clés du projet, des problèmes éventuels et des stratégies à adopter. En utilisant cet outil, nous avons pu garder le contact et travailler ensemble, même à distance.

En résumé, ces outils de collaboration et de suivi de projet ont joué un rôle crucial dans notre succès. Ils nous ont permis de rester connectés, de travailler efficacement et de suivre l'avancée du projet en temps réel. Chacun de ces outils a apporté sa valeur ajoutée au processus, contribuant ainsi à la réussite du développement du nouveau site Webflow de Digidop.

5. Chat-GPT

Il ne faut pas l'oublier ! Nous avons bien sûr sollicité Chat-GPT pour nous aider sur pas mal de sujets 😉

Conclusion

Le développement du nouveau site Webflow de Digidop a été une expérience enrichissante et formatrice pour notre équipe. Grâce à un processus de travail structuré, notre expérience en développement de nouveau site internet et l'utilisation d'outils efficaces, nous avons pu mener à bien ce projet challengeant avec un time to market record !

Nous avons maintenant une architecture web complexe et évolutive, construite à 100% sur webflow, en place pour continuer de développer notre stratégie marketing.