Vous êtes ici : ComnWeb Web Design Le guide de la page d’accueil optimale
Web Design

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 simple et efficace.
Par Thibaut Brouard
Le guide de la page d'accueil optimale par Thibaut Brouard
Photo de Halacious sur Unsplash

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 ce que nous allons voir :

Vous êtes prêt ? C’est parti !

Aperçu du rendu final

Voici un aperçu du rendu final de la maquette de notre projet fictif.

Vous pouvez remarquer que le design est très simple. C’est voulu de ma part, car le but de ce guide est de vous montrer qu’il n’y a pas forcément besoin d’en faire trop pour véhiculer correctement votre message.

Voyons maintenant tout cela en détail 🙂

Rendu final de la page d'accueil optimale

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 5 éléments de contenu que vous pouvez mettre sur votre homepage. Vous n’êtes bien sûr pas obligé de tous les mettre.

Ces 5 é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.

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]. »

Idéalement, votre proposition de valeur doit apparaître dans la bannière de votre page d’accueil (tout en haut). En effet, les êtres humains ont tendance à se référer à leur première impression pour prendre des décisions. C’est ce que l’on appelle le biais d’ancrage.

Ainsi, après avoir lu votre proposition de valeur en découvrant votre site, vos visiteurs pourront « scanner » plus efficacement votre site pour trouver ce qui les intéresse.

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.

Exemple de guides gratuits pour apporter de la valeur aux visiteurs

Danilo Duchesnes (expert en pub Facebook) propose des guides gratuits à ses visiteurs.

La présentation de votre offre / À propos de vous

« Pouvez-vous résoudre mon problème ? » / « Qui êtes-vous ? »

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 !

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.

Les témoignages clients du site site internet de Ramit Sethi

Ramit Sethi (entrepreneur américain à succès) expose les témoignages de ses clients sur son site web.

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.

Publiez du contenu régulièrement sur votre site web.

Cette agence web anglaise présente ses 3 derniers articles sur sa page d’accueil

Idéalement, votre contenu devrait apporter de la valeur à vos visiteurs. Le contenu qui n’a pour but que le référencement naturel n’est pas pertinent.

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 ainsi que son offre de projet test gratuit. 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 :

Exemple d'un wireframe de création de site internet
Ici nous avons :

  1. le haut de page, ou header comprenant le logo, le menu et la proposition de valeur du site.
  2. l’apport de valeur : le guide de la pub Facebook d’Ana et son offre de projet test
  3. la présentation de l’offre
  4. les témoignages clients
  5. la partie à propos d’Ana
  6. le pied de page ou footer

Nous allons maintenant voir comment rendre tout cela impactant et mémorable grâce au design.

Les éléments forts de design

« Design is not just what it looks like and feels like. Design is how it works. » Steve Jobs.

Le génie d’Apple nous disait que le design n’est pas seulement ce à quoi ça ressemble, mais comment ça marche.

Malheureusement, le design est souvent pris pour un glaçage superficiel qui ne sert qu’à recouvrir une interface fonctionnelle.

Mais il ne faut jamais sous-estimer le pouvoir de l’esthétique.

Donald Norman (pionnier de l’interaction homme/machine) a été le premier à définir l’effet « esthétique/utilisabilité ». En gros, nous avons tendance à penser que les choses attrayantes fonctionnent mieux. Et ça, Apple l’a bien compris depuis des années.

En ce qui concerne votre site Internet, grâce au design, vous pouvez aider vos visiteurs à absorber plus facilement les informations.

La façon dont la typographie, la couleur et la mise en page (composition, vide et proportion) s’accordent en dit long sur vous et influencent la perception de vos visiteurs.

Enfin, un design soigné laisse penser que la même attention est portée en coulisse au sein de votre business.

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 :

Le logo d'Ana

Je me sers du Color Matcher pour trouver une colorimétrie pour son site web :

La colorimétrie du site internet

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.

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.

Si ce sujet vous intéresse, j’ai écrit un article sur la typographie : vous verrez comment choisir et combiner vos typographies d’une manière rapide et efficace.

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 :

Bonjour, je suis Ana !

Bienvenue sur mon site Internet dédié à la publicité Facebook pour les pros du e-commerce !

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)
  • Mettez vos titres en valeur
  • 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.

Les appels à l’action

Vos boutons devraient inciter vos visiteurs à cliquer dessus.

Voici les règles d’un bon bouton :

  • Rare : n’en abusez pas et gardez à l’esprit une des règles fondamentales du webmarketing : « une page = un objectif ».
  • 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 :

La colorimétrie du site internet

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 :

Le concept de hiérarchie visuelle en web design

Une excellente hiérarchie visuelle repose parfois sur des éléments très simples : une bonne utilisation de la typographie, une colorimétrie bien pensée et une organisation intelligente des éléments.

L’en-tête et le pied de page

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 internet ComnWeb

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.

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 d’en-têtes 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 ?

D’abord à cause du principe « d’affordance » : au cours de leurs nombreuses navigations sur le web, les utilisateurs développent des habitudes d’interaction. Ces habitudes leur permettent de savoir quel processus suivre ou quel bouton actionner pour effectuer l’action souhaitée. Et qui dit « briser les codes », dit potentiellement faire réfléchir vos utilisateurs qui n’ont pas forcément le temps pour ça.

Ensuite, 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 ?

Exemple du menu fixe d'Apple

Chez Apple, ils ont fait le choix d’un menu fixe. Vous remarquerez au passage que les liens dans le menu son grisés et non blanc « flashy ».

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.

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. De manière consciente ou inconsciente, les photos d’êtres humains nous rassurent. Elles rendent l’expérience utilisateur plus humaine. Une illustration qui résume votre proposition de valeur peut aussi très bien marcher.

L'exemple de la bannière d'elegant themes

Sur le site d’elegant themes (fondateurs de Divi), ils appuient leur proposition de valeur avec une illustration de leur produit en action.

Le pied de page

Le pied de page, ou footer est un élément trop souvent surchargé.

Il sert en général à insérer des liens vers les pages stratégiques, les informations de contact, les réseaux sociaux et les informations légales du site web.

Comme pour le menu, je vous recommande de faire au plus simple.

Exemple du footer du site WP Marmite

Le footer du site WPMarmite est très simple.

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. Ici, j’ai intégré tous les contenus et j’ai déjà mis en place les typos :

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
Intégration du contenu sur la page web

Si vous avez besoin de vous rafraichir la mémoire sur le balisage SEO (référencement naturel) des pages web, j’en parle dans le guide du site Internet performant.

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.

Section en-tête

L'en-tête du site internet d'Ana

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 : l’apport de valeur.

Section apport de valeur

L'apport de valeur du site internet d'Ana

Ici, le design est également très sobre : un fond blanc et deux boîtes pour mettre en valeur le contenu.

J’ai ajouté une bordure et une ombre aux boîtes pour qu’elles soient visuellement mises en avant. Les pictogrammes ont été ajustés à la colorimétrie du site web.

Section présentation de l’offre

La présentation de l'offre du site internet d'Ana

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.

Section preuve sociale (témoignages)

Les témoignages du site internet d'Ana

Ici, nous utilisons un fond (background) de couleur 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.

Section à propos

La section à propos du site internet d'Ana

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.

Section pied de page

Le footer du site internet d'Ana

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.

Le rendu final

Le rendu final du site internet d'Ana

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 et quelques éléments graphiques simples suffisent bien souvent à véhiculer votre message de manière claire, persuasive et professionnelle.

À votre succès.

Commentaires

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share This