Capo Studio
Projet fictif — étude de cas site vitrine

Étude de cas

L'Établi

Un site vitrine pour un ébéniste d'art, conçu par Capo Studio pour démontrer une direction artistique « atelier technique » — à l'opposé du gabarit chaleureux et arrondi utilisé sur le reste du portfolio.

Le contexte fictif

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, et transformer une visite en demande de devis qualifiée.

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, un formulaire de devis structuré 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.

Organiser un catalogue de pièces uniques

Chaque réalisation est unique : il faut pouvoir la classer par catégorie sans avoir besoin d'un vrai e-commerce.

Être trouvé depuis un mobile

La plupart des recherches « artisan près de chez moi » se font sur téléphone, souvent en soirée.

Les objectifs

Ce que le projet devait accomplir

Six objectifs ont guidé les choix de design et de contenu, du premier écran jusqu'au formulaire de devis.

Identité éditoriale distincte

Une direction « atelier technique » — cotations, cadres de visée, grille millimétrée — différente des six autres démonstrateurs du portfolio.

Galerie filtrable

Dix réalisations réparties en cinq catégories, triables instantanément sans rechargement de page.

Devis sans friction

Un formulaire structuré (type de projet, essence, budget, délai) pensé comme une fiche technique plutôt qu'un simple champ message.

Responsive de bout en bout

Navigation, galerie et formulaire pensés et testés au même niveau d'exigence sur mobile que sur desktop.

SEO & métadonnées

JSON-LD FurnitureStore, sitemap, robots.txt et image Open Graph générée dynamiquement.

Performance

Next.js App Router, Server Components par défaut, Turbopack — aucune donnée superflue chargée côté client.

Visite guidée — captures réelles

Accueil → réalisations → atelier → devis

Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.

Première impression

Un accueil qui pose le ton dès le premier écran

« Des meubles faits pour durer » : la promesse de marque, une réalisation phare et trois repères chiffrés (fait main, essences travaillées, implantation) — présentés comme des cotations plutôt que comme des arguments commerciaux.

Le visiteur comprend en un écran ce que fait l'atelier et où il se trouve.

Le catalogue

Dix réalisations, cinq catégories, un filtre instantané

Tables & bureaux, sièges & assises, rangements & bibliothèques, cuisines & dressings, agencement sur-mesure — chaque pièce affiche son essence, son année et une description courte, filtrable sans rechargement de page.

Un visiteur pressé retrouve en deux clics le type de meuble qui l'intéresse.

L'atelier

L'histoire, le sur-mesure étape par étape, les essences de bois

Une page longue qui répond aux questions qu'un client se pose avant de contacter : comment se déroule une commande sur mesure, quelles essences sont travaillées, quelles sont les valeurs de l'atelier.

Moins de questions à traiter par téléphone : la page y répond déjà.

La demande de devis

Un formulaire pensé comme une fiche technique

Sept champs numérotés (nom, email, type de projet, essence, budget, délai, description), un état de succès explicite, et une mention claire : formulaire de démonstration, aucune donnée envoyée ni conservée.

Le client structure sa demande sans avoir à rédiger un e-mail depuis zéro.

Le formulaire de devis simule un envoi côté client : aucune donnée n'est transmise ni conservée, conformément à la mention affichée sous le bouton d'envoi.
Responsive

Une galerie et un formulaire qui tiennent sur mobile

Une recherche « artisan » sur mobile doit rester aussi claire qu'une visite depuis un ordinateur.

Accueil

Réalisations

Devis

Fonctionnalités

Ce qui existe déjà sur le projet

Galerie de réalisations filtrable par catégorie, dix pièces réparties en cinq familles
Page atelier : histoire, processus en cinq étapes, essences de bois, valeurs
Formulaire de devis structuré avec état de succès, sans backend ni base de données
JSON-LD FurnitureStore, sitemap, robots.txt, image Open Graph générée dynamiquement
Logo, favicon et image de partage social dessinés spécifiquement pour ce projet
Animations de révélation au scroll : cadres de visée, lignes qui se dessinent, compteurs animés
Photos libres de droit uniquement, désaturées pour rester cohérentes avec l'identité visuelle
Entièrement responsive, vérifié sur mobile et desktop
Aucune donnée réelle : réalisations, avis clients et coordonnées entièrement fictifs
Et ensuite ?

Cette solution peut évoluer selon vos besoins

Voici des exemples d'évolutions courantes pour ce type de projet, non incluses dans la démonstration.

Prise de rendez-vous en ligneEnvoi réel des demandes de devis par e-mailEspace client pour suivre une commandeBack-office d'administration du contenuBlog ou actualités de l'atelierMulti-langue (FR/EN)
Ces fonctionnalités peuvent être développées sur mesure, selon les besoins réels d'un artisan — ce projet reste un démonstrateur, pas un produit fini prêt à l'emploi.
Direction artistique

Un plan coté, pas une brochure

Papier kraft et encre pour la structure, rouge charpentier en accent d'action — une esthétique de plan technique plutôt que de site vitrine chaleureux.

Papier kraft

Fond principal, grille millimétrée en filigrane

Encre

Texte, structure, cadres de visée

Rouge charpentier

Accent d'action — CTA, cotations, prix

Papier clair

Cartes, surfaces, formulaires

Les titres utilisent Space Grotesk, une géométrique légèrement technique, associée à IBM Plex Mono pour les cotations, labels et numéros de figure — une combinaison volontairement différente de celle des six autres démonstrateurs du portfolio. Aucun coin arrondi : les cartes, images et boutons sont encadrés de traits nets, avec des coins de visée qui viennent « cadrer » les éléments au scroll.
Technologies

Une stack volontairement légère

Un site vitrine d'artisan n'a pas besoin d'un back-office ni d'une base de données pour être efficace.

Next.js 16 & React 19

App Router, Server Components par défaut, Turbopack — composants client uniquement pour la galerie filtrable et le formulaire.

Tailwind CSS 4

Design tokens dédiés à l'identité « atelier technique » : coins nets, grille millimétrée, aucun arrondi.

Framer Motion

Cadres de visée qui se cadrent au scroll, lignes qui se dessinent, compteurs animés — un langage d'animation propre à ce démonstrateur.

Space Grotesk & IBM Plex Mono

Typographie technique (titres + cotations), distincte de celle des six autres démonstrateurs du portfolio.

Aucun backend

Contenu statique et formulaire de devis simulé côté client : pas de Supabase, pas de base de données, pas de paiement.

L'Établi est un projet fictif, créé par Capo Studio pour démontrer son savoir-faire.

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.