Étude de cas
Volt & Fils
Un site vitrine pour un artisan électricien, conçu par Capo Studio pour démontrer une identité visuelle « circuit imprimé » — astreinte urgence toujours visible, services détaillés et réalisations filtrables.
Site vitrine
3 à 4 jours
5 pages
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
Volt & Fils, électricien de père en fils, à Nantes depuis 2009
Pour cette étude de cas, nous avons imaginé une petite entreprise familiale d'électricité générale à Nantes et sa métropole : installation, dépannage d'urgence, mise aux normes, rénovation, domotique et bornes de recharge — un artisan qui vivait jusqu'ici uniquement du bouche-à-oreille et d'une fiche PagesJaunes, sans jamais avoir eu de site à son image.
Le besoin n'était pas de construire un outil de planification d'interventions complet, mais de donner une vitrine crédible et rassurante à une activité où la confiance et la rapidité de contact priment sur tout le reste.
Rassurer sur l'urgence
Une panne électrique ne prévient jamais à la bonne heure : le numéro d'astreinte doit être visible sans chercher, dès le premier écran.
Prouver la conformité
Mise aux normes NF C 15-100, attestation Consuel : un client qui vend ou loue veut être rassuré sur la légalité de l'intervention avant de signer.
Sortir du site d'électricien générique
La quasi-totalité des sites d'électriciens se ressemblent (bleu plat, casque de chantier, photo de stock) : une identité distincte, pensée comme un vrai circuit électrique, devient un signe de sérieux.
Montrer le travail réel
Une galerie d'interventions passées, classée par type de besoin, convainc mieux qu'une liste de prestations écrite.
Clarifier la zone d'intervention
Avant d'appeler, un client veut savoir s'il sera couvert — la zone géographique doit être affichée sans ambiguïté.
Être irréprochable en situation d'urgence
Une coupure de courant se recherche presque toujours depuis un téléphone, souvent dans la panique : l'accès au numéro doit être immédiat.
Ce que le projet devait accomplir
Sept objectifs ont guidé les choix de design et de contenu, de l'écran d'accueil jusqu'au formulaire de devis.
Identité « circuit imprimé »
Fond bleu-nuit, double accent ambre et bleu, cartes arrondies à halos lumineux et motif de circuit imprimé en fond de section — une esthétique de tableau électrique plutôt qu'un site vitrine générique.
Astreinte toujours visible
Un bouton d'urgence flottant reste accessible sur toutes les pages, en plus du numéro d'astreinte affiché dès le premier écran.
Six services détaillés
Installation, dépannage, mise aux normes, rénovation, domotique et borne de recharge — chacun avec sa propre page de détail et ses prestations listées.
Réalisations filtrables
Huit interventions fictives réparties dans les six catégories de services, avec lieu, durée et filtre par type d'intervention.
Devis simulé, responsive de bout en bout
Formulaire de demande de devis fonctionnel côté client (sans envoi réel), testé au même niveau d'exigence sur mobile que sur desktop.
Animations respectueuses
Circuit animé sur l'accueil, trait qui se dessine au scroll, flicker d'allumage une seule fois sur le titre — toutes désactivées automatiquement si prefers-reduced-motion est actif.
Une page À propos humanisée
Timeline de l'entreprise familiale (2009 à aujourd'hui), valeurs et certifications — pour donner un visage à l'artisan avant même le premier appel.
Accueil → services → réalisations → à propos → devis
Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.
Première impression
« Toujours sous tension » — l'urgence en première ligne
Un slogan qui s'allume au chargement (effet flicker joué une seule fois), le numéro d'astreinte visible sans défiler, et une mise en avant immédiate du délai moyen d'intervention (30 minutes en zone urbaine) — pas de texte de présentation à lire avant de comprendre ce que fait l'entreprise.
Le visiteur identifie en un écran qu'il peut être dépanné vite, et comment joindre quelqu'un tout de suite.
Les services
Six prestations, chacune avec sa page de détail
Installation, dépannage & urgence, mise aux normes NF C 15-100, rénovation, domotique et borne de recharge (IRVE) : chaque service liste ses prestations concrètes plutôt qu'un paragraphe marketing vague.
Un client qui a un besoin précis (ex. mise aux normes avant vente) retrouve immédiatement le service qui le concerne.
Les réalisations
Huit interventions réelles... enfin, fictives, mais racontées comme telles
Chaque réalisation précise le quartier nantais, la durée d'intervention et une description concrète du chantier, filtrable par catégorie de service — de la borne de recharge en copropriété au dépannage d'un dimanche soir.
La preuve par l'exemple : un visiteur voit le type de chantier avant même d'appeler.
L'à propos
Une histoire de père en fils, racontée en timeline
Créée en 2009 par Philippe Lefèvre puis rejointe par son fils Julien, l'entreprise a sa propre chronologie visuelle, ses valeurs et ses certifications — de quoi donner un visage humain à l'artisan avant même le premier appel.
Un client hésitant trouve une raison supplémentaire de faire confiance, sans avoir à le demander.
Le devis
Un formulaire simple, sans jamais perdre l'option d'urgence
La demande de devis reste accessible en permanence, mais le bouton d'urgence flottant ne disparaît jamais : pour une panne bloquante, le visiteur n'a pas à chercher un autre chemin de contact.
Deux intentions différentes (devis planifié vs urgence) cohabitent sans se gêner sur la même page.
Une urgence se cherche depuis un téléphone, pas un ordinateur
Le même soin est apporté à chaque écran : le bouton d'astreinte, les services et le formulaire de devis restent aussi clairs sur mobile que sur desktop.
Accueil
Services
Réalisations
À propos
Devis
Le back-office d'un électricien ne ressemble pas à celui d'une boutique
Un artisan ne tient pas un catalogue : il tient un flux de demandes et un planning. L'espace de gestion est construit autour de ces deux réalités, pas autour d'un modèle générique.
Quatre chiffres à l'ouverture, choisis pour ce qui décide de la journée : ce qui attend une réponse, ce qui est urgent, ce qui est en attente côté client, et ce qui est réellement signé — pas ce qui a été envoyé.
Demandes de devis
Chaque demande du site atterrit ici, l'urgence en évidence
Le formulaire public alimente directement cette liste. Chaque ligne se déplie sur le message du client, son téléphone et son e-mail cliquables, et se suit du premier contact au devis accepté ou refusé.
Le filtre par statut répond à la seule question qui compte un lundi matin : qu'est-ce qui attend une réponse de ma part ?
Planning
Un planning qui se lit par journée, comme sur le terrain
Créneau, commune, technicien affecté et durée estimée. Le statut se change en une sélection, de « planifié » à « en cours » puis « terminé », sans quitter la liste.
Un dépannage de deux heures et un chantier de trois jours ne se regardent pas de la même façon : le regroupement par date rend l'un et l'autre lisibles.
Contenu du site
Modifier ses prestations sans rappeler son prestataire
Intitulés, accroches, descriptions et points détaillés des six prestations s'éditent directement, comme les réalisations du portfolio et les coordonnées affichées sur le site.
C'est la différence entre un site qu'on subit et un site qu'on tient : changer un tarif ou une zone d'intervention ne devrait jamais demander un devis.
Connexion, réalisations et paramètres
Trois écrans complémentaires, du contrôle d'accès aux tarifs de référence qui servent à chiffrer une demande.
Accès protégé, mot de passe affiché puisque la démonstration est faite pour être visitée.
Le portfolio de chantiers, éditable photo par photo.
Coordonnées, astreinte, zone couverte et tarifs de référence.
Utilisable depuis une camionnette
Un électricien consulte son planning entre deux interventions, pas assis à un bureau. Le menu passe en barre horizontale et les cartes s'empilent : les mêmes informations, sur un écran de téléphone.
Un back-office pensé pour le desktop uniquement est un back-office qui ne sert qu'au bureau — c'est-à-dire rarement.
Un site utilisable par le plus grand nombre
Un dépannage se cherche dans l'urgence, souvent mal éclairé, parfois par une personne âgée : les conditions dans lesquelles un site mal conçu devient impraticable pour tout le monde, pas seulement pour les personnes en situation de handicap.
Le numéro d'urgence en premier
L'appel d'astreinte est un vrai lien téléphonique, atteignable dès la première tabulation : un visiteur qui navigue au clavier ou qui utilise la commande vocale de son téléphone n'a pas à traverser le site pour le trouver.
Utilisable au clavier
Le menu mobile annonce son état d'ouverture et la page en cours est signalée dans la navigation — toute la structure du site reste parcourable sans souris.
L'ambre pour signaler, pas pour lire
L'ambre et le bleu circuit servent d'accents (boutons, tracés, coches) tandis que le texte courant reste en blanc cassé sur fond bleu-nuit, pour rester confortable à lire sur la longueur d'une page de services.
Animations désactivables
Flicker d'allumage du titre, courant qui circule dans le circuit et apparitions au défilement se coupent automatiquement si le visiteur a activé « réduire les animations » dans les réglages de son système.
Photos décrites, décors ignorés
Chaque photo de chantier porte sa description ; les tracés de circuit imprimé et autres éléments décoratifs sont masqués aux lecteurs d'écran plutôt que lus à voix haute.
Rapide quand ça compte le plus
Une panne de courant se gère depuis un téléphone, souvent en 4G et avec peu de batterie. Chaque seconde de chargement est une chance de plus que le client appelle le confrère d'à côté.
Pages pré-calculées
Le site est entièrement statique : le HTML est généré à la publication puis servi depuis un CDN, sans base de données à interroger pendant la visite.
Images converties à la volée
Les photos de chantier passent par l'optimiseur d'images de Next.js : conversion automatique en WebP ou AVIF selon le navigateur, et place réservée à l'avance pour éviter que le texte ne saute pendant le chargement.
Polices auto-hébergées
Les polices sont servies depuis le domaine du site plutôt que depuis Google : une requête externe en moins, et pas de clignotement de texte au premier affichage.
Référencement local
Métadonnées par page, sitemap, robots.txt et image de partage social générés par le code — la base indispensable pour ressortir sur « électricien » suivi d'un nom de ville.
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.
Un circuit imprimé, pas une brochure d'artisan
Fond bleu-nuit, double accent ambre et bleu comme deux tracés de courant sur un circuit, cartes arrondies à halos lumineux — une esthétique de tableau électrique plutôt que de site vitrine générique, pour incarner une activité où la précision compte autant que la vigilance.
Bleu-nuit
Fond principal sur tout le site
Panneau circuit
Cartes et surfaces légèrement surélevées
Ambre courant
Accent principal — CTA, titres, tracé de circuit
Bleu circuit
Accent secondaire — liens, coches, second tracé
Rouge urgence
Bouton d'urgence, éléments critiques
Une stack volontairement légère
Un artisan qui veut être joint vite n'a pas besoin d'un compte client ni d'une base de données pour convertir.
Next.js 16 & React 19
App Router, Turbopack, Server Components par défaut — composants client uniquement pour les animations et le formulaire de devis.
Tailwind CSS 4
Design tokens dédiés à l'identité « circuit imprimé » : fond bleu-nuit, double accent ambre/bleu, cartes arrondies à halos lumineux et motif de circuit en fond de section.
Framer Motion
Flicker d'allumage sur le titre, trait de circuit qui se dessine au scroll, micro-interactions au survol — MotionConfig reducedMotion="user" pour respecter prefers-reduced-motion.
Formulaire de devis simulé
Composant client qui simule l'envoi (état de succès local) : aucune donnée n'est transmise ni conservée.
Aucun backend
Contenu entièrement statique, codé dans lib/data.ts : pas de Supabase, pas de base de données, pas de paiement en ligne.
D'autres projets à explorer
Chaque étude de cas correspond à un site réellement en ligne, que vous pouvez visiter en un clic.
Votre secteur n'est pas représenté ?
Ces projets servent de démonstration, pas de catalogue : chaque site est conçu à partir de votre métier, pas décliné d'un modèle existant.
Voir toutes les réalisationsVous êtes artisan électricien (ou un autre métier du bâtiment) et voulez une vitrine à votre image ?
Capo Studio conçoit des sites vitrines sur mesure, pensés pour transformer une visite en appel.
- Devis gratuit
- Sans engagement
- Réponse sous 24h ouvrées