Conception site vitrine artisan : de la maquette à la mise en ligne
Un site vitrine qui génère des devis ne s'improvise pas. Un électricien à Douai ou un paysagiste à Orchies qui confie son site sans comprendre le processus risque de se retrouver avec un site beau mais invisible sur Google et inefficace pour convertir. Voici les 5 étapes de conception que HookLab applique pour chaque artisan.
Les 5 étapes de conception d'un site vitrine artisan
Le brief — comprendre votre métier et vos clients
Avant de dessiner une seule maquette, on pose les bases : qui sont vos clients idéaux ? Quelles zones géographiques couvrez-vous ? Quels services vous rapportent le plus ? Quels mots-clés vos clients tapent-ils sur Google ? Ce travail de stratégie prend 2 à 4 heures mais conditionne l'efficacité de tout le reste.
Livrable : Document de stratégie + liste de mots-clés locaux
Le wireframe — l'architecture avant le design
Le wireframe est un plan en noir et blanc de chaque page. On positionne le bouton de devis, on décide de l'ordre des sections, on prévoit l'emplacement des photos de chantiers. Aucune couleur, aucune typo — juste la structure. C'est à ce stade qu'on valide que l'expérience utilisateur est logique.
Livrable : Maquettes filaires des pages principales
Le design — identité visuelle et couleurs
On habille le wireframe avec vos couleurs, votre logo, vos polices. Pour un artisan, le design doit inspirer confiance et professionnalisme sans être tape-à-l'œil. Sobriété et lisibilité avant tout. Les photos de vos chantiers sont intégrées dès cette étape — elles sont le cœur de votre identité.
Livrable : Maquettes visuelles desktop et mobile
Le développement — le site prend vie
On code le site selon les maquettes validées. Pour HookLab, cela signifie un développement en Next.js : site ultra-rapide, score PageSpeed 95-100, sécurisé, sans base de données exposée. Le formulaire de contact est configuré avec une réponse automatique et notification par email.
Livrable : Site fonctionnel en environnement de test
Les tests et la mise en ligne
Vérification complète : formulaires, affichage mobile, vitesse, liens, balises SEO, sitemap soumis à Search Console, Google Business Profile synchronisé. Une fois validé, mise en ligne sur votre domaine avec certificat SSL activé.
Livrable : Site en ligne + rapport de mise en service
Ce qui fait qu'un site artisan convertit — ou repousse les prospects
L'UX (expérience utilisateur) n'est pas un concept réservé aux grandes marques. Pour un maçon à Douai, c'est la différence entre un visiteur qui remplit le formulaire et un visiteur qui ferme l'onglet. Voici les éléments clés :
| Élément | Ce qui convertit | Ce qui repousse |
|---|---|---|
| Bouton de contact | Visible au-dessus de la ligne de flottaison sur mobile, couleur contrastée | Caché en bas de page ou dans le menu seulement |
| Galerie de chantiers | Photos avant/après, nom du chantier et commune, filtrables par type de travaux | Photos génériques téléchargées sur stock |
| Témoignages | Avis Google intégrés avec nom, photo et note — synchronisés automatiquement | Témoignages inventés sans preuve |
| Formulaire de devis | 3-5 champs maximum (nom, téléphone, type de travaux, commune, message libre) | Formulaire de 15 champs obligatoires |
| Numéro de téléphone | Cliquable sur mobile, affiché dans le header et le footer | Affiché uniquement sur la page contact |
| Zones d'intervention | Liste des communes sur chaque page service avec lien vers la page locale | Aucune mention géographique |
Mobile-first : la règle absolue pour un artisan local en 2026
En 2026, Google indexe votre site en version mobile en priorité (Mobile-First Indexing). Si votre site est mal affiché sur smartphone, Google le pénalise dans ses résultats — peu importe à quel point il est beau sur ordinateur.
Pour un plombier de Valenciennes, la réalité est que 65 à 70 % de ses futurs clients cherchent depuis leur téléphone. Ils ont besoin de trouver le numéro de téléphone en un clic, de voir la galerie de chantiers sans zoom, et de remplir le formulaire sans pincer-zoomer.
- Navigation en un pouce : boutons minimum 44×44 pixels, espacés
- Appel téléphonique en un tap : lien tel: sur le numéro
- Formulaire court : 4 champs maximum sur mobile
- Images compressées pour chargement rapide sur 4G
- Pas de pop-ups intempestifs qui couvrent tout l'écran
Performance technique : pourquoi elle est non-négociable pour le SEO local
Un site lent est doublement pénalisé : Google lui attribue une position inférieure dans les résultats, et les visiteurs qui arrivent quand même quittent la page avant qu'elle se charge. Les études montrent qu'une seconde de délai supplémentaire réduit le taux de conversion de 7 %.
Pour atteindre un score PageSpeed de 95-100, HookLab utilise Next.js — un framework JavaScript moderne qui génère des pages HTML statiques ultra-rapides, sans les ralentissements d'une base de données WordPress interrogée à chaque visite.
Pour comprendre cette différence technique, consultez notre comparatif JavaScript vs WordPress en termes de performance.
Ressources complémentaires
Prêt à faire concevoir votre site vitrine ?
HookLab conçoit des sites vitrine pour les artisans du Douaisis. Premier échange gratuit, sans engagement.
Questions fréquentes sur la conception de site vitrine
Combien de temps prend la conception d'un site vitrine artisan ?
De 2 à 6 semaines selon la complexité. Un site de 5 pages avec galerie et formulaire : 3 semaines environ. La phase la plus longue est souvent la validation des maquettes — plus vous êtes disponible pour les retours, plus ça va vite. HookLab communique par messages asynchrones pour ne pas perturber votre journée de chantier.
Faut-il fournir ses propres photos pour son site vitrine ?
Les photos de vos chantiers sont fortement recommandées — elles sont bien plus efficaces que des visuels génériques. Si vous n'en avez pas, commencez à photographier vos prochains chantiers (avant/après). Des photos de smartphone bien cadrées suffisent largement. HookLab peut aussi organiser une séance photo locale.
Peut-on modifier le site après sa mise en ligne ?
Oui, c'est même indispensable. Un site statique ne se modifie pas en libre-service, mais HookLab gère toutes les modifications dans le cadre du partenariat mensuel : nouvelles photos, nouveau service, modification de texte, ajout d'une page. Les demandes de modification sont traitées sous 48h ouvrées.
Qu'est-ce que le mobile-first et pourquoi c'est important pour un artisan ?
Le mobile-first signifie que l'on conçoit le site pour smartphones en premier, et ensuite pour desktop. Pourquoi ? Parce que 65-70 % des visiteurs d'un site artisan local arrivent sur mobile. Si votre site est lisible sur ordinateur mais illisible sur téléphone, vous perdez la majorité de vos prospects potentiels.
Quelle est la différence entre un site vitrine conçu sur Wix et un site sur-mesure ?
Sur Wix, vous utilisez des templates génériques qui vous ressemblent peu, sur un hébergement partagé avec des milliers d'autres sites, avec des scores PageSpeed souvent sous 50. Un site sur-mesure est construit pour vous, optimisé pour vos mots-clés locaux, hébergé sur une infrastructure dédiée, et pensé pour convertir — pas juste pour être beau.