Design d'un site vitrine : les règles qui inspirent confiance 🎨

Qu’est-ce qu’un bon design de site vitrine ?

Un bon design de site vitrine est clair, lisible et rassurant. Il montre en quelques secondes ce que vous faites, où, et comment vous joindre, sur téléphone comme sur ordinateur.

Le design, ce n’est pas seulement « faire joli ». C’est la façon dont la page guide l’œil du visiteur vers l’information utile.

Un site vitrine, c’est la carte de visite en ligne de votre entreprise. Si le sujet est nouveau pour vous, notre guide complet sur le site vitrine et son utilité pose les bases.

Les trois qualités d’un bon design

• Clair : on comprend votre métier et votre zone sans chercher.
• Lisible : textes assez gros, bons contrastes, paragraphes courts.
• Rassurant : vraies photos, coordonnées visibles, informations à jour.

Un design au service du métier

Un plombier n’a pas les mêmes besoins qu’un coiffeur. Le plombier veut que son numéro saute aux yeux, car ses clients ont souvent une urgence. Le coiffeur veut montrer ses réalisations et proposer la prise de rendez-vous.

Un avocat cherchera plutôt la sobriété : couleurs calmes, beaucoup d’espace, textes précis. Un gîte misera sur de grandes photos du lieu et des environs.

Ce que le design n’est pas

• Une accumulation d’animations qui fatiguent l’œil.
• Un copier-coller du site d’un concurrent.
• Une mode passagère qui vieillit en deux ans.

Le bon design se fait oublier. Le visiteur ne se dit pas « quel beau site ». Il se dit « c’est la bonne entreprise, j’appelle ».

Pourquoi le design d’un site vitrine compte-t-il autant pour inspirer confiance ?

Parce qu'un visiteur juge votre sérieux sur l'apparence de votre site avant même de lire. Un site soigné et à jour rassure ; un site daté ou confus fait douter.

Sur internet, le client ne vous voit pas. Il ne serre pas votre main, il ne voit pas votre camion propre ni votre boutique rangée. Votre site joue ce rôle à votre place.

La première impression se fait très vite

En arrivant sur une page, on décide en quelques instants si l’on reste. Personne ne lit tout. On regarde le titre, une photo, l’allure générale. Si tout semble fouillis, on revient en arrière et on clique sur le concurrent suivant.

Les signaux qui font douter

• Une date de copyright vieille de plusieurs années en bas de page.
• Des photos floues, ou des images de banque trop parfaites.
• Un texte en petits caractères gris clair sur fond blanc.
• Des pages vides marquées « en construction ».
• Un formulaire qui ne fonctionne pas.

Les signaux qui rassurent

• Un logo net et des couleurs cohérentes d’une page à l’autre.
• Un numéro de téléphone cliquable.
• Des photos de vos chantiers, de votre équipe, de votre local.
• Des informations pratiques à jour : horaires, zone, délais.

Prenez l’exemple de deux boulangers qui font un pain aussi bon. Celui qui a une vitrine propre et bien éclairée attire plus de monde. Sur le web, c’est exactement pareil.

Le design ne remplace pas la qualité de votre travail. Il permet simplement au client de l’imaginer avant de vous contacter. Et il évite de perdre des clients qui, sans cela, ne vous auraient jamais appelé.

Que doit-on voir en premier sur la page d’accueil d’un site vitrine ?

En haut de la page d'accueil, il faut votre métier, votre zone, une photo réelle et un bouton pour vous contacter. Le visiteur doit comprendre sans faire défiler la page.

Le haut de la page d’accueil est la zone la plus regardée. C’est ce qu’on voit avant de faire défiler, sur ordinateur comme sur téléphone.

La liste minimale

1. Votre logo et votre nom, en haut à gauche, comme sur la plupart des sites.
2. Un titre qui dit ce que vous faites et où : « Couvreur à Nantes et alentours » plutôt que « Bienvenue sur notre site ».
3. Une phrase d’appui : votre spécialité, votre délai, votre engagement.
4. Un bouton d’action : « Demander un devis », « Prendre rendez-vous », « Appeler ».
5. Une photo réelle : un chantier, l’atelier, la vitrine, l’équipe.

Exemples par métier

Métier	Titre utile	Bouton principal
Plombier	Dépannage plomberie à Lyon 7e	Appeler maintenant
Coiffeur	Salon de coiffure mixte à Rennes	Réserver en ligne
Avocat	Avocat en droit du travail à Lille	Prendre rendez-vous
Gîte	Gîte 6 personnes en Dordogne	Voir les disponibilités

Juste en dessous

Après ce premier écran, déroulez une suite logique :

• vos services principaux, en trois ou quatre blocs ;
• quelques réalisations en photo ;
• des preuves de sérieux (avis, labels, assurances) ;
• vos coordonnées et un dernier bouton de contact.

Le piège du carrousel

Évitez le grand carrousel d’images qui défile tout seul. Il alourdit la page, et beaucoup de visiteurs n’en voient que la première image. Une seule photo forte, bien choisie, fait mieux le travail.

Quelles couleurs et quelles polices choisir pour un site vitrine ?

Choisissez deux ou trois couleurs tirées de votre logo et une ou deux polices bien lisibles. La cohérence et le contraste comptent bien plus que l'originalité.

Les couleurs

Partez de votre logo ou de votre devanture. Votre site doit ressembler à votre camion, à vos cartes de visite, à votre enseigne.

Une règle simple marche bien :

• Une couleur principale, celle de votre marque, pour les titres et les éléments clés.
• Une couleur d’accent, plus vive, réservée aux boutons d’action.
• Des neutres (blanc, gris clair, gris foncé) pour le fond et le texte.

Quelques repères par métier, sans en faire une loi. Les bleus et les verts évoquent souvent la propreté et la fiabilité, utiles en plomberie ou en nettoyage. Les tons chauds conviennent à une boulangerie ou un restaurant. Les tons sobres et foncés vont bien à un cabinet d’avocat.

Les polices

La police, c’est le style des lettres. Limitez-vous à deux : une pour les titres, une pour le texte.

• Préférez des polices simples, sans fioritures, pour le texte courant.
• Gardez une taille confortable, surtout sur téléphone.
• Évitez les polices manuscrites pour les paragraphes : elles fatiguent vite.

Le contraste

Le contraste, c’est la différence entre le texte et le fond. Du gris clair sur du blanc paraît élégant sur un grand écran. Dehors, en plein soleil, sur un téléphone, c’est illisible.

Un bon test : affichez votre page sur votre téléphone, dans la rue ou sur un chantier. Si vous plissez les yeux, augmentez le contraste.

L’espace

Laissez respirer les éléments. Des marges généreuses donnent une impression de calme et de sérieux. Une page tassée, où tout se touche, paraît bon marché, même si votre travail est haut de gamme.

Quelles photos mettre sur un site vitrine professionnel ?

Mettez de vraies photos de votre travail, de votre équipe et de votre lieu, nettes et bien éclairées. Elles rassurent bien plus que des images de banque génériques.

Les photos portent une grande partie du design. Elles montrent ce que les mots peinent à dire.

Quelles photos privilégier

• Vos réalisations : avant et après pour un couvreur, un peintre ou une entreprise de nettoyage.
• Votre équipe : un visage crée tout de suite du lien.
• Votre lieu : la vitrine d’une boulangerie, le salon d’un coiffeur, les chambres d’un gîte.
• Vos produits : sur fond simple, avec une lumière naturelle.

Comment les prendre soi-même

Un téléphone récent suffit souvent, à quelques conditions :

1. Nettoyez l’objectif avant chaque prise.
2. Photographiez en lumière du jour, sans flash.
3. Rangez le décor : un outil qui traîne attire l’œil.
4. Tenez le téléphone droit, à l’horizontale pour les grandes bannières.
5. Prenez plusieurs photos et ne gardez que les meilleures.

Et les banques d’images ?

Elles dépannent pour une illustration d’ambiance. Mais une poignée de main en costume ou un ouvrier au sourire trop parfait se repèrent tout de suite. Le visiteur sent que ce n’est pas vous.

Vérifiez toujours les droits d’usage d’une image trouvée en ligne. Une photo visible sur un autre site n’est pas libre pour autant.

Le poids des images

Une photo sortie du téléphone est souvent très lourde. Réduisez sa taille avant de la mettre en ligne, sinon la page mettra du temps à s’afficher. Un outil de compression gratuit fait ce travail en quelques secondes.

Pensez aussi à donner un nom clair à chaque fichier, comme « renovation-toiture-nantes.jpg ». C’est plus propre, et cela aide Google à comprendre l’image.

Comment organiser le menu et les pages d’un site vitrine ?

Un menu court de cinq ou six entrées suffit : accueil, services, réalisations, à propos, contact. Chaque page répond à une seule question que se pose le client.

Le menu, c’est le plan de votre site. S’il est confus, le visiteur se perd et repart.

Un menu type

• Accueil
• Services (avec une page par grande prestation si besoin)
• Réalisations ou Galerie
• À propos
• Contact

Un coiffeur peut ajouter « Tarifs ». Un gîte, « Disponibilités » ou « Accès ». Un avocat, « Domaines d’intervention ».

Une page, une question

Chaque page doit répondre à une question précise du client. « Faites-vous la rénovation de toiture ? » mérite sa propre page. « Où êtes-vous ? » trouve sa réponse sur la page contact, avec une carte.

Cette organisation aide aussi Google à comprendre votre site. Le guide officiel de Google pour débuter en référencement recommande justement une structure simple et logique.

Les noms du menu

Utilisez les mots de vos clients, pas un jargon interne. « Nos prestations » est plus clair que « Notre univers ». « Contact » vaut mieux que « Parlons-en ».

Vitrine ou boutique ?

Si vous envisagez de vendre en ligne, le menu change : catalogue, panier, livraison. La question se pose avant de dessiner quoi que ce soit. Pour trancher, lisez notre comparatif site vitrine ou site marchand selon votre activité.

Le pied de page

En bas de chaque page, répétez l’essentiel : adresse, téléphone, horaires, lien vers les mentions légales. Beaucoup de visiteurs descendent tout en bas pour chercher ces informations. Ne les décevez pas.

Qu’est-ce qu’une maquette de site vitrine et faut-il en faire une ?

Une maquette est un plan visuel du site avant sa construction. Elle évite les malentendus et les retouches coûteuses, même pour un petit site de quelques pages.

Une maquette de site vitrine, c’est l’équivalent du plan d’architecte pour une maison. On dessine avant de bâtir.

Les trois niveaux de maquette

Niveau	À quoi ça ressemble	À quoi ça sert
Croquis	Des cases dessinées au crayon	Placer les blocs et l’ordre des informations
Maquette fil de fer	Des rectangles gris, sans couleur	Valider la structure et le parcours du visiteur
Maquette graphique	L’aspect final : couleurs, photos, textes	Valider le rendu avant la construction

La maquette « fil de fer » se dit souvent wireframe en anglais. C’est une ossature, sans décoration.

Pourquoi c’est utile

• Vous voyez le résultat avant que le site soit construit.
• Vous corrigez une idée en quelques minutes, au lieu de plusieurs heures de travail.
• Vous et votre prestataire parlez enfin de la même chose.

Faut-il toujours une maquette ?

Pour un site d’une ou deux pages fait avec un modèle, un simple croquis suffit souvent. Pour un site de six pages ou plus, ou avec une identité visuelle forte, une vraie maquette fait gagner du temps.

Si vous passez par un prestataire, demandez-lui s’il fournit une maquette et combien de séries de corrections sont prévues. C’est une question normale, qui évite les surprises sur la facture.

Ce qu’on valide sur une maquette

• L’ordre des blocs sur la page d’accueil.
• La place du bouton de contact.
• Le rendu sur téléphone, pas seulement sur ordinateur.
• Les vrais textes, ou au moins des textes proches du réel.

Comment réaliser soi-même la maquette de son site vitrine ?

Commencez au papier et au crayon, puis passez sur un outil simple comme Canva ou Figma. Dessinez d'abord la version téléphone, avec vos vrais textes.

Pas besoin d’être graphiste pour préparer une maquette. Il faut surtout de la méthode.

Étape 1 : lister ce que le client cherche

Notez les cinq questions que vos clients vous posent le plus souvent au téléphone. Un couvreur entendra : « Vous intervenez chez moi ? », « Le devis est-il gratuit ? », « Avez-vous des photos de chantiers ? ». Ces questions deviennent vos blocs.

Étape 2 : dessiner sur papier

Prenez une feuille par page. Tracez un rectangle étroit, la forme d’un téléphone. Empilez vos blocs de haut en bas, par ordre d’importance.

Étape 3 : regarder des exemples

Parcourez les sites de professionnels de votre métier, dans d’autres villes. Notez ce qui vous plaît et ce qui vous agace. Ne copiez pas : inspirez-vous de l’organisation.

Étape 4 : passer sur un outil

• Canva propose des modèles de pages web faciles à modifier.
• Figma est plus complet, très utilisé par les designers, avec une offre gratuite.
• Les éditeurs comme Wix ou WordPress permettent aussi de tester directement un modèle.

Étape 5 : écrire les vrais textes

Une maquette remplie de faux texte trompe. Un titre de trois mots ne prend pas la même place qu’un titre de douze mots. Écrivez vos textes, même imparfaits : vous les améliorerez ensuite.

Étape 6 : faire tester

Montrez la maquette à deux ou trois personnes qui ne connaissent pas votre métier. Demandez-leur : « Que fait cette entreprise ? Comment la contacteriez-vous ? ». S’ils hésitent, simplifiez.

Étape 7 : décliner pour l’ordinateur

Une fois la version téléphone validée, élargissez. Certains blocs passent côte à côte, les photos s’agrandissent. L’ordre des informations, lui, reste le même.

Le design d’un site vitrine doit-il être pensé d’abord pour le téléphone ?

Oui. Beaucoup de clients d'un artisan ou d'un commerce arrivent depuis un téléphone, et Google regarde d'abord la version mobile. Le design part du petit écran.

Le client qui cherche un serrurier, une boulangerie ouverte ou un coiffeur proche le fait souvent depuis son téléphone. Dans la rue, au travail, le soir sur le canapé. Votre site doit être impeccable sur cet écran.

Google, lui aussi, se base d’abord sur la version mobile de votre site pour l’analyser et le classer.

Ce qu’on appelle un site « responsive »

Un site responsive s’adapte tout seul à la taille de l’écran. Les blocs côte à côte sur ordinateur passent les uns sous les autres sur téléphone. La plupart des outils actuels le font d’office, mais le résultat doit toujours être vérifié.

Les règles du design mobile

• Boutons larges, faciles à toucher avec le pouce.
• Numéro de téléphone cliquable, qui lance l’appel directement.
• Textes assez grands pour être lus sans zoomer.
• Menu replié sous une icône à trois traits, facile à ouvrir.
• Formulaires courts : nom, téléphone, message, c’est souvent suffisant.

Un bouton qui suit le visiteur

Pour un dépanneur ou un plombier, un bouton « Appeler » fixé en bas de l’écran est très pratique. Il reste visible pendant que le visiteur fait défiler la page.

Les pièges fréquents

• Une fenêtre surgissante qui couvre tout l’écran et se ferme mal.
• Un tableau trop large qui oblige à glisser de côté.
• Des photos recadrées qui coupent la tête des personnes.
• Un texte collé au bord de l’écran.

Le bon réflexe

Avant de valider un design, ouvrez chaque page sur votre propre téléphone. Puis sur celui d’un proche, d’une autre marque. Ce que vous voyez, vos clients le voient aussi.

Un beau design peut-il ralentir le site et gêner sa visibilité sur Google ?

Oui, un design chargé de grosses images, de vidéos et d'animations peut ralentir le site. Un site lent fait fuir les visiteurs, et Google tient compte de leur expérience.

Un beau site qui met longtemps à s’afficher perd tout son intérêt. Le visiteur pressé n’attend pas.

Ce qui alourdit un design

• Des photos non compressées, envoyées telles qu’elles sortent de l’appareil.
• Une vidéo en fond de page d’accueil.
• Des carrousels et des animations à chaque défilement.
• Trop de polices différentes à charger.
• Des modules ajoutés « pour voir » et jamais retirés.

Ce que Google regarde

Google mesure l’expérience des visiteurs avec des indicateurs appelés Core Web Vitals : vitesse d’affichage, réactivité, stabilité de la page. La documentation web.dev sur les signaux Web essentiels les explique en détail.

La stabilité mérite un mot. C’est quand la page ne « saute » pas pendant le chargement. Vous visez un bouton, et une image le pousse au dernier moment ? C’est exactement ce qu’il faut éviter.

Les bons réflexes de design

1. Réduisez chaque photo à la taille où elle sera affichée.
2. Préférez une belle photo fixe à une vidéo d’arrière-plan.
3. Gardez deux polices au maximum.
4. Limitez les animations aux endroits où elles aident vraiment.
5. Retirez tout ce qui ne sert pas le client.

Mesurer plutôt que deviner

Des outils gratuits donnent une note et des pistes concrètes d’amélioration. Pour savoir lesquels utiliser et comment lire leurs résultats, consultez notre page sur comment tester la vitesse de son site.

Un design sobre est souvent plus rapide. Et un site rapide paraît, lui aussi, plus professionnel.

Quels détails de design rassurent un client avant qu’il vous contacte ?

Coordonnées complètes, mentions légales, avis réels, photos de chantiers, qualifications et assurances visibles : ces détails rassurent le client avant qu'il décroche son téléphone.

Une fois le visiteur intéressé, il cherche des preuves. Le design doit les placer là où il les attend.

Les preuves de sérieux

• Adresse et téléphone complets, identiques à ceux de votre fiche Google.
• Labels, qualifications et assurances, avec leur logo officiel quand c’est autorisé.
• Avis clients réels, avec un lien vers leur source.
• Photos situées : « Rénovation de toiture à Saint-Nazaire ».
• Délais et zone d’intervention écrits noir sur blanc.

Les mentions légales

C’est une obligation, pas une option. Nom de l’entreprise, numéro d’immatriculation, hébergeur, responsable de la publication… La fiche officielle sur les mentions obligatoires d’un site internet professionnel liste ce qu’il faut afficher. Un lien discret dans le pied de page suffit.

La page « À propos »

C’est souvent l’une des pages les plus regardées. Racontez votre parcours, montrez votre visage, expliquez votre façon de travailler. Un avocat y présente sa spécialité ; un boulanger, son levain et ses horaires de cuisson.

Un exemple concret

Pour un couvreur, la confiance se joue sur les photos de chantiers et la zone couverte. C’est ce que nous avons travaillé pour TB Rénovation & Nettoyage, couvreur en Loire-Atlantique : site et référencement local, de 2 à 63 visites Google par jour entre juin 2025 et octobre 2026.

Le formulaire de contact

Gardez-le court. Indiquez sous quel délai vous répondez. Après l’envoi, affichez un message clair, du type « Merci, nous vous rappelons rapidement ». Ce petit détail évite au client de se demander si son message est bien parti.

Quelles erreurs de design font fuir les visiteurs d’un site vitrine ?

Les erreurs qui font fuir : textes illisibles, page d'accueil confuse, numéro introuvable, photos floues, site lent et informations périmées. La plupart se corrigent sans tout refaire.

Certaines erreurs reviennent sur beaucoup de sites de petites entreprises. Bonne nouvelle : elles se corrigent souvent en quelques heures.

Les erreurs de fond

• Parler de soi avant de parler du client : « Fondée en 1998, notre société… » au lieu de « Une fuite ? Nous intervenons rapidement dans votre secteur. »
• Un titre vague : « Bienvenue » ne dit rien à personne.
• Trop d’informations sur l’accueil : le visiteur ne sait plus où regarder.

Les erreurs de forme

• Texte trop petit ou trop pâle.
• Trois ou quatre couleurs vives qui se battent entre elles.
• Des blocs alignés au hasard, sans marges régulières.
• Des majuscules partout, qui donnent l’impression de crier.

Les erreurs pratiques

• Numéro de téléphone seulement dans une image, donc impossible à toucher.
• Horaires d’ouverture faux après un changement.
• Liens vers des réseaux sociaux abandonnés depuis longtemps.
• Bouton « Contact » caché au bout du menu.

Les erreurs de suivi

Un site n’est pas terminé le jour de sa mise en ligne. Une promotion finie qui reste affichée, un salarié parti toujours en photo… Ces détails font douter du sérieux de toute l’entreprise.

Un petit contrôle tous les trois mois

Prenez quinze minutes, pas plus :

1. Ouvrez votre site sur téléphone.
2. Vérifiez horaires, tarifs et coordonnées.
3. Testez le formulaire en vous envoyant un message.
4. Remplacez une ou deux photos par des réalisations récentes.

Un site entretenu inspire plus confiance qu’un site luxueux laissé à l’abandon.

Faut-il un modèle Wix, un thème WordPress ou un professionnel pour le design ?

Un modèle d'éditeur convient si vous avez du temps et un besoin simple. Un designer ou une agence s'impose pour un rendu sur mesure et un site pensé pour Google.

Trois grandes voies existent. Aucune n’est mauvaise en soi : tout dépend de votre temps, de votre budget et de vos attentes.

Le modèle d’un éditeur de site

Wix, Squarespace ou Google Sites proposent des modèles prêts à l’emploi. Vous changez les textes, les photos, les couleurs. C’est rapide pour démarrer. La contrepartie : le design reste proche du modèle, et certaines limites apparaissent quand le site grandit. Notre avis détaillé sur Wix pour un site professionnel en fait le tour.

Un thème WordPress

WordPress offre un très grand choix de thèmes, gratuits ou payants. Il laisse plus de liberté, mais demande un peu plus de prise en main et d’entretien. Tout est détaillé dans notre page site vitrine WordPress : comment le faire et combien ça coûte.

Un designer ou une agence

Un professionnel part de votre métier, de vos clients et de votre image. Il propose une maquette, construit le site, l’optimise pour la vitesse et pour Google. Vous gagnez du temps et un rendu sur mesure.

Quel budget prévoir ?

Les tarifs varient beaucoup selon le nombre de pages, la part de sur-mesure et les services inclus. Les écarts sont expliqués dans notre page sur ce qui fait varier le prix d’un site vitrine.

Comment choisir

• Peu de budget, du temps libre : un modèle, en appliquant les règles de clarté et de lisibilité.
• Besoin d’évoluer, envie de garder la main : WordPress.
• Pas le temps, envie d’un site qui travaille pour vous : un professionnel.

Si vous préférez confier le design et la construction, notre service de création de site internet pour artisans et TPE couvre la maquette, le site et sa visibilité locale.

Quel que soit votre choix, gardez la même boussole : clarté, lisibilité, confiance.