Concevoir une page d’accueil : quoi montrer, dans quel ordre ?

Je me souviens encore de la création de mon premier site. J’avais WordPress, mon thème et probablement déjà quelques couleurs. Pourtant, je suis resté une bonne partie de la matinée devant une page blanche à me demander :

« Bon… je mets quoi maintenant ? » 

À l’époque, je pensais surtout avoir un problème de design. Avec le recul, le véritable problème était beaucoup plus simple : je ne savais pas encore ce que ma page d’accueil devait raconter.

Tant que cette question n’est pas réglée, ouvrir Divi, Figma ou n’importe quel autre outil ne vous aidera pas beaucoup. Vous déplacerez surtout des blocs jusqu’à ce que l’ensemble paraisse à peu près correct.

Aujourd’hui, je préfère faire l’inverse : comprendre, structurer, puis seulement concevoir.

Une page d'accueil n'est pas une liste de sections obligatoires

Cherchez comment construire une bonne page d’accueil et vous trouverez rapidement des recettes :

• une hero ;
• trois services ;
• une section À propos ;
• des témoignages ;
• un portfolio ;
• une FAQ ;
• un appel à l’action ;
• un footer.

Très bien. Sauf que votre site n’a peut-être besoin que de la moitié de ces éléments — ou de choses complètement différentes.

La page d’accueil d’un restaurant ne remplit pas la même fonction que celle d’un cabinet de conseil. Un photographe aura probablement intérêt à montrer rapidement ses images, tandis qu’un logiciel devra peut-être commencer par expliquer son fonctionnement. Un indépendant pourra davantage mettre en avant sa personnalité, sa méthode et ses réalisations.

Il n’existe donc pas, à mon sens, une structure idéale de page d’accueil. Il existe une structure adaptée à ce que chaque site doit permettre de comprendre.

Et c’est assez différent.

Commencez par les questions du visiteur

Avant de réfléchir aux sections, j’aime me placer du point de vue de quelqu’un qui arrive sur le site sans rien connaître du projet. Qu’est-ce qu’il cherchera naturellement à comprendre ?

On retrouve souvent quelques questions simples :

• Où suis-je et que faites-vous ?
• Est-ce que cela me concerne ?
• Qu’est-ce que vous proposez concrètement ?
• Pourquoi devrais-je vous faire confiance ?
• Que puis-je faire ensuite ?

Vous n’avez pas nécessairement besoin d’une section distincte pour répondre à chacune d’elles. En revanche, si votre page d’accueil n’apporte aucune réponse à l’une de ces questions, il manque probablement quelque chose.

Ces interrogations fournissent également une première indication sur l’ordre du contenu. Avant de demander à quelqu’un de vous contacter, mieux vaut généralement lui avoir permis de comprendre ce que vous faites. Et avant de lui demander de vous faire confiance, autant lui montrer quelques raisons de le faire.

Dit ainsi, cela paraît évident. Pourtant, cette logique disparaît facilement lorsqu’on commence directement par déplacer des modules dans un constructeur visuel.

La hero doit ouvrir la conversation, pas tout raconter

La hero est souvent la partie qui nous fait perdre le plus de temps. On veut y mettre :

• le métier ;
• la proposition de valeur ;
• les avantages ;
• deux appels à l'action ;
• une image ;
• un badge ;
• trois chiffres ;
• les logos de clients ;
• et éventuellement l’histoire complète de l’entreprise.

Respirez. 🙏

Le haut de la page n’a pas besoin de tout raconter. Il doit surtout permettre au visiteur de comprendre rapidement où il se trouve et pourquoi la suite pourrait l’intéresser.

Personnellement, je cherche généralement quelque chose de beaucoup plus simple :

• un message principal clair,
• un peu de contexte si nécessaire,
• et éventuellement une action évidente.

Le reste peut arriver ensuite. Les internautes savent faire défiler une page : votre hero n’a pas besoin de contenir toute la page d’accueil en miniature. Elle doit simplement donner envie de découvrir la suite.

Une hero n’a pas besoin de tout contenir : un message, quelques éléments de contexte et une action peuvent déjà suffire à ouvrir le parcours.

Chaque section doit avoir un travail

Lorsque je construis une page, je me pose régulièrement une question très simple :

« Quel est le travail de cette section ? »

Une section peut expliquer une offre, présenter des réalisations, rassurer grâce à des témoignages, détailler une méthode ou orienter vers un contenu plus approfondi.

Le problème apparaît lorsque plusieurs sections accomplissent exactement la même chose — ou lorsqu’une section est présente uniquement parce que « les sites en ont généralement une comme ça ».

Si je ne peux pas expliquer son utilité en une phrase, je me demande sérieusement si elle mérite sa place.

Montrer vaut souvent mieux qu'expliquer

C’est une évolution importante dans ma manière de construire des pages. Lorsqu’on veut convaincre, le premier réflexe consiste souvent à ajouter du texte pour expliquer que l’on travaille bien, que l’on possède de l’expérience ou que les clients sont satisfaits.

Mais lorsque vous pouvez montrer quelque chose à la place, c’est généralement beaucoup plus convaincant :

• vous réalisez de beaux projets ? Montrez-les ;
• vous avez une méthode particulière ? Présentez-en les principales étapes ;
• vos clients sont satisfaits ? Laissez-les parler ;
• vous publiez régulièrement sur votre métier ? Rendez vos articles accessibles.

Ces preuves n’ont pas nécessairement besoin d’être regroupées dans une grande section située en bas de page. Une réalisation peut prolonger la présentation d’une offre, tandis qu’un témoignage ou un chiffre peut rassurer précisément au moment où une question apparaît.

Plutôt que de vous demander où placer votre section de témoignages, demandez-vous à quel moment cette preuve serait la plus utile.

Sur ComnWeb, c’est précisément ce que j’essaie de faire aujourd’hui :

Moins promettre. Plus montrer.

Cela change également la manière de réfléchir à l’ordre d’une page. Il ne s’agit plus seulement d’enchaîner des arguments, mais de construire progressivement la compréhension et la confiance.

Mettez tout dans l'ordre avant de penser au design

Une fois que je sais ce que la page doit contenir, je ne commence pas toujours par le design. Je réalise d’abord un wireframe — même si le mot est parfois un peu généreux pour décrire certaines de mes premières versions. 🤭

Quelques rectangles, quelques titres et deux ou trois annotations suffisent largement.

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

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

• où commence l’histoire ;
• comment les sections s’enchaînent ;
• si certaines idées se répètent ;
• si une information apparaît trop tôt ou trop tard ;
• et si l’ensemble possède un rythme logique.

Je n’ai encore besoin ni de couleurs, ni d’images définitives, ni de savoir si un bouton aura un rayon de 8 ou 12 pixels. Pour l’instant, j’organise l’information.

Tout reste alors très facile à déplacer, à supprimer ou à reformuler. Le design viendra ensuite mettre en forme une structure déjà réfléchie.

Une bonne page d’accueil construit une progression

C’est peut-être l’idée la plus importante de cet article. Je ne vois plus vraiment une page d’accueil comme une succession de sections indépendantes, mais comme une progression.

Le visiteur arrive en ne sachant encore presque rien. La page doit progressivement lui permettre :

• de comprendre le projet ;
• de découvrir ce qui lui est proposé ;
• d’obtenir suffisamment de preuves ;
• de lever certaines hésitations ;
• puis de savoir où poursuivre son parcours.

Cette suite ne consiste d’ailleurs pas nécessairement à vous contacter immédiatement. Elle peut inviter à découvrir une offre, consulter un projet, lire un article, prendre rendez-vous ou visiter une fiche produit.

Une page d’accueil sert aussi à orienter. Elle n’a pas besoin de terminer tout le parcours à elle seule.

Le constructeur visuel ne décide pas de la page : il met en forme une structure déjà pensée. L’ordre, le rôle et l’enchaînement des contenus viennent avant le design.

Ensuite seulement, faites entrer le design

Une fois les contenus et leur ordre suffisamment clairs, le design peut commencer à rendre cette structure visible :

• quelle information doit ressortir ?
• quels éléments appartiennent au même groupe ?
• où faut-il créer davantage de respiration ?
• quelle typographie correspond au projet ?
• quelles couleurs utiliser, et pour quels rôles ?

Ces questions restent importantes, mais elles deviennent beaucoup plus simples lorsque la structure existe déjà. Chacune mériterait presque son propre article — et c’est justement le cas :

• Hiérarchie visuelle : guider le regard et clarifier vos pages, pour travailler l’ordre de lecture et les priorités visuelles ;
• Les espacements en webdesign : créer des pages plus claires et cohérentes, pour organiser les distances et les relations entre les éléments ;
• Design des textes : rendre vos contenus plus lisibles et agréables à lire, pour améliorer le confort de lecture ;
• Choisir ses typographies : faire simple, cohérent et lisible, pour construire un système typographique adapté au projet ;
• Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente, pour attribuer un rôle précis à chaque couleur.

Ne cherchez pas la page d'accueil parfaite

Il n’existe probablement pas de formule idéale qu’il suffirait d’appliquer à tous les projets.

Une bonne page d’accueil est avant tout une page qui remplit son rôle. Elle rassemble les informations utiles dans un ordre logique, montre ce qui mérite de l’être et aide naturellement le visiteur à poursuivre son parcours — sans chercher à tout lui raconter.

Le design peut ensuite donner du caractère à cette structure et rendre ses intentions visibles. Mais si le point de départ est bancal, même la plus belle direction artistique aura du mal à faire des miracles.

Avant d’ouvrir votre constructeur visuel, commencez donc par une feuille blanche. Elle devrait désormais être beaucoup moins intimidante : vous savez quelle question lui poser.

« Que doit comprendre mon visiteur ? »

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.