Le client
Une plateforme qui perpétue la tradition des correspondants virtuels, en aidant les enfants à se connecter, apprendre et grandir grâce à l'intelligence artificielle (IA).
Une plateforme qui propose une manière moderne pour les enfants :
- d'explorer le monde
- de cultiver leur curiosité
- de comprendre de nouvelles cultures à travers des échanges de lettres personnalisés
Le brief du client
Nous avons une première mission consistant à intégrer une maquette Figma d'un site vitrine (5 pages avec une version mobile aussi réalisée sur Figma).
Notre problématique principale sur ce sujet-ci est votre réactivité et le délais de réalisation, idéalement d'ici mi/fin de semaine prochaine.
Le démarrage de la mission de développement Figma to Webflow
Le premier meeting
Une mission commence toujours par un un rendez-vous calendly accepté et une visio.
C'est l'occasion de faire connaissance avec le client
- il me présente son entreprise
- il me présente le contexte de la mission
- il précise ses besoins
A ce stade j'ai déjà assez d'information mais entant qu'expert je dois toujours affiner pour aller plus loin.
J'ai écouté et bien compris sa demande et:
- Je vais alors poser des questions précises pour affiner ma compréhension
- Je reformule bien chaque problématique pour vérifier que j'ai bien tout compris
- Je lui donne un premier diagnostique
- Je lui propose une approche sur-mesure pour répondre à ses problématiques
- Je lui propose un plan d'action détaillé étape par étape
- Je partage un planning prévisionnel
- On fixe un point hebdomadaire
- On s'accorde une date de livraison
Les maquettes FIGMA
Je demande de parcourir avec le client les maquettes.
Prendre le temps de découvrir avec le client les maquettes permet de comprendre sa vision et ses problématiques.
J'accède dans un second aux maquettes réalisées sur FIGMA pour les explorer plus en détails.
La qualité est au rendez-vous :
- une identité réussie
- des maquettes claires
- des calques bien nommés
- des sections et layers organisés en auto-layout
Je trouve même des planches avec les components, les variants sont créés, idem pour les local styles...
En tant que développeur freelance, lorsque je récupère des maquettes propres bien structurées, évidemment j'adore !
- Je plonge avec plus de motivation dans le projet
- Je comprends plus rapidement la charte graphique
- J'apprends aussi du travail bien fait et peux récupérer des bonnes pratiques
- Je sais que je vais gagner du temps dans la préparation du guideline Client First dans Webflow
Si le projet n'est pas aussi bien conçu, je dois préparer moi même la charte graphique avec
- les couleurs
- les titres Hn
- les styles
- les logos
- les icons
Déroulement d'une mission de développement avec Webflow
Pour bien commencer un projet, je suis un process qui permet de ne rien oublier pour travailler efficacement :
- Création d'un nouveau site blank depuis Webflow pas de template
- Je télécharge les webfont au format woff.2 (voir mon article sur les web font de google)
- J'intègre les variant colors
- Je récupère le cloneable Client First
- Je crée toutes les pages du site : cette étape me permet de vérifier l'arborescence et d'oublier aucune page :)
Accompagner le client = faciliter la vie du client !
Le client n'avait pas fourni les textes légaux ni les textes des métadonnées :
créer toutes les pages dès le début permet de demander rapidement les éléments manquants.
Pour ne rien oublier et accompagner le client, je créée toujours et partage un document sur google sheet.
L'objectif est de lister tous les éléments manquants :
- textes (souvent les mentions légales, cookies, CGV, etc.
- la page 404 le client n'y pense pas et c'est bien normal :)
- icon
- opengraph
- favicon, Webclip
- méta données
- données structurées
Le tableau sert aussi à répartir les tâches.
❇️ Un simple google sheet suffit : gratuit, simple , accessible et efficace !
Les délais pour cette mission de développement et d'intégration Webflow étaient courts, mais on peut ajouter aussi des priorités pour chaque tâche si le planning s'étale sur une période plus longue.
Grâce à cet outil, côté freelance et côté client, on a la visibilité sur les éléments bloquants. Ce tableau centralise toutes les informations et donne un aperçu de la progression de la mission.
La meilleure méthode pour organiser le développement sur Webflow
Les maquettes sur FIGMA n'ont pas été réalisées à partir d'un template.
Le site de sera donc entièrement développé sur-mesure dans Webflow.
Pour gagner du temps, je suis toujours ce process :
- J'adapte d'abord le guideline de Client First à la charte du client
- Je commence par créer la homepage
- Je crée un component "section" qui me servira de base pour toutes le sections du site : toute la nomenclature Client First et le html sémantique sont intégrés)
- J'ajoute toutes les sections de la page (vides dans un premier temps)
- Je crée la navigation du site : le menu et le footer
- Je crée la navigation responsive
- J'intègre toutes les sections de la homepage
Ensuite, je regarde les maquettes de toutes les autres pages pour repérer d'éventuels éléments récurrents :
> le but est de créer les components structurels du site web.
Les maquettes sont variées et peu d'éléments sont réutilisables :
- Un bandeau CTA se retrouve sur deux pages.
- Certain éléments sont structurés sur des grilles de trois colonnes.
- J'intègre ensuite pages après page, section après section.
La FAQ une page essentielle pour un site Web
Certaines page web vont demander une attention particulière : prenons l'exemple ici de la FAQ.
- Améliore l'expérience utilisateur : répond rapidement aux questions courantes et réduit la frustration des visiteurs.
- Optimise le SEO : génère du contenu pertinent avec des mots-clés et améliore le référencement naturel
- Réduit la charge du support : Diminue les demandes répétitives
- Augmente le taux de conversion : dissipe les freins à l’achat en répondant aux doutes des visiteurs avant qu’ils ne quittent la page.
Du custom code pour faciliter l'accès aux réponses
L'animation que j'ai ajouté permet d'ouvrir une réponse bien sûr et si une réponse est déjà ouverte, alors au clic pour ouvrir une autre réponse la réponse déjà ouverte se ferme automatiquement :)
Face au nombreuses questions, ce comportement permet :
- d'éviter un clic au visiteur
- de faciliter la lecture
- de se concentrer sur l'information utile : pas de parasite visuel
- d'ajouter de la fluidité dans l'experience
Les méta données structurées pour une FAQ qui améliore le référencement
J'ajoute le balisage Schema.org dédié pour une page FAQ pour que Google comprenne et d’affiche directement les questions-réponses dans les résultats de recherche sous forme de rich snippets.
Cela améliore la visibilité de la page, augmente le taux de clic (CTR) et renforce l’autorité du site en apportant des réponses claires aux utilisateurs sans qu’ils aient à cliquer ailleurs.
De plus, ce balisage facilite l’indexation et permet à l’algorithme de Google d’interpréter la structure du contenu, améliorant ainsi le référencement naturel (SEO).
Tips : Google met souvent en avant les réponses concises des FAQ dans les résultats de recherche.
Les performances du site sur PageSpeed Insights
💡 Objectif du développeur de site web : Améliorer les scores pour une page plus rapide, fluide et optimisée pour le SEO.
Google PageSpeed Insights mesure la performance des pages web en se basant sur plusieurs indicateurs clés qui influencent l'expérience utilisateur et le référencement.
Il reste toujours des éléments à améliorer.
Ici la lisibilité par exemple est notée 86/100 à cause du gris du footer et rouge pas assez contrastés pour assurer une lisibilité optimisée.
Sur mobile on arrive aux scores suivants : 76 85 100 100
Aurélien a été exceptionnel durant notre collaboration. Très organisé, ponctuel, pour un rendu point par point par rapport aux maquettes données démontrant une connaissance élevée de Webflow
Victor Abraham
CEO | Layerdev
