✔ Montrer que l’entreprise construit tout le système de comptage, et ne se contente pas de vendre des compteurs
✔ Rendre limpide le parcours des données, du compteur à l’analyse
✔ Parler le langage de chacun : celui des partenaires comme celui des entreprises
✔ Recevoir des demandes via de courts formulaires en fenêtre modale
✔ Permettre à l’équipe du client de mettre à jour elle-même les réalisations, les documents et les contacts
Clever Meter Ukraine est arrivée avec un cahier des charges détaillé de 65 pages : un site d’entreprise en ukrainien et en anglais, deux publics – les « Partenaires » (services des eaux, réseaux de chaleur, communes, revendeurs) et les « Entreprises » (promoteurs immobiliers, régies, sociétés) –, une texture d’eau propre à la marque et des exigences précises sur les animations, les formulaires et l’accessibilité.
J’ai d’abord réalisé le design : une direction visuelle fondée sur la charte graphique, la page d’accueil, 20 modèles de pages intérieures, un UI kit couvrant tous les états des éléments, une planche d’animations et les fenêtres modales des formulaires. En-tête, pied de page, boutons et bloc d’appel à l’action sont des composants : une modification à un endroit se répercute sur toutes les pages.
Vient ensuite le développement : le site est construit sous WordPress sur burum, mon propre thème. Contacts et réglages généraux sont gérés dans ACF, les formulaires Contact Form 7 s’ouvrent en fenêtre modale et attribuent un numéro à chaque demande, réalisations et documentation technique forment des rubriques à part avec filtres, et le SEO passe par Yoast. La langue principale est l’ukrainien ; la version anglaise est prévue, comme le demande le cahier des charges.
Un site où un sujet technique complexe se comprend dès le premier écran, et dont le client met à jour les contenus lui-même.
Le bandeau « compteurs → transmission → plateforme → analyse » intégré à la bannière principale
Tokens, typographie, grille de 12 colonnes, boutons et champs dans tous leurs états
Rubriques, actualités, réalisations, documentation, contact, recherche, 404 – selon l’arborescence prévue
Thème burum, réglages généraux dans ACF, SEO avec Yoast, sélecteur UA / EN dans l’en-tête
10 formulaires Contact Form 7 en fenêtre modale ; après l’envoi, un numéro du type CMU-année-numéro
Réalisations avec carte des villes, documents filtrables par type, technologie, marque et langue
Du système de design et des modèles de pages jusqu’au site WordPress que le client gère lui-même.
Le site remplit plusieurs fonctions essentielles :
Réponse garantie sous 24h.
Premier échange gratuit et sans engagement.
Quand une entreprise ne vend pas de simples appareils mais des systèmes de comptage complets, son site doit à la fois inspirer confiance et expliquer. À travers Clever Meter Ukraine, je vous montre comment j’ai transformé un cahier des charges de 65 pages en système de design et en modèles de pages, puis en site WordPress sur mon propre thème.
Clever Meter Ukraine est spécialisée dans le comptage de l’eau et de la chaleur : elle sélectionne et fournit les compteurs, met en place la collecte et la transmission automatiques des relevés, et propose des logiciels, l’analyse des données et l’intégration aux systèmes de facturation. L’entreprise a besoin d’un nouveau site qui montre dès le premier écran l’essentiel : elle construit tout le système de comptage, elle ne se contente pas de vendre des appareils.
Le client m’a remis un cahier des charges détaillé de 65 pages : arborescence, composition des blocs de chaque page, segmentation des publics, exigences sur la texture de la marque, les animations, les formulaires et l’accessibilité. Le site est en ukrainien, avec une version anglaise. Je mène le projet de bout en bout : d’abord le design dans Figma, puis le développement sous WordPress.
Le site s’adresse à deux publics qui ne se posent pas les mêmes questions. Les « Partenaires » : services des eaux, distributeurs de chaleur, communes et revendeurs. Les « Entreprises » : promoteurs immobiliers, régies, entreprises industrielles et commerciales. Selon le cahier des charges, la structure et la navigation restent communes aux deux segments ; ce sont les accents qui changent : sous-titre, solutions recommandées, réalisations et appels à l’action.
Dans l’en-tête, à côté du téléphone, de l’e-mail, de la recherche et du sélecteur de langue, j’ai prévu un lien vers la version destinée à l’autre segment, et dans le premier écran, une étiquette qui indique d’emblée au visiteur à qui s’adresse la page.
Le premier écran affiche une photo de ville en pleine largeur, légèrement assombrie, avec la texture de la marque et un grand titre : un comptage moderne de l’eau et de la chaleur, du compteur à l’analyse. Le cahier des charges prévoit que la bannière change selon la région du visiteur ; la photo est donc placée sur un calque séparé. En bas de la bannière, un bandeau à effet verre retrace le parcours des données : compteurs → transmission des données → plateforme numérique → analyse et facturation.
La page d’accueil déroule ensuite l’offre étape par étape :
L’en-tête, le pied de page, le bouton flottant de contact rapide, les boutons et le bloc d’appel à l’action sont des composants Figma. Les pages intérieures suivent un schéma commun : bannière de rubrique avec photo, fil d’Ariane, titre et bouton d’action → blocs prévus par le cahier des charges → appel à l’action → pied de page. Au total, 20 modèles : domaines d’activité et solutions, télérelève, logiciels, service, documentation technique, actualités et réalisations, l’entreprise, contact, académie, ainsi que les pages utilitaires – recherche, remerciement, inscription, politiques, 404 et maintenance.
Une page à part de la maquette est consacrée au UI kit, qui permet de développer le site sans rien laisser au hasard :
L’orange de la marque n’apparaît que là où il y a une action ou un flux de données – boutons principaux, pointillés des parcours de données, numéros d’étapes, chiffres clés – et n’occupe jamais plus de 10 % de l’écran. Pas de texte blanc sur orange : cette combinaison ne passe pas le test de contraste, les boutons d’accent portent donc un texte bleu foncé.
Le cahier des charges exige que l’animation explique au lieu de décorer. Le mouvement de chaque section est décrit directement dans la maquette, et une planche séparée rassemble les règles générales et 17 blocs : ce qui bouge, pendant combien de millisecondes et pourquoi. L’animation montre le parcours des données, met en valeur les chiffres et retient l’attention ; aucun mouvement n’est purement décoratif.
Pour les formulaires de demande prévus par le cahier des charges, j’ai conçu une fenêtre modale en quatre états – saisie, erreur de validation, envoi et confirmation avec numéro de demande – ainsi que ses règles de comportement : fermeture avec Échap ou par clic sur le fond, focus maintenu à l’intérieur de la fenêtre, nouvel envoi possible au plus tôt après 60 secondes, panneau coulissant depuis le bas sur mobile et zones tactiles d’au moins 44 px.
Le site est intégré sous WordPress sur burum, mon propre thème : tous les modèles sont prêts conformément à la maquette, et le site attend désormais les photos et les coordonnées du client. Styles et scripts sont chargés de manière standard, sans bibliothèques superflues, et les tokens de la marque issus du UI kit sont repris en variables CSS : les couleurs du site sont exactement celles de la maquette. Ce que comprend le thème :
La langue principale du site est l’ukrainien ; la version anglaise est prévue, comme le demande le cahier des charges.
Quand une entreprise vend des solutions techniques complexes, son site joue le rôle de premier conseiller. Le visiteur – ingénieur d’un service des eaux, représentant d’une commune ou promoteur immobilier – doit comprendre rapidement ce qu’on va lui proposer et comment cela fonctionne. C’est pourquoi, pour les sites d’entreprises B2B, je m’appuie sur quelques principes :
Si vous avez besoin d’un site d’entreprise complet – du design selon votre cahier des charges jusqu’au site WordPress –, je mène le projet de la première maquette à la mise en ligne.
