Identité de marque et site Webflow complet pour M2TOIT
Pour une entreprise de couverture, la confiance se gagne avant même le premier échange. Quand un particulier découvre une infiltration, des tuiles déplacées ou des mousses qui gagnent son toit, il cherche un professionnel sérieux, réactif et rassurant. Tout l'enjeu de ce projet était là : traduire ce sérieux en une marque et une page web capables de transformer une inquiétude en demande de devis.
M2TOIT est une entreprise de couverture forte de 20 ans d'expérience, spécialisée dans le démoussage, le nettoyage, la réparation et la rénovation de toitures. Elle intervient sur la Vienne, l'Indre-et-Loire et les Deux-Sèvres, partout en Nouvelle-Aquitaine. Au lancement, l'entreprise partait de zéro côté image : pas d'identité visuelle, pas de site, aucune présence digitale. J'ai pris le projet en charge de bout en bout, de la stratégie de marque jusqu'à la mise en ligne d'une landing page pensée pour une campagne Google Ads.
L'enjeu : inspirer confiance et générer des devis
Dès le cadrage, trois priorités se sont imposées :
1. Crédibiliser une entreprise encore invisible en ligne
Sans marque ni site, M2TOIT n'avait aucun moyen de rassurer un prospect avant l'appel. Il fallait une image à la hauteur du savoir-faire, immédiatement professionnelle.
2. Transformer un trafic payant en demandes qualifiées
La page devait être pensée pour un visiteur issu de Google Ads : une intention forte, peu de patience, une décision à déclencher vite.
3. Poser une base de marque évolutive
L'identité et le système de design devaient pouvoir s'étendre ensuite à un site complet, sans repartir de zéro.
Construire la marque de zéro
Avant de toucher au design de la page, j'ai créé l'intégralité de l'identité de marque, en commençant par le logo. J'ai dessiné un monogramme géométrique inspiré de la forme du toit, ponctué d'un accent jaune en signal, associé au nom « M2TOIT » dans une typographie forte et lisible. Le logo a été conçu pour rester reconnaissable partout : aussi bien sur fond clair que sur fond foncé, du favicon au marquage de véhicule utilitaire, en passant par la carte de visite et les documents administratifs. Une signature ancre le positionnement : « L'expertise qui se mesure ».
Une direction artistique au service de la conversion
Chaque choix visuel a été pensé pour un objectif simple : inspirer confiance et orienter vers l'action. La palette repose sur un bleu nuit profond, qui transmet sérieux et fiabilité, deux qualités décisives quand on confie sa toiture à un artisan. Un jaune franc vient le réveiller, utilisé exclusivement comme couleur de signal : il attire l'œil sur les boutons, les badges et les points clés, sans jamais dominer la mise en page.
Côté typographie, Montserrat en gras et en capitales donne aux titres un ton affirmé et direct, équilibré par Inter sur le corps de texte, plus doux et confortable à lire. L'ensemble a été formalisé dans une charte graphique complète (logo, couleurs, typographie, règles d'usage) qui garantit une cohérence parfaite sur tous les supports, en ligne comme hors ligne.
Concevoir une landing page de conviction
La conception a suivi un process structuré : zoning, puis wireframe, puis design haute fidélité sur Figma. Je n'ai pas abordé la page comme une simple vitrine, mais comme un parcours de conviction où chaque section répond à une étape de la réflexion du visiteur.
Le hero interpelle directement sur le problème de toiture et propose une action immédiate, demander un devis ou appeler. Vient ensuite une section « causes » qui nomme les situations vécues par le visiteur (mousses, encrassement, tuiles abîmées, perte d'étanchéité), pour créer la reconnaissance avant de présenter les services. La preuve visuelle avant/après matérialise le résultat concret, le bloc entreprise et ses 20 ans d'expérience installe la légitimité, et les témoignages clients verrouillent la confiance juste avant la décision.
Développer sur Webflow
La maquette a été intégralement développée sur Webflow, pour une page responsive, rapide et facile à faire évoluer. Une attention particulière a été portée au mobile, là où se joue l'essentiel du trafic publicitaire local. Le formulaire de demande de devis a été implémenté avec ses champs essentiels (prénom, nom, téléphone, code postal, message) et son consentement RGPD, pour capter la demande sans friction tout en restant conforme.
Optimiser pour un trafic Google Ads
Toute la page a été optimisée autour d'un objectif unique : l'obtention d'un devis. Le formulaire est positionné dès le haut de page pour capter immédiatement les visiteurs les plus chauds issus des annonces, et les appels à l'action (« Demander un devis » et « Appeler ») sont répétés à chaque étape du scroll pour ne jamais éloigner l'utilisateur de la conversion. En parallèle, les arguments de réassurance (devis gratuit, sans engagement, diagnostic personnalisé, intervention rapide, 20 ans d'expérience) lèvent un à un les freins à la décision.
Le résultat
Une landing page cohérente, professionnelle et entièrement orientée conversion, adossée à une identité de marque créée sur mesure et mise en ligne pour soutenir une campagne d'acquisition Google Ads. En un seul projet, M2TOIT est passée d'une absence totale de présence digitale à un outil d'acquisition prêt à générer des demandes qualifiées.
De la landing page au site web complet
La landing page avait été pensée dès le départ comme la première étape d’un écosystème digital plus large. Une fois l’identité de marque, la direction artistique et les premiers principes de conversion validés, M2TOIT m’a confié l’extension du projet vers un site web complet.
L’objectif n’était pas de repartir de zéro, mais de transformer cette première base en un système capable de présenter clairement l’ensemble des activités de l’entreprise, tout en conservant la cohérence visuelle et l’efficacité du parcours initial.
Structurer une offre devenue plus large
Le nouveau site s’articule autour des principaux métiers de M2TOIT : toiture, isolation, façade et panneaux solaires. À ces pages services s’ajoutent une présentation plus complète de l’entreprise, un espace guide et une page contact pensée comme point de convergence des différents parcours.
Cette nouvelle architecture permet de ne plus concentrer toute l’information sur une seule page. Chaque activité dispose désormais de son propre espace, avec un contenu adapté aux besoins et aux questions du visiteur.
L’enjeu UX consistait à conserver une navigation simple malgré l’augmentation du volume de contenu. Les différentes pages suivent donc une logique commune : identifier rapidement le besoin, expliquer la solution, rassurer sur le savoir-faire de M2TOIT et accompagner naturellement vers une demande de devis ou une prise de contact.
Étendre le système de design à l’ensemble du site
Le langage visuel défini lors de la première phase a été déployé à l’échelle du nouveau site. La palette bleu, blanc et jaune, les typographies Montserrat et Inter, les composants graphiques et les principes de hiérarchie ont servi de base à toutes les nouvelles pages.
Plutôt que de concevoir chaque écran indépendamment, j’ai développé un véritable système de sections et de composants réutilisables. Cette approche garantit une expérience cohérente d’une page à l’autre, tout en permettant suffisamment de variations pour mettre en valeur les spécificités de chaque activité.
Les contenus visuels occupent également une place importante : réalisations, comparaisons avant/après, témoignages et éléments de réassurance viennent rendre le savoir-faire de l’entreprise plus concret et faciliter la projection du visiteur.
Un développement Webflow pensé pour évoluer
L’ensemble du site a été développé sur Webflow avec une attention particulière portée à la modularité, au responsive et à la facilité de gestion.
Les composants récurrents, les appels à l’action, les blocs de réassurance et les différentes structures de contenu ont été construits pour pouvoir évoluer sans remettre en cause l’ensemble du site. Des interactions légères, des sliders, des comparateurs avant/après et différents éléments interactifs viennent enrichir l’expérience sans détourner l’attention de l’objectif principal.
Le travail de finalisation a également porté sur les fondamentaux nécessaires à la mise en ligne : structure sémantique des pages, métadonnées, URLs, liens internes, textes alternatifs et cohérence des différents parcours vers la prise de contact.
Le résultat : une présence digitale complète et évolutive
Ce qui avait commencé comme une landing page destinée à soutenir une campagne Google Ads est devenu la présence digitale complète de M2TOIT.
L’entreprise dispose désormais d’un site capable de présenter clairement ses différents métiers, de valoriser son expertise et ses réalisations, et d’accompagner plusieurs intentions de recherche vers une même action : entrer en contact avec M2TOIT.
Le projet conserve ainsi la logique qui avait guidé la première landing page, inspirer confiance et faciliter la conversion, tout en donnant à la marque une structure suffisamment solide pour accompagner son développement dans le temps.
