É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.
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
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.
Vous ê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