Le guide du site web professionnel

Créer un site professionnel soulève beaucoup de questions.

Que faut-il mettre sur la page d’accueil ? Combien de pages créer ? Quelles couleurs choisir ? Comment être visible sur Google ? Faut-il penser au mobile dès le départ ? Et combien de plugins WordPress faut-il encore installer avant que quelqu’un intervienne ? 😅

Le problème n’est généralement pas de manquer d’informations.

C’est plutôt l’inverse.

On trouve des milliers de conseils, de listes d’outils et de « bonnes pratiques ». Et lorsqu’on essaie de tout appliquer en même temps, un projet qui semblait assez simple peut rapidement devenir beaucoup plus compliqué qu’il ne devrait l’être.

Avec les années, ma façon de concevoir des sites est devenue plus simple. Non parce qu’il y a moins de choses à connaître, mais parce que j’ai appris à les prendre dans le bon ordre :

• comprendre le projet ;
• structurer les contenus ;
• construire un système cohérent ;
• penser aux différents écrans dès le départ ;
• construire quelque chose qui pourra durer ;
• puis continuer à le faire vivre.

Ce sont ces différentes étapes que nous allons parcourir dans ce guide.

Il ne rassemble ni toutes les règles du webdesign, ni la recette du site parfait™. Il présente simplement les principes que j’utilise aujourd’hui pour construire mes propres sites et ceux de mes clients.

Comprendre avant de concevoir

C’est probablement l’étape la moins spectaculaire d’un projet. Et pourtant, elle conditionne presque tout le reste.

Avant de choisir une couleur, de dessiner une Hero ou d’ouvrir WordPress, commencez par répondre à trois questions :

Pourquoi ce site existe-t-il ?
À qui s’adresse-t-il ?
Qu’aimeriez-vous que ses visiteurs comprennent ou fassent ?

Ces questions semblent très basiques, mais prenez quelques minutes pour y répondre réellement.

Un site peut servir à obtenir des demandes de devis, présenter un savoir-faire, vendre un produit, prendre des rendez-vous, recruter, transmettre des informations ou simplement rassurer quelqu’un qui a déjà entendu parler de vous.

Il peut parfaitement remplir plusieurs de ces fonctions.

L’important est de savoir lesquelles.

Pensez au visiteur autant qu'à votre entreprise

Lorsqu’on crée son propre site, on a naturellement tendance à réfléchir depuis son point de vue et à commencer par ce que l’on veut raconter :

• notre histoire ;
• nos services ;
• notre méthode ;
• nos valeurs.

Mais le visiteur arrive avec ses propres questions :

• Est-ce que je suis au bon endroit ?
• Est-ce que cette personne peut résoudre mon problème ?
• Combien ça coûte ?
• Puis-je lui faire confiance ?
• Que dois-je faire maintenant ?

Un bon site se trouve quelque part entre les deux.

Il permet à l’entreprise d’atteindre ses objectifs en répondant aux besoins de ceux qui le consultent.

C’est aussi pour cette raison que je préfère généralement commencer un projet par une discussion plutôt que par un questionnaire de trente-sept pages. Il faut d’abord comprendre ce qu’on essaie réellement de construire.

Faites aussi l'inventaire de ce que vous avez

Une autre question très concrète doit être posée assez tôt : avec quels éléments allez-vous travailler ?

• Textes.
• Photos.
• Logo.
• Réalisations.
• Témoignages.
• Chiffres.
• Documents.
• Avis clients.

Autrement dit, tout ce qui peut aider à expliquer ou à prouver quelque chose.

Une maquette conçue autour de magnifiques photographies en pleine largeur risque d’être légèrement moins convaincante lorsque vous découvrez en plein projet que les seules images disponibles ont été prises avec un téléphone en 2014. 😱

Comprendre les contenus disponibles fait partie du design.

Structurer avant de construire

Une fois le projet compris, je ne commence pas encore à designer. Je commence par mettre les choses dans l’ordre.

• Quelles pages sont nécessaires ?
• Comment sont-elles reliées ?
• Quelles informations doivent apparaître en premier ?
• Lesquelles peuvent attendre ?
• Quel parcours voulons-nous proposer au visiteur ?

C’est là que commence réellement la structure du site.

Commencez par une arborescence simple

Pas besoin d’un logiciel compliqué : une feuille et un crayon peuvent largement suffire.

Pour un site vitrine, l’arborescence de départ pourrait par exemple contenir :

• une page d’accueil ;
• les services ;
• les réalisations ;
• la page À propos ;
• la page Contact ;
• puis, si le projet le nécessite, quelques sous-pages.

L’objectif n’est pas d’avoir beaucoup de pages, mais de faire en sorte que chacune ait une véritable raison d’exister.

Plus l’architecture est claire, plus il sera facile de construire une navigation compréhensible et de créer des liens utiles entre les contenus.

Le maillage interne n’est d’ailleurs pas uniquement une affaire de SEO. Un bon lien permet avant tout au visiteur de poursuivre naturellement son parcours. Si je parle de typographie dans ce guide, par exemple, il est logique de l’orienter vers mon article consacré au sujet.

Lorsqu’un lien est réellement utile au lecteur, il trouve naturellement sa place dans le site.

Pensez ensuite à l'ordre des contenus

Prenons une page d’accueil. On pourrait commencer par chercher une liste de « sections indispensables » :

• Hero ;
• services ;
• à propos ;
• témoignages ;
• FAQ ;
• CTA.

Mais ce n’est pas ainsi que je préfère travailler. Je me demande plutôt :

1. Qu’est-ce que la personne doit comprendre en arrivant ?
2. Qu’a-t-elle besoin de découvrir ensuite ?
3. À quel moment est-il pertinent de lui montrer une preuve ?

On passe alors d’une collection de sections à une véritable progression. Et c’est beaucoup plus intéressant.

J’ai consacré un article entier à cette question : Concevoir une page d’accueil : quoi montrer, dans quel ordre ?

Faire un wireframe avant la jolie maquette

Une fois les contenus placés dans le bon ordre, quelques rectangles gris peuvent faire gagner énormément de temps.

À ce stade, je cherche surtout à vérifier la structure :

• La section est-elle utile ?
• Arrive-t-elle au bon moment ?
• Deux parties racontent-elles la même chose ?
• Le parcours semble-t-il logique ?

Pas besoin de savoir encore si le bouton sera rouge argile ou si son border-radius fera 6 ou 8 pixels. Ces problèmes passionnants peuvent attendre.

La structure avant la décoration.

Le wireframe ne cherche pas à être beau : il sert à rendre la structure visible avant de penser au design.

La typographie

La typographie participe évidemment au style d’un site. Mais avant cela, elle doit surtout permettre de lire facilement et de comprendre rapidement la structure du contenu.

Je préfère généralement commencer avec une seule bonne famille typographique plutôt que d’en associer plusieurs trop tôt. Si elle possède suffisamment de graisses et de variantes, elle peut déjà prendre en charge :

• les grands titres,
• les sous-titres,
• les paragraphes,
• les petits textes,
• les boutons,
• les éléments secondaires.

La variété ne vient donc pas forcément du nombre de polices utilisées, mais de la manière dont vous exploitez celle que vous avez choisie.

Taille, graisse, hauteur de ligne, largeur des paragraphes et niveaux de titres permettent déjà de construire une hiérarchie très riche.

Avant de chercher une deuxième police, commencez par vérifier tout ce que la première est capable de faire.

Pour approfondir cette étape, consultez Choisir ses typographies : faire simple, cohérent et lisible.

Cet exemple utilise une seule famille typographique : Nunito.

Une bonne typographie ne suffit pas : encore faut-il bien la régler. Pour aller plus loin, consultez Design des textes : rendre vos contenus plus lisibles et agréables à lire.

Les espacements

L’espace n’est pas simplement ce qui se trouve entre deux éléments. Il participe directement à la structure de la page.

Un bon espacement permet notamment de :

• rapprocher les éléments qui appartiennent au même ensemble,
• séparer deux idées différentes,
• créer du rythme,
• laisser respirer le contenu,
• rendre la lecture plus évidente.

Le problème apparaît lorsque chaque marge et chaque padding sont choisis au cas par cas. On finit rapidement avec 17 pixels ici, 43 là, 68 un peu plus bas… et une interface qui manque de cohérence sans qu’on sache toujours expliquer pourquoi.

Je préfère donc travailler avec une petite échelle d’espacement, composée de quelques valeurs réutilisées dans tout le site.

Moins de valeurs à choisir signifie moins d’hésitations, mais surtout davantage de régularité.

L’espace devient alors un véritable système plutôt qu’une succession de réglages improvisés.

L’échelle fluide utilisée sur ComnWeb : huit niveaux qui évoluent entre une valeur minimale et une valeur maximale selon la largeur de l’écran.

J’ai détaillé la construction et l’utilisation de ce système dans Les espacements en webdesign : créer des pages plus claires et cohérentes.

La hiérarchie

Tous les éléments d’une page n’ont pas besoin d’être vus en même temps. Une bonne hiérarchie visuelle aide au contraire le visiteur à comprendre naturellement :

• où regarder en premier,
• ce qui est important,
• ce qui est secondaire,
• quelle action privilégier,
• et où poursuivre ensuite.

Pour créer cette priorité, vous disposez déjà de nombreux leviers :

• la taille,
• la graisse,
• la couleur,
• le contraste,
• l’espacement,
• la position.

Un grand titre sombre n’a pas le même poids qu’un petit texte gris. Un bouton rempli n’attire pas autant l’attention qu’un simple lien. Une information entourée d’espace ressort naturellement davantage qu’un élément perdu au milieu de dix autres.

Le but n’est donc pas de rendre chaque élément spectaculaire, mais de donner à chacun le niveau d’importance correspondant à son rôle.

Si tout attire l’attention, plus rien ne guide vraiment.

Rien n’a été ajouté. Rien n’a été retiré. En donnant simplement un rôle et un niveau d’importance à chaque élément, la lecture devient naturellement plus évidente.

J’ai détaillé ce principe et les différents moyens de l’appliquer dans Hiérarchie visuelle : guider le regard et clarifier vos pages.

La couleur

La même logique s’applique aux couleurs. Je préfère partir d’une petite palette dans laquelle chaque teinte possède un rôle clair, plutôt que d’utiliser quatre couleurs différentes selon l’humeur du moment.

Une couleur peut servir à :

• attirer l’attention ;
• structurer ;
• rythmer une page ;
• faciliter la lecture ;
• installer une ambiance.

Mais plus une couleur forte est utilisée partout, moins elle conserve d’impact.

Je pars donc généralement d’un système simple :

• une couleur d’accent ;
• une couleur sombre ;
• une couleur claire ;
• une couleur de texte confortable à lire.

Pas besoin d’en faire davantage au départ.

Quatre couleurs, quatre rôles : attirer, structurer, rythmer et lire. La cohérence commence souvent par là.

Pour aller plus loin, consultez Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente.

Et tout cela doit fonctionner ensemble

C’est probablement le plus important : une excellente typographie ne sauvera pas une page complètement tassée, pas plus qu’une belle palette ne corrigera une hiérarchie incompréhensible.

Et de magnifiques illustrations ne rendront pas utile une section qui n’avait aucune raison d’être.

Le design professionnel vient rarement d’un élément spectaculaire.

Il naît plutôt d’une succession de petites décisions cohérentes.

Concevoir pour tous les écrans

Pendant longtemps, j’ai travaillé comme beaucoup de webdesigners : je construisais d’abord la version desktop, puis venait le moment du responsive.

« Bon. Maintenant, il faut réparer la tablette et le mobile. » 😅

Commençait alors une longue série de corrections : réduire ceci, déplacer cela, ajouter une valeur différente ici, puis une autre au breakpoint suivant.

Aujourd’hui, je préfère penser aux différents écrans beaucoup plus tôt.

Le responsive n'est pas une phase de réparation

Lorsqu’une page repose dès le départ sur des structures simples, des largeurs maîtrisées, des espacements cohérents et des éléments capables de s’adapter, une grande partie du travail se fait naturellement.

Les colonnes peuvent se réorganiser, les blocs passer les uns sous les autres, les textes évoluer progressivement et certains éléments changer de position lorsque l’espace disponible ne suffit plus.

Le responsive ne devrait donc pas suivre ce parcours :

desktop → réparer la tablette → réparer le mobile

Il consiste plutôt à concevoir dès le départ une structure capable de s’adapter.

C’est ce que j’appelle le responsive by design, ou la conception adaptative.

Ne cherchez pas à conserver la même composition à tout prix

Une disposition en trois colonnes peut parfaitement fonctionner sur un grand écran et devenir illisible sur tablette. Dans ce cas, inutile de réduire chaque élément jusqu’à ce que tout rentre : changez la structure.

Trois colonnes peuvent en devenir deux, puis une. Une image peut passer sous le texte. Un menu peut adopter un comportement complètement différent.

Le responsive ne consiste pas à miniaturiser la version desktop. Il consiste à préserver la compréhension et le confort, quelle que soit la largeur disponible.

Construire pour durer

Un site peut être magnifique le jour de sa mise en ligne et devenir pénible à administrer six mois plus tard.

Pour moi, le caractère « professionnel » d’un site se mesure aussi à ce que le visiteur ne remarque pas forcément : sa structure, sa maintenance, ses dépendances et sa capacité à évoluer.

Gardez la construction aussi simple que possible

Avec WordPress, il existe un plugin pour pratiquement tout. C’est formidable — et légèrement dangereux pour les gens comme moi qui aiment que les choses restent simples. 

Ma règle personnelle est assez claire : moins j’ai besoin de plugins, mieux je me porte.

Non parce qu’ils seraient mauvais : certains sont indispensables pour ajouter des fonctionnalités que WordPress ou le thème ne proposent pas nativement. Mais avant d’en installer un, je vérifie toujours si une solution simple existe déjà.

Chaque outil supplémentaire crée une dépendance à maintenir. Il doit donc apporter une véritable utilité.

Le même principe s’applique ici : chaque élément doit mériter sa place.

Pensez à la maintenance dès le départ

WordPress, les thèmes et les extensions évoluent. Un site doit donc pouvoir être sauvegardé, mis à jour et contrôlé régulièrement.

Mais sa pérennité dépend aussi d’un principe très simple : restez propriétaire de vos outils essentiels.

• Votre nom de domaine.
• Votre hébergement.
• Vos comptes.
• Vos accès au site.

Un prestataire peut parfaitement vous accompagner dans leur gestion sans que tout soit enregistré à son nom. Le jour où vous souhaiterez en changer, vous serez heureux d’avoir conservé cette autonomie.

Les performances font partie de l'expérience

Un beau site qui donne l’impression de réfléchir dix secondes avant d’afficher une page perd rapidement de son charme.

Je ne cherche pas nécessairement à obtenir un score parfait partout. Je cherche surtout à construire un site suffisamment léger, stable et réactif pour ne pas gêner son utilisation.

Les bonnes décisions sont souvent prises bien avant l’installation d’un plugin d’optimisation miracle :

• utiliser des images adaptées ;
• conserver une construction raisonnable ;
• choisir un hébergement de qualité ;
• éviter de charger des outils « au cas où ».

La performance ne se corrige pas seulement à la fin : elle se construit dès le départ.

Être trouvé

Être en ligne ne signifie pas nécessairement être trouvé.

Le référencement naturel est un sujet beaucoup trop vaste pour être traité entièrement dans ce guide. Mais quelques principes doivent être intégrés dès la conception du site.

Commencez par créer des pages réellement utiles

Avant les mots-clés, les plugins et les scores, il y a le contenu.

Pour chaque page, demandez-vous :

• Que cherche la personne qui pourrait arriver ici ?
• Cette page lui apporte-t-elle une véritable réponse ?
• Comprend-on immédiatement de quoi elle parle ?

Une page ne devrait pas être créée simplement pour remplir un menu ou cibler une expression. Elle doit répondre à un besoin suffisamment clair pour mériter d’exister.

C’est aussi la meilleure base pour le référencement : un contenu pensé pour être utile aux personnes est généralement plus simple à comprendre pour les moteurs de recherche.

Aidez les moteurs de recherche à comprendre le site

Un bon contenu ne suffit pas s’il est mal organisé ou difficile à découvrir.

Donnez-lui une structure claire :

• un sujet principal bien défini pour chaque page ;
• des titres compréhensibles ;
• des contenus correctement organisés ;
• des adresses lisibles ;
• des liens internes réellement utiles ;
• des textes alternatifs pour les images qui transmettent une information.

Rien de très spectaculaire. Il s’agit surtout de décrire clairement ce que contient chaque page et de permettre aux visiteurs comme aux moteurs de poursuivre leur parcours.

Méfiez-vous des recettes trop précises

Le SEO a longtemps été présenté comme une accumulation de règles : répéter un mot-clé un certain nombre de fois, atteindre une longueur exacte ou obtenir tous les voyants verts d’un plugin.

Ces indicateurs peuvent aider, mais ils ne doivent pas dicter le contenu. Un titre doit décrire clairement la page, une description doit donner envie de découvrir ce qu’elle contient et le texte doit répondre correctement au sujet.

Écrivez d’abord quelque chose d’utile et de compréhensible. C’est déjà une excellente base.

Le référencement naturel ne s’arrête évidemment pas là. J’ai détaillé la méthode, les réglages et les vérifications concrètes dans Les bases du SEO pour un site vitrine : être trouvé sans chercher de recettes magiques.

Un site doit continuer à vivre

La mise en ligne donne une impression assez agréable : tout est terminé, le site fonctionne et on peut enfin fermer l’ordinateur. 🥳

En réalité, c’est plutôt le début de sa vie.

Une offre peut évoluer, de nouveaux projets peuvent être ajoutés, une page améliorée et un article actualisé. Certains contenus finiront aussi par devenir obsolètes.

Le site doit pouvoir accompagner ces changements.

Ne cherchez pas à tout prévoir dès le départ

C’est une autre chose que j’ai apprise avec le temps : un site n’a pas besoin d’être définitif le jour de sa mise en ligne. Il doit surtout reposer sur de bonnes bases.

Si sa structure est propre et son système cohérent, vous pourrez ajouter une page ou faire évoluer une section sans devoir reconstruire tout le reste.

C’est aussi pour cette raison que j’accorde autant d’importance aux systèmes réutilisables : ils rendent le site plus cohérent aujourd’hui, mais surtout plus facile à faire évoluer demain.

Continuez à améliorer ce qui existe

Publier du nouveau contenu est intéressant, mais améliorer une page existante peut l’être tout autant.

Les améliorations peuvent prendre différentes formes :

• une nouvelle réalisation ;
• un témoignage récent ;
• une offre reformulée ;
• un article actualisé ;
• de meilleurs liens entre plusieurs contenus.

Un site vivant n’est pas nécessairement un site sur lequel quelque chose change tous les jours. C’est simplement un site qui continue d’accompagner l’activité qu’il représente.

Un site professionnel commence par de bonnes décisions

Si vous avez lu jusqu’ici, vous avez probablement remarqué quelque chose : je vous ai finalement assez peu parlé de WordPress, encore moins de Divi, et je ne vous ai donné aucune liste des « 17 fonctionnalités indispensables en 2026 ».

C’est volontaire.

Les outils sont importants, mais ils arrivent après.

La conception d’un site professionnel commence par de bonnes décisions :

• comprendre ce qu’il doit accomplir ;
• organiser correctement ses contenus ;
• construire une identité cohérente ;
• l’adapter aux différents écrans ;
• rester suffisamment simple pour pouvoir durer ;
• être compréhensible par les visiteurs comme par les moteurs de recherche ;
• continuer à évoluer après sa mise en ligne.

Les outils permettent ensuite de construire tout cela.

Pas l’inverse.

S’il y a une chose que toutes ces années passées à créer des sites m’ont apprise, c’est qu’une bonne méthode permet d’éviter énormément de complexité inutile.

Et personnellement, moins j’ai de complexité inutile à gérer, mieux je me porte.

Pour continuer

Si vous préparez actuellement votre projet, découvrez ma façon de travailler et voyez comment je passe de notre premier échange à la mise en ligne.

Et si vous souhaitez continuer à apprendre, retrouvez tous mes articles sur le blog ComnWeb.