Le Guide de la Page d’Accueil Optimale
Du choix du contenu pertinent aux éléments clés de design, découvrez comment réaliser une page d’accueil à succès.
Guide 100% gratuit – Sans inscription obligatoire
Temps de lecture : 11 minutes
Menu
Pourquoi ce guide ?
Premier point de contact avec vos prospects, votre page d’accueil est l’élément fondamental de votre site Internet.
C’est elle qui définit vos choix stratégiques et qui donnera envie aux visiteurs d’en savoir plus sur votre activité.
Mettre en place une page d’accueil efficace peut être délicat. Et c’est normal de se sentir perdu. Je me rappelle de la création de mon propre site web. Je suis resté une matinée entière, dubitatif devant une page blanche, à ne pas savoir quoi faire !
Quel contenu mettre ? Comment le hiérarchiser et le rendre attractif ? Et enfin, quid de l’en-tête et du pied de page ?
Dans ce guide, nous aborderons chacun de ces points.
Afin de rendre cela plus clair et concret, j’ai décidé de partir d’un projet fictif :
Ana est consultante en pub Facebook et souhaiterait créer son site Internet. Dans la dernière partie de ce guide, nous verrons comment procéder, étape par étape, pour lui concevoir une page d’accueil optimale.
Voici le sommaire de ce guide :
Vous n’avez pas le temps de tout lire ?
Pas de problème ! Vous pouvez télécharger ce guide au format PDF pour le découvrir quand vous voulez.
Vous aurez également accès à ma check-list de la page d’accueil optimale qui synthétise tous les éléments de ce guide pour une consultation rapide.
I – Le choix du contenu pertinent
Quel contenu allez-vous mettre sur votre page d’accueil ?
Si vous mettez trop d’informations, vous risquez de perdre vos visiteurs. Et à l’inverse, si votre page d’accueil est pratiquement vide, vos visiteurs ne comprendront pas ce qu’ils font là.
Dans cette partie, nous allons voir les 6 éléments de contenu que vous pouvez mettre sur votre homepage. Vous n’êtes bien sûr pas obligé de tous les mettre.
Ces 6 éléments n’ont qu’un seul but : capter l’attention de votre prospect, renforcer votre crédibilité et lui montrer comment vous pouvez l’aider à résoudre son problème.
1. La proposition de valeur
Captez l’attention.
La proposition de valeur résume en une phrase ce que vous faites.
Elle a pour but de capter l’attention de votre visiteur et lui donner envie d’en savoir plus sur vous.
Une bonne proposition de valeur doit être :
- Courte
- Spécifique
- Crédible
- Unique
Voici 3 exemples de propositions de valeur réussies :
- iPod : « 1000 chansons dans votre poche »
- Spotify : « Écoutez des millions de titres à la demande sans pub et hors connexion »
- Deliveroo : « Vos restaurants préférés, livrés chez vous en un clic »
Si vous êtes indépendant, vous pouvez utiliser la formule : « J’aide les [VOTRE CIBLE] à [PROBLÈME] grâce à [VOTRE EXPERTISE]. »
2. L’apport de valeur
Sortez du lot.
Le meilleur moyen pour vous démarquer et renforcer votre crédibilité, c’est d’apporter de la valeur à vos visiteurs.
Comment ?
Il existe plusieurs solutions :
- Ebook gratuit
- Guide gratuit
- Projet test gratuit (audit, coaching, RDV téléphonique etc.)
À vous de voir en fonction de votre activité.
Cela représente du travail, mais le jeu en vaut la chandelle, car l’apport de valeur joue sur le sentiment de réciprocité. En plus, c’est un excellent moyen de récolter les emails de vos prospects.
Danilo Duchesnes (expert en pub Facebook) propose des guides gratuits à ces visiteurs.
3. La présentation de votre offre
« Pouvez-vous résoudre mon problème ? »
Ici, c’est à vous de jouer 😉
Essayez de résumer d’une manière claire et persuasive comment vous pouvez aider votre visiteur à résoudre son problème… et lui donner envie d’en savoir plus !
4. À propos de vous
« Qui êtes-vous ? »
Cette partie est délicate car nous avons tous tendance à vouloir raconter notre vie.
Parler d’abord du problème de votre cible et de comment vous pouvez l’aider avant de parler de vous.
5. Preuve sociale
« Est-ce que je peux vous faire confiance ? »
La preuve sociale est un élément très important de crédibilité.
Il existe plusieurs outils de preuve sociale :
- les témoignages clients
- les études de cas
- les retours sur vous dans les médias
- vos clients prestigieux
À vous de voir en fonction de votre situation.
Ramit Sethi (entrepreneur américain à succès) expose les témoignages de ces clients sur son site web.
6. Contenus / Derniers articles de votre blog
« Maitrisez-vous votre sujet ? »
Rien ne vaut la publication de contenu régulier pour asseoir votre expertise et renforcer votre référencement naturel.
II – Organisez vos contenus pour un impact maximal
Une fois le contenu sélectionné, il va falloir l’organiser.
Pour ça, nous allons réaliser un wireframe ou mock-up de la future page d’accueil.
Pas besoin d’être graphiste pour en faire un, une simple feuille de papier et un stylo suffisent.
Le but de cet exercice est de coucher vos idées sur le papier pour avoir une vision globale de votre page. Ça sera l’occasion de commencer à réfléchir à certains éléments graphiques (comme les images par exemple).
Reprenons l’exemple d’Ana, notre consultante en pub Facebook.
Elle aimerait mettre en avant son guide de la publicité Facebook. Elle a également quelques témoignages clients.
Par contre, elle n’a pas encore écrit d’articles de blog.
Voilà à quoi pourrait ressembler son wireframe :
Nous avons donc :
- le haut de page, ou header comprenant le logo, le menu et la proposition de valeur du site.
- l’apport de valeur : le guide de la pub Facebook d’Ana
- la présentation de l’offre
- les témoignages clients
- la partie à propos d’Ana
- le pied de page ou footer
Nous allons maintenant voir comment rendre tout cela impactant et mémorable grâce au design.
III – Les éléments forts de design
Pas besoin de trop en faire pour avoir un design persuasif et attractif.
Et de toute façon, le but de ce guide n’est pas de faire de vous des web designers professionnels.
Mais sachez que bien souvent, la différence se joue sur des petits détails (une typographie bien sentie, ou un bon ajustement des couleurs) et le respect des principes de base du design.
Voyons rapidement quelques principes fondamentaux de la psychologie numérique :
Loi de Hick : pour bien comprendre cette loi, prenons un exemple : vous faites vos courses au supermarché. Soudain, vous apercevez 2 stands de dégustation de chocolat. On vous propose alors de goûter un chocolat au choix.
Sur le premier stand, il y a 4 chocolats à goûter.
Sur le deuxième, il y en a 20.
À votre avis, sur quel stand allez-vous faire votre choix le plus rapidement ?
C’est le concept de la loi de Hick : plus il y a de choix, moins la prise de décision est facile et plus les gens mettent de temps à passer à l’action.
Vous aurez donc compris qu’il faut éviter d’abuser de liens sur votre page d’accueil, auquel cas vos visiteurs se sentiront perdus et ne sauront pas où cliquer pour poursuivre leur visite.
Loi de Fitts : cette loi nous indique que la taille et la distance de vos boutons ont un impact direct sur le temps d’interaction de vos visiteurs. En d’autres termes, proposer des éléments cliquables visibles et faciles à atteindre.
Loi de proximité et de similarité :
Loi de proximité : nous percevons comme un ensemble des éléments proches les uns des autres.
Loi de similarité : les éléments visuellement similaires sont associés.
La compréhension de ces deux lois vous permettra de savoir comment guider le regard de vos utilisateurs.
Loi de Miller : une personne moyenne ne peut retenir que 4 à 9 informations dans sa mémoire à court terme. Nous pouvons prendre comme exemple les numéros des cartes de crédit : composés de 4 blocs de 4 chiffres pour faciliter la mémorisation. Il est donc important de séparer votre contenu en sections pour aider vos visiteurs à absorber l’information.
Maintenant que nous avons connaissance de ces principes fondamentaux, nous pouvons rentrer dans le vif du sujet.
1. La colorimétrie
Qui dit web design dit couleur !
Utilisez votre charte graphique (votre logo par exemple) pour définir la colorimétrie de votre site web.
Faites quand même attention à la monotonie. Si votre logo est monochrome, optez pour une couleur contrastée pour vos appels à l’action.
Vous ne savez pas quelle couleur choisir ?
Pour trouver de l’inspiration, je vous recommande d’utiliser un Color Matcher.
Reprenons notre exemple avec Ana.
Voici son logo :
Je me sers du Color Matcher pour trouver une colorimétrie pour son site :
Je vais garder la couleur rouge saumon de son logo pour les appels à l’action. Et je vais utiliser le rouge bordeaux et le bleu pour apporter de la couleur à la page.
2. La typographie
La typographie est un élément fondamental en web design. Une « typo » peut à elle seule définir le caractère de votre message et renforcer votre crédibilité.
Il existe de nombreuses typos gratuites pour le web. Vous pourrez les trouver sur des sites comme Google Fonts ou Font Squirrel.
Par habitude, je choisis d’abord une typo pour les titres et sous-titres.
Pour le projet d’Ana, j’ai opté pour la police « Dosis ». C’est une font élégante et moderne qui se prête bien pour un business B to B.
Pour définir la typo de vos paragraphes, vous pouvez utiliser un outil super intéressant : Fontjoy. Cet outil vous propose des combinaisons de typos basées sur le contraste et la lisibilité.
Après plusieurs tests, j’opte pour la police « Tenor Sans » pour les paragraphes.
Voici le rendu de ces 2 typos :
Pour finir sur la typo, faites attention à ne pas en abuser. À moins de savoir ce que vous faites, évitez d’en utiliser plus de deux.
3. La lisibilité
La bonne lisibilité de vos contenus est fondamentale.
Je traite ce sujet en profondeur dans le guide du site Internet performant.
Pour en résumer les grandes idées :
- Privilégiez du texte noir sur fond blanc
- Utilisez une police de paragraphe simple, suffisamment grande (au moins 16 pixels) et ne lésinez pas sur l’espacement entre les lignes (line-height)
- Utilisez une typo contrastée pour vos titres et sous-titres
- Faites attention à la largeur de vos contenus
- Évitez les pavés, faites des paragraphes, aérez vos textes
- Optimisez vos contenus pour les autres terminaux (tablette et mobile)
J’ajoute ici une petite astuce bonus 🙂
Pour renforcer la lisibilité de vos titres et sous-titres, vous pouvez mettre un espacement entre les lettres (letter-spacing) de quelques pixels.
4. Les appels à l’action
Souvenez-vous de la loi de Fitt’s : vos boutons doivent être facilement visibles et cliquables pour vos futurs visiteurs.
Voici les règles d’un bon bouton :
- Rare : n’en abusez pas et rappelez-vous la loi de Hick : trop de choix tue le choix !
- Direct : utilisez des verbes d’action directe : « Télécharger », « Lire », « Voir »…
- Visible : utilisez une couleur contrastée qui saute aux yeux
Pour notre exemple, j’utilise le rouge saumon comme couleur de fond et j’ajoute une ombre rouge bordeaux pour faire ressortir le bouton :
5. Les éléments graphiques
Les images, pictogrammes, fonds, espacements, séparateurs, bordures, ombres etc. servent à renforcer la hiérarchie visuelle de votre page. Mais attention à ne pas en abuser.
La hiérarchie visuelle doit être la pierre angulaire du design de votre page.
Ce concept peut être résumé en une image :
IV – L’en-tête
L’en-tête ou header concerne tout ce qui se trouve au-dessus de la ligne de flottaison :
La ligne de flottaison du site de votre serviteur.
C’est un endroit très stratégique car c’est la première chose que verront vos visiteurs en arrivant sur votre page.
L’en-tête est souvent constitué du logo avec le menu de navigation et d’une bannière.
1. Le logo et le menu
Aujourd’hui, grâce aux constructeurs de page comme Divi ou Elementor, il est tout à fait possible de créer toutes sortes de menus sans compétence technique.
C’est tout à fait normal de vouloir tenter des choses, mais je vous recommande de faire au plus simple : votre logo en haut à gauche, et votre menu à droite.
Pourquoi ?
Et bien parce que votre menu n’est pas l’endroit le plus stratégique de votre haut de page. Il faut qu’il soit fin et discret pour mettre en valeur la chose qui importe le plus : votre contenu.
Vous pouvez, par exemple, utiliser une couleur atténuée pour les liens de votre menu.
Cela évitera que le regard de vos visiteurs soit attiré vers votre menu alors que vous voulez qu’ils lisent ce que vous avez à leur dire.
Cela nous amène à un dernier point important : votre menu doit-il se fixer en haut de la page ?
Chez Apple, ils ont fait le choix d’un menu fixe.
C’est un vaste débat qui déchaîne les professionnels du web design. Il y a des points positifs et négatifs dans les deux cas. Personnellement je préfère les menus non fixes, moins distrayants pour les utilisateurs.
2. La bannière
Faut-il utiliser un diaporama (ou slider) dans votre bannière ?
Très à la mode il y a quelques années, le slider n’a plus vraiment le vent en poupe.
Si vous êtes photographe professionnel, cela peut avoir du sens. Un slider vous permettra de montrer vos plus beaux clichés.
Mais sinon, je vous déconseille d’en mettre. Des études ont montré que les gens ne regardent pas les slides, ils « scrollent » plus bas sur la page au bout de quelques secondes. Autre problème : un slider alourdit votre site et nuit donc à son temps de chargement.
Préférez plutôt une image ou une couleur de fond qui mette bien en valeur votre proposition de valeur.
Enfin, je vous recommande de mettre une photo de vous ou de votre équipe dans votre bannière. Les humains veulent faire du business avec d’autres êtres humains. Une illustration qui résume votre proposition de valeur peut aussi très bien marcher.
Sur le site d’elegant themes (fondateurs de Divi), ils appuient leur proposition de valeur avec une illustration de leur produit en action.
VI – Mise en pratique : création de la page d’accueil d’Ana
Maintenant que nous avons vu le contenu et les éléments de design, nous allons pouvoir commencer à créer notre page d’accueil.
Dans un premier temps, je vous conseille d’intégrer tout le contenu sur la page en l’organisant bien en section :
Titre 1 (H1) :
- Typo : Dosis
- Taille : 65 pixels
- Espacement des lettres : 2 pixels
- Couleur : #05004f
Titre 2 (H2) :
- Typo : Dosis
- Taille : 45 pixels
- Espacement des lettres : 2 pixels
- Couleur : #05004f
Titre 3 (H3) :
- Typo : Dosis
- Taille : 35 pixels
- Espacement des lettres : 2 pixels
- Couleur : #05004f
Paragraphe (p) :
- Typo : Tenor Sans
- Taille : 17 pixels
- Interligne : 1.8em
- Couleur : #505050
J’ai également créé le menu ainsi que le pied de page. Vous remarquerez qu’ils sont très simples, ce n’est pas la peine de se compliquer la tâche sur ces éléments.
Maintenant, nous allons mettre tout cela en page grâce à des éléments de design simple.
1. Section en-tête
Ici le but est simple : que le visiteur comprenne immédiatement de quoi il est question.
La proposition de valeur est donc mise en avant grâce à un fond uni.
Le menu a un fond transparent afin de se fondre dans la bannière et ne pas perturber la lecture du visiteur.
Le bouton permet de descendre directement à la section suivante : le guide d’Ana.
2. Section apport de valeur
Ici, le design est également très sobre : un fond blanc et une boîte pour faire ressortir le contenu.
J’ai ajouté une bordure et une ombre à la boîte pour qu’elle soit visuellement mise en avant. Le pictogramme a été ajusté à la colorimétrie du site web.
3. Section présentation de l’offre
Un fond de couleur gris clair a été ajouté pour marquer la séparation avec la partie « Guide ».
La présentation est encore très simple. La typo, le bouton et l’image carrée suffisent à rendre l’ensemble clair et compréhensible.
4. Section témoignages
Ici, nous dérogeons à la règle de lisibilité « texte noir sur fond blanc » car il s’agit d’une section particulière et importante.
Si un visiteur scroll rapidement la page, son regard sera accroché par ce fond bleu situé en plein milieu de la page.
Le contenu est centré dans la section pour équilibrer la mise en page globale.
Les témoignages sont mis en valeur grâce à une boîte blanche comprenant un léger ombrage. Un petit pictogramme rouge saumon apporte un peu de pep’s à l’ensemble.
5. Section à propos
Comme pour la présentation de l’offre, la mise en page est très simple.
Cette fois, le texte est à droite et l’image à gauche afin d’harmoniser la mise en page globale.
La photo est de format carré pour renforcer l’effet miroir avec la présentation de l’offre.
6. Section pied de page
Comme nous l’avons vu dans la partie précédente, le footer présente les liens vers les pages importantes, les informations de contact et les réseaux sociaux.
7. Le rendu final
Voilà ! Notre page d’accueil est terminée !
J’espère que ce guide vous aidera à réaliser votre propre page d’accueil.
Vous l’avez sans doute constaté pendant votre lecture : une bonne page d’accueil, c’est avant tout un contenu pertinent et une bonne hiérarchie visuelle.
2 typographies, 3 couleurs, quelques éléments graphiques simples suffisent bien souvent à véhiculer votre message de manière claire, persuasive et professionnelle.
À votre succès.
Ce guide vous a plu ?
Vous pouvez le télécharger au format PDF pour le consulter quand vous en avez besoin.
Vous aurez également accès à ma check-list de la page d’accueil optimale qui synthétise tous les éléments de ce guide pour une consultation rapide.
Ce guide vous est utile ? Partagez-le !
