4 étapes pour concevoir votre page d’accueil optimale

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 cet article, 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 cet article, nous verrons comment procéder, étape par étape, pour lui concevoir une page d’accueil optimale.

Voici ce que nous allons voir :

• Le choix du contenu pertinent
• Organisez vos contenus pour un impact maximal
• Les éléments forts de design
• L’en-tête et le pied de page
• Mise en pratique : création de la page d’accueil d’Ana

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

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 »

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 page 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.

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.

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.

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 et hiérarchisez 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 :

Idéalement, vos titres de niveau 1 et 2 devraient comporter vos mots clés stratégiques.

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.

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 :

Grâce au Color Matcher, je trouve un bleu assorti au rouge rosé du logo.

Je définis ensuite une variation plus foncée de ce bleu pour les titres, et 2 variations plus claires pour certains éléments de design et les fonds :

La typographie

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 complet sur la typographie : vous verrez comment choisir et combiner vos typographies d’une manière rapide et efficace.

Pour le projet d’Ana, mon choix se tourne vers la typo « Quicksand ».

Pour définir la taille des titres et sous-titres, je me sers d’une échelle typographique. Si vous voulez que vos contenus soient harmonieux, ce site va vite devenir votre meilleur ami 😉

Pour la couleur, comme vu plus haut, mes titres et sous-titres seront d’un bleu très foncé. Pour les paragraphes je reste simple et opte pour un gris foncé.

Ce qui nous donne :

H1 : 52px / Gras / #1D222B
H2 : 41px / Gras / #1D222B
H3 : 26px / Semi-gras / #1D222B
Paragraphe : 17px / line-height: 1.8em / #505050

La lisibilité

Voici les grands principes de la lisibilité :

• Privilégiez du texte noir sur fond clair
• 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)

La lisibilité est un vaste sujet, si vous voulez en savoir plus, allez consulter mon article sur le design des textes. Vous apprendrez comment renforcer l’impact de vos contenus.

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

Sur une page d’accueil, il peut y avoir pas mal de liens. Il va donc falloir que vous différenciez vos appels à l’action principaux et secondaires. Car s’il y a trop de boutons « tape à l’oeil », vos visiteurs risquent d’être perdus.

Pour notre exemple, j’utilise la couleur principale (le rouge rosé) comme couleur de fond des CTA principaux. Pour les CTA secondaires, je mets juste une bordure de 2 pixels et je laisse le fond transparent.

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 :

Si ce sujet vous intéresse, allez consulter mon article sur la hiérarchie visuelle. J’optimise une page réelle étape par étape pour la rendre plus impactante.

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

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.

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.

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 grâce à des éléments de design simple.

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

Section apport de valeur

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 couleur de fond 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

Un fond de couleur bleu très clair a été ajouté pour marquer la séparation avec la section précédente.

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.

Les mots clés stratégiques ont été intégrés à la balise H2.

Section preuve sociale (témoignages)

Ici, nous utilisons un fond de couleur un peu plus contrasté 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

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 et les mots clés stratégiques ont été intégrés à la balise H2.

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.

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.

1 typographie, quelques variations colorimétriques et éléments graphiques simples suffisent bien souvent à véhiculer votre message de manière claire, persuasive et professionnelle.

À votre succès.

Newsletter mensuelle sur le Web Design

PAR THIBAUT BROUARD

Pour apprendre à concevoir des pages web simples, élégantes et efficaces. En vous inscrivant, vous recevrez en cadeau de bienvenue mon guide du site Internet performant (PDF de 42 pages).

Le respect de votre vie privée est une priorité : votre email est en sécurité et ne sera jamais cédé à des tiers. Vous pourrez vous désincrire à tout moment en un clic. Consultez ma politique de confidentialité.