Archives : octobre 2026

DemoResto : un site clé en main pour restaurants, cafés et bars, en trois formules

octobre 3, 2026

Pourquoi j’ai créé DemoResto

Difficile pour un restaurateur de choisir un site sur description : « réservation en ligne » ou « espace de gestion » ne veulent pas dire grand-chose tant qu’on ne les a pas essayés. Plutôt qu’une présentation, j’ai donc monté un restaurant fictif, DemoResto : un établissement avec salle, terrasse et salon privé au bord du Léman, à Lausanne. Tout ce que recevra un vrai restaurant y fonctionne : carte, réservation, commandes, bons cadeaux, événements et espace de gestion de l’équipe.

La démo se parcourt de deux façons : comme client ou comme patron. Le panneau « Démo » propose des scénarios tout prêts : « Dîner à deux », « Commande à domicile », « Au restaurant », « Banquet », « Bon cadeau », « Gestion de la carte » et « Compte client ». Les paiements et les e-mails sont seulement simulés : rien ne sort de la démo, et les e-mails envoyés par le site s’affichent directement dedans.

Sur la démo partagée, l’espace de gestion est en lecture seule et les données personnelles des clients sont masquées. Pour changer les prix, accepter des réservations ou émettre des bons cadeaux, le visiteur lance sa propre copie du restaurant : elle lui est réservée pendant 24 heures, puis s’efface.

Trois formules : ce que contient chacune

L’idée centrale du produit : un seul site qui grandit avec l’établissement. Les formules diffèrent par les fonctionnalités, pas par la qualité du design, et chacune inclut la précédente. Dans la démo, on passe de l’une à l’autre d’un clic.

Essentiel — la façade numérique. Pour un café, un bar, un salon de thé ou une boulangerie qui veut être trouvé et recevoir des appels :

• site d’une page, pensé d’abord pour le téléphone ;
• carte en ligne que le patron modifie lui-même, à la place du PDF ;
• allergènes, régimes alimentaires et version imprimable de la carte ;
• horaires, plan, itinéraire, boutons « Appeler » et WhatsApp ;
• carte QR pour les tables ;
• formulaire de demande de réservation.

Visibilité — le client réserve lui-même. Pour un restaurant avec salle qui veut remplir ses tables sans décrocher le téléphone en plein service :

• réservation en ligne instantanée sur plan de salle ;
• site multipage : la maison, galerie, actualités, contact ;
• agenda des événements et page privatisation avec demande en ligne ;
• espace de gestion : calendrier des réservations, plan de salle, demandes, clients ;
• avis clients sur la page d’accueil et page « Nous recrutons » avec formulaire de candidature.

Premium — l’établissement vend en ligne. Pour ceux qui font de l’emporter, de la livraison et des événements :

• commande en ligne à l’emporter et en livraison : heure de retrait, zones de livraison, montant minimum ;
• paiement par carte et TWINT ;
• écran cuisine et suivi de commande pour le client ;
• commande à table par QR code, appel du serveur et demande d’addition ;
• bons cadeaux, points de fidélité et compte client ;
• rappels et acompte pour les réservations, inscriptions aux événements avec places limitées, menus de banquet et précommande de groupe.

Au-delà des fonctions du site, les formules comprennent la mise en place de la fiche Google, des annuaires suisses et des réseaux sociaux, et le nombre de langues augmente : du français seul en Essentiel à quatre langues en Premium.

Réservation sur plan de salle

La réservation est le cœur de la formule Visibilité. Le client choisit la date et le nombre de couverts, puis une heure parmi les créneaux libres et l’espace : salle, terrasse ou salon privé. Il peut choisir sa table directement sur le plan de salle. Pendant qu’il saisit ses coordonnées, la table lui est gardée : impossible de la réserver deux fois.

Après confirmation, le client reçoit un e-mail avec son numéro de réservation ; il peut ajouter la visite à son agenda, modifier ou annuler sa réservation par un lien sécurisé. Si tout est complet, il s’inscrit sur la liste d’attente. Les groupes de plus de huit personnes disposent d’une demande de menu de groupe, et en Premium, les grandes tables versent un acompte.

La page « Salles & terrasse » présente chaque espace avec photos et plan, et indique combien de tables restent libres pour le prochain service du soir — directement d’après les réservations.

La carte, la commande en ligne et le QR sur la table

La carte n’est pas un PDF mais un vrai catalogue de plats, que le patron gère lui-même. On peut chercher par plat ou par ingrédient, filtrer par régime (végétarien, végane, sans gluten, sans lactose), exclure n’importe lequel des 14 allergènes et n’afficher que ce qui est servi en ce moment. La carte s’imprime ou s’enregistre en PDF.

Les plats ont des options et des suppléments, et le prix se met à jour dès qu’on les choisit. Un plat hors de ses heures de service ou épuisé ne peut pas être commandé, et la mention « épuisé » disparaît d’elle-même le lendemain.

En Premium, le client commande à l’emporter ou en livraison. Le site propose une heure de retrait en tenant compte de la charge de la cuisine et du temps de préparation des plats du panier, vérifie l’adresse selon les zones de livraison, applique le montant minimum et offre la livraison au-delà d’un seuil. Codes promo, paiement par carte et TWINT : tout y est, et après le paiement, le client suit sa commande étape par étape : acceptée, en préparation, prête, en route.

En salle, le QR code posé sur la table ouvre la carte avec le numéro de table : le client commande depuis son téléphone, appelle le serveur ou demande l’addition, et l’équipe voit l’appel aussitôt.

L’espace de gestion : tout le service sur un seul écran

Pour l’équipe, j’ai créé un espace à part, sans passer par l’administration de WordPress. Chaque poste y a sa rubrique : « Aujourd’hui », réservations et calendrier, plan de salle en direct, commandes et écran cuisine, demandes, événements, clients, carte, contenu du site, bons cadeaux, chiffres, équipe, réglages et fidélité.

Les accès sont répartis par rôle : propriétaire, gérant, responsable de salle, cuisine et rédaction ne voient et ne modifient que ce qui les concerne. Le plan de salle montre quelles tables sont libres, où des clients sont attendus d’une minute à l’autre et où ils sont déjà installés. Les demandes de banquet deviennent des fiches clients avec un responsable et des notes, et les listes s’exportent en CSV.

La rubrique « Chiffres » affiche le bilan des 30 derniers jours et les plats les plus demandés.

Bons cadeaux, fidélité et événements

Le bon cadeau s’achète en ligne : montant fixe ou libre, l’un des trois styles de carte, un message pour le bénéficiaire. Il est accompagné d’un code personnel et d’un PDF à imprimer, et s’utilise en plusieurs fois : en salle, l’équipe l’encaisse depuis l’espace de gestion, jamais au-delà du solde.

Les habitués cumulent des points de fidélité et reçoivent un cadeau pour leur anniversaire. Dans son compte, le client retrouve sa prochaine réservation, ses commandes passées, ses favoris et ses points ; il repasse sa commande préférée en un clic et peut en régler une partie avec ses points.

L’agenda présente les événements en liste et en calendrier mensuel ; chaque événement a sa page et un compteur de places restantes. La demande de banquet recueille la date, le format, le nombre de convives et le budget, permet de choisir un menu de banquet et de précommander les plats pour tout le groupe dans la foulée.

Design et identité visuelle

Un restaurant se vend d’abord par les yeux, alors le design est construit autour de l’assiette : en ouverture, un plat photographié du dessus avec une pastille de prix, puis une alternance de sections sombres et claires avec des photos carrées des plats. Le site a un thème sombre et un thème clair, et c’est le client qui choisit.

Avec le site, l’établissement reçoit une identité visuelle réunie sur une page dédiée : logo, palettes des deux thèmes, polices Cormorant Garamond et Jost, boutons et prix au format suisse « 34.– », jeu d’icônes, règles pour photographier les plats et ton des textes. Le site est pensé d’abord pour le téléphone.

Pourquoi un restaurant a besoin de son propre site, et pas seulement des plateformes

Le client regarde d’abord Google, puis la carte, et seulement ensuite décide de réserver ou d’aller chez le voisin. Le restaurant le perd à des endroits tout bêtes : personne ne répond au téléphone en plein coup de feu, la carte en PDF est illisible sur mobile, le touriste ne comprend pas le français.

Les plateformes de livraison et de réservation amènent de nouveaux clients, mais prélèvent 25 à 35 % sur chaque commande et gardent le contact du client pour elles. Un site à soi ne les remplace pas entièrement : il ramène les habitués vers le restaurant.

• réservations et commandes arrivent sans commission par couvert ;
• le domaine, le site et le fichier clients appartiennent au restaurant ;
• le patron change lui-même la carte et les prix en deux minutes ;
• les demandes de banquet ne se perdent plus dans la boîte mail.

Inutile de commencer par le maximum. Un café peut démarrer avec Essentiel, puis ajouter la réservation, la commande en ligne ou une deuxième langue sur le même site, sans le refaire.

Création d’un site catalogue multilingue pour les cabines acoustiques de bureau Silentbox®

octobre 3, 2026

Le défi : un seul site pour des acheteurs d’une vingtaine de pays

Silentbox® est un fabricant polono-ukrainien de cabines acoustiques pour bureaux : de la Solo, cabine individuelle pour les appels, à la Quartet, où l’on tient une réunion à quatre. Le siège de l’entreprise est à Wrocław et, selon le client, ses cabines équipent des bureaux dans 25 pays. Le site est donc lu par des office managers, des dirigeants et des architectes d’intérieur de pays très différents, et chacun doit vite s’y retrouver parmi les modèles, voir la cabine aux couleurs de ses bureaux et obtenir un prix.

D’où trois exigences principales : de nombreuses langues sans site séparé pour chaque pays, un choix visuel du modèle et de la couleur, et un chemin court entre l’intérêt et la demande.

La structure : une page d’accueil-présentation et une page par modèle

La page d’accueil est construite comme une présentation détaillée, avec un menu d’ancres : « À propos des cabines », « Cabines », « Prix », « Galerie », « Catalogue », « Certificats », « Contacts ». On peut la lire de haut en bas ou sauter directement à la section voulue.

• premier écran : les cabines pour 1 à 4 personnes et le bouton « Voir tous les modèles » ;
• huit blocs techniques : isolation phonique jusqu’à 35 dB, absence d’écho, ventilation jusqu’à 30 m³ par heure, silencieux, verre feuilleté à trois couches, éclairage LED, prise avec USB et détecteur de présence ;
• un bloc « Combien coûte le bruit dans votre bureau » avec des chiffres d’études et des liens vers les sources ;
• les fiches des six modèles, l’annonce du nouveau WorkPod, un tableau comparatif et la vue 3D ;
• un bloc sur Meetpoint, le service maison de Silentbox® pour réserver les cabines depuis des tablettes et Google Calendar, avec un lien vers son site ;
• galerie, catalogue en PDF, avis, réponses aux questions fréquentes, actualités et coordonnées du siège.

Chaque cabine — Solo, Duet, Quartet et les trois modèles de la série Lite — a sa propre page : photos, description, caractéristiques techniques, dimensions, boutons « Télécharger les tarifs » et « Voir en 3D », et des modèles proches en bas de page.

Le choix de la couleur directement dans la fiche

Une cabine s’achète pour longtemps et doit s’intégrer à l’aménagement. La fiche propose donc deux listes déroulantes : la couleur du panneau avant (blanc, gris, noir) et celle des panneaux latéraux (sept options, du blanc au jaune, au rouge et au bleu). Pour cela, j’ai écrit un modèle de page de cabine sur mesure dans le thème enfant Astra et un petit script : dès qu’on choisit les couleurs, la photo passe à la combinaison correspondante — et un seul modèle en compte 21.

La série Lite suit une autre logique : au lieu des couleurs, le client choisit l’un des dix motifs imprimés, avec aperçu. Au chargement de la page, la première option est sélectionnée d’office, pour que la fiche ne reste jamais sans photo. Le bouton de commande retient le modèle : l’adresse de la page de la cabine part avec la demande, et le commercial n’a pas besoin de demander de quelle cabine il s’agit.

Comparatif des modèles et vue 3D

Pour éviter de passer d’une page à l’autre, la page d’accueil réunit un tableau comparatif : nombre de places, réglage de la ventilation et de l’éclairage, bloc de prises, mobilier et dimensions extérieures — de 105×110×220 cm pour la Solo à 210×138×220 cm pour la Quartet. On y trouve aussi, pour chaque modèle, les boutons « Voir en 3D » et « Télécharger les tarifs ».

Solo, Duet et Quartet ont des pages dédiées avec un modèle 3D interactif : on fait tourner la cabine pour l’examiner sous tous les angles. Les modèles sont intégrés depuis le service Vectary, et ces pages reposent sur un gabarit à part, où la description et les caractéristiques accompagnent le modèle.

21 langues sur un seul site

Les traductions passent par TranslatePress. Chaque langue a son propre dossier dans l’adresse et les bonnes balises hreflang, si bien que les moteurs de recherche montrent à chacun la bonne version. Le sélecteur propose 21 langues : ukrainien, anglais, polonais, allemand, français, espagnol, italien, néerlandais, tchèque, japonais et d’autres encore. Les versions arabe et hébraïque s’affichent de droite à gauche, comme il se doit.

Les formulaires tiennent compte de la langue eux aussi : la langue de la page est transmise avec la demande, et le champ téléphone propose de choisir l’indicatif du pays — le client n’a pas à deviner comment écrire un numéro international.

Les formulaires et le chemin vers la demande

L’acheteur d’une cabine est rarement prêt à commander tout de suite : il veut d’abord un prix et une présentation. Le site recueille donc des demandes à plusieurs endroits :

• le bouton « Recevoir une offre » dans l’en-tête de chaque page ;
• « Télécharger les tarifs » dans les fiches et le tableau — une fenêtre s’ouvre avec un formulaire pour demander la présentation PDF et la liste de prix ;
• « Envoyer une demande » dans la fiche du modèle ;
• la demande d’essai d’une cabine ;
• le formulaire de la page contacts.

Tous les formulaires sont réalisés avec Elementor Pro et ne demandent que le nom, l’adresse e-mail et le téléphone. Sous chacun figure la promesse d’une réponse dans l’heure, pour que le client sache à quoi s’attendre.

La confiance : certificats, avis, galerie et blog

Quand une entreprise achète, la confiance compte plus que les belles formules. Le site réunit les documents : ISO 9001, ISO 23351-1, ISO 11957, CE, RoHS, enregistrement du dessin industriel, marques déposées dans l’UE et en Ukraine, et deux brevets. À côté : 14 logos d’entreprises clientes, des avis et une mise en garde contre les contrefaçons de cabines Silentbox®.

Une page galerie de 74 photos montre les cabines en situation, et un blog de 11 articles explique comment choisir une cabine et revient sur une installation à Vilnius, l’entrée de l’entreprise dans un classement Forbes et un contrat avec l’OTAN. Ce sont à la fois des arguments pour l’acheteur et des textes qui font remonter le site dans les moteurs de recherche.

Ce qui compte sur le site d’un fabricant d’équipement de bureau

Cabines, mobilier, cloisons et éclairage de bureau sont achetés par des entreprises. Plusieurs personnes décident, comparent les offres et demandent presque toujours un prix avant de parler à un commercial. D’après l’expérience de ce projet, le site d’un tel fabricant doit :

• parler la langue de l’acheteur — un sélecteur ne suffit pas, il faut une adresse par version et un balisage correct pour les moteurs de recherche ;
• montrer le produit concrètement : photos dans toutes les couleurs, 3D, dimensions et caractéristiques dans un même tableau ;
• fournir les documents — pour un service achats, certificats et brevets pèsent plus lourd que les slogans ;
• transformer l’intérêt en contact : tarifs et présentation contre un nom et un e-mail, un échange que l’acheteur professionnel comprend ;
• transmettre la demande au commercial avec le modèle et la langue du client.

Si vous êtes fabricant ou distributeur et vendez dans plusieurs pays, mieux vaut commencer non par les images, mais par la structure : quels modèles, quelles langues, quelles questions posent les acheteurs. Le site se construit sur cette base, et avec WordPress et Elementor, on peut faire en sorte que l’équipe du client modifie elle-même les textes et ajoute des modèles.

Création du site catalogue LuxAdapt — adaptation de véhicules pour personnes en situation de handicap

octobre 3, 2026

Le défi : parler simplement d’un équipement complexe

LuxAdapt est une entreprise ukrainienne qui sélectionne et installe des équipements d’adaptation automobile : sièges pivotants pour passer du fauteuil roulant au siège, élévateurs de fauteuil, coffres de toit pour le fauteuil et kits de commandes manuelles. L’entreprise est sur le marché depuis 13 ans et accorde une garantie officielle d’un an sur ses produits.

Les visiteurs de ce site sont des personnes en situation de handicap et leurs proches. Les grands slogans ne leur servent à rien : ils veulent comprendre quel équipement convient à leur voiture, combien il coûte, où il sera installé et si le fournisseur est fiable. C’est autour de ces questions que j’ai construit le site.

La page d’accueil : du premier écran au conseil

Le premier écran est un carrousel consacré aux deux activités principales : les sièges pivotants et les élévateurs de fauteuil roulant. Chaque diapositive porte une courte explication et un bouton « Demander conseil ». Viennent ensuite :

• les quatre familles du catalogue, illustrées ;
• un bloc qui explique ce qu’est un siège pivotant et comment se déroule l’installation ;
• les points forts : montée et descente faciles, sécurité, compatibilité avec de nombreux véhicules, installation dans toutes les villes d’Ukraine ;
• un carrousel de certificats ;
• un bloc de texte pour le référencement, qui se déplie avec le bouton « Afficher plus » sans alourdir la page.

Le téléphone et le bouton « Être rappelé » restent toujours visibles dans l’en-tête ; sur smartphone, le menu se range dans un panneau séparé, pour que le numéro et le bouton ne soient jamais à plus d’une touche.

Le catalogue de produits

Le catalogue repose sur les catégories de WordPress : le client ajoute un nouveau modèle aussi simplement qu’un article de blog. Chaque catégorie a son fil d’Ariane, un compteur de produits et des vignettes avec photo, nom, prix et bouton « Commander ». Le catalogue compte aujourd’hui quatre familles et dix modèles :

• sièges pivotants — SlimTurn, LiftTurn, DropSeat, Royale et Royale EV ;
• élévateurs de fauteuil roulant — UVL Side, UVL Rear et DualAccess ;
• coffre de toit pour fauteuil roulant — AutoLift Box ;
• kit de commandes manuelles, pour conduire sans pédales — Hand Control.

Les prix sont affichés : de 34 400 UAH pour le kit de commandes manuelles à 752 500 UAH pour le siège Royale EV à entraînement électrique. Pour un équipement aussi coûteux, un prix affiché fait gagner du temps aux deux parties : la personne arrive au rendez-vous en connaissant déjà son budget.

La fiche produit

J’ai conçu le modèle de fiche pour que tout ce qui aide à décider tienne sur une seule page :

• galerie de photos avec miniatures et agrandissement au clic ;
• description avec les principaux atouts — pour le SlimTurn, par exemple, la rotation à 90°, la commande par télécommande, boutons ou smartphone, et un crash-test réussi ;
• prix et deux boutons : « Acheter » et « Demander conseil » ;
• onglet « Caractéristiques techniques » avec schéma des dimensions, vidéo et explications ;
• onglet « Certificats ».

La vidéo est particulièrement utile dans la fiche : le fonctionnement d’un siège pivotant ou d’un élévateur se comprend mieux en le voyant une fois qu’en le lisant.

Les demandes : rappel, conseil, achat

Tous les formulaires fonctionnent avec Contact Form 7 et s’ouvrent dans une fenêtre, sans faire quitter la page. Le champ téléphone a un masque de saisie : le numéro est tout de suite au bon format. Quand le visiteur clique sur « Acheter » ou « Demander conseil » dans la fiche, le nom du modèle s’inscrit de lui-même dans un champ caché du formulaire, et le conseiller sait de quel équipement il s’agit.

La page contacts réunit deux numéros de téléphone, l’adresse e-mail et un formulaire avec un champ de message : il sert à ceux qui préfèrent exposer leur situation par écrit.

La confiance et les lieux d’installation

L’adaptation d’un véhicule touche à la sécurité : la confiance occupe donc une large place sur le site. La section « À propos » présente brièvement l’entreprise et ses chiffres : 1 an de garantie, 13 ans d’expérience, installation dans toute l’Ukraine. Les certificats sont réunis sur une page dédiée et repris en carrousel sur la page d’accueil.

La page contacts s’intitule « Centres d’installation spécialisés LuxAutoTech » : elle intègre une carte des centres qui posent l’équipement. La carte est réalisée avec Google My Maps, si bien que le client y ajoute lui-même de nouveaux points sans toucher au site.

SEO et statistiques

Les pages ont des adresses lisibles, et Yoast SEO donne à chaque catégorie et à chaque produit son propre titre et sa propre description — la catégorie des sièges apparaît par exemple dans les résultats sous le titre « Catalogue des sièges LuxAdapt à mécanisme pivotant et coulissant pour personnes handicapées en voiture ». Le fil d’Ariane et les données structurées aident les moteurs de recherche à comprendre la structure du catalogue. Les statistiques passent par Google Analytics 4 et Google Tag Manager.

Le site d’une entreprise qui rend la voiture accessible

L’adaptation de véhicules pour personnes en situation de handicap est une niche où la décision se prend lentement, souvent en famille. D’après l’expérience de ce projet, un site dans ce domaine doit :

• expliquer avec des mots simples — sans jargon technique, avec photos et vidéos ;
• afficher les prix, au moins à titre indicatif : pour un équipement coûteux, on économise et on planifie à l’avance ;
• répondre d’emblée à la question « est-ce compatible avec ma voiture ? » — compatibilité, dimensions, limites de chaque modèle ;
• fournir les documents : certificats, garantie, conditions d’installation claires ;
• être pratique pour tous : texte lisible, boutons bien visibles, numéro que l’on appelle directement depuis son smartphone ;
• montrer la zone couverte : où l’installation se fait et où se rendre.

Un tel site n’a pas besoin d’être grand. Un catalogue bien pensé, quelques pages qui inspirent confiance et des formulaires courts suffisent. L’essentiel, c’est qu’une personne pour qui le quotidien est déjà compliqué comprenne en deux minutes ce qui lui convient et puisse appeler.

Création du site du studio de reprogrammation UPstage Lviv, avec un catalogue de puissance de 8 000+ moteurs

octobre 3, 2026

Le défi : répondre à la question principale du propriétaire

UPstage Lviv est le représentant officiel d’Upstage Chiptuning à Lviv. Le studio propose la reprogrammation Stage 1, 2 et 3, la reprogrammation de boîte automatique et la cartographie « pop and bang », la désactivation logicielle des systèmes DPF, EGR, AdBlue, FLAPS et OPF, le déverrouillage du calculateur (ECU), ainsi que la préparation de l’échappement et des freins. Les résultats sont vérifiés sur un banc de puissance à quatre roues motrices.

Celui qui envisage une reprogrammation arrive avec une question précise : combien de chevaux et de newton-mètres un Stage 1 va-t-il ajouter à mon moteur, et combien ça coûte ? Les promesses générales du type « +20 à 30 % » ne le convainquent pas. Le catalogue de puissance est donc devenu le centre du site, et les pages de services expliquent ce qui se passe concrètement sur la voiture.

Comment fonctionne le catalogue de puissance

Le catalogue ouvre la page d’accueil : une grille de logos de marques et l’invitation « Choisissez la marque de votre voiture ». Le parcours se fait ensuite en quatre étapes :

• la marque — 72 marques, d’Alfa Romeo à Wiesmann, chacune avec son logo ;
• le modèle — BMW en compte par exemple plus de quarante, de la Série 1 à la Z8 ;
• la génération avec ses années de production — pour la Série 3 : E46, E9x, F3x, G2x et leurs restylages ;
• le moteur — les motorisations sont regroupées par carburant (essence, hybride, diesel), avec la puissance d’origine affichée à côté.

À chaque niveau, un fil d’Ariane et des sélecteurs latéraux « Modèle — Année — Moteur » ouvrent la génération ou la motorisation voisine en un clic. Au total, le catalogue compte 72 marques, environ 800 modèles, plus de 1 500 générations et plus de 8 000 pages moteurs. Techniquement, ce sont des catégories WordPress imbriquées et des articles, et les logos sont rattachés aux catégories : le client gère le catalogue depuis l’administration habituelle.

La page moteur : origine contre Stage

C’est la page qui vend. Prenons la BMW 330i G2x :

• onglets Stage 1 et Stage 2 ;
• tableau « Origine — Après reprogrammation — Gain » pour la puissance et le couple : en Stage 1, 258 → 310 ch et 400 → 470 Nm ;
• prix : 449 € pour le Stage 1, « sur demande » pour le Stage 2 ;
• ce que comprend l’intervention : réglage au banc, cartographie personnalisée, mises à jour et diagnostic gratuits, 3 ans de garantie et 14 jours pour être remboursé ;
• bouton « Envoyer une demande ».

Le formulaire ajoute de lui-même l’adresse de la page d’où il est envoyé. Le conseiller voit tout de suite la marque, le modèle, la génération et le moteur, et ne perd pas le premier appel en questions.

Des milliers de pages pour la recherche

Chaque page moteur est une page d’atterrissage à part entière pour une recherche du type « reprogrammation 330i BMW ». Le titre et la description sont générés selon un modèle à partir du nom du moteur, du modèle, de la génération et de la ville, par exemple : « Reprogrammation 330i BMW 3-serie G2x… à Lviv — Stage 1 / Stage 2, Dyno ». Yoast SEO découpe le plan du site en lots de mille entrées, pour que les moteurs de recherche parcourent tranquillement tout le catalogue.

Les pages de services

En plus du catalogue, chaque service a sa page :

• Stage 1, Stage 2 et Stage 3 — ce qui change dans la cartographie et côté mécanique, quel gain attendre et comment se déroule l’intervention, étape par étape ;
• reprogrammation de boîte automatique et DSG, cartographie « pop and bang », désactivation logicielle des systèmes antipollution, déverrouillage ECU ;
• banc de puissance — ses caractéristiques : jusqu’à 1 000 ch et 1 300 Nm par essieu, vitesse jusqu’à 280 km/h, deux ou quatre roues motrices ;
• préparation de l’échappement et des freins — avec photos des réalisations.

En bas des pages de services revient un bloc avec les niveaux Stage 1, 2, 3 et la reprogrammation ECO : celui qui vient pour l’échappement découvre aussi les autres possibilités du studio.

Réalisations, contacts et demandes

La section « Nos réalisations » et un bloc de la page d’accueil affichent le fil Instagram du studio grâce à Instagram Feed Pro : des posts avec des mesures du type « Stock: 262 HP 412 NM → Stage1: 307 HP 483 NM » et un bouton « Charger plus ». En reprogrammation, c’est le portfolio le plus convaincant : de vraies voitures et de vrais chiffres.

Le premier écran affiche les liens vers Facebook, Instagram, TikTok et YouTube et le bouton « Prendre rendez-vous ». Un bloc contacts avec adresse, téléphone, e-mail et court formulaire (nom et téléphone avec masque de saisie) figure sur la plupart des pages, et la page contacts y ajoute une carte Google. Côté statistiques, Site Kit by Google et la balise Google Ads sont en place.

Pourquoi un studio de reprogrammation a besoin d’un catalogue de puissance

En reprogrammation, le client compare des chiffres. Un catalogue de puissance règle plusieurs problèmes d’un coup :

• il répond à la première question sans appel — la personne voit le gain pour son moteur et décide si le déplacement en vaut la peine ;
• il amène des visiteurs depuis la recherche — les requêtes avec marque, modèle et moteur sont plus précises et plus proches de la décision qu’un simple « reprogrammation Lviv » ;
• il fixe les attentes à l’avance — le client arrive en sachant quels chiffres sont réalistes, et le banc les confirme ;
• il rend les demandes plus précises — chacune contient le lien vers le moteur concerné.

Ce qui compte aussi sur le site d’un garage ou d’un studio de préparation

Le catalogue est un outil puissant, mais il ne suffit pas à lui seul. D’après l’expérience de ce projet, le site d’un studio devrait prévoir :

• des preuves du résultat — mesures avant/après, photos et vidéos au banc, réalisations récentes tirées des réseaux sociaux ;
• des prix clairs, ou au moins des repères — « dès » et « sur demande » sont plus honnêtes qu’un silence complet ;
• une explication simple des services : la différence entre Stage 1 et Stage 2, ce qu’il faut changer sur la voiture pour un Stage 3, ce qu’apporte la reprogrammation de la boîte ;
• une prise de rendez-vous en deux gestes — un formulaire court avec nom et téléphone et un bouton d’appel, surtout si le studio travaille sur rendez-vous ;
• l’adresse et une carte — on vient souvent d’autres villes, et l’accès doit être facile à trouver ;
• le confort sur smartphone — marque, modèle et moteur se cherchent souvent depuis le téléphone, debout à côté de sa voiture.

Si vous commandez un site pour un garage ou un studio de reprogrammation, réfléchissez d’avance à trois choses : d’où viendront les données du catalogue, comment les mettre à jour et comment la demande parviendra au conseiller. Un catalogue de milliers de pages doit se gérer depuis l’administration habituelle, et non à la main par un développeur — sinon il sera vite dépassé.

Portail-catalogue de gîtes ruraux pour l’Union du tourisme vert rural d’Ukraine

octobre 3, 2026

Le projet

L’Union du tourisme vert rural d’Ukraine est une association professionnelle qui représente le secteur du tourisme vert rural et fédère en réseau des propriétaires de fermes et de maisons paysannes sous le label de qualité « Gîte ukrainien accueillant ». Les gîtes du réseau sont classés, de la catégorie de base à la troisième, la plus élevée.

Le site devait servir plusieurs publics à la fois. Le voyageur : l’aider à choisir un gîte et à contacter son hôte. Le propriétaire : lui permettre d’ajouter et de gérer son gîte lui-même. L’Union : présenter en toute transparence ses statuts, ses règlements, sa direction, ses projets, le registre de ses membres et le travail de l’Académie du développement rural. J’ai réuni tout cela sur mon thème burum pour WordPress.

Le catalogue : de la carte à la fiche

Le catalogue commence par une carte interactive de l’Ukraine. Chaque région a sa section : le nombre de gîtes du réseau, une courte présentation de son histoire et de sa nature, une galerie de photos et un bouton vers les gîtes. À côté, des compteurs par niveau : trois, deux ou une « fleur », et la catégorie de base.

La fiche d’un gîte est faite de champs structurés, si bien que tous les gîtes sont décrits de la même façon et se comparent facilement :

• catégorie de confort ;
• services et prix — hébergement, repas, bois de chauffage, accompagnement touristique ;
• types d’hébergement — chambres simples, doubles et triples, maison indépendante, emplacement de tente ;
• équipements et conditions : douche et toilettes, cuisine, parking, Wi-Fi, enfants et animaux acceptés ou non, accueil des cyclotouristes ;
• distances jusqu’à la gare, aux soins médicaux, aux musées, au magasin, au café, aux coins de pêche et de baignade ;
• description, photos, coordonnées de l’hôte et plan d’accès.

Sous la fiche : les autres gîtes de la même région, les commentaires et un compteur de vues.

Les espaces personnels des propriétaires

Le bouton « Ajouter un gîte » de la page d’accueil mène à la connexion et à l’inscription. Les espaces personnels reposent sur le plugin WP-Recall : inscription avec indicateur de robustesse et générateur de mot de passe, connexion, récupération de l’accès. Depuis son espace, le propriétaire ajoute son gîte et tient lui-même sa fiche à jour.

Chaque propriétaire a un profil public avec ses publications et ses gîtes — c’est là que mène le bouton « Écrire au propriétaire » de la fiche. Un utilisateur inscrit peut envoyer un message privé à l’hôte sans quitter le site.

Adhésion et registre des membres

Le site aide l’Union à grandir. L’utilisateur choisit une formule d’adhésion — « Business » pour les hébergeurs et les petites entreprises, « Gîte (exploitation familiale) » pour les exploitations paysannes individuelles, « Expert » pour les enseignants, les chercheurs et les associations — et dépose sa demande en ligne. Le formulaire reprend la demande officielle adressée au comité : coordonnées, adresse et description de l’activité envisagée.

Le registre des membres est public. Le tableau indique le numéro de certificat de membre, le nom, le numéro et la date du procès-verbal d’admission, le type d’adhésion, le nom du gîte et la région, et pour les gîtes certifiés, la date du classement et sa durée de validité. Un onglet séparé affiche les nouvelles demandes.

L’Académie du développement rural

L’Union abrite l’Académie du développement rural, qui a sa propre section sur le site : règlement de l’Académie, organigramme, équipe avec coordonnées, formateurs avec biographies détaillées, bénévoles du projet « Selo UP », supports pédagogiques et de présentation, et réponses aux questions fréquentes.

Sur la page des formations, chaque cours est décrit en entier : à qui il s’adresse, format et calendrier, programme par modules avec dates et formateurs, ce que le participant en retire et comment le certificat est délivré. La formation de guides ruraux, par exemple, propose cinq formules de participation, de la base au premium, ainsi qu’une formule gratuite pour les membres de l’Union et une formule à tarif réduit pour les anciens combattants. Quand les inscriptions sont closes, la page l’indique immédiatement.

Documents, blog et version anglaise

La section consacrée à l’Union rassemble tout ce qu’une association doit rendre public : histoire, mission et valeurs, statuts, règlement d’adhésion, code de normes, comité, règlement des ambassadeurs, projets et rapports.

Le blog se divise en articles et actualités — plus de 200 publications à ce jour, chacune avec son compteur de vues. Le site fonctionne en ukrainien et en anglais : le sélecteur de langue se trouve dans l’en-tête, et le catalogue des gîtes, l’Académie, le registre et le blog existent dans les deux versions. La recherche de la page d’accueil et du catalogue affiche les résultats au fil de la saisie, sans recharger la page.

Pourquoi une union professionnelle a besoin d’un portail, et pas d’un simple site vitrine

Un site vitrine présente l’organisation, mais apporte peu à ses membres. Le site d’une union professionnelle devient vraiment utile quand il sert tout le monde à la fois : le voyageur trouve où séjourner chez les membres, le propriétaire obtient une vitrine et des contacts directs avec ses hôtes, et l’Union dispose d’un registre public et d’un argument de poids pour attirer de nouveaux membres.

Un portail-catalogue transforme le label de qualité en repère compréhensible pour le voyageur. Catégorie de confort, conditions et coordonnées de l’hôte réunies dans une même fiche inspirent davantage confiance qu’une annonce sur les réseaux sociaux, et un registre public avec numéros de certificat et durées de classement montre qu’une vraie procédure se cache derrière le label.

Comment créer un catalogue qui ne sera pas dépassé dans un an

Les catalogues de gîtes, d’hôtels, d’artisans ou de membres d’une association commencent souvent par une belle page d’accueil, et un an plus tard ils regorgent de fiches vides ou périmées. Pour l’éviter, je m’appuie sur quelques règles lors du développement :

• De la structure plutôt que du texte libre. Catégorie, prix, équipements et distances sont des champs distincts : les fiches sont homogènes et comparables.
• Le propriétaire gère sa propre fiche. L’espace personnel décharge l’administrateur de la routine et aide à garder les données à jour.
• Une navigation géographique. La carte des régions et les pages régionales aident le voyageur et offrent aux moteurs de recherche des pages dédiées à des requêtes comme « tourisme vert dans la région d’Ivano-Frankivsk ».
• Des documents et un registre publics. Pour une association, la transparence fait partie de la réputation.
• Plusieurs langues. La version anglaise ouvre le catalogue aux voyageurs et aux partenaires étrangers.
• Une recherche rapide. Les suggestions au fil de la saisie sont précieuses quand on se souvient du nom du gîte ou du village.

Développement de la plateforme de formation en ligne Student Hub pour la banque PUMB

octobre 3, 2026

Qu’est-ce que Student Hub ?

Student Hub est le portail étudiant de la banque PUMB (Première banque internationale ukrainienne). La banque y rassemble tout ce qu’elle propose aux jeunes : rencontres dans les universités et ateliers en ligne, stages, stage rémunéré PUMB DRIVE, consultations RH et offres d’emploi. Le cœur du portail est la plateforme de formation en ligne, sur laquelle les étudiants effectuent leur stage et suivent des cours complémentaires.

Ma part du travail : cette plateforme sur WordPress — cours et modules, tests et exercices, système de points, espace personnel, certificats et formulaires par lesquels les étudiants accèdent aux stages et aux consultations.

Comment fonctionne le stage en ligne

Le stage tient en un seul cours de sept modules. Chacun porte sur ce qu’il faut savoir pour un premier poste en banque :

• découverte de PUMB : valeurs, la banque en tant qu’employeur, bénévolat ;
• orientation client et empathie ;
• standards de service en agence et en ligne, gestion d’un client mécontent ;
• cybersécurité et fraude aux cartes de paiement ;
• l’application mobile de la banque ;
• produits d’épargne et de crédit ;
• carrière à la banque : perspectives et postes de débutant.

Les contenus sont des vidéos et des présentations. L’étudiant choisit lui-même le moment, le lieu et le rythme, et peut apprendre sur ordinateur, tablette ou téléphone. Le parcours est décrit directement sur la page du stage et tient en quatre étapes : remplir le formulaire d’inscription, suivre tous les modules, réussir les tests et obtenir le certificat.

Points, tentatives et certificat

Exigence principale : une évaluation transparente, calculée automatiquement, sans tableaux tenus à la main. Les règles sont intégrées aux réglages du cours :

• après chaque module, un test ou un exercice pratique ;
• 10 points au maximum par exercice, note de passage : 8 ;
• trois tentatives pour chaque exercice et chaque test ;
• 100 points au maximum pour l’ensemble du stage ;
• certificat accessible dès 72 points.

Les résultats alimentent le carnet de notes, et l’étudiant voit dans son espace sa progression, les résultats de ses tests et ses points. Une fois le cours réussi, le certificat se télécharge directement depuis l’espace — on peut le remettre à son université ou le mentionner dans son CV. Tous les titulaires du certificat entrent dans le vivier de talents de la banque et peuvent obtenir une consultation avec un responsable RH sur une carrière chez PUMB.

Inscription et connexion par numéro de téléphone

L’identifiant sur la plateforme est le numéro de téléphone au format 380XXXXXXXXX : l’étudiant n’a pas à inventer de nom d’utilisateur. À l’inscription, il indique son téléphone, son e-mail et un mot de passe. Après la saisie du mot de passe, un code de confirmation arrive par e-mail — cette deuxième étape protège l’espace, même si quelqu’un a découvert le mot de passe. La récupération du mot de passe et l’option « Rester connecté » sont prévues.

Le formulaire de connexion est intégré directement aux pages des cours. L’étudiant arrivé par un lien vers un cours se connecte ou s’inscrit sans quitter la page, et revient après l’inscription là où il avait commencé.

Catalogue de cours et formulaires

Outre le stage, la plateforme propose des cours complémentaires répartis en blocs : gestion du temps, communication professionnelle en ukrainien, travail dans Teams, astuces pour Miro, un cours sur TikTok et un cours « Outils d’IA pour l’étudiant ». Ils ne sont pas obligatoires pour le stage, mais apportent à l’étudiant des compétences utiles. Le catalogue se trie par date et par titre, et chaque cours affiche son nombre d’inscrits — plus de 1 100 pour le stage en ligne.

Pour accéder au stage, au stage rémunéré ou à une consultation, l’étudiant remplit un formulaire. Les formulaires recueillent ce avec quoi les RH peuvent travailler tout de suite : nom complet et date de naissance, téléphone et e-mail, université, filière et année d’études, domaine du stage (IT, agence bancaire, leasing financier), lieu de résidence, lien vers le CV et la façon dont l’étudiant a connu le projet.

Les sections du portail autour de la formation

La plateforme de formation vit au sein d’un portail carrière. La page du stage rémunéré PUMB DRIVE en présente les conditions — un travail rémunéré à mi-temps, 4 heures par jour, avec un mentor —, les spécialisations et les délais de candidature, et les réponses aux questions fréquentes sont regroupées dans des blocs dépliables. La section des consultations RH décrit l’aide des conseillers carrière : audit du CV et du profil LinkedIn, préparation à l’entretien, stratégie de recherche d’emploi. La section des événements réunit les rencontres dans les universités, les salons de l’emploi et les ateliers en ligne, avec la date et un bouton d’inscription.

Pourquoi WordPress et Tutor LMS

Pour une plateforme de formation d’entreprise, inutile de tout développer de zéro. Le duo WordPress et Tutor LMS Pro couvre l’essentiel : cours et leçons, tests et exercices, carnet de notes, certificats et espace personnel de l’étudiant. Les pages du portail sont construites avec Elementor Pro et PowerPack : l’équipe de la banque peut mettre à jour textes, événements et bannières sans développeur, et la formation comme le site vivent dans un même système, avec un seul compte étudiant.

Cette approche économise le budget au départ et laisse de la marge pour évoluer : un nouveau cours s’ajoute comme un article ordinaire, et les règles d’évaluation et le certificat se règlent cours par cours.

Plateforme de formation pour une entreprise : les points d’attention

La formation en ligne d’étudiants, de collaborateurs ou de partenaires ne fonctionne que si les gens apprennent confortablement et que l’entreprise voit le résultat. Quand je crée un LMS, je conseille de réfléchir dès le départ à plusieurs points :

• Les règles d’évaluation. Points, seuil de réussite et nombre de tentatives doivent être fixés avant le lancement et annoncés d’emblée aux apprenants.
• Le format mobile. Les étudiants apprennent souvent sur leur téléphone : vidéos, tests et espace personnel doivent fonctionner sur un petit écran.
• La protection de l’espace. La connexion par téléphone et le code de confirmation par e-mail réduisent le risque qu’un tiers accède aux résultats et aux certificats.
• Une fin claire. Un certificat et une étape suivante — stage rémunéré, vivier de talents, consultation — motivent à aller jusqu’au bout.
• Le lien avec les RH. Les formulaires doivent recueillir des données que l’équipe de recrutement peut exploiter immédiatement.

Une bonne plateforme de formation d’entreprise sur WordPress, c’est une structure de cours bien pensée, un système de points honnête et un parcours où chaque étape mène l’étudiant à un résultat — pour lui comme pour l’entreprise.

Développement du SaaS MyInboxify — un CRM pour WhatsApp, Telegram et Viber dans une seule fenêtre

octobre 3, 2026

MyInboxify : de quoi s’agit-il et pourquoi je l’ai créé

MyInboxify est un service SaaS : un CRM pour messageries. L’idée est simple : une petite entreprise n’a pas besoin d’un lourd logiciel de gestion aux dizaines de modules — elle a besoin qu’aucun message client ne se perde et que ses conseillers répondent vite. Toutes les demandes des différents canaux arrivent donc dans une seule boîte, et leur traitement est pensé pour se prendre en main en une soirée.

J’ai réalisé le service de bout en bout : j’ai conçu la structure et les rôles, écrit la partie serveur, l’interface du tableau de bord, les intégrations avec les messageries et le système de paiement, ainsi que le site de vente avec blog et centre d’aide. L’inscription est ouverte, et les 14 premiers jours sont gratuits.

Les canaux : WhatsApp, Telegram, Viber, e-mail et site

Chaque message entrant crée automatiquement une fiche contact et une demande avec sa source. Les canaux se connectent dans les réglages, et des instructions pas à pas sont intégrées à l’interface :

• WhatsApp — via la WhatsApp Cloud API officielle de Meta : l’assistant de connexion configure lui-même le webhook, l’abonnement et le numéro, et récupère les modèles de messages approuvés ;
• Telegram — le bot de l’entreprise : il suffit de coller le jeton, le webhook s’installe tout seul et se rétablit si la plateforme l’a réinitialisé ;
• Viber — avec le jeton du bot ;
• formulaire sur le site — code prêt à l’emploi avec champs personnalisés, balises UTM et protection anti-spam ;
• chat sur le site — widget dont on règle la couleur, le message d’accueil, l’invitation à discuter et la mention de consentement au traitement des données ;
• e-mail — si le client répond à un e-mail, sa réponse arrive dans le chat de la même demande.

Chat bidirectionnel et règles de WhatsApp

Le conseiller répond depuis la fiche de la demande, et le client reçoit le message là où il a écrit : WhatsApp, Telegram, Viber ou e-mail. Chaque message sortant affiche son auteur, son heure et son statut de remise. S’il n’est pas arrivé, la raison et un bouton de renvoi apparaissent à côté. Les nouveaux messages s’affichent sans recharger la page : le compteur de non-lus se met à jour, l’icône de l’onglet clignote et un court signal sonore retentit.

Il a fallu tenir compte d’une règle propre à WhatsApp : on ne peut envoyer un texte libre que dans les 24 heures qui suivent le dernier message du client. Une fois cette fenêtre fermée, le service bloque l’envoi normal et propose de choisir un modèle approuvé — le conseiller ne bute pas sur une erreur incompréhensible, il voit tout de suite quoi faire.

Équipe, statuts et contacts

Le dirigeant inscrit lui-même son entreprise et ajoute ses conseillers. Ceux-ci travaillent dans une boîte commune : ils prennent les demandes en charge, désignent les responsables, changent les statuts, laissent des notes internes. Chaque entreprise adapte la liste des statuts à son propre processus, et le journal d’activité montre qui a changé un statut, répondu ou envoyé un modèle, et quand.

• une seule demande ouverte par contact : un nouveau message du même client s’y ajoute au lieu de créer des doublons ;
• recherche des doublons par téléphone et fusion des fiches avec transfert de tout l’historique ;
• recherche, filtres et export des demandes et des contacts en CSV, qui s’ouvre correctement dans Excel ;
• pour les demandes issues du formulaire, un bouton « Appeler » et une case pour noter que l’appel a eu lieu.

Groupe Telegram à sujets, notifications et statistiques

Beaucoup d’équipes ont l’habitude de travailler dans Telegram : j’ai donc créé un miroir des demandes dans un supergroupe à sujets. Chaque demande y a son sujet, avec la fiche client et les boutons « Prendre » et « Clôturer ». Les messages du client, quel que soit le canal, y sont recopiés, et la réponse que le conseiller écrit directement dans Telegram part chez le client, là où il a écrit. Une protection anti-écho empêche les messages de tourner en boucle, et les données de différentes entreprises ne se croisent jamais.

Le service signale chaque nouvelle demande dans le chat Telegram de l’entreprise, le conseiller assigné reçoit une notification personnelle, et les demandes sans réponse depuis plus de trois heures sont regroupées dans un rappel. Les statistiques montrent les demandes, les clôtures et les sources ; les formules supérieures y ajoutent la charge des conseillers, les canaux, les balises UTM et l’export des statistiques en Excel et en PDF.

Formules, paiement et cinq langues

J’ai intégré le paiement directement au service : trois formules, qui se distinguent par le nombre de conseillers et la profondeur des statistiques, payables au mois ou à l’année avec remise. L’abonnement passe par Stripe avec période d’essai, le client change sa carte et retrouve ses reçus dans son espace Stripe, et un changement de formule prend effet à la fin de la période payée. Les prix du site de vente proviennent de l’administration du service : ils ne divergent jamais.

L’interface est entièrement traduite en anglais, russe, ukrainien, français et allemand. La langue peut se fixer directement dans l’adresse de la page — pratique pour des publicités qui ciblent différents pays —, et les pages de connexion et d’inscription ont leurs balises canonical et hreflang. Pour ceux qui ne veulent pas s’en occuper eux-mêmes, il existe un service de mise en route ponctuel : le client le paie sur le site, et la commande arrive aussitôt dans l’administration.

Sécurité et fiabilité d’un service SaaS

Dans un service multi-entreprises, les données des autres sont la première des responsabilités : j’ai donc intégré l’isolation des entreprises à chaque requête en base de données. Une entreprise ne verra jamais les données d’une autre, même en mettant un autre numéro d’enregistrement dans l’adresse de la page.

• les jetons des canaux sont stockés chiffrés, les mots de passe uniquement sous forme de hachage ;
• les webhooks entrants sont vérifiés par signature, les messages falsifiés sont rejetés ;
• protection contre les attaques par force brute, jetons CSRF sur toutes les actions, politique de sécurité du contenu stricte ;
• le formulaire du site est protégé par des pièges à robots, des limites par IP, une liste de domaines autorisés et un captcha au choix ;
• sauvegardes quotidiennes de la base et vérification régulière et planifiée des webhooks.

Ce qu’il faut prévoir si vous avez besoin de votre propre CRM ou d’une intégration de messageries

Si vous envisagez un CRM pour messageries, une intégration de la WhatsApp Business API ou votre propre service de relation client, l’expérience de MyInboxify montre qu’il vaut mieux réfléchir dès le début à plusieurs points :

• les règles de chaque plateforme — fenêtre de 24 heures et modèles sur WhatsApp, particularités des bots Telegram et Viber ;
• la remise des messages et les erreurs — le conseiller doit voir si le message est arrivé et pouvoir le renvoyer ;
• les doublons de contacts — un même client écrit depuis plusieurs canaux ;
• l’isolation des données, si plusieurs entreprises utilisent le service ;
• le paiement et les formules — période d’essai, renouvellement, changement de formule ;
• une connexion simple — moins le client a d’étapes techniques, plus il a de chances de rester.

Je développe des services web et des intégrations sur mesure — d’une simple liaison « formulaire du site → Telegram » jusqu’à une plateforme SaaS complète avec paiement et travail en équipe.

Développement du SaaS Mypostlify — publication automatique et calendrier éditorial pour les réseaux sociaux

octobre 3, 2026

Qu’est-ce que Mypostlify ?

Mypostlify est un service SaaS pour planifier et publier automatiquement du contenu sur les réseaux sociaux. L’utilisateur écrit son post une seule fois, choisit les réseaux et l’heure, et le service le publie tout seul avant d’en collecter les statistiques. Il s’adresse aux petites entreprises, aux créateurs de contenu et aux agences social media qui gèrent plusieurs comptes et ne veulent pas perdre de temps chaque jour à publier à la main.

J’ai réalisé le projet de bout en bout : architecture, partie serveur, interface du tableau de bord, intégrations avec les API des réseaux sociaux, paiement et site de vente avec blog et centre d’aide.

Huit réseaux et une connexion en un clic

Le service fonctionne avec Instagram, Facebook, Threads, LinkedIn, YouTube, X, TikTok et Telegram. Choix décisif : l’utilisateur n’a pas à créer ses propres applications développeur ni à copier des jetons. Mypostlify fait lui-même office d’application auprès des plateformes : on clique sur « Connecter », la fenêtre de consentement habituelle du réseau s’affiche, on autorise l’accès — et le compte est prêt à publier. Techniquement, c’est de l’OAuth : les jetons sont stockés chiffrés et se renouvellent automatiquement là où la plateforme le permet.

• Facebook — publication sur la Page de l’entreprise, choisie lors de la connexion ;
• Instagram — photos, carrousels et Reels pour les comptes professionnels ;
• Threads — posts texte et médias ;
• LinkedIn — posts au nom du profil et, si l’accès le permet, au nom de la Page entreprise ;
• Telegram — canaux et groupes, via le bot commun du service ou le bot du client ;
• YouTube, X et TikTok — les modules de connexion et de publication sont écrits ; ils s’activent au fur et à mesure que chaque plateforme approuve l’application.

Calendrier éditorial et éditeur de publications

Toutes les publications apparaissent dans un calendrier mensuel : chaque post affiche son heure, les icônes des réseaux et son statut — brouillon, planifié, publié, publié en partie ou en erreur. On peut créer un post directement depuis le jour voulu. L’éditeur réunit le texte, les médias de la bibliothèque, le choix des comptes et une ou plusieurs dates de publication, selon le fuseau horaire de l’entreprise. Les posts peuvent se répéter chaque jour, chaque semaine ou chaque mois.

Pour Telegram, on peut publier non seulement du texte et des photos, mais aussi des albums, des sondages, des fichiers, de l’audio, des messages vocaux, une position et des contacts.

Les exigences des plateformes sont vérifiées dès l’enregistrement : un post Instagram sans image ou une publication YouTube sans vidéo est refusé avec une explication immédiate, plutôt que d’échouer au moment de publier.

Le moteur de publication : fiable et sans doublons

Le cœur du service est un planificateur qui, chaque minute, récupère les posts dont l’heure est venue et les envoie aux réseaux. J’y ai intégré quelques règles sans lesquelles la publication automatique se casse vite :

• les posts partent par lots, avec une pause entre deux publications sur un même compte — une centaine de posts planifiés ne partent pas d’un coup ;
• en cas de panne réseau, une nouvelle tentative a lieu après 2, 10 puis 30 minutes, et les réseaux où le post est déjà parti sont ignorés — pas de doublons ;
• les erreurs durables, comme un accès révoqué, ne sont pas retentées sans fin, mais signalées à l’utilisateur avec leur cause ;
• si le processus s’interrompt en plein envoi, la tâche revient d’elle-même dans la file ;
• pour les vidéos Instagram et Threads, le service attend que la plateforme ait traité la vidéo avant de publier.

Statistiques et commentaires

Les statistiques sont collectées automatiquement environ une fois par heure : abonnés et leur évolution, portée, vues, réactions et commentaires, posts les plus performants en réactions. Une carte de chaleur de l’activité heure par heure montre quand l’audience réagit le mieux — un repère pour choisir ses horaires de publication. La période et le pas du graphique — heure, jour, semaine ou mois — sont réglables.

La section « Posts » réunit les publications avec leurs commentaires. On peut répondre aux commentaires Facebook, Instagram et Threads directement depuis le service et masquer ceux qui sont indésirables ; un onglet à part affiche ceux qui attendent une réponse.

Médiathèque et paiement réseau par réseau

Photos et vidéos sont stockées dans une médiathèque commune et réutilisées d’un post à l’autre. À l’envoi, les images sont automatiquement compressées à la taille qu’utilisent de toute façon les réseaux sociaux — cela économise de l’espace sans perte de qualité visible. Pour les gros volumes, une extension de stockage payante est proposée.

J’ai rendu le paiement modulaire : l’inscription est gratuite et sans carte, chaque réseau se connecte et se paie séparément — au mois ou à l’année —, et la première connexion d’un réseau ouvre une période gratuite de 14 jours. Si le paiement d’un réseau expire, seul ce réseau s’arrête. Les paiements passent par Stripe, chacun avec un reçu PDF, et le client qui déconnecte un réseau peut demander le remboursement des jours restants. Pour X, où la publication via l’API est payante, un porte-monnaie prépayé distinct est prévu.

La vérification de l’application par les plateformes

Pour que de vrais clients puissent connecter leurs comptes, l’application doit passer la vérification de chaque plateforme. Pour Meta — Facebook, Instagram et Threads —, j’ai préparé le dossier App Review : description du cas d’usage de chaque autorisation et vidéos de démonstration, de la connexion via Meta jusqu’à la publication, la gestion des commentaires et les statistiques. Cette étape est souvent sous-estimée : la vérification prend des semaines, et le moindre écart entre la description et la vidéo oblige à soumettre à nouveau.

Ce qu’il faut prévoir si vous avez besoin d’un service de publication automatique ou d’une intégration avec les réseaux sociaux

La publication automatique semble une fonction simple, mais dans un vrai produit, ce sont les plateformes elles-mêmes qui pèsent le plus sur les délais et le budget. L’expérience de Mypostlify montre qu’il faut anticiper :

• la modération des applications — Meta, LinkedIn, TikTok et Google vérifient l’application, il faut l’intégrer au planning ;
• le coût et les limites des API — chez X, la publication via l’API est payante, et YouTube impose un quota strict d’envois ;
• les exigences de contenu — Instagram ne publie pas sans média, et chaque réseau a ses propres limites pour les carrousels et les textes ;
• la file d’attente et les nouvelles tentatives — sans elles, une publication en masse perd des posts ou les duplique ;
• un paiement compréhensible — il est plus simple pour le client de ne payer que les réseaux qu’il utilise vraiment.

Je développe des services web et des intégrations avec les API des réseaux sociaux et des messageries — de la publication automatique des actualités d’un site sur un canal Telegram jusqu’à une plateforme SaaS complète avec paiement.

Création du site de l’apart-hôtel Cardinal à Truskavets : chambres avec réservation, spa et restaurant

octobre 3, 2026

L’hôtel et sa demande

Cardinal est un apart-hôtel neuf de cinq étages à Truskavets, aux finitions écologiques : la buvette centrale est à trois minutes à pied, et un parc de promenade se trouve juste à côté. Les chambres disposent d’une cuisine et se vivent comme des appartements indépendants, avec tout autour une véritable infrastructure hôtelière : spa, restaurant avec bar, salon de beauté, salle de conférence, transferts et livraison des repas en chambre.

L’hôtel avait besoin d’un site où le client peut découvrir sa chambre en détail, s’informer sur le spa et le restaurant et envoyer aussitôt une demande de réservation. C’est ce site que j’ai réalisé : dix pages, des carrousels et des onglets, une galerie avec visionneuse et des formulaires de réservation en fenêtre modale.

Structure du site

Toute l’offre de l’hôtel est répartie de sorte que le client trouve ce qu’il cherche en un ou deux clics :

• l’accueil – la vitrine de tous les services de l’hôtel ;
• les chambres – six catégories avec photos, équipements et formulaire de réservation ;
• le spa – sept espaces et une page dédiée au sauna finlandais ;
• le restaurant – horaires, réservation de table par téléphone, dress code et carte en PDF ;
• une galerie filtrable par rubrique, avec agrandissement des photos en fenêtre contextuelle ;
• les avis, les offres, le contact avec plan d’accès et la politique de confidentialité.

L’en-tête est commun à toutes les pages : menu des rubriques à gauche, logo au centre, et à droite téléphone, Facebook, Instagram et bouton « Réserver ». Les pages intérieures s’ouvrent sur un titre et un fil d’Ariane, et le pied de page reprend l’adresse, les téléphones, les réseaux sociaux, le bouton de réservation et les liens vers la politique de confidentialité, le règlement intérieur et le blog. Où que se trouve le client, l’appel ou la demande de réservation n’est qu’à un clic.

Page d’accueil : la vitrine de l’hôtel

Le premier écran montre une chambre en pleine largeur, la mention Apart hotel, le nom CARDINAL en grand et une courte présentation : un hôtel moderne de cinq étages aux finitions écologiques. Juste en dessous, un paragraphe met en avant son principal atout – l’emplacement, près de la buvette centrale et du parc.

La page d’accueil déroule ensuite, une à une, les raisons de choisir l’hôtel :

• un carrousel des chambres avec flèches et une fiche dotée d’un bouton « En savoir plus » ;
• les blocs « Emplacement et détente » et « Vue depuis les chambres », avec une photo du balcon qui domine la ville ;
• quatre tuiles verticales – salle de conférence, spa, restaurant et salon de beauté : au survol, la tuile s’éclaire et fait apparaître un bouton d’accès ;
• huit services illustrés d’icônes : ménage quotidien, Wi-Fi, télévision, service de réveil, transfert, guide pour les excursions, blanchisserie et repassage, livraison en chambre des plats du restaurant.

Chambres : onglets, carrousels et réservation

La page des chambres est celle qui fait vendre. Six catégories – de la chambre double d’une pièce à la super-suite de trois pièces et à la suite exécutive « Cardinal » – se parcourent par onglets, sans rechargement de la page. Chaque catégorie a son propre carrousel de photos, son nom, une pastille indiquant la surface (par exemple 38 m²) et quelques mots sur la vue.

Le bloc « Chaque chambre est équipée » rassemble dans une grille d’icônes ce que les clients demandent d’habitude au téléphone : kitchenette, réfrigérateur avec congélateur, vaisselle, bouilloire et service à thé, cabine de douche, lits 180×200, produits d’accueil, Wi-Fi et petite attention de la maison. Les services complémentaires – blanchisserie, room service, excursions, livraison de fleurs, soins esthétiques, maquillage, massage – s’affichent en grands caractères, et au survol d’un service, sa photo apparaît à côté.

En bas de page se trouve le formulaire « Réserver une chambre » : dates d’arrivée et de départ à choisir dans un calendrier, nombre de personnes, nom, téléphone, e-mail et commentaire, les champs obligatoires étant marqués d’un astérisque. Le même formulaire s’ouvre en fenêtre modale depuis les boutons « Réserver » : on peut donc envoyer une demande depuis n’importe quelle page, sans perdre ce que l’on était en train de regarder.

Le spa et le sauna finlandais

Le spa est l’un des points forts de l’hôtel ; il a donc sa propre page : hammam, sauna finlandais, jacuzzi, jacuzzi en plein air, bar à tisanes, salle de fitness et soins esthétiques. Chaque espace est présenté par un grand carrousel avec légende et bouton « En savoir plus ».

Le sauna finlandais a droit à une page à part, qui montre comment se présente un espace en détail. Ses caractéristiques sont réunies en icônes – température de 80 à 100 °C, humidité de 10 à 20 %, jusqu’à 8 personnes, bois naturel, banquettes sur deux niveaux, boissons du bar à tisanes –, avec à côté un texte sur les bienfaits du sauna et un formulaire « Réserver en ligne » : nom, téléphone et e-mail.

Les formulaires de réservation de chambre et d’espace spa contrôlent la saisie : si une valeur est incorrecte, le champ est mis en évidence avec un message d’erreur, et le client voit aussitôt ce qu’il doit corriger.

Restaurant, galerie, avis, offres et contact

• Restaurant – une page avec photos et réponses aux questions pratiques : ouvert de 8 h à 23 h, téléphone pour réserver une table, dress code, boissons du bar à tisanes et bouton « Télécharger la carte (PDF) ».
• Galerie – les onglets « Extérieurs de l’hôtel », « Spa », « Restaurant » et « Détente » changent de sélection sans rechargement, et un clic ouvre la photo dans une visionneuse avec flèches de navigation.
• Avis – des cartes avec nom, ville, date et note en étoiles, plus une pagination.
• Offres – des cartes d’offres spéciales, par exemple sur les soins spa ou le transfert jusqu’à l’hôtel.
• Contact – photo de la façade, adresse, téléphones, e-mail, réseaux sociaux, bouton « Nous contacter » et carte en pleine largeur.
• Politique de confidentialité – une page dédiée qui explique comment l’hôtel recueille et utilise les données laissées par les clients dans les formulaires.

Le style visuel et sa mise en œuvre

Le site joue sur une palette graphite sombre rehaussée d’or : boutons, onglets actifs, icônes et titres de rubriques ressortent en doré. Les titres sont composés dans un caractère classique à empattements, le texte courant dans une linéale sobre, et un fin dessin au trait de la façade de l’hôtel sert de fond à l’en-tête des pages intérieures, au pied de page et à certains blocs.

Lors du développement, il fallait préserver ce caractère sans rien sacrifier au confort d’utilisation : les photos chaleureuses des intérieurs doivent rester lisibles sur fond sombre, le motif de fond ne pas gêner la lecture, et les onglets, carrousels, fenêtres contextuelles et formulaires fonctionner de la même façon sur toutes les pages. C’est pourquoi les éléments récurrents – en-tête, fiche avec carrousel, grille d’icônes, formulaire de réservation – sont réalisés sous forme de blocs communs, réutilisés dans tout le site.

Ce qui fait un bon site d’hôtel

Un hôtel se choisit avec les yeux : la photo de la chambre, la vue, le spa et le restaurant pèsent plus lourd que de longues descriptions. Son propre site est l’endroit où l’hôtel peut se montrer tel qu’il est et recevoir les réservations en direct. Quand je crée un site pour un hôtel, je m’appuie sur quelques principes :

• de vraies photos plutôt que des images de banque – le client doit reconnaître sa chambre en arrivant ;
• des catégories de chambres avec surface et équipements, pour comparer sans téléphoner ;
• le bouton de réservation et le téléphone sur chaque page, avec un formulaire de demande court ;
• l’infrastructure – spa, restaurant, services – présentée comme une partie de l’offre, pas comme une ligne en petits caractères ;
• des avis, des offres et un plan d’accès qui lèvent les derniers doutes ;
• une politique de confidentialité, puisque le site recueille des noms, des numéros de téléphone et des adresses e-mail.

Si vous avez besoin d’un site pour un hôtel, une maison d’hôtes ou un centre de bien-être, je vous aide à le construire de A à Z – de la structure des pages aux carrousels, à la galerie et aux formulaires de réservation.

Conception et développement du site d’entreprise de Clever Meter Ukraine – comptage de l’eau et de la chaleur

octobre 3, 2026

Le client et sa demande

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 relève automatique des index et propose logiciels, analyse, intégration avec la facturation et service après-vente. L’entreprise travaille avec les fabricants Apator Powogaz, GWF et ADD Grup. Il lui fallait un site d’entreprise qui montre l’essentiel dès le premier écran : elle construit tout le système de comptage, elle ne vend pas seulement des appareils.

Le client m’a remis un cahier des charges détaillé de 65 pages – arborescence, blocs de chaque page, deux publics, exigences sur les formulaires, l’accessibilité, la sécurité et les rôles dans l’administration. J’ai mené tout le projet : design, développement, mise en place du contenu et vérifications avant la livraison.

Design : de la charte graphique au UI kit

J’ai construit le style sur la charte graphique et la texture d’eau de la marque : le bleu marine et le bleu clair de l’entreprise, ses polices, des sections blanches et bleu pâle. J’ai converti la texture du fichier source du client en masque vectoriel : sur le site, elle reste légère et change de couleur selon le fond. L’orange de la marque n’apparaît que là où il y a une action ou un mouvement de données : boutons principaux, pointillés des parcours de données, numéros d’étapes, chiffres clés.

Outre la page d’accueil, la maquette comprend une vingtaine de modèles de pages intérieures et un UI kit à part :

• couleurs de la marque, typographie, grille de 12 colonnes et échelle d’espacements ;
• boutons et champs de formulaire dans tous leurs états – normal, survol, focus, erreur, inactif ;
• cartes, badges, tableaux, messages, squelettes de chargement et états vides ;
• une fenêtre de formulaire en quatre états – saisie, erreur, envoi, succès avec numéro de demande ;
• une fiche des animations : ce qui bouge, en combien de millisecondes et pourquoi – sans mouvement décoratif.

Deux publics : « Partenaires » et « Entreprises »

Le site s’adresse à deux publics aux questions différentes. Un service des eaux ou une commune s’intéresse à l’échelle du réseau et au contrôle des pertes ; un promoteur ou une gérance, au comptage par logement et au retour sur investissement. Le site fonctionne donc en deux versions avec une structure commune : le sélecteur dans l’en-tête et dans le menu mobile mène à la même page de l’autre version, et la version « Entreprises » a son propre préfixe d’adresse – pratique pour la publicité et les e-mailings.

Chaque version déplace les accents : titres et textes des bannières, appels à l’action en bas de page, choix des domaines de solutions sur l’accueil, scénarios de télémétrie. Les réalisations et actualités du public en cours passent en tête des listes, les autres suivent – rien n’est masqué. Pour les moteurs de recherche, les deux versions renvoient à une seule adresse, sans doublons dans l’index, tandis que le cache les conserve séparément.

Accueil : la région du visiteur dès le premier écran

Le premier écran, c’est une photo de ville pleine largeur, la texture de la marque et le titre « du compteur à l’analyse », avec en bas une bande vitrée du parcours des données : compteurs → transmission → plateforme numérique → analyse et facturation. La photo dépend de la région du visiteur : elle est déterminée sur le serveur à partir de l’adresse IP grâce à une base locale mise à jour chaque mois. Le navigateur ne demande rien, l’IP n’est jamais enregistrée, et si la région n’est pas reconnue, une photo universelle s’affiche.

Dans l’administration, chaque région reçoit sa photo et, au besoin, ses propres plages d’adresses IP, et un rédacteur peut prévisualiser l’accueil tel qu’il apparaît dans n’importe quelle région. Plus bas : le cycle complet du comptage en huit étapes, les atouts, les chiffres de l’entreprise et les marques de fabricants, les solutions, les technologies de transmission, les réalisations, les actualités du secteur et le bloc « Nous trouvons la solution ».

Les rubriques produit : du comptage au service

Chaque rubrique répond à une question précise du visiteur et se termine par une prochaine étape claire :

• Comptage des ressources – les types de comptage et un calculateur : le visiteur saisit le nombre de compteurs, la fréquence des relevés, les minutes par compteur, le coût horaire d’un releveur et la part de passages répétés, et voit aussitôt l’économie annuelle et les heures libérées par la relève à distance ;
• Solutions – des domaines pour services des eaux, communes, revendeurs, promoteurs, industrie et agriculture, chacun avec sa page : problèmes du site, contenu de l’offre, équipements, réalisations et documents associés ;
• Télémétrie – le parcours des données de l’appareil à la facturation, les technologies LoRaWAN, M-Bus, Wireless M-Bus et GSM/NB-IoT, et un schéma interactif : vous choisissez le type de site, le schéma se reconstruit ;
• Logiciel – collecte des index, contrôle des pertes et des déséquilibres, rapports, intégration avec la facturation et demande de démonstration ;
• Service et assistance – échange, réparation et étalonnage, formulaire de demande avec choix de l’appareil et envoi de jusqu’à cinq photos ;
• À propos – l’histoire de l’entreprise avec une carte de son expansion, une vidéo dans un lecteur en fenêtre, les fabricants partenaires et un formulaire pour les futurs revendeurs.

Documentation technique et réalisations sur une carte

La documentation forme une bibliothèque à part pour les ingénieurs et les bureaux d’études. Les documents se cherchent par titre, modèle et référence et se filtrent par type (notices, catalogues, certificats, schémas de raccordement, BIM/CAD), catégorie d’équipement, technologie, fabricant et langue. Chaque document indique son format, sa taille, sa version et sa date de mise à jour, les versions obsolètes sont signalées, et certains fichiers sont remis après un court formulaire – l’entreprise obtient ainsi le contact du concepteur.

Les réalisations sont présentées sur une carte de l’Ukraine : vous choisissez une ville et voyez ses projets ; sur téléphone, une liste de villes soignée remplace la carte. Le référentiel contient les 460 villes du pays en ukrainien et en anglais : une nouvelle réalisation se rattache à n’importe quelle ville en la choisissant dans une liste. La page d’une réalisation se lit comme un récit : le site, le problème avant le projet, l’architecture du système, les équipements utilisés, le résultat et un bouton pour chiffrer un site similaire.

Actualités, recherche et newsletter

Les actualités sont rédigées dans l’éditeur de blocs de WordPress avec mes propres blocs – avis d’expert avec un annuaire des experts, fait mis en avant, appel à l’action, contenus liés. Chaque article affiche un temps de lecture, un sommaire, des étiquettes, des boutons de partage et des articles similaires ; photos et galeries se téléchargent une à une ou en archive. Un article ne peut pas être publié sans titre, chapeau, image de couverture et description d’image.

La recherche comprend les différentes formes des mots et fouille aussi bien les textes des pages que les champs des documents et des réalisations ; des suggestions s’affichent dès la saisie et se pilotent au clavier. Pour les abonnements, j’ai écrit une newsletter maison sans service externe : confirmation de l’adresse, choix des rubriques et des thèmes, e-mail dès la parution d’un article ou résumé hebdomadaire, éditeur d’e-mails par blocs, file d’envoi avec limites, désabonnement et gestion de l’abonnement en un clic, export des abonnés.

Formulaires de demande : numéro, services et protection anti-spam

Chaque langue compte 11 formulaires – trouver une solution, consultation, étalonnage, réparation, partenariat, estimation du coût et du retour sur investissement, demande de document, abonnement et formulaire général de la page Contacts. Ils s’ouvrent dans des fenêtres qui gardent le focus et se ferment avec Échap ; sur téléphone, ils glissent depuis le bas. Chaque demande reçoit un numéro au format CMU-année-numéro – il figure dans l’e-mail et sur l’écran de confirmation.

• sur la page Contacts, le visiteur choisit un sujet – et le message part au bon service, dont les adresses se règlent dans l’administration ;
• on peut joindre à la demande un cahier des charges, un plan du site ou une photo du point de comptage ;
• contre le spam : un champ piège invisible, un contrôle du temps de saisie et une limite d’envois par appareil – sans captcha pour les vrais visiteurs ;
• toutes les demandes sont conservées dans l’administration, et la rubrique « Contacts clients » les regroupe par personne – par e-mail ou téléphone –, avec recherche et export vers Excel.

Version anglaise avec Polylang

La langue principale du site est l’ukrainien, et la version anglaise est entièrement traduite : pages, actualités, réalisations, documents, rubriques, menus, formulaires, e-mails de la newsletter et tous les libellés de l’interface. Les deux versions partagent les mêmes adresses, au préfixe de langue près ; le sélecteur UA / EN mène à la même page et, s’il n’y a pas de traduction, l’indique au lieu d’ouvrir une page vide. Les réglages généraux et les blocs du site ont leurs propres valeurs par langue, et un champ vide reprend le texte ukrainien.

Tout se modifie depuis l’administration

Exigence principale du client : aucun texte, chiffre ou photo dans le code. Chaque bloc de la maquette est devenu un champ ACF – sur la page concernée ou dans les sections communes « Réglages du site » et « Blocs du site » : contacts, services, réseaux sociaux, bouton de contact rapide, chiffres de l’entreprise, marques, textes des fenêtres de formulaire, appels à l’action. Les textes se rédigent dans un éditeur visuel, et le rendu reste fidèle à la maquette : paragraphes et listes prennent automatiquement le style du design. Les champs indiquent où ils apparaissent sur le site.

L’équipe dispose de rôles : un gestionnaire de contenu s’occupe des actualités, de la médiathèque et des demandes, sans toucher aux pages, aux documents ni aux réglages. La médiathèque retire les données de localisation des photos, crée des copies réduites en WebP et montre où chaque image est utilisée. Les vidéos s’ajoutent par lien YouTube ou en fichier.

SEO, vitesse et sécurité

Le site est prêt pour le référencement dès le premier jour : adresses lisibles avec redirection des anciennes, fil d’Ariane avec données structurées, titres et descriptions SEO dans Yoast, balises de langue pour les moteurs de recherche. Les polices sont hébergées localement, les images sont servies à la bonne taille et se chargent au fil du défilement, les pages intérieures sont mises en cache, mais pas l’accueil avec sa bannière régionale.

La sécurité suit le cahier des charges : en-têtes de sécurité du navigateur, blocage des tentatives de deviner le mot de passe, mots de passe robustes, connexion à deux facteurs au choix de l’utilisateur, interfaces de service fermées et journal des actions dans l’administration. Avant la livraison, j’ai parcouru tout le site dans les deux langues et les deux versions : aucune erreur de page, tous les formulaires testés, aucun défilement horizontal sur téléphone.

Pourquoi une entreprise technologique a besoin d’un site bien pensé

Quand une entreprise vend des solutions techniques complexes, son site joue le rôle de premier conseiller. Un ingénieur d’un service des eaux, un représentant de commune ou un promoteur doit comprendre vite ce qu’on lui propose et comment cela fonctionne. Pour les sites B2B, je m’appuie donc sur quelques principes :

• expliquer le complexe par des schémas, des étapes et des calculateurs, pas par des paragraphes de jargon ;
• à chaque public ses accents, dans une structure commune ;
• sur chaque page, une prochaine étape claire : trouver une solution, demander un conseil, obtenir un document ;
• documentation et réalisations comme preuves d’expertise, faciles à trouver ;
• tout le contenu entre les mains de l’équipe, dans toutes les langues, sans développeur.

Si vous avez besoin d’un site d’entreprise complet – du design selon votre cahier des charges au développement de fonctions avancées –, je mène le projet de la première maquette à la livraison du site terminé.

Création du site du restaurant Beef&Cake à Khmelnytskyï : banquets, salon VIP, bons cadeaux et deux langues

octobre 3, 2026

Le restaurant et sa demande

Beef&Cake est un restaurant de viandes à la cuisine d’auteur, au centre de Khmelnytskyï, rue Proskurivska. La maison mise sur des viandes préparées selon ses propres recettes et dispose, en plus de la salle principale, d’un salon VIP et d’une salle de banquet. Le restaurant vend des bons cadeaux, tient une boutique de souvenirs, fait visiter ses salles en 3D, reçoit des distinctions et publie ses propres actualités – par exemple sur son tartare de bœuf record, homologué par le Livre des records d’Ukraine.

Il fallait réunir tout cela dans un site qui exprime le caractère de l’établissement et pousse à l’action : réserver une table, commander un banquet ou acheter un bon cadeau. J’ai réalisé ce site sous WordPress avec un thème sur mesure – deux versions linguistiques, formulaires de demande, galeries, actualités et version mobile complète.

Structure : trois raisons de venir sur le site

Je ne suis pas parti d’une liste de pages, mais de la raison pour laquelle on ouvre le site d’un restaurant. Il en est ressorti trois scénarios, chacun avec son propre chemin, aussi court que possible :

• « je veux dîner » – le bouton « Réserver une table » dès le premier écran, la carte, les horaires, l’adresse et le plan ;
• « j’organise un événement » – les pages du salon VIP et de la salle de banquet, avec photos, capacité et demande de banquet ;
• « je cherche un cadeau » – le bloc des bons cadeaux, une fenêtre contextuelle et un formulaire de demande.

Les autres pages viennent appuyer le choix : le restaurant, la visite 3D, la galerie et les actualités. Dans l’en-tête : le logo, un lien vers la visite 3D, le sélecteur de langue ENG | UKR et le bouton du menu. Celui-ci donne accès à toutes les rubriques du site, ainsi qu’aux autres projets du propriétaire, au service traiteur et à la boutique de souvenirs.

La page d’accueil

Le premier écran montre la salle dans la pénombre, murs de briques et lumière chaude, le logo avec son schéma de découpe du bœuf et un bouton doré « Réserver une table ». La page d’accueil fait ensuite brièvement le tour de tout ce que propose le restaurant :

• le restaurant – un collage de quatre photos dans un cadre doré, un texte et des liens vers la visite 3D et la boutique de souvenirs ;
• la carte – un grand steak sur fond sombre et le bouton « Voir la carte » ;
• le salon VIP et la salle de banquet – photos, capacité et accès aux pages dédiées ;
• les bons cadeaux – un carrousel avec bouton « Acheter » ;
• les actualités et les distinctions – des carrousels avec flèches et points ;
• les horaires, l’adresse, le téléphone, l’e-mail, les réseaux sociaux, des liens vers la carte, la réservation de table, la livraison et les avis sur le service Choice, et un plan.

Le pied de page reprend les rubriques du site, les autres projets du propriétaire et ses services : traiteur et boutique de souvenirs. Il a pour fond le schéma de découpe du bœuf dessiné au trait – le même motif que dans le logo.

Salon VIP et salle de banquet

Les lieux d’événements sont une source de demandes à part entière ; chacun a donc sa page. Le texte alterne avec des photos verticales disposées en quinconce, et les phrases clés ressortent en écriture manuscrite : une longue description se lit plus facilement, et l’essentiel ne se perd pas.

• le salon VIP – un espace privé pour 8 à 10 personnes, avec entrée indépendante, balcon, télévision et climatisation, pour les rendez-vous, les fêtes et les négociations ;
• la salle de banquet – jusqu’à 50 convives, une entrée indépendante, un grand écran LED pour les vidéos et les photos, un bar ouvert, et la possibilité de transformer la salle en salle de conférence.

Les deux pages se terminent par un carrousel de photos, et sur celle de la salle de banquet, le bouton « Demande de banquet » ouvre le formulaire.

Galerie, actualités et visite 3D

Les galeries reposent sur l’extension Photo Gallery et se répartissent en trois thèmes : « Notre carte », « Notre ambiance » et « Notre intérieur ». La page générale de la galerie présente une sélection de chaque thème, et chaque thème a sa propre page avec toutes les photos. Le restaurant ajoute lui-même ses nouvelles photos depuis l’administration, sans toucher au code.

Les actualités sont des articles WordPress : elles défilent en carrousel sur la page d’accueil et s’ouvrent chacune sur sa propre page. La visite 3D est accessible depuis l’en-tête et le bloc « Le restaurant » et s’ouvre sur une page dédiée : le client peut jeter un œil à la salle avant même de venir.

Formulaires et fenêtre des bons cadeaux

J’ai réalisé les demandes de banquet et de bon cadeau avec Contact Form 7, en les gardant courtes et construites sur la même logique : nom, e-mail et téléphone avec masque +380, une mention précisant qu’un responsable rappellera, et une mention de consentement au traitement des données personnelles. Le masque empêche de saisir un numéro au mauvais format : le responsable reçoit un numéro qu’il peut appeler tout de suite. Après l’envoi, le client voit le message « Envoyé » et sait que sa demande est bien partie.

Pour les bons cadeaux, j’ai prévu une fenêtre contextuelle : l’image du bon, une description et un bouton « Acheter » qui mène au formulaire de demande. Le client ne quitte pas la page sur laquelle le cadeau a éveillé son intérêt.

WordPress, deux langues et version mobile

Le site tourne sous WordPress avec un thème écrit spécialement pour ce projet. Le restaurant modifie les textes des pages, les actualités et les photos depuis l’administration, tandis que l’apparence reste cohérente, car tous les blocs – carrousels, collages, cartes, formulaires – sont prévus dans les gabarits du thème.

• deux versions linguistiques – ukrainienne et anglaise –, avec le sélecteur ENG | UKR dans l’en-tête de chaque page ;
• une version mobile complète : accueil, le restaurant, salon VIP, salle de banquet, visite 3D, actualités, galerie, formulaires, message « Envoyé », fenêtre des bons cadeaux et menu sont repensés pour le smartphone ;
• sur téléphone, les blocs passent sur une seule colonne, collages et carrousels sont conservés, et boutons et contacts restent grands et faciles à toucher ;
• Google Site Kit – la fréquentation et les données de recherche sont visibles directement dans le tableau de bord WordPress.

Ce qui fait un bon site de restaurant

Un site de restaurant ne vend pas des plats, il vend une expérience : une ambiance, des saveurs, une envie de venir. C’est pourquoi, quand je crée un site pour un restaurant, je m’appuie sur quelques principes :

• les photos des plats et des salles sont le contenu principal, le texte ne fait que les compléter ;
• la réservation de table est visible dès le premier écran et accessible en quelques gestes ;
• banquets, salons VIP et bons cadeaux ont chacun leur page avec demande, et pas une simple ligne dans le menu ;
• horaires, adresse, téléphone et plan sont toujours à portée de main ;
• la version mobile est pensée à part – on cherche le plus souvent un restaurant sur son smartphone, en chemin ou juste avant de sortir ;
• le restaurant met à jour lui-même ses actualités et sa galerie, sans développeur.

Si vous avez besoin d’un site pour un restaurant, un café ou un bar, je vous aide à traduire le caractère de votre établissement en un site où le client trouve vite la carte, réserve sa table et envoie sa demande de banquet.

Création du site et de la boutique en ligne de Sparta Garage : motos custom et tuning Mercedes-Benz

octobre 3, 2026

L’atelier et sa demande

Sparta Garage construit des motos custom clés en main : le client expose son idée, valide le budget, puis voit la moto de ses rêves prendre forme dans le métal et le plastique. En plus des customs, le garage a un pôle automobile – des services pour voitures et poids lourds – et une boutique en ligne de tuning et d’électronique pour Mercedes-Benz.

Il fallait un site qui vende aussi bien le travail sur mesure de l’atelier que les produits de la boutique. J’ai réalisé les deux volets : le site de l’atelier avec projets, services et contact, et la boutique en ligne avec catalogue, recherche par véhicule, fiches produits et panier.

Structure : un atelier et une boutique sous une même marque

Le projet se compose de deux volets qui partagent la marque mais pas la mission :

• le site de l’atelier – accueil, projets, page projet, services, page service et contact ; sa mission : inspirer et amener à commander une construction ;
• la boutique en ligne – catalogue par catégories, recherche par véhicule, fiches produits et prestations, panier ; sa mission : aider à trouver vite la pièce compatible et à passer commande.

Le pont entre les deux, c’est la bannière de la boutique sur l’accueil : le logo graffiti de Sparta Garage, l’inscription STORE et un bouton « Y aller ». L’en-tête du site de l’atelier comprend le logo, un menu de six rubriques et les réseaux sociaux ; le pied de page, la FAQ, l’assistance, le paiement, la livraison, les retours et le contact.

Page d’accueil de l’atelier

Le custom est une affaire de style : la page d’accueil repose donc presque entièrement sur les photos de motos – fond noir, moto en gros plan, un slogan court et provocateur avec les accents rouges du logo, et un bouton « Projets ». L’accueil déroule ensuite l’offre de l’atelier :

• un bloc sur l’atelier : construction clés en main sans dépassement de budget, délais tenus, qualité du travail et des matériaux, possibilité de passer suivre l’avancement ;
• un carrousel plein écran des projets, avec légendes, flèches et points ;
• le bloc « Pourquoi choisir Sparta Garage ? », avec un texte et quatre cartes d’atouts illustrées d’icônes ;
• la bannière de la boutique en ligne et le pied de page.

Projets, services et contact

Les projets sont le principal argument de l’atelier. La page des projets s’ouvre sur un grand titre et une photo, suivis de blocs sur la construction sur mesure et la mécanique moto, d’une vidéo avec lecteur, d’une grille de projets datés avec un bouton pour charger la suite, et enfin d’un formulaire avec nom et e-mail.

La page projet est construite comme un récit : un grand premier écran avec la photo de la moto et son nom, puis un long texte ponctué de grandes photos et d’intertitres, et une navigation vers le projet précédent et le suivant. Le même gabarit sert pour la page d’un service.

La page des services s’ouvre sur une photo de soudure et un grand titre ; en dessous, une grille de cartes présente les activités du garage, sombres et claires en alternance, avec photos : pièces d’occasion pour poids lourds importées d’Europe, boutique d’accessoires, vidange pour voitures, lavage pour poids lourds et voitures. La page contact réunit un bloc sur l’atelier avec une citation, une invitation à lancer son projet, les téléphones, l’adresse, l’e-mail, un formulaire de message et une carte.

Boutique en ligne : catalogue et recherche par véhicule

La boutique propose du tuning et des équipements complémentaires pour Mercedes-Benz : reprogrammation des calculateurs, codage, électronique, extérieur, intérieur et gain de puissance. Pour une pièce auto, la première question de l’acheteur est de savoir si elle ira sur sa voiture ; la recherche par véhicule passe donc en premier.

• une bannière du modèle et la ligne « Votre véhicule » avec un lien « Modifier » : la voiture n’est indiquée qu’une seule fois ;
• des onglets de catégories : tous les produits, reprogrammation ECU, codage, électronique, extérieur, intérieur, gain de puissance ;
• pour chaque catégorie, une rangée de fiches avec photo, nom, prix « dès » et étiquettes des modèles compatibles, plus un lien « Tout voir » ;
• dans l’en-tête de la boutique : espace client, partenariat, contact, choix de la devise et panier avec compteur d’articles.

Fiche produit : options, Stage 1/2 et compatibilité

La fiche produit réunit sur un seul écran tout ce qu’il faut pour décider d’acheter :

• une galerie avec miniatures, flèches et zoom ;
• les étiquettes de modèles, le prix, la quantité, une liste déroulante d’options et le choix de la couleur ;
• des compléments avec prix, à cocher pour les ajouter à la commande ;
• les boutons « Ajouter au panier » et « Ajouter à la liste d’envies », et un lien de retour vers la catégorie ;
• des onglets description, caractéristiques et compatibilité, puis un carrousel de produits similaires.

Les reprogrammations ont leur propre type de fiche : le sélecteur Stage 1 / Stage 2 met à jour la puissance et le couple obtenus après tuning, la courbe et la liste des pièces nécessaires. Le tableau de compatibilité énumère les modèles, carrosseries et années de fabrication : l’acheteur vérifie sa voiture avant même de commander.

Les prestations vendues comme des produits, et le panier

Dans la boutique, les services du garage se vendent comme les pièces. Sur la fiche d’une prestation, l’acheteur choisit le modèle et l’année de sa voiture, voit la durée de l’intervention et l’intervalle d’entretien, coche les compléments avec leur prix et clique sur « Ajouter au panier ». Les nouveautés portent une étiquette « New », les longues descriptions se déplient avec le bouton « Afficher plus », et le mini-panier avec compteur montre aussitôt que la commande s’est étoffée et permet de la consulter.

La pièce et son montage se retrouvent ainsi dans le même panier : inutile d’appeler à part pour prendre rendez-vous à l’atelier.

Ce qui compte pour le site d’un atelier et d’une boutique de tuning

Le site d’un atelier vend la confiance dans le savoir-faire du mécanicien ; la boutique, la certitude que la pièce conviendra. Dans ce type de projet, je m’appuie donc sur quelques principes :

• les réalisations sont le contenu principal : grandes photos, vidéos et l’histoire de chaque projet ;
• un chemin clair de l’envie à la demande de construction ;
• une recherche par véhicule et des étiquettes de compatibilité sur chaque fiche produit ;
• des options et compléments avec prix directement sur la fiche, sans devoir appeler un vendeur ;
• des prestations que l’on peut commander avec la pièce ;
• une marque unique, même quand les volets du site ont des missions différentes : vitrine sombre pour l’atelier, boutique claire et fonctionnelle.

Si vous avez besoin d’un site pour un atelier, un garage ou une boutique en ligne de pièces et de tuning, je vous aide à le construire de A à Z – de la vitrine de vos réalisations au catalogue avec recherche par véhicule et au panier.

Création du site d’une clinique dentaire : soins, prise de rendez-vous et espace patient

octobre 3, 2026

Le projet et sa demande

Le client est une clinique dentaire généraliste : traitements de racine, dentisterie esthétique, implants, blanchiment, prévention et urgences. La clinique avait besoin d’un site multipage en anglais capable de trois choses : fixer des rendez-vous, aider les patients en urgence et présenter en détail ses soins et son équipe.

J’ai intégré les pages du site, développé les blocs interactifs – formulaires, carrousels, bloc vidéo – et réalisé la version responsive pour smartphone. Toutes les pages suivent un même système : sections bleu clair, cartes blanches à ombre douce, boutons bleus et mots clés des titres soulignés d’une ligne ondulée.

Structure du site

Le site compte sept pages, chacune avec son rôle :

• Home – l’accueil : rendez-vous, ligne d’urgence, soins, atouts, spécialistes, avis et actualités ;
• Services – tous les domaines de la clinique en cartes ;
• Blogs – actualités et articles de la clinique ;
• About – la présentation de la clinique ;
• Contact – les coordonnées ;
• Login et Sign up – connexion et inscription des patients.

Le menu de l’en-tête est le même sur toutes les pages. À droite, sur l’accueil et la page des soins, se trouvent le bouton « Book Now » et l’avatar de l’utilisateur ; sur la page de connexion, ils laissent la place aux liens « Login » et « Sign up ».

Accueil : prise de rendez-vous et ligne d’urgence

Le premier écran s’ouvre sur le titre « Get Ready For Your Best Ever Dental Experience! » et une courte promesse sur la qualité des matériaux. En dessous, deux actions : le bouton bleu « Book an appointment » et un bouton avec un combiné téléphonique et le numéro « Dental 24H Emergency ». Le patient qui prévoit une visite prend rendez-vous ; celui qui a mal en ce moment voit tout de suite qui appeler.

Plus bas, une carte avec l’avis d’un spécialiste et l’icône LinkedIn ; à droite, la photo d’un dentiste souriant, entouré d’orbites en pointillé ponctuées d’icônes de dents. Juste après le premier écran viennent trois cartes des soins principaux : traitement de racine, dentisterie esthétique et implants. Chacune a son icône, une courte explication et un lien « Learn More ».

Nouveaux patients, atouts et vidéo

Le bloc « We’re Welcoming New Patients » s’adresse à ceux qui ne sont encore jamais venus à la clinique. Il contient un formulaire à un seul champ – le numéro de téléphone – et un bouton « Submit » : on laisse son contact directement depuis l’accueil, sans passer par la page de contact.

Vient ensuite le bloc « Why Choose… », avec la photo d’un spécialiste au travail et une courte liste de raisons de choisir la clinique :

• une solide équipe de dentistes ;
• des soins dentaires modernes ;
• des réductions sur les traitements ;
• une prise de rendez-vous simple et rapide.

Sous la liste, de nouveau « Book an appointment ». Le même bouton figure dans le bloc « Leave Your Worries At The Door… », avec une grande photo de sourire : la prise de rendez-vous reste toujours en vue. Cette partie se termine par un bloc vidéo – une large image du cabinet avec un bouton de lecture et un bouton « Watch Playlist ».

Spécialistes, avis et actualités

Le bloc « Meet Our Specialists » est un carrousel de l’équipe : photo du praticien, nom et spécialité sur un bandeau semi-transparent, icône LinkedIn dans le coin de la carte. L’équipe compte un orthodontiste, un endodontiste, un parodontiste et un dentiste pédiatrique ; des flèches sous le carrousel font défiler les cartes.

« Our Happy Clients » est un second carrousel, consacré aux avis des patients : avatar, nom, note de cinq étoiles et texte de l’avis. Le bloc « News & Articles » affiche les dernières publications et un bouton « View All » qui mène au blog.

La page des soins

La page Services réunit tous les domaines de la clinique dans une grille de six cartes :

• Root Canal Treatment – traitement de racine ;
• Cosmetic Dentist – dentisterie esthétique ;
• Dental Implants – implants dentaires ;
• Teeth Whitening – blanchiment des dents ;
• Emergency Dentistry – urgences, quand il faut arrêter un saignement ou calmer une forte douleur ;
• Prevention – prévention et hygiène bucco-dentaire.

Les cartes sont construites comme sur l’accueil : icône dans un cercle bleu clair, titre, deux lignes de description et « Learn More ». Le patient trouve vite ce qu’il cherche, et un nouveau soin s’ajoute avec la même carte.

Connexion et inscription des patients

La page de connexion est divisée en deux. À gauche, la photo d’un praticien au travail et une citation, avec des flèches pour passer à la suivante. À droite, le formulaire « Welcome Back » :

• le bouton « Log in with Google » – connexion avec un compte Google ;
• les champs e-mail et mot de passe, avec icônes ;
• la case « Remember Me » et le lien de récupération du mot de passe ;
• le bouton « Log in » et le lien « Create an account » pour ceux qui n’ont pas encore de compte.

L’inscription se fait sur une page Sign up distincte, accessible depuis le bouton de l’en-tête et le lien sous le formulaire de connexion.

Version mobile

Sur smartphone, les pages passent sur une seule colonne. L’en-tête se réduit au logo et à un bouton de menu carré. Sur le premier écran viennent d’abord le titre et le texte, puis le bouton « Get Started » et le numéro d’urgence sur une même ligne, et plus bas la carte d’avis et la photo du dentiste. L’essentiel – rendez-vous et téléphone – est visible tout de suite, sans faire défiler la page.

Ce qui fait un bon site de clinique dentaire

On arrive sur le site d’un dentiste dans l’un de deux états d’esprit : soit on prévoit un traitement et on compare les cliniques, soit on a mal aux dents et il faut voir un praticien le jour même. Un bon site de clinique répond aux deux. Quand je réalise des sites pour des centres médicaux, je suis quelques règles :

• la prise de rendez-vous figure dès le premier écran et revient tout au long de la page ;
• le numéro d’urgence est mis à part et bien visible : une personne qui souffre n’a pas le temps de chercher les coordonnées ;
• les soins sont présentés en courtes cartes, avec des noms clairs et un lien vers le détail ;
• les visages des praticiens et les avis des patients inspirent plus confiance que des généralités sur la qualité ;
• un blog d’actualités et d’articles répond aux questions fréquentes et aide le site dans les moteurs de recherche ;
• la version mobile n’est pas une copie en réduction : sur téléphone, les boutons sont grands et le numéro à portée de main.

Si votre clinique a besoin d’un site qui prend les rendez-vous de vos patients, je le réalise clés en main : pages, formulaires de rendez-vous, carrousels, espace patient et intégration responsive.

Création d’une landing page pour la clinique dentaire Mii Stomatoloh : implants MegaGen

octobre 3, 2026

La clinique et sa demande

Mii Stomatoloh (« Mon dentiste » en ukrainien) est une clinique dentaire ukrainienne : soins dentaires, chirurgie, diagnostic et implantologie. Pour la pose d’implants du système MegaGen AO, la clinique avait besoin d’une page dédiée avec un seul scénario : le visiteur découvre le soin, s’assure qu’il peut faire confiance à la clinique et laisse son numéro de téléphone.

L’implantologie est un traitement coûteux, et la décision ne se prend pas sur-le-champ. Le patient compare les prix, se renseigne sur les systèmes d’implants, examine les photos de cas et choisit son praticien. J’ai donc commencé par l’ordre des blocs : quelle question se pose à chaque étape, et où se trouve la réponse sur la page. Sont venus ensuite l’intégration, les blocs interactifs et l’adaptation à l’ordinateur, à la tablette et au smartphone.

Premier écran et offres

Le premier écran réunit tout ce pour quoi le patient est venu : le grand titre « Implants dentaires avec le système MegaGen AO », le bouton « Obtenir une consultation » et le prix. L’ancien prix de 12 000 UAH est barré, à côté du prix actuel de 10 000 UAH : on saisit tout de suite l’ordre de grandeur et l’économie. En dessous, trois chiffres sur la clinique : plus de 15 ans d’expérience en implantologie, plus de 1000 clients satisfaits et plus de 20 praticiens.

À droite, la photo d’un praticien au travail, dont le bord se « désagrège » en petits carrés, devant un aplat bleu clair. Les boutons principaux du site ont un dégradé rose et bleu clair, aux couleurs du logo : il revient sur toute la page, et l’œil apprend vite à repérer l’action. Dans l’en-tête, en plus du menu, deux boutons bien visibles : « Écrivez-nous » et « Appelez-nous ».

Juste après le premier écran viennent les « Offres promotionnelles » : des cartes avec photo, une étiquette verticale colorée indiquant le domaine – soins, chirurgie, diagnostic –, la liste de ce que comprend la prestation, le nouveau prix et l’ancien, barré.

Un article d’expert digne de confiance

Une page médicale est un sujet sensible, pour les patients comme pour les moteurs de recherche : les conseils de santé sont jugés plus sévèrement qu’une fiche produit. L’article d’expert de la landing page indique donc qui l’a écrit et quand :

• la date de publication – on voit que l’information est à jour ;
• l’auteur et sa fonction – un médecin traitant, et non un rédacteur anonyme ;
• le relecteur – un second spécialiste qui a vérifié le texte ;
• un encadré « Important ! » qui précise que l’article ne remplace pas une consultation et ne sert pas à poser un diagnostic.

À côté du texte, un collage de trois photos : un praticien au travail et des gros plans de soins. Le bloc fait partie intégrante de la clinique, et non d’un article d’encyclopédie plaqué sur la page.

Formulaire de consultation et catalogue d’implants

Juste après l’article, une bannière bleu vif « Consultation gratuite avec notre médecin », avec la photo d’un praticien en polo aux couleurs de la clinique et un motif de fond fait d’icônes dentaires. Le formulaire n’a qu’un champ – le numéro de téléphone – et un bouton flèche : moins il y a à remplir, plus on laisse volontiers son contact.

Le bloc « Implants disponibles » aide à comprendre ce que propose exactement la clinique. Les cartes AnyOne et AnyRidge alternent photo à gauche et à droite et suivent la même structure :

• le nom du système et une courte description ;
• la liste des atouts – chirurgie peu invasive, grande stabilité primaire, convalescence plus courte ;
• un lien « Lire la suite » qui déplie le texte complet ;
• un bouton « Écouter le texte » – la description peut s’écouter au lieu de se lire ;
• le prix « dès 12 000 UAH » et un bouton « Prendre rendez-vous ».

Cas avant/après, praticiens et tarifs

En dentisterie, la meilleure preuve, c’est le résultat. Dans le bloc « Nos réalisations », une grande image avant/après occupe le centre, avec un curseur : on le fait glisser pour comparer le sourire avant le traitement et le résultat. De part et d’autre, quatre miniatures d’autres cas, et sous la galerie, un bouton de rendez-vous.

Vient ensuite « Pourquoi nous choisir ? » : quatre cartes avec photo sur l’expérience en implantologie, la qualité des prothèses, l’accompagnement pendant la période d’adaptation et les cas cliniques complexes. Le bloc « Nos médecins » est un carrousel avec flèches : photo, nom, spécialité, icônes Instagram et Facebook et bouton vers le profil du praticien. Sous le carrousel, un bouton « Poser une question au médecin ».

La grille « Tarifs des soins » se présente en deux colonnes de lignes « soin – prix ». La ligne active s’éclaire en bleu et une flèche y remplace le prix : on comprend aussitôt qu’elle mène plus loin.

Questions sur les implants et soins complémentaires

Le bloc « Questions sur l’implantologie » est un accordéon sur deux colonnes : les questions sont visibles d’emblée, la réponse s’ouvre au clic, et une longue liste n’étire pas la page. On y répond aux craintes habituelles – par exemple, l’implant va-t-il bien s’intégrer : la réponse cite les données de MegaGen, avec un taux d’intégration de 98,9 %.

La landing page se termine par les « Soins complémentaires » – les mêmes cartes avec étiquette de domaine que pour les offres : obturation, ablation de kyste, radiographie panoramique. Ce format récurrent donne de l’unité à la page, et un nouveau soin s’ajoute avec la même carte.

Intégration responsive pour ordinateur, tablette et smartphone

La landing page est responsive : sur un grand écran, une tablette ou un smartphone, chaque bloc se réorganise selon la largeur de l’écran au lieu de simplement rétrécir. Sur smartphone, le premier écran change d’ordre : le titre, le prix et le bouton de consultation passent au-dessus de la photo, les chiffres de la clinique s’empilent en colonne et le menu se replie dans un burger. À droite de l’en-tête, un bouton d’appel bleu : depuis un téléphone, appeler la clinique est plus simple qu’écrire.

Ce qui fait une bonne landing page dentaire

Le site d’une clinique ne vend pas un soin, il vend de la confiance. On confie à des inconnus sa santé et une somme importante : chaque détail rassure ou inquiète. Quand je réalise des landing pages médicales, je m’appuie sur quelques règles :

• le prix, affiché ouvertement et tôt : un patient qui ne trouve pas le tarif part le chercher chez la concurrence ;
• de vrais visages de praticiens et des cas avant/après convainquent mieux que des généralités ;
• le texte médical est signé par un médecin et vérifié par un relecteur – c’est important pour les patients comme pour les moteurs de recherche ;
• le rendez-vous en une seule action : un appel ou un formulaire court, sans inscription ni long questionnaire ;
• les réponses aux questions fréquentes directement sur la page, en accordéon, pour ne pas obliger à les chercher ailleurs ;
• la version mobile est repensée pour le téléphone, pas compressée à partir de la version bureau : de nombreux patients cherchent leur clinique sur smartphone.

Si vous avez besoin d’une landing page pour un cabinet dentaire ou un centre médical, je réalise une page qui mène le patient jusqu’au rendez-vous : structure claire, formulaires, blocs interactifs et intégration responsive.

Création du site de l’école de pâtisserie en ligne ART DESSERT by Maria Tulchevska

octobre 3, 2026

La cliente et sa demande

Maria Tulchevska est cheffe pâtissière et fondatrice d’Art Dessert LLC. Son entreprise californienne réalise des desserts et des pâtisseries européens, travaille avec des coffee shops locaux et donne des cours de pâtisserie professionnels, en ligne et en présentiel, dans tous les États-Unis. Maria a formé personnellement plus de deux cents élèves.

L’école en ligne ART DESSERT by Maria Tulchevska avait besoin d’un site en anglais pour vendre ses cours – éclairs et gâteau. Le principal, « Contemporary Éclairs », promet d’apprendre à réaliser des éclairs de niveau professionnel, même sans aucune expérience en pâtisserie. Ma mission : réaliser un site qui rende cette promesse crédible au premier coup d’œil – intégrer l’accueil et la page du cours, développer les blocs interactifs et la version mobile.

L’allure du site : desserts, graphite et or

Les éclairs de Maria ressemblent à des bijoux : glaçage miroir, feuille d’or, petits fruits. Le site ne leur fait donc pas concurrence par le décor – ce sont les photos qui tiennent le premier rôle :

• des desserts sur fond blanc pur – en grand, avec des coupes montrant la garniture et des reflets ;
• trois couleurs, graphite, or sable et blanc – comme la vitrine d’une pâtisserie haut de gamme ;
• une police de titres fine et contrastée, en capitales, et de l’italique pour les mentions comme « online course » ;
• des boutons « pilules » en dégradé du noir à l’or – un même signe d’action sur toutes les pages ;
• de fins contours d’hexagones comme motif récurrent – des blocs de la page du cours jusqu’au logo du pied de page.

La plupart des pages sont construites en damier : une photo, et à côté un texte sur un aplat sombre ou doré. Ce rythme se lit facilement, et la grille se prolonge sans peine avec de nouvelles rubriques – par exemple la page du cours de gâteau.

Accueil : l’autrice et les cours dès le premier écran

Le menu de l’en-tête est partagé en deux par le monogramme du logo : à gauche « Éclairs », « Cake » et « Your instructor », à droite « Events », « Professional blog » et Instagram. Le premier écran montre Maria en veste de pâtissière, le nom de l’école, une courte promesse – apprendre à faire des éclairs de niveau professionnel sans expérience en pâtisserie – et deux boutons, « éclairs » et « cake ». Le visiteur choisit son cours avant même d’avoir fait défiler la page.

Plus bas, les cours sont présentés en blocs alternés : photos de desserts et aplat sombre avec la mention « online course », le titre, une description et le bouton « more about course ».

Faire connaissance avec l’autrice

Dans la formation en ligne, on n’achète pas seulement un programme, on choisit aussi un enseignant. Le bloc « Meet Your Instructor » s’ouvre sur une grande citation de Maria sur le temps et l’énergie qu’il lui a fallu pour maîtriser son métier. À côté de son portrait, un aplat doré réunit trois faits : l’entreprise Art Dessert LLC, la collaboration avec des coffee shops californiens qui vendent des pâtisseries selon ses recettes, et plus de deux cents élèves.

Viennent ensuite un bandeau pleine largeur d’éclairs coupés avec leur reflet, puis le bloc de la mission : Maria, un éclair à la main, et une citation sur le plaisir qu’elle a à partager son savoir et à rendre les techniques de pâtisserie modernes accessibles à tous. Le bouton « more about Maria Tulchevska » mène à une présentation détaillée de l’autrice, et le pied de page sombre réunit le menu, le logo et les contacts.

La page du cours : des inscriptions ouvertes à la vidéo

La page « Contemporary Éclairs » est construite comme un récit de vente. Premier écran : le nom du cours, la mention « Enrollment is now open », la promesse de résultat et le bouton « get started », à côté d’une grande photo d’éclair coupé, garni de framboises.

Suit un bloc sombre « About » : une invitation à rejoindre ART DESSERT et l’explication que le cours a été créé par une cheffe pâtissière professionnelle pour tous les niveaux. À côté, une photo d’éclairs avec un bouton rond « play » pour la vidéo de présentation : elle montre le travail mieux que n’importe quel texte.

Quatre atouts répondent chacun à un doute de l’acheteur :

• « Video tutorials » – Maria guide pas à pas, avec des mots simples, tout au long du processus ;
• « For people of all skill levels » – des débutants aux pâtissiers confirmés ;
• « Solid information foundation » – le rôle de chaque ingrédient expliqué ;
• « Support via chat » – l’enseignante répond sur le chat si quelque chose ne fonctionne pas.

Ce que reçoit l’élève : résultats, chiffres, programme

Le bloc « What You Get » aligne sept points numérotés en chiffres dorés, séparés par de fins traits : les secrets de la décoration et des glaçages miroir, la pâte à choux et des éclairs réguliers sans fissures, des desserts modernes fondés sur les techniques françaises, la conservation des éclairs jusqu’à deux semaines, 7 garnitures et 3 glaçages, la théorie derrière chaque recette et la façon dont les ingrédients interagissent.

Vient ensuite un bandeau doré avec les trois chiffres du cours :

• 6/9 mois – accès au cours 24/7, selon la formule choisie ;
• plus de 50 pages à imprimer – recettes, techniques, astuces et notes de pâtissière ;
• 36 leçons en haute qualité, avec des instructions détaillées.

Après un grand gros plan d’éclair arrive le « Course Syllabus » – le programme par modules sur fond sombre : leçon d’introduction, théorie derrière les recettes, puis la pratique – pâte à choux, garnitures, glaçages et préparation des décors. Les modules s’ouvrent d’un clic sur le « plus » : le programme se voit en entier sans allonger la page.

Version mobile

Sur téléphone, l’en-tête se réduit au burger, au monogramme et au lien « get started » : le bouton d’inscription se trouve directement dans l’en-tête. Le premier écran de la page du cours passe en colonne : le nom, la photo de l’éclair, le bouton et seulement ensuite le texte. Les blocs en damier s’empilent en conservant l’alternance sombre-clair, et le bouton « play » se pose sur la photo, à la jonction des sections.

Ce qui fait un bon site d’école en ligne

Un cours en ligne ne se goûte pas avant l’achat. On décide sur la foi du site : peut-on faire confiance à l’auteur, vais-je y arriver, le cours vaut-il son prix ? C’est pourquoi, quand je réalise des sites pour des écoles en ligne, je m’appuie sur quelques règles :

• le visage de l’auteur sur l’accueil : dans une formation de niche, on achète le savoir-faire d’une personne bien précise ;
• le résultat se montre par les photos et la vidéo, pas par des adjectifs ;
• la page du cours répond aux questions dans l’ordre : pour qui, quel contenu, combien de leçons et quelle durée d’accès ;
• le programme est visible en entier sans lasser – les modules sont repliés en accordéon ;
• un seul bouton d’inscription bien visible et un style unique pour tous les appels à l’action ;
• une version mobile où les photos de desserts sont aussi appétissantes que sur grand écran ;
• des images légères : une page riche en grandes photos doit s’ouvrir vite, même en données mobiles.

Si vous lancez des cours ou une école en ligne et avez besoin d’un site qui vend vos formations, je le réalise clés en main : de la structure des pages à l’intégration, aux blocs interactifs et à la version mobile.

Création d’une landing page pour EVACraftAuto : tapis auto EVA, configurateur et choix du véhicule

octobre 3, 2026

L’entreprise et le défi

EVACraftAuto est un fabricant ukrainien de tapis de voiture en EVA. L’entreprise est installée à Lviv et expédie ses commandes dans toute l’Ukraine. Les tapis sont fabriqués en 1 à 2 jours sur les gabarits d’origine de chaque modèle, et l’on peut y ajouter des talonnettes de différentes formes et des écussons au logo de la marque. Sur son site, l’entreprise annonce plus de 3 500 modèles de voitures et plus de 150 variantes pour un même véhicule.

Un tapis EVA se choisit pour une voiture précise, et l’acheteur se pose toujours trois questions : existe-t-il un gabarit pour ma voiture, combien coûte le kit et quel rendu aura-t-il dans l’habitacle ? La landing page devait y répondre sans appel téléphonique : la recherche par véhicule et le configurateur occupent donc le centre de la page. Les autres blocs suivent l’ordre dans lequel les questions se posent : pourquoi vous faire confiance, combien ça coûte, ma voiture est-elle couverte, à quoi ressemblera mon tapis et que se passe-t-il après la commande.

En-tête, premier écran et arguments du fabricant

L’en-tête est un bandeau blanc aux bords arrondis posé sur le premier écran : logo, menu « Catalogue », « Avantages », « Nos réalisations », « Partenariat », « Contacts », « FAQ », icônes Telegram et Viber et bouton jaune avec le numéro de téléphone. Dessous, une photo assombrie d’un tapis EVA dans l’habitacle, le titre « Des tapis de voiture de nouvelle génération », le nom de la marque en jaune et la mention « Fabricant de tapis de voiture en EVA ». Un seul bouton, « Configurateur », mène directement à l’outil le plus utile de la page.

La landing page répond ensuite à la question « pourquoi vous ? ». Le bloc « Pourquoi choisir EVACraftAuto ? » réunit six cartes avec des icônes jaunes :

• des gabarits individuels pour toutes les voitures ;
• une matière qui n’absorbe pas l’humidité, résiste à l’usure et se nettoie facilement ;
• une fabrication sur commande en 1 à 2 jours ;
• plus de 13 couleurs de fond et 15 couleurs de bordure ;
• des talonnettes de différentes formes et des écussons au logo de la voiture ;
• la livraison dans toute l’Ukraine.

Viennent ensuite le bloc « À propos », sur une photo sombre d’habitacle, avec trois cartes photo numérotées « Pourquoi nous ? », puis l’infographie « Les atouts des tapis EvaCraftAuto » : sept avantages disposés en arc autour d’un jeu de tapis, de la matière écologique et des fixations d’origine jusqu’aux 3 500+ modèles de voitures et à la découpe laser. Les sections graphite foncé alternent avec des sections crème claires, et le jaune du logo signale les boutons, les prix et les options choisies.

Six kits avec prix

Le bloc « Kits » répond à la question du prix avant même tout échange avec un conseiller. Chacune des six cartes affiche le prix en hryvnias dans un cadre jaune, une vue de la voiture du dessus où les tapis du kit sont surlignés en jaune, une pastille ronde montrant la texture de la matière et la liste du contenu :

• Basic – 1 350 UAH : n’importe quelle rangée d’une voiture de tourisme ;
• Coffre – 1 590 UAH : tapis de coffre et système de bandes auto-agrippantes ;
• Comfort – 1 990 UAH : deux tapis avant et deux arrière, pièce pour le tunnel central, fixations d’origine et bandes auto-agrippantes au plancher ;
• Style – 2 900 UAH : tout le kit Comfort, plus quatre écussons au logo de la voiture et une talonnette en métal ;
• Comfort Plus – 3 430 UAH : le contenu du Comfort et un tapis de coffre ;
• Elite – 4 340 UAH : tapis avant et arrière, pièce de tunnel, fixations et bandes auto-agrippantes, quatre écussons et une talonnette en métal.

Le schéma de la voiture parle plus vite qu’une liste : l’acheteur voit en une seconde quelles zones de l’habitacle le kit couvrira.

Recherche par marque, modèle et année

La première chose que veut savoir un automobiliste, c’est s’il existe un gabarit pour sa voiture. La recherche par véhicule forme donc un bloc à part, juste avant le configurateur, et se fait en trois étapes :

• la marque – une liste déroulante « Choisissez la marque » et une grille de vignettes avec logos et noms des marques ; quatre rangées sont visibles d’emblée, le bouton « Afficher plus » ouvre les suivantes ;
• le modèle et l’année – deux listes déroulantes sur une même ligne ;
• le bouton « Effacer la recherche » remet le choix à zéro quand on cherche des tapis pour une autre voiture.

Un logo se reconnaît plus vite qu’un nom dans une longue liste : la grille des marques est le chemin le plus court vers sa voiture. Et la page ne laisse pas filer ceux qui n’ont pas trouvé leur modèle : juste après le configurateur, une carte sombre « Vous n’avez pas trouvé votre voiture ? » propose les champs « Téléphone », « Nom » et « Description », un bouton « Envoyer » et l’image d’une voiture sous une housse jaune.

Le configurateur de tapis EVA

Le configurateur est l’outil central de la landing page : il remplace de longs échanges sur l’allure du futur tapis. À gauche, une grande image du tapis : sur la capture d’écran, il est jaune, avec la texture « losange », exactement comme choisi dans les réglages à droite. En dessous, trois photos de tapis posés dans des habitacles et une précision honnête : la photo est générique, les tapis livrés correspondront à la configuration de votre voiture, et la couleur à l’écran peut légèrement différer.

À droite, des cartes de paramètres ; à côté du nom de chacun, un cadre jaune affiche le choix en cours : « Premier et deuxième rangs », « Losange », « Jaune », « Noir ». L’acheteur choisit :

• la composition – quatre icônes de voiture vue du dessus, avec les rangées surlignées et le prix : 1 350, 1 990, 3 430 et 1 590 UAH ;
• le type de matière – des échantillons de textures en pastilles, dont « losange » et « nid d’abeille » ;
• la couleur du tapis – 13 échantillons avec la texture de la matière ;
• la couleur de la bordure – une palette à part, sur deux rangées ;
• l’écusson à la marque de la voiture – une image de l’écusson et une liste déroulante ;
• la talonnette – une sur trois au choix : en EVA (offerte), carrée ou profilée.

En bas, le bloc « Montant total » et le bouton jaune « Commander le kit ». L’acheteur compose son tapis lui-même, voit le résultat et arrive à la commande avec une décision déjà prise : il ne reste au conseiller qu’à préciser les détails par téléphone.

Étapes, réalisations et avant/après

On commande plus facilement quand on sait ce qui va suivre et qu’on voit de vraies réalisations :

• « Comment nous travaillons ? » – quatre cartes reliées par des flèches : choix du kit ou demande sur le site, appel d’un conseiller dans les 30 minutes, fabrication en 1 à 2 jours ouvrables et livraison par Nova Poshta ;
• « Nos réalisations » – un carrousel de photos de tapis dans des habitacles, légendées par modèle, du BMW X5 au Mazda CX-5 ; la diapositive active est plus large que ses voisines, et l’on navigue avec des flèches et des points ;
• « Avant/après » – un comparateur : un curseur jaune partage l’image entre l’ancien tapis textile et le nouveau tapis EVA dans le même habitacle, et des flèches et des points font défiler les paires de photos ;
• « Vous voulez des tapis à meilleur prix ? » – un formulaire d’offre personnalisée sur fond d’habitacle sombre : téléphone et nom.

Questions fréquentes et contacts

Les derniers doutes avant la commande sont levés dans le bloc « Questions fréquentes », un accordéon de sept questions : garantie, que faire si les tapis ne conviennent pas, durée de vie, odeur, caractère hypoallergénique de l’EVA, résistance de la matière et pose du tapis. La réponse s’ouvre d’un clic sur le bouton jaune « plus ». Sur l’odeur, par exemple : des tapis neufs peuvent sentir, mais l’odeur disparaît en 2 à 3 jours et ne revient pas, même par forte chaleur.

En bas de page, les contacts : téléphone, ville et e-mail sur fond de carte du monde, et un formulaire avec les champs « Nom », « E-mail », « Objet », « Message » et le bouton « Envoyer le message ».

Ce qui compte sur le site d’un fabricant de tapis auto

Les tapis de voiture se déclinent presque à l’infini : marque, modèle, année, composition, matière, deux couleurs et accessoires. D’après l’expérience de ce projet, le site d’un tel fabricant vend quand :

• la recherche par véhicule est bien visible – l’acheteur vérifie d’abord que sa voiture y figure, et regarde les prix ensuite ;
• les prix sont affichés d’emblée – des kits prêts à commander règlent la question « combien ça coûte ? » ;
• il y a un configurateur – on compose son tapis soi-même et on voit le résultat, au lieu de le décrire par messages ;
• les photos de vraies réalisations sont légendées par modèle – le propriétaire d’un Tucson cherche des yeux son Tucson ;
• la comparaison avant/après montre la différence avec un tapis textile mieux que n’importe quelle description ;
• un formulaire court traite les cas particuliers – « je n’ai pas trouvé ma voiture » ne doit pas vouloir dire « je vais chez le concurrent ».

Si vous fabriquez des accessoires auto ou tout autre produit « sur mesure », réfléchissez d’avance aux paramètres que choisit l’acheteur, à leur ordre et à ce qu’il doit voir avant de commander. Une landing page avec configurateur et recherche par véhicule deviendra alors non pas une simple vitrine, mais un véritable outil de vente.

Création d’un site vitrine-catalogue pour UNI METAL technology, fabricant ukrainien de structures métalliques

octobre 3, 2026

L’entreprise et sa demande

Unitechnology (marque UNI METAL technology) est une entreprise ukrainienne active depuis 2009. Elle a débuté dans l’ingénierie technique des bâtiments industriels et civils et prend aujourd’hui en charge des solutions complètes d’études et de construction. Elle dispose de ses propres capacités de production, d’un équipement moderne et d’un cycle complet : de l’analyse du projet du client jusqu’à la mise en service de l’ouvrage, avec tout le dossier de documentation. Le principe qu’elle met en avant sur le site : un seul prestataire à toutes les étapes, un seul responsable du résultat.

La gamme d’un tel fabricant est très large : armoires électriques, rayonnages, panneaux sandwich, siphons de sol industriels, conduits d’air, façades ventilées, équipement d’abris antiaériens, portes, portails et clôtures, mobilier et cheminées en inox. S’y ajoutent des services de travail des métaux sur commande. Le rôle du site : organiser tout cela pour qu’un ingénieur, un acheteur ou un promoteur trouve vite sa gamme et contacte l’entreprise sans détour.

En-tête, menu et navigation

L’en-tête est commun à toutes les pages et sert de carte de visite de l’entreprise. En haut : le logo UNI METAL technology, le téléphone, l’e-mail et l’adresse avec les mentions « Appelez-nous », « Écrivez-nous », « Rendez-nous visite », et à droite un bouton sombre « Être rappelé ». En dessous, le menu principal :

• « Entreprise » – une liste déroulante avec « À propos », « Emplois » et « Blog » ;
• « Catalogue » – un menu déroulant avec les 16 gammes, des armoires électriques aux équipements de ventilation ;
• « Services » – la liste déroulante des services de travail des métaux ;
• « Galerie » et « Contacts » ;
• les icônes YouTube, LinkedIn, Facebook, TikTok et Instagram ;
• un sélecteur de langue avec drapeau.

Au défilement, l’en-tête se réduit à une barre compacte avec le menu et le bouton de rappel : le catalogue et la demande restent accessibles partout sur la page. Les pages internes s’ouvrent sur un bandeau vert et graphite avec le titre et un fil d’Ariane, pour que le visiteur sache toujours où il se trouve.

Page d’accueil : du carrousel au formulaire de conseil

La page d’accueil accompagne le client industriel de la découverte jusqu’à la demande :

• un carrousel de cinq diapositives en premier écran, avec compteur « 01 – 05 » et flèches ; la première annonce « Technologies de construction » et la promesse de répondre pleinement aux exigences du client ;
• « Produits » – une grille de cartes avec photo et bouton fléché rond, et un bouton « Tous les produits » ;
• « Services de l’entreprise » – un carrousel sur fond graphite avec flèches et points : soudage TIG et laser, pliage, poinçonnage CNC et d’autres services ;
• « Atouts de l’entreprise » – quatre vignettes avec icônes : en croissance depuis 2009, capacités de production propres, équipement moderne, cycle de production complet ;
• « Travailler avec nous » – clé en main, documentation d’accompagnement et solutions complètes pour bâtiments industriels, publics et civils, laboratoires et centres de recherche, sites énergétiques ;
• « Simple de travailler avec nous » – quatre étapes sur une ligne verticale : demande et conseil, offre commerciale dans le délai convenu, cahier des charges ou documentation sur demande, contrat et réalisation ;
• un formulaire « Obtenez un conseil dès maintenant » avec les champs « Nom » et « Téléphone ».

Le pied de page reprend toute la structure du site : rubriques, liste complète des gammes, tous les services et les contacts. Chaque page est à un clic depuis le bas de l’écran.

Catalogue et pages de gamme

Le catalogue est le cœur du site. Chacune des 16 gammes a sa propre page, toutes construites de la même façon : le client compare plus facilement et ne se perd pas. Prenons la page « Façades ventilées » :

• le premier écran est partagé entre une moitié verte avec le titre et le fil d’Ariane et une grande photo de façade ;
• une vignette « Documentation technique » avec icône PDF – les documents se téléchargent directement depuis la page ;
• un texte détaillé sur le produit : panneaux utilisés, domaines d’application, garantie sur les produits et la pose, prix calculé au cas par cas ;
• un bloc « Bénéfices et avantages » – esthétique, efficacité énergétique, résistance aux intempéries et protection des murs ;
• un bouton « Plus d’exemples de produits » ;
• un formulaire de conseil, un carrousel « Vidéos » sur la production et le bloc des étapes de collaboration.

Ce gabarit fonctionne pour n’importe quelle gamme : armoires, rayonnages, panneaux sandwich ou portes. L’entreprise ajoute texte, photos, documentation et vidéos – et la page est prête.

Services de travail des métaux

Les services ont leur propre rubrique, car d’autres clients les commandent, pour d’autres besoins. La page « Services » est une grille de neuf vignettes avec de grandes photos et une légende sur une étiquette blanche fléchée :

• serrurerie et thermolaquage ;
• découpe plasma et laser ;
• poinçonnage CNC ;
• soudage laser et TIG ;
• pliage, tournage et fraisage.

Les photos de vrais procédés – étincelles de soudure, faisceau laser, presse plieuse – montrent de quel travail il s’agit avant même que le visiteur lise la légende.

Entreprise, galerie, emplois, blog et contacts

Les autres pages répondent à ceux qui cherchent un prestataire fiable ou un emploi :

• « À propos » – les blocs « Objectif principal » et « L’entreprise », une bande de quatre atouts et un formulaire de conseil ;
• « Galerie » – photos réparties entre « Produits », « Production et équipement » et « Réalisations » ;
• « Emplois » – des fiches de poste avec attentes et missions : ingénieur méthodes en programmation CNC, directeur des ressources humaines, directeur commercial ;
• « Blog » – un fil d’articles avec pagination « Première », « Précédente », « Suivante », « Dernière » ;
• « Contacts » – téléphone, e-mail, adresse, coordonnées du responsable commercial et du conseiller technique, et un formulaire de conseil.

La palette du site : le vert de la marque et le graphite avec du blanc, de grandes photos de production et une grille rigoureuse. Ce style convient à une entreprise industrielle : sobre, professionnel, il laisse toute la place aux produits.

Ce qui compte dans le site d’un fabricant

Les clients industriels arrivent sur le site d’un fabricant avec une tâche précise et lisent peu. D’après ce projet, le site d’une entreprise de métallerie ou de construction fonctionne lorsque :

• le catalogue est accessible depuis le menu sur chaque page – on cherche sa gamme, on ne fait pas défiler l’accueil ;
• chaque gamme a sa page avec texte, avantages et documentation – facile à transmettre à un collègue et mieux référencée ;
• les services sont séparés des produits – autre public, autres recherches ;
• les atouts du fabricant sont bien visibles : année de création, capacités propres, équipement, cycle complet ;
• on comprend comment tout commence – les étapes de la demande au contrat rassurent avant le premier appel ;
• le formulaire de conseil est court – nom et téléphone, le responsable précise le reste.

Si vous dirigez une entreprise de production avec une large gamme, commencez par la carte de vos gammes et un gabarit de page unique pour chacune. Votre site grandira alors facilement avec votre offre, et vos clients trouveront toujours ce qu’ils cherchent et sauront où envoyer leur demande.

Création du site du fabricant de colorants alimentaires YERO COLORS — catalogue, private label et export

octobre 3, 2026

L’entreprise et sa demande

YERO COLORS est la marque d’une entreprise fondée à Odessa le 14 février 2019. Elle produit elle-même des colorants en gel hydrosolubles — classiques, pailletés ou d’origine naturelle —, des colorants pour aérographe, des colorants secs pailletés et des colorants liposolubles en pastilles à base de beurre de cacao, des arômes, un sucre glace haut de gamme, de la pâte à sucre à modeler, du glaçage royal et un décor en sucre « Perles ». Les produits sont certifiés ISO 22000 et passent un contrôle en laboratoire ; depuis 2022, l’entreprise dispose de sa propre production et d’un entrepôt à Odessa, ainsi que d’un second entrepôt à Tchernivtsi.

Les clients de YERO COLORS sont des revendeurs, des magasins, des ateliers de pâtisserie et des écoles, mais aussi des distributeurs étrangers. Il leur fallait un site qui montre toute la gamme, donne les caractéristiques de chaque produit, explique clairement les conditions de collaboration et permette de demander des échantillons en un geste. J’ai réalisé ce site : intégration de toutes les pages, onglets, carrousels, fenêtres contextuelles et formulaires, puis adaptation aux smartphones.

Structure du site

Le menu suit le parcours d’un acheteur professionnel, de la découverte de la marque jusqu’à la commande :

• accueil — premier écran, atouts, nouveautés et newsletter ;
• « Entreprise » — profil, production en propre, certification et export en onglets ;
• catalogue — neuf catégories et fiche produit ;
• « Collaboration » — conditions de travail, expédition et programme de bonus ;
• actualités — fil, page de toutes les actualités et article seul ;
• contact — adresse du site de production, téléphone, e-mail et horaires.

L’en-tête est commun à toutes les pages : logo, menu, sélecteur de langue UKR/ENG, icônes Facebook et Instagram et bouton « Être rappelé ». Les pages intérieures commencent par un fil d’Ariane et un grand titre ; en bas de chaque page se trouvent le formulaire d’inscription à la newsletter et un pied de page avec menu, adresse, téléphone et e-mail.

Page d’accueil : la marque, ses atouts et ses nouveautés

Le premier écran affiche un grand titre « Colorants naturels pour l’industrie », une rangée de flacons de colorants en gel sur fond bleu et une photo de desserts colorés avec les produits de la marque. L’invitation « faites défiler » mène au bloc des atouts.

Les atouts sont présentés en liste avec séparateurs, chacun répondant à une question de l’acheteur :

• certification ISO 22000 et normes internationales ;
• qualité au niveau des équivalents européens ;
• gamme renouvelée au fil des tendances ;
• capacités de production propres et technologies modernes ;
• contrôle en laboratoire ;
• échantillons de produits sur demande.

Vient ensuite le bloc « Nouveautés » : trois grandes cartes, par exemple de nouvelles teintes de colorants en gel et la gamme GEM YERO COLORS avec neuf couleurs « précieuses », de l’améthyste au bronze. Au survol, le titre de la carte et la flèche passent au bleu de la marque. Sous les cartes, un large bouton « Voir le catalogue ». L’accueil existe en plusieurs états : normal, avec la fenêtre « Être rappelé » ouverte (nom et téléphone) et avec l’écran de remerciement après envoi.

Catalogue et fiche produit

Le catalogue est la page de travail principale du site. Neuf catégories — colorants en gel et liposolubles, sucre glace et glaçages, ingrédients et matières premières pour la pâtisserie, arômes, pâte à sucre, colorants secs pailletés, vermicelles en sucre et conditionnement sur commande — se parcourent par onglets, sans rechargement de la page.

La fiche produit réunit tout ce que l’acheteur demande d’habitude au commercial. Exemple avec AIRBRUSH SPARKLE, des colorants liquides pailletés pour aérographe :

• grande photo du flacon et aplats de couleur avec d’autres produits de la gamme ;
• description : à quoi sert le produit, sur quelles surfaces il s’utilise, comment le préparer ;
• bouton « Télécharger le catalogue » — toute la gamme dans un seul fichier ;
• composition sous forme de liste et mention de l’absence d’ingrédients d’origine animale ;
• durée de conservation (18 mois) et conditionnement (flacon plastique de 70 g) en grandes lettres détourées ;
• carrousel « Domaines d’utilisation » avec flèches — emballages et produits en situation.

À droite du catalogue, un bouton vertical bien visible « Demande d’échantillons » reste fixé à l’écran pendant le défilement : on peut demander un échantillon à tout moment sans perdre la fiche de vue.

Private label : des produits sous la marque du client

Pour les gros clients, YERO COLORS propose une offre à part : la fabrication de produits sous leur propre marque. Le site lui consacre un bloc Private Label avec deux volets : le développement d’un produit sur commande et la fabrication sous la marque du client dans les ateliers de l’entreprise. Chaque volet prend la forme d’une ligne avec flèche, accompagnée de photos d’emballages : perles de sucre, pâte à sucre en cartons, colorant en gel. Le client voit tout de suite à quoi pourrait ressembler sa propre gamme.

Rubrique « Entreprise », conditions et actualités

• « Entreprise » — quatre onglets : profil avec la liste complète des produits et l’historique, production en propre, certification (ce qu’est l’ISO 22000 et comment l’entreprise contrôle la qualité) et export. L’inscription verticale ™ YERO COLORS et les photos de coffrets de colorants maintiennent l’identité de la marque.
• « Collaboration » — échantillons et certificats sur demande, descriptions et photos pour les boutiques en ligne des partenaires, quantités par multiples du colisage, commande via l’espace client, expédition le jour même pour tout paiement avant 14 h et bonus en marchandise de 3 à 15 % selon le volume mensuel.
• Actualités — fil avec date et bouton « En savoir plus », page de toutes les actualités et modèle d’article avec un bloc « Autres actualités » ; par exemple, l’annonce de la recherche de distributeurs en Europe, en Amérique, en Asie et en Afrique.
• Contact — adresse du site de production et de stockage, téléphone, e-mail et horaires.

Version mobile et apparence

Le site est intégré en responsive dès les écrans de 320 pixels de large. Sur smartphone, le menu se replie dans un panneau déroulant avec le sélecteur de langue et les coordonnées, les cartes de nouveautés et de catégories passent sur une seule colonne, les onglets du catalogue et de la rubrique « Entreprise » restent faciles à toucher du doigt, et les formulaires d’inscription et de rappel gardent leur place.

Visuellement, le site est sobre : fond blanc, titres noirs en caractères bâton, bleu de la marque et couleurs vives des produits eux-mêmes — violet, menthe, rose, doré. Les inscriptions détourées ™ YERO COLORS et les flèches reviennent sur toutes les pages ; lors de l’intégration, j’ai donc réuni les éléments récurrents — en-tête, onglets, listes à puces, cartes, formulaires — en blocs communs.

Ce que doit offrir le site d’un fabricant alimentaire

Un acheteur professionnel ne choisit pas un fournisseur sur des images, mais sur la composition, les documents et les conditions. Le site d’un fabricant doit répondre à ces questions avant même que l’acheteur décroche son téléphone. Quand je crée ce type de site, je m’appuie sur quelques principes :

• un catalogue découpé en catégories claires plutôt qu’une longue liste de produits ;
• une fiche produit avec composition, conditionnement, durée de conservation et usages ;
• les certificats et la production mis en avant — les arguments décisifs en B2B ;
• des conditions transparentes : quantité minimale, expédition, bonus, documents ;
• une demande d’échantillons et de rappel en un clic depuis n’importe quelle page ;
• une version anglaise pour les partenaires étrangers et une version mobile confortable.

Si vous avez besoin d’un site pour une entreprise de production, un distributeur ou une marque d’ingrédients alimentaires, je peux le réaliser de A à Z — de la structure du catalogue aux fiches produits, aux formulaires de demande et à la version mobile.

Création du site de FALX LTD Metal Roofing – pose de toitures métalliques en Ontario (Canada)

octobre 3, 2026

L’entreprise et sa demande

FALX LTD Metal Roofing est une entreprise canadienne de l’Ontario qui vend et pose des toitures métalliques. Ses équipes interviennent à Toronto et dans les villes voisines – de Brampton et Vaughan jusqu’à Hamilton et London. Ses prestations : pose de toitures métalliques sur mesure, remplacement de toits, pose de soffites, de fenêtres de toit et de puits de lumière, remplacement des manchons de ventilation.

Le client type est propriétaire d’une maison individuelle. Il refait son toit une fois en plusieurs décennies, compare plusieurs entreprises et craint deux choses : payer trop cher et tomber sur une pose bâclée. L’entreprise avait besoin d’un site en anglais qui réponde à ces craintes et amène le visiteur à appeler ou à demander un devis gratuit. C’est ce que j’ai réalisé, avec toute l’offre réunie sur la page d’accueil.

Structure de l’accueil : de l’offre à la demande

La page d’accueil fonctionne comme une conversation avec l’acheteur. Chaque bloc répond à la question suivante qu’il se pose, et presque tous se terminent par un bouton de demande :

• premier écran – qui êtes-vous et comment connaître le prix rapidement ;
• l’entreprise – puis-je vous faire confiance ;
• avantages et texte sur les tuiles métalliques – de quel matériau parle-t-on ;
• « Why metal roof » – en quoi le métal surpasse les bardeaux d’asphalte habituels ;
• carrousel de réalisations – le rendu sur de vraies maisons ;
• formulaire de financement – et si je ne peux pas tout payer d’un coup ;
• avis, principes de travail et partenaires – ce que disent les clients et comment se déroule le chantier ;
• zones desservies – l’équipe viendra-t-elle dans ma ville.

L’aspect est sobre : fonds blancs et gris clair, blocs noirs et accent rouge repris du logo FALX. Les grands titres en majuscules sont doublés d’un lettrage pâle en arrière-plan, et une barre verticale rouge à côté de chaque titre aide à repérer le début des sections en faisant défiler la page.

En-tête et premier écran : un devis en une minute

L’en-tête réunit le logo, un menu avec les listes déroulantes Company et Products, les rubriques Services, Gallery et Contact, le numéro de téléphone avec une icône et un bouton « Get estimate » au contour rouge. Le numéro est grand et bien visible : beaucoup de propriétaires préfèrent appeler plutôt qu’écrire.

Le premier écran montre la photo assombrie d’une maison au toit métallique foncé, des bandes rouges en diagonale aux couleurs de la marque, le nom de l’entreprise et un court texte précisant que FALX travaille non seulement à Toronto, mais dans tout le Canada. À droite, le formulaire « Get a free quote in 1 minute » ne compte que deux champs, nom et téléphone, avec un bouton rouge « Get a quote ». Plus un formulaire est court, plus on le remplit volontiers ; les détails se règlent ensuite au téléphone.

Sous le texte figurent les badges des plateformes où l’entreprise a un profil et des avis : HomeStars, BBB, Houzz et d’autres. Pour un propriétaire canadien, ce sont des repères de confiance familiers, et leur place à côté du formulaire n’a rien d’un hasard : c’est précisément à ce moment qu’on décide de laisser son numéro ou non.

Un bouton rouge « Call now » avec une icône de combiné est fixé à droite de l’écran. Il reste visible partout sur la page, pour appeler à l’instant même où la décision est prise.

La confiance : vidéo, garanties et avantages

Après le premier écran viennent le slogan de l’entreprise sur le confort du client et deux blocs avec des vidéos sur le travail de FALX. Le premier répond brièvement à la question « Planning to change your roof? » avec un bouton « Get free quote ». Le second, « Trusted Metal Roofing Company », liste ce qui compte pour un propriétaire :

• une assurance responsabilité civile de 5 millions ;
• des équipes formées avec au moins un an d’expérience ;
• la couverture WSIB et une certification de travail en hauteur pour tous les poseurs ;
• des systèmes de toiture fiables et économes en énergie.

Suivent trois avantages sur fond noir avec des icônes rouges : un prix raisonnable sans frais cachés, des délais de pose courts et une garantie fabricant de 50 ans. La section se termine par une photo de toit pleine largeur et un texte sur les tuiles métalliques à l’aspect céramique ou ardoise : les couches qui les composent (acier, zinc, revêtement anticorrosion, apprêt, polymère coloré) et les couleurs populaires proposées – Terracotta, Colonial Red, Slate Grey, Chocolate Brown et Graphite Black.

« Why metal roof » : le matériau expliqué point par point

Beaucoup de propriétaires canadiens sont habitués aux bardeaux d’asphalte et ne voient pas pourquoi payer pour du métal. La page d’accueil comporte donc une section « Why metal roof » – quatre points numérotés, chacun avec un titre et un texte détaillé :

• efficacité énergétique – 30 à 35 % d’économies sur le chauffage et la climatisation ;
• durabilité – une toiture métallique dure de 40 à 70 ans et résiste à des vents jusqu’à 140 miles à l’heure, alors que des bardeaux ordinaires se remplacent après 7 à 10 ans ;
• résistance au feu – le métal ne produit pas d’étincelles et ne s’enflamme pas ;
• écologie – de 25 à 95 % de matière recyclée, recyclable à 100 % en fin de vie et posable sur les anciens bardeaux sans déchets supplémentaires.

Numérotés de 01 à 04 et séparés par de fines lignes, ces points se lisent comme un guide de référence posé plutôt que comme une publicité. C’est important : quelqu’un qui compare des matériaux fait davantage confiance à une explication qu’à un slogan.

Réalisations, financement et avis

Le bloc « Toronto houses after metal roofing installation » est un carrousel de photos de maisons après la pose, sur fond noir, avec des flèches et un bouton « See our work ». Juste en dessous, le formulaire « You can get new roof today » porte la mention « 5-year financing available » : avec son partenaire Home Trust Company, l’entreprise propose aux propriétaires un financement jusqu’à cinq ans. Là encore, le formulaire est court – nom, téléphone et bouton « Get a quote ».

Vient ensuite « What customers say » : un carrousel de cartes d’avis Google indiquant la ville du client, avec des points de navigation. Après les avis, les principes de travail de FALX : technologies et matériaux modernes, équipement professionnel, personnel expérimenté, cadence soutenue, prix modérés et approche individuelle de chaque client.

Partenaires, villes et pied de page

Le bloc « Our partners » présente la collaboration avec DryMax Waterproofing, l’entreprise chargée de l’étanchéité des toitures. Pour l’acheteur, c’est un argument de plus : son toit sera protégé contre les fuites.

La section « Service areas », sur fond noir, liste 12 villes : Mississauga, Toronto, Brampton, Vaughan, Richmond Hill, Aurora, Newmarket, Keswick, Hamilton, London, Markham et Guelph. Chaque ligne prend la forme « Metal roof installation in … » : le visiteur trouve tout de suite sa ville, et le site dispose d’une base pour des pages ciblant les recherches locales. La page se termine par une bande rouge avec le slogan de l’entreprise et un pied de page : services, couleurs de toiture, rubriques entreprise, blog et avis, coordonnées et réseaux sociaux.

Ce qu’il faut au site d’une entreprise de toiture

Une toiture est un achat coûteux et rare. On cherche une entreprise une fois en de nombreuses années et l’on a peur de se tromper : le site d’un couvreur vend donc avant tout de la confiance. D’après ce projet, il doit comporter :

• un chemin court vers la demande – formulaire au premier écran, téléphone dans l’en-tête et bouton d’appel toujours à portée de main ;
• des preuves de sérieux – assurance, certifications, garantie fabricant, notes sur des plateformes reconnues ;
• des photos de vraies maisons, pas d’images de banque d’images ;
• une explication claire du matériau : durée de vie, économies, entretien ;
• une réponse à la question de l’argent – un prix honnête sans frais cachés et une possibilité de financement ;
• des avis clients rattachés à leur ville ;
• une liste des zones desservies pour la recherche locale.

Le référencement local mérite une attention particulière. On cherche un couvreur avec des requêtes du type « pose de toiture métallique » suivies du nom de la ville, et un site qui liste ses villes – et peut consacrer une page à chacune – se positionne plus facilement sur Google dans sa région.

Si vous travaillez dans la construction, la rénovation ou la pose et que vous voulez un site qui apporte des demandes au lieu de simplement exister, écrivez-moi. Je réaliserai une page où chaque bloc mène à un appel ou à une demande de devis.

Création de la boutique en ligne Fillers Shop : cosmétiques professionnels, peeling PRX-T33 et produits WIQO

octobre 3, 2026

L’enjeu : vendre des cosmétiques professionnels sans conseillère au comptoir

Fillers Shop vend les cosmétiques WIQO et le peeling innovant PRX-T33 – des produits autrefois achetés surtout par les esthéticiennes pour leur cabinet. Aujourd’hui, on les choisit de plus en plus pour les soins à domicile : femmes et hommes, adolescents à la peau à problèmes, professionnels en quête d’un fournisseur fiable. La boutique promet des produits authentiques à prix abordables, et le site devait rendre cette promesse visible.

Ces clients n’ont pas la même expérience, mais ils se posent les mêmes questions : que fait le produit, combien de séances faut-il, quand voit-on le résultat, combien ça coûte et peut-on être remboursé ? J’ai construit les pages de la boutique autour de ces questions. Le site est entièrement en anglais.

L’accueil : du premier écran au catalogue et à la consultation

Le premier écran est consacré au produit phare, le peeling PRX-T33. À gauche, un titre, un court texte expliquant que le soin régénère la peau, lisse les rides et atténue taches pigmentaires, cicatrices d’acné et vergetures, et quatre pictogrammes avec les faits clés : 3 à 5 séances, 30 minutes de soin, pas de temps de récupération, résultat visible immédiatement. À droite, une grande photo du soin ; sous le texte, un bouton « Buy ».

La suite de l’accueil s’enchaîne ainsi :

• le catalogue « WIQO product » – huit fiches produits, avec un bouton « Show more » pour les autres ;
• le bloc « Results » – photos avant/après et texte sur l’évolution de la peau ;
• un accordéon de questions fréquentes sur le peeling PRX-T33 ;
• un formulaire de consultation gratuite sur les produits WIQO et PRX-T33 – nom, téléphone et bouton d’envoi ;
• un bloc « About » sur la boutique et un pied de page avec le menu et les pages livraison, contact et politique de confidentialité.

L’en-tête garde toujours à portée de main le menu, une barre de recherche de produits et un panier avec liste déroulante.

Catalogue et fiches produits

La carte produit du catalogue reste simple : photo sur fond blanc, nom, prix et bouton « Add to cart ». Le produit s’ajoute au panier directement depuis l’accueil, sans ouvrir de page dédiée – pratique pour ceux qui savent déjà ce qu’ils veulent, comme les esthéticiennes qui renouvellent leurs produits habituels.

La fiche produit est organisée pour que la décision se prenne sur un seul écran :

• fil d’Ariane et galerie photo avec navigation par points ;
• nom et quatre effets principaux du produit – hydratation, ridules atténuées, peau plus ferme et plus lisse, renouvellement cellulaire plus rapide ;
• prix avec ancien prix barré et trois paliers « from 1 / from 2 / from 3 » – plus on achète de flacons, plus le prix unitaire baisse ;
• sélecteur de quantité et bouton « Buy now » ;
• mention de la garantie « satisfait ou remboursé » de 90 jours ;
• description du produit et bloc « Featured Products » avec des produits recommandés en bas de page.

Note et avis directement sur la fiche produit

En cosmétique, les avis sont l’argument numéro un : ils figurent donc sur la fiche produit, pas sur une page à part. À gauche, la note moyenne et la répartition des avis par étoiles, en barres de cinq à une. À droite, les avis eux-mêmes : nom du client, badge d’achat vérifié, note, titre, texte, boutons « Share » et « Comments » et la question « Was this review helpful? ». La boutique peut répondre sous un avis – la réponse est visible de tous et montre qu’il y a de vraies personnes derrière les produits.

Commande et achats rapides

La page de commande tient en un seul formulaire « Where should we ship? » : prénom, nom, adresse de livraison, code postal, ville, État, e-mail pour le reçu et téléphone pour le livreur. La case « Billing Address is same as Shipping Address » évite de saisir l’adresse deux fois ; à côté, le récapitulatif de commande et le paiement. Sous le formulaire, un rappel que les données sont sécurisées et chiffrées, puis la garantie de remboursement de 90 jours.

Tout le monde n’a pas envie de remplir une adresse, c’est pourquoi le site propose trois autres façons d’acheter :

• « Buy in one click » – une fenêtre avec un seul champ téléphone ;
• « Call me » – une demande de rappel ;
• un formulaire de contact où l’on choisit comment recevoir la réponse : par e-mail ou par SMS ;
• le formulaire de consultation gratuite sur l’accueil.

Lors de la première visite, un bandeau cookies apparaît en bas de l’écran avec les boutons « Configure », « Decline » et « Accept all » : les cookies facultatifs ne sont activés qu’avec le consentement du visiteur.

Ce qui compte dans une boutique de cosmétiques professionnels

Les soins professionnels forment une niche où le client paie pour un résultat et prend un risque avec sa propre peau. D’après ce projet, une boutique dans ce domaine doit :

• expliquer l’action du produit simplement, en faits courts : combien de séances, quelle durée, faut-il un temps de récupération ;
• montrer le résultat – des photos avant/après convainquent mieux que n’importe quelle description ;
• placer avis et note à côté du prix au lieu de les cacher ;
• lever la peur d’acheter avec une garantie de remboursement et des conditions de livraison claires ;
• proposer des prix dégressifs – esthéticiennes et clients fidèles achètent par lots ;
• garder un accès à un humain : consultation et rappel rassurent ceux qui hésitent.

Une boutique qui convient à l’esthéticienne comme au nouveau client

Fillers Shop est une boutique compacte mais complète : l’accueil met en avant le produit phare et présente le catalogue, la fiche produit répond à toutes les questions avant l’achat, et la commande ne retient pas le client plus que nécessaire. L’esthéticienne expérimentée ajoute ses produits au panier depuis le catalogue, le nouveau client lit les avis et regarde les résultats, et celui qui hésite laisse son numéro pour être conseillé. Cette approche convient à toute boutique de produits haut de gamme où la décision d’achat repose sur la confiance.

Création du site de l’entreprise de paysagisme TOPIAR, avec accueil animé et portfolio

octobre 3, 2026

L’entreprise et le défi

TOPIAR est une entreprise d’aménagement paysager basée à Kyiv. Elle conçoit des jardins et des terrains, fournit et plante des végétaux, végétalise des toitures et installe de l’éclairage paysager. Sur son site, l’entreprise se présente aux côtés de l’association « Pays heureux », qui défend une idée simple : l’environnement autour de la maison influence la santé, l’humeur et la qualité de vie, et un terrain bien pensé n’est pas un luxe, mais une condition de vie normale. L’entreprise se résume en chiffres : 13 ans sur le marché ukrainien, 150 clients dans tout le pays, 120 spécialistes dans l’équipe et 500 projets réalisés.

Un aménagement paysager se choisit d’abord avec les yeux. Avant d’appeler, on veut voir les jardins, les terrasses et les toitures que l’entreprise a déjà réalisés, comprendre ce qu’elle fait et qui y travaille. Le site devait donc montrer les réalisations en grand, expliquer brièvement les quatre domaines d’activité, inspirer confiance grâce à l’équipe et aux avis clients, et amener le visiteur, depuis n’importe quelle page, à demander une consultation gratuite. Le site est en ukrainien.

Premier écran et mission

L’en-tête est une bande sombre avec le logo TOPIAR et le menu : « Accueil », « Portfolio », « Projets », « Blog », « À propos », « Documents », « Contacts ». Dessous, la photo d’une maison contemporaine avec terrasse et éclairage, et au centre de l’image une « lentille » ronde avec le nom de l’association et un bouton « Nous contacter ». De part et d’autre, deux légendes reliées par de fines lignes : le type d’organisation et son message central sur l’importance de transformer son cadre de vie. Le premier écran est animé, et sur les pages intérieures le bloc d’en-tête avec le titre a lui aussi sa propre animation.

Juste après vient le bloc « Mission » : un grand titre, un court texte expliquant que l’association promeut un aménagement paysager moderne et réfléchi, et un graphisme linéaire – cercles et lignes entrecroisées dans le vert de la marque. Ce bloc est animé lui aussi, et sur la page « À propos » les blocs mission et vision prennent vie de la même façon.

Des services qui se dévoilent au survol

Le bloc « Services » est un large bandeau de quatre photos séparées par de fines lignes verticales. En bas de chaque colonne, le nom d’un domaine :

• conception paysagère ;
• fourniture et plantation de végétaux ;
• toitures végétalisées ;
• éclairage paysager du terrain.

La particularité du bloc, c’est sa réaction au survol. Il suffit de passer la souris sur le nom d’un service pour que la photo change et qu’une description et un bouton apparaissent par-dessus. Le texte sur l’éclairage paysager, par exemple, précise que les spécialistes de l’entreprise le conçoivent, l’assemblent et l’installent à Kyiv, y compris sur de grands terrains et pour des demandes atypiques. Un seul bloc contient ainsi quatre courtes présentations, et la page reste légère. Sous le bandeau, un lien « Tous les projets » mène à la page de tous les services.

L’entreprise, les chiffres et le blog

Le bloc « À propos » repose sur un fond clair à motif discret : une large photo de jardin fleuri, surmontée d’une carte semi-transparente qui présente une équipe de passionnés voulant rendre le cadre de vie des Ukrainiens plus agréable, avec un bouton « Nous contacter ». Viennent ensuite les quatre chiffres de l’entreprise en grands caractères verts : 13 ans sur le marché, 150 clients, 120 spécialistes et 500 projets. Les chiffres sont animés et s’activent quand le bloc apparaît à l’écran.

Puis le bloc sombre « Blog » : trois cartes d’articles avec photo, titre, date et chapeau, et un lien « Tous les articles ». Après lui, une carte verte « Demander une consultation gratuite » avec bouton, sur fond de silhouettes d’herbes claires. Ce bloc d’appel à l’action est animé lui aussi et revient sur les pages intérieures : le chemin vers la demande reste toujours à portée de main.

Portfolio, équipe et avis

Sur l’accueil, le portfolio est une section sombre avec trois projets : deux images en haut et une large photo dessous, chacune avec le nom du projet sur une étiquette claire. Le bloc est animé, et le lien « Toutes les réalisations » mène à la page portfolio. Suit « Notre équipe » : un carrousel de photos des collaborateurs en tenue de l’entreprise, avec nom et fonction, que l’on fait défiler avec des flèches.

Les avis clients s’affichent sur la photo d’une allée d’arbustes taillés : deux cartes semi-transparentes avec une icône de guillemets, le texte et le nom de l’auteur. L’accueil se termine par le bloc « Contactez-nous » – une carte verte avec les champs « Nom », « Téléphone », « E-mail » et « Message », une case de consentement au traitement des données personnelles et un bouton noir. Comme les avis, le formulaire apparaît avec une animation.

Services et portfolio filtrable

Les pages intérieures s’ouvrent sur un bloc sombre avec titre, courte introduction et le même graphisme linéaire. La page des services est une grille de cartes avec photo et nom. La page « Nos réalisations » suit le même principe, mais un filtre par type de projet surmonte la grille :

• toutes les réalisations ;
• bâtiments commerciaux ;
• ensembles résidentiels ;
• maisons individuelles.

L’onglet actif est souligné en vert, et une pagination avec flèches suit la grille. Plus bas sur la page, on retrouve les avis et le bloc de consultation gratuite : le visiteur qui vient de parcourir les réalisations peut envoyer sa demande dans la foulée.

La fiche projet entre dans le détail : une partie « À propos du projet », l’équipe qui y a travaillé, la surface, le statut et le déroulement des travaux. La page de service s’ouvre sur une grande photo avec son nom, puis viennent une introduction et une liste à icônes, trois atouts – « Souhaits du client respectés à 100 % », « Toujours joignables en ligne », « Une meilleure qualité de vie » – et une partie descriptive où photos et textes alternent en quinconce.

Blog, « À propos », contacts et politique de confidentialité

Dans le blog, on peut filtrer les articles par rubrique, et chaque carte affiche photo, date et chapeau. La page d’article comprend titre, date, texte avec intertitres et sommaire. La page « À propos » présente la mission et la vision de l’association, les contacts ont leur propre page, et la politique de confidentialité indique la date de dernière mise à jour et comporte des sections sur les cookies. Le pied de page réunit le logo, un menu avec plan du site, les icônes des réseaux sociaux et un lien vers la politique.

Ce qui compte sur le site d’une entreprise de paysagisme

Un aménagement paysager coûte cher et prend du temps : le client choisit son prestataire avec beaucoup de soin. D’après ce projet, le site d’une telle entreprise fonctionne quand :

• les photos des réalisations sont grandes – un jardin, une terrasse ou une toiture végétalisée doit occuper l’écran, pas se cacher dans une vignette ;
• le portfolio est classé par type de projet – un propriétaire n’a pas à parcourir les projets commerciaux, ni un promoteur les jardins privés ;
• la fiche projet indique surface, statut et équipe – la réalisation devient concrète et vérifiable ;
• les services sont présentés brièvement et les détails s’affichent à la demande – comme dans le bloc qui se dévoile au survol ;
• les animations servent le contenu au lieu de le gêner : chiffres, avis et formulaire s’animent au fil du défilement ;
• la demande de consultation est accessible depuis chaque page et ne compte que quatre champs.

Si vous travaillez dans le paysagisme, la végétalisation ou la construction, commencez votre site par une question : que veut voir le client avant d’appeler ? Le plus souvent, des réalisations terminées, des services clairs et les personnes qui interviendront chez lui. Votre site devient alors bien plus qu’une carte de visite : une vitrine qui vous apporte des demandes.

Création de la boutique en ligne LuxCap : hard-tops modulaires pour pick-up, choix par marque et modèle

octobre 3, 2026

L’enjeu : 542 hard-tops et un chemin court vers le vôtre

LuxCap, basée à Lviv, vend des hard-tops pour pick-up, qu’on appelle aussi canopies ou couvre-bennes. La marque se positionne sur le haut de gamme : ses hard-tops modulaires s’assemblent à partir de plusieurs éléments, se ferment à clé, et sur beaucoup de modèles on peut installer une tente de toit ou une galerie d’expédition. L’entreprise est revendeur agréé et promet une pose en 2 heures.

L’offre se divise en trois gammes, chacune avec sa logique :

• Classic – parois latérales pleines, sans vitres, pour un maximum de solidité et de protection du chargement ;
• Sport – vitres latérales coulissantes, pour accéder vite au chargement ;
• City – vitrage sur tout le pourtour, avec une vitre avant coulissante.

Chaque gamme existe pour des dizaines de pick-up, d’où les 542 articles du catalogue. La mission principale du site : que le propriétaire d’un Ford Ranger ou d’un Chevrolet Colorado ne fasse pas défiler tout le catalogue, mais tombe directement sur son modèle.

Page d’accueil : la marque et ses trois gammes

J’ai intégré la page d’accueil comme une vitrine de marque qui mène au catalogue :

• un carrousel de trois slides en premier écran, avec de grandes photos de pick-up et un bouton « En savoir plus » ;
• quatre atouts avec icônes : garantie de qualité, livraison rapide, pose en 2 heures, revendeur agréé ;
• un texte sur la marque pour le référencement et une image de la structure modulaire du hard-top ;
• les sections Classic, Sport et City – chacune avec une description, une galerie photo à miniatures défilantes et un bouton « En savoir plus » vers le catalogue de la gamme.

L’en-tête reste collé en haut de l’écran pendant le défilement, le menu et le téléphone sont donc toujours à portée de main, et un bouton « retour en haut » apparaît sur les pages longues.

Catalogue : gamme → marque → modèle → hard-top

Le catalogue repose sur WooCommerce, mais j’ai remplacé la grille de produits habituelle par une recherche pas à pas. L’acheteur ouvre d’abord une gamme et voit les logos de 11 marques : Chevrolet, Dodge/RAM, Ford, GMC, Isuzu, Jeep, Mitsubishi, Nissan, SsangYong, Toyota et Volkswagen. Vient ensuite la page de la marque avec les photos des modèles – chez Ford, par exemple, F-150, F-250, F-350, Ranger et Raptor. Ce n’est qu’à la troisième étape qu’apparaissent les produits du modèle choisi, classés par année et longueur de benne.

Chaque niveau a son fil d’Ariane : depuis la fiche d’un hard-top, on revient en un clic au modèle, à la marque ou à la gamme. Les listes de produits proposent tri et pagination. Cette structure est claire pour l’acheteur comme pour les moteurs de recherche : chaque marque et chaque modèle ont leur propre page, avec leur propre titre.

Fiche produit : toutes les réponses avant l’appel

L’acheteur d’un hard-top veut avant tout des détails techniques : ira-t-il sur son véhicule ? La fiche produit rassemble donc tout sur un seul écran :

• une galerie photo avec carrousel et miniatures ;
• la référence ;
• un tableau de caractéristiques : marque, véhicule, série, année, type et longueur de benne, Origin, Edition, PART NO. ;
• un lien « Plus de caractéristiques » vers la liste complète ;
• le prix en hryvnias, un champ quantité et un bouton « Acheter maintenant » ;
• une description rédigée pour le modèle de véhicule concerné.

Le nom du produit aide lui aussi à choisir : il indique la gamme, le modèle du pick-up, les années et la longueur de benne – par exemple « Hard-top aluminium LuxCap Sport pour Chevrolet Colorado 2015–2022 (benne de 5′ 1″) ».

Une demande plutôt qu’une commande à rallonge

Un tel achat (un hard-top Sport pour Chevrolet Colorado coûte par exemple 150 000 hryvnias) se règle rarement par carte en une minute : on veut d’abord parler au vendeur. C’est pourquoi le bouton « Acheter maintenant » ouvre une fenêtre « Envoyer une demande » – nom et téléphone, sans compte ni formulaire en plusieurs étapes. Un conseiller rappelle et précise les détails.

Pour ceux qui hésitent encore, l’en-tête propose « Être rappelé », également dans une fenêtre. Les formulaires fonctionnent avec Contact Form 7. Le panier classique est conservé : j’y ai ajouté les blocs « Vous aimerez aussi » et « Nouveauté en boutique » pour suggérer accessoires et nouveaux modèles. Saphali Lite gère les champs de commande adaptés à l’Ukraine.

Accessoires, centres de pose et contacts

En plus des hard-tops, le site propose une rubrique accessoires – par exemple le rangement Drop Rack pour la benne – avec des fiches dans le même style que le catalogue. Une page « Centres de pose » répond à la question « où le faire installer », tandis que la page « Contacts » et le pied de page réunissent téléphone, e-mail, adresse et icônes des messageries et réseaux sociaux.

Référencement et socle technique

La boutique tourne sur WordPress 6.8 et WooCommerce 10.4, avec mon thème burum. Yoast SEO gère les titres, les descriptions et les données structurées, et le catalogue à plusieurs niveaux offre des pages dédiées à des recherches comme « hard-top Ford Ranger » ou « canopy Chevrolet Colorado ». Les carrousels reposent sur slick, et la mise en page est responsive : sur smartphone, l’accueil, le catalogue et la fiche produit passent sur une colonne, et les boutons restent bien visibles.

Ce qu’il faut à une boutique d’équipements spécifiques à un véhicule

Hard-tops, coffres de toit, marchepieds, attelages : tous ces produits ont un point commun, ils conviennent à un véhicule précis. D’après ce projet, voici ce qui compte pour une boutique de ce secteur :

• construire le catalogue autour du véhicule de l’acheteur, et non de l’entrepôt du vendeur : marque, modèle, année, type de carrosserie ;
• afficher les logos des marques et les photos des modèles – on trouve plus vite qu’avec des listes déroulantes ;
• indiquer la compatibilité dans le nom du produit et dans le tableau de caractéristiques ;
• prévoir un fil d’Ariane pour revenir facilement d’une étape en arrière ;
• pour les articles chers, proposer une demande courte plutôt qu’une commande complète ;
• dire tout de suite où et comment le produit sera posé.

Ainsi, même un catalogue de plusieurs centaines d’articles reste simple : l’acheteur ne voit que ce qui convient à son véhicule et passe vite à l’échange avec le vendeur.

Rechercher :

Articles récents

• DemoResto : un site clé en main pour restaurants, cafés et bars, en trois formules
• Création d’un site catalogue multilingue pour les cabines acoustiques de bureau Silentbox®
• Création du site catalogue LuxAdapt — adaptation de véhicules pour personnes en situation de handicap
• Création du site du studio de reprogrammation UPstage Lviv, avec un catalogue de puissance de 8 000+ moteurs
• Portail-catalogue de gîtes ruraux pour l’Union du tourisme vert rural d’Ukraine

Commentaires récents

Archives

• octobre 2026
• mai 2026
• avril 2026
• mars 2026

Catégories

• Mes réalisations

Méta

• Connexion
• Flux des publications
• Flux des commentaires
• Site de WordPress-FR