Étude de cas
L'Établi
Un site vitrine pour un ébéniste d'art, conçu par Capo Studio autour d'une direction artistique « matière silencieuse » — noyer sombre, ivoire et bronze — doublé d'un espace d'administration de démonstration.
demo@letabli.frMatiere2026!Vitrine + administration
1 semaine
5 pages + 1 écrans admin
Sur devis gratuit
Délai de conception et de développement, contenus fournis. Sur un projet client, il faut y ajouter la collecte des textes et photos et les allers-retours de validation — comptez de quelques jours à 1 à 2 semaines selon le projet. Voir le détail des délais
L'Établi, un ébéniste de Revel qui vivait jusque-là du bouche-à-oreille
Pour cette étude de cas, nous avons imaginé un atelier d'ébénisterie installé à Revel (Haute-Garonne, historiquement surnommée la « cité du meuble d'art ») : des commandes sur mesure, un bouche-à-oreille local solide, mais aucune vitrine en ligne pour convaincre au-delà du cercle déjà acquis.
Le besoin n'était pas de vendre en ligne, mais de donner envie de contacter l'atelier : montrer le travail, expliquer le sur-mesure, transformer une visite en demande qualifiée — puis donner à l'artisan de quoi suivre ces demandes une fois reçues.
Montrer le travail, pas juste en parler
Un artisan vend un savoir-faire visible : les photos de réalisations comptent plus qu'un long texte de présentation.
Capter une demande sans friction
Pour du sur-mesure, une demande structurée suffit — pas besoin d'un tunnel de paiement en ligne.
Ne pas ressembler à un artisan sur deux
La plupart des sites de menuisiers se ressemblent : une identité visuelle propre permet de s'en distinguer.
Rassurer sur la zone d'intervention
Un client veut savoir si l'atelier peut se déplacer chez lui avant même de prendre contact.
Donner à chaque pièce sa propre page
Une réalisation qui n'existe que sous forme de vignette ne se partage pas et ne se référence pas.
Suivre les demandes après l'envoi
Une demande de devis reçue puis oubliée dans une boîte mail est une commande perdue.
Ce que le projet devait accomplir
Six objectifs ont guidé les choix de design et de contenu, du premier écran jusqu'à l'espace d'administration.
Une direction artistique assumée
« Matière silencieuse » : noyer sombre, ivoire et bronze, titres en Cormorant Garamond — l'inverse d'un site d'artisan générique.
Galerie filtrable + fiches dédiées
Dix réalisations en cinq catégories, filtrables sans rechargement, chacune avec sa propre page générée statiquement.
Un devis en trois étapes
La pièce, le cadre, les coordonnées : un parcours progressif plutôt qu'un formulaire de douze champs qui décourage.
Un back-office de démonstration
Montrer à quoi ressemblerait le quotidien côté atelier : demandes, projets, planning, contenus et paramètres.
SEO propre de bout en bout
Canonical et Open Graph par page, JSON-LD FurnitureStore, sitemap de quatorze URLs, page 404 sur mesure.
Mobile au même niveau d'exigence
Navigation, galerie, parcours de devis et administration vérifiés de 375 à 1920 pixels de large.
Accueil → réalisations → fiche projet → atelier → devis
Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.
Première impression
Un hero qui laisse la matière parler
« Une pièce unique, dessinée pour votre intérieur. » Le titre occupe la moitié gauche sur fond noyer, la photo prend toute la hauteur à droite, et une ligne de réassurance — conception sur mesure, bois européens, livraison & pose — ferme le premier écran.
Le visiteur sait en un écran ce que fait l'atelier, où il travaille et comment le contacter.
Pièces choisies
Trois réalisations mises en avant dès l'accueil
Une sélection éditoriale plutôt qu'un carrousel : essence, numéro d'ordre, titre et description courte, sur un fond ivoire qui contraste avec le hero sombre.
Le travail est visible avant même d'atteindre la page Réalisations.
Savoir-faire
Le geste, en trois images et un paragraphe
Retour au fond noyer pour la section savoir-faire : veinage, façonnage, détail de finition. Le rythme sombre/clair structure la page sans recourir à des séparateurs décoratifs.
La page alterne les respirations au lieu d'enchaîner des blocs identiques.
Le catalogue
Dix réalisations, cinq catégories, filtre instantané
Tables & bureaux, sièges & assises, rangements & bibliothèques, cuisines & dressings, agencement sur-mesure. La barre de filtres reste collée sous l'en-tête pendant le défilement.
Un visiteur pressé isole en un clic la famille de meuble qui l'intéresse.
Fiche projet
Chaque pièce a sa page, avec ses cotes
Lieu, dimensions, essence, durée de réalisation, puis la demande du client et la réponse de l'atelier. Dix pages générées statiquement au build, toutes présentes dans le sitemap.
Une réalisation devient une page partageable et référençable, pas une simple vignette.
L'atelier
Le sur-mesure expliqué avant le premier contact
Les principes de l'atelier, le déroulé d'une commande en cinq étapes et les quatre essences travaillées — chêne, noyer, frêne, hêtre — avec leur origine et leurs caractéristiques.
Moins de questions à traiter au téléphone : la page y a déjà répondu.
La demande de devis
Trois étapes plutôt qu'un long formulaire
Étape 1 la pièce et l'essence, étape 2 le budget, l'horizon et la description, étape 3 les coordonnées. Une barre de progression, un retour possible à tout moment, et une mention explicite : aucune donnée n'est envoyée ni conservée.
Le visiteur structure sa demande sans avoir à rédiger un e-mail depuis zéro.
Questions fréquentes
Les objections traitées au pied du parcours
Faut-il un dessin précis, l'atelier se déplace-t-il, combien de temps prévoir, le bois se choisit-il ensemble : quatre réponses dépliables juste sous le formulaire.
Les freins les plus courants sont levés là où le visiteur hésite encore.
Une galerie et un parcours de devis qui tiennent sur mobile
Une recherche « ébéniste » depuis un téléphone, souvent en soirée, doit rester aussi claire qu'une visite depuis un ordinateur.
Accueil
Réalisations
Fiche projet
Devis
Ce que verrait l'artisan une fois les demandes reçues
Un back-office de démonstration, pensé pour le quotidien d'un atelier indépendant : les demandes à rappeler, les pièces en cours, la semaine à venir et les textes du site.
demo@letabli.fr, mot de passe démo — Matiere2026!.Dès la connexion, l'artisan retrouve les demandes à traiter, les projets actifs, la valeur des devis en attente et le taux d'occupation de l'atelier — sans naviguer entre plusieurs écrans.
Vue d'ensemble
Nouvelles demandes, projets actifs, devis en attente et activité commerciale sur douze mois, en un écran.
Demandes de devis
Recherche par client, projet ou ville, filtres par statut, fiche détaillée et changement de statut en un geste.
Projets en cours
Avancement au curseur, statut, échéance et valeur de chaque pièce en fabrication.
Planning de l'atelier
Six jours côte à côte, rendez-vous, fabrication et livraisons distingués par couleur.
L'écran de connexion affiche lui-même le compte de démonstration et rappelle qu'il ne protège aucune donnée réelle.
La même page, aussi lisible depuis un téléphone.
Relation client
Retrouver une demande en quelques secondes
Une recherche libre couvre le nom du client, l'intitulé du projet et la ville ; un filtre par statut isole les demandes à traiter. Le compteur du menu latéral suit en direct le nombre de demandes non qualifiées.
Aucune demande ne se perd entre deux relances.
Fiche détaillée
Tout le contexte d'un projet dans un panneau
Budget, description, coordonnées, prochaine action et statut modifiable — plus deux raccourcis « Créer le devis » et « Ajouter une note ». Le panneau se ferme à la souris, au clavier avec Échap, et rend le focus au bouton d'origine.
L'artisan qualifie une demande sans changer d'écran.
Production
Suivre l'avancement pièce par pièce
Chaque projet expose son essence, son échéance, sa valeur et un curseur d'avancement. Les filtres par statut — étude, en attente, en atelier, finition, livré — reflètent le cycle réel d'une commande sur mesure.
La charge de l'atelier se lit d'un coup d'œil.
Organisation
Une semaine d'atelier sur une seule grille
Du lundi au samedi, les rendez-vous clients, les journées de fabrication et les poses se distinguent par un liseré de couleur. Les jours libres affichent explicitement « Disponible ».
Les créneaux encore libres sautent aux yeux avant de proposer une date.
Contenus
Modifier les textes avec un aperçu en direct
Titre, texte d'introduction et libellé du bouton principal se modifient à gauche, l'aperçu du hero se met à jour à droite. Trois interrupteurs pilotent la visibilité des sections de l'accueil.
On voit le résultat avant de valider, sans ouvrir le site dans un autre onglet.
Configuration
Profil, notifications et remise à zéro
Coordonnées de l'atelier, délai de réponse annoncé et préférences de notification. Un bouton dédié restaure l'intégralité des données de démonstration dans leur état initial.
La démonstration se réinitialise en un clic après avoir été manipulée.
Consultable depuis l'atelier, pas seulement depuis le bureau
Un ébéniste passe sa journée debout : le back-office devait rester utilisable sur un téléphone posé sur l'établi.
Les indicateurs se réempilent en colonne.
Le menu latéral glisse par-dessus et se referme avec Échap.
Le tableau des demandes se transforme en cartes empilées.
Vérifiée, pas supposée
Le site et son administration ont été passés en revue au clavier, au contraste et au lecteur d'écran avant mise en ligne — les écarts constatés ont été corrigés.
Clavier de bout en bout
Lien d'évitement fonctionnel, focus visible partout, panneau latéral et menu mobile refermables avec Échap.
Contrastes vérifiés
Les textes secondaires et les badges de statut ont été mesurés puis remontés au seuil AA du référentiel WCAG.
Cibles tactiles confortables
Boutons de navigation, filtres et champs dimensionnés pour rester utilisables au pouce sur mobile.
Mouvement réduit respecté
Les apparitions au défilement se neutralisent automatiquement si le visiteur a activé « réduire les animations ».
Ce qui est contrôlé avant chaque mise en ligne
Un site vitrine d'artisan n'a pas besoin d'une infrastructure lourde, mais il doit être rapide, correctement référencé et vérifié.
Pages pré-calculées
Les vingt-deux routes du site sont générées au build : rien n'est calculé à la volée au moment de la visite.
Six formats vérifiés
De 375 à 1920 pixels : aucun débordement horizontal, aucun chevauchement, aucun texte tronqué.
Référencement contrôlé
Canonical par page, Open Graph propre à chaque fiche, sitemap complet — et l'administration exclue de l'indexation.
Code typé et vérifié
TypeScript strict, ESLint sans avertissement et build de production validé avant chaque mise en ligne.
Ce qui existe déjà sur le projet
Cette solution peut évoluer selon vos besoins
Voici des exemples d'évolutions courantes pour ce type de projet, non incluses dans la démonstration.
« Matière silencieuse »
Le noyer sombre structure les sections fortes, l'ivoire fait respirer, le bronze ne sert qu'à l'action. Une palette courte, appliquée avec discipline plutôt qu'une accumulation d'effets.
Noyer sombre
Fonds de section, en-tête, pied de page
Ivoire
Fond principal, respiration entre les blocs sombres
Bronze
Accent d'action — boutons principaux, jalons
Bronze clair
Sur-titres, liens et détails sur fond sombre
Une stack volontairement légère
Un site vitrine d'artisan n'a pas besoin d'une base de données pour être efficace — même avec un espace d'administration à démontrer.
Next.js 16 & React 19
App Router, Server Components par défaut, Turbopack — les composants client se limitent à la galerie filtrable, au parcours de devis et à l'administration.
Tailwind CSS 4
Jetons de design dédiés à la palette noyer/ivoire/bronze, resets d'éléments rangés dans @layer base pour ne pas neutraliser les utilitaires.
Framer Motion
Transitions sobres sur le filtrage de la galerie, pilotées par MotionConfig pour respecter la préférence « mouvement réduit ».
Cormorant Garamond, Manrope & IBM Plex Mono
Une serif de caractère pour les titres, une sans-serif neutre pour le texte courant, un monospace pour les sur-titres et les repères chiffrés.
localStorage, aucun backend
Le site public est entièrement statique et l'administration ne stocke que dans le navigateur : ni base de données, ni API, ni service externe.
Aucune base de données
Contenu statique, démonstration en stockage local.
Réinitialisable
Les données de démonstration se restaurent en un clic.
Aucun envoi
Ni e-mail, ni API, ni service tiers appelé.
D'autres projets à explorer
Chaque étude de cas correspond à un site réellement en ligne, que vous pouvez visiter en un clic.
Vous êtes artisan et souhaitez une vitrine à votre image ?
Capo Studio conçoit des sites vitrines sur mesure, pensés pour transformer une visite en demande de devis.
- Devis gratuit
- Sans engagement
- Réponse sous 24h ouvrées