Comment apprendre à créer une page d’accueil au top ?
Spoiler : en analysant une page d’accueil au top pour essayer de comprendre ce qui fait que ça fonctionne.
Ou, encore mieux, en analyser plusieurs.
Comment ?! Tu as loupé la première analyse de page d’accueil ? Alors va vite la lire, c’est par ici !
Pourquoi Finn & Gray ?
J’avoue, je ne l’ai pas cherché directement. Ce site faisait en fait partie de l’Elementor Showcase de Juin.
Il y en avait d’autres très sympa, mais j’ai aimé entre autre :
- l’animation du logo pendant le chargement de la page et les autres petites animations disséminées sur la page,
- le grand sourire de la personne (eh oui, je suis une personne sensible :D),
- le design suffisamment simple pour pouvoir s’en inspirer
- mais suffisamment efficace et joli (à mon goût) pour que je m’y attarde !
Et puis, c’est le site de deux graphistes/webdesigners/photographes, ça nous correspond plutôt bien 😉
L’ensemble de la page d’accueil
Jetons un premier coup d’œil rapide à l’ensemble :
Pleine largeur, plein les yeux !
Les éléments du site de ne s’en tiennent pas au centre de l’écran comme c’est souvent le cas (pour plus de sûreté sur les petits écrans).
Ici, l’en-tête (avec le logo, le menu et un appel à l’action) s’étale sur tout le haut de l’écran, et il en va de même pour la galerie du portfolio, le fil Instagram et le pieds de page.
Waouh !
Menu en pleine largeur aussi
Et quand on clique sur le burger du menu au milieu, celui-ci vient aussi prendre toute la place !
Comme ça, nous ne sommes pas distraits, et surtout il y a la place de mettre plus d’informations que dans un petit bandeau avec ses menus déroulants…
Pas trop longue
Pleine largeur mais relativement courte (quand on en vient à scroller). Bon, sauf sur mobile puisque tous les éléments se mettent les uns au dessous des autres.
Mais bon, par rapport à la page d’accueil d’Aventure Moderne qu’on avait analysé ici, on gagne 1/3 de la longueur de la page. Ce n’est pas rien !
Et puis, les éléments restent quand même très grands et le tout regorge d’espaces blancs qui permettent au site de garder une certaine légèreté.
Logique d’enchaînement des sections
*Le client :* Bonjour Finn&Gray ! Alors, voyons voir ce que nous avons là…
- Hey ! Nous sommes l’équipe créative qu’il vous faut ! Et si on en discutait ?
- Pourquoi vous rejoindre ? Hmm nous connaissons bien les problèmes que vous rencontrez, regardez …
- …et regardez maintenant ce que nous répondons à ces problèmes (portfolio)
- Ok, vous faites du superbe boulot et très complet en plus de ça. Mais pourquoi vous plutôt qu’un autre studio ? (=> Proposition de valeur)
- Moui vous avez l’air de bien correspondre à nos besoins et nos valeurs, alors dites-nous en plus : comment ça se passe ? (=> Process)
- Je veux en apprendre encore un peu plus sur le processus => Blog
- Ooooh ! Mais vous avez un joli compte Instagram ! Allez, je vais voir tout ça et je vous recontacte, bisou !
La section héro
Tu te souviens du super héro ? Je t’en avais parlé dans l’analyse précédente.
En gros, selon moi (je n’ai pas trouvé de consensus), il s’agit de ce que voit le visiteur quand il arrive sur la page d’accueil d’un site.
Les éléments principaux

Les couleurs utilisées
La couleur principale, sur le héro, est le rose qui a été utilisé pour recolorer le fond de l’image.
La couleur secondaire est le blanc, avec les textes, les 3 boutons et la séparation avec la section du dessous.
La couleur d’accent, qui n’est utilisée que par petites touches pour attirer l’œil sur les choses importantes est le rouge, qui souligne « Creative » et qui est la couleur de l’appel à l’action principal « Let’s chat ».
La hiérarchie et les appels à l’action
Quand j’arrive sur cette section héro, mon regard part du coin en haut à gauche, là où il y a le logo, puis s’attarde sur le sourire de la personne, puis sur le texte qui est écrit très grand, en gras et souligné d’une petite animation, et enfin sur le bouton rouge d’appel à l’action.
Mon regard suit un chemin balisé qui a été pensé et mis en place pour arriver à un but principal, me faire cliquer sur « Let’s chat ».
Ces balises sont en fait l’utilisation de la hiérarchie dans le design :
- la taille du texte,
- sa place sur l’écran,
- sa couleur (résultant de la graisse, de la taille et de la véritable couleur).
Il y a plus ou moins toujours le même schéma, c’est la règle des 70-20-10. Cette règle vaut ici pour la taille des éléments et pour les couleurs. On la retrouve aussi dans le marketing et la décoration d’intérieur.
L’élément principal prend 70% de tout l’espace, le secondaire 20% et le dernier (vers lequel il faut tout de même finir) 10%.
Au sein même des appels à l’action on peut voir une hiérarchie :
- le plus important est sans conteste le bouton rouge « Let’s chat »
- le second est celui qui est placé juste à côté mais qui est, strictement parlant, un « bouton fantôme »
- le dernier est celui qui est placé dans l’en-tête en haut à droite.
Les autres sections
Dans l’ordre de haut en bas. Au boulot !
Les problèmes du client

La première section (après le héro) vise à se connecter directement aux ressentis du potentiel client en citant les problèmes qu’il rencontre sûrement, et pour lesquels il cherche une solution.
Ici, on est en plein dans l’empathie. Tu sais, cette compétence essentielle qui n’est même pas mentionnée à l’école !
Si le visiteur se sent compris, il va continuer pour savoir ce que Finn & Gray pourrait lui apporter qu’il n’a pas réussi à trouver jusque là. Il va même, peut-être, directement les contacter grâce au bouton bleu d’appel à l’action, qui dirige vers la même page que le gros bouton rouge du héro – mais qui a un message différent.
D’ailleurs, juste en dessous du bouton, en gris (et pas en noir comme le reste du texte), un petit paragraphe explique brièvement que Finn & Gray est LA solution à tous ces problèmes. Au cas où on n’aurait pas bien compris !
Galerie / portfolio

Seulement 6 projets sont présentés sur la page d’accueil, arrangés de façon à ne pas prendre trop de place et éviter de perdre le visiteur.
Les visuels sont sobres et clairs, quand on passe la souris dessus, la « carte » se retourne pour laisser apparaître les informations de base du projet :
- le nom de l’entreprise,
- les différents types de travaux qui ont été effectués pour ce projet.
Et chaque carte est cliquable, comme on s’y attend, et nous amène sur l’étude de cas de chaque projet. Youhouuu !
Proposition de valeur

Pourquoi choisirait-on Finn&Gray plutôt qu’une autre agence ou qu’un autre freelance ?
C’est ce qui est expliqué dans cette section : quelle est la valeur ajoutée, qu’est-ce qui les différencie des concurrents ?
Pour répondre nous pouvons lire 4 courts blocs avec chacun :
- un icône,
- un titre,
- un petit paragraphe explicatif.
Le tout écrit avec beaucoup d’humour, puisque c’est une de leurs différences visiblement.
D’ailleurs, elles ont même intégré ici une preuve sociale (qui est attractive mais difficile à lire je trouve) : le texte circulaire qui tourne en haut à droite « Travailler avec Finn & Gray n’est pas du travail, c’est un plaisir ! »
Puis il y a des images pour agrémenter le tout, peut-être pour se mettre dans l’ambiance de leur bureau (mais ce n’est qu’une spéculation car, sinon, je ne vois pas l’utilité de ces images hormis décorer).
Et pour finir, le petit appel à l’action subtil mais en couleur tout de même : « Let’s chat ».
Détails sur les services

Ici, elles détaillent leur processus de création pour les gens pressés : 3 étapes, décrites avec un icône animé, un titre et une dizaine de mots à peine ! Waouh !
Bon par contre, là aussi, je suis déçue (frustrée ?) de ne pas pouvoir cliquer sur les cartes qui apparaissent quand je passe la souris dessus. Ça ne va pas me faire quitter la page mais … quand même, je voulais le préciser :p
L’appel à l’action est bien visible : « vous avez eu un aperçu de notre philosophie, de notre travail et de notre façon de travailler alors maintenant que vous savez que vous allez travailler avec nous, allez prendre un peu d’inspiration sur notre portfolio ! »
Ce bouton nous amène sur leur page portfolio « Our Work » où les projets peuvent être triés par type de projet et où ils apparaissent comme dans la section porfolio de la page d’accueil, sous forme de cartes cliquables (youhou !) qui se retournent.
Derniers post de blog

Quel meilleur moyen de construire une relation avec un public que le blog ?
…
Oui oui, beaucoup, je suis d’accord. Mais un blog est aussi un excellent moyen de transmettre de l’information utile aux visiteurs (potentiels futurs clients ?).
Prenons un exemple : un client intéressé mais qui se pose encore des questions sur le process, sur l’interaction avec les deux graphistes, le devis… Les réponses à ces questions peuvent prendre place dans un ou plusieurs articles de blog. On peut faire une FAQ aussi, mais un article de blog permet d’en dire plus et de transmettre ses valeurs et sa philosophie, en plus des informations recherchées.
Et puis franchement… combien de fois as-tu vraiment trouvé l’information que tu cherchais dans une FAQ ? Et dans un article de blog (de plus de 500 mots :p) ? … Voilà.
La section « derniers articles de blogs » est donc ici un vrai outil marketing qui sert à aider le potentiel client à passer à l’action.
Fil Instagram

Avant que le visiteur ne s’en aille sans laisser un moyen de le contacter, le fil Instagram est un bon moyen de rester dans un coin de son esprit (ou de son compte Instagram) en l’incitant à s’abonner !
Mais il y a beaucoup d’autres avantages, comme nous allons le voir maintenant.
Un feed Instagram intégré dans une page d’accueil, c’est :
- beau : il amène des couleurs et des visuels agréables,
- authentique : il permet de se connecter émotionnellement à la marque (et donc aide à se souvenir de cette marque),
- un moyen d’augmenter la quantité de contenu de la marque consommé par le visiteur (pour que celle-ci soit mieux reconnue),
- un moyen d’augmenter le temps passé sur la page (et donc de faire plaisir à Google),
- une aide à l’achat de produits / services pour 60% des utilisateurs,
- un moyen d’augmenter le nombre de ses followers.
…
…

*s’en va réfléchir à comment l’intégrer dans sa propre page d’accueil*
Le pieds de page
Bon, et maintenant, sous ce magnifique feed Instagram, le pieds de page.
Chez Finn & Gray, il est vraiment complet !

Recherche et réseaux sociaux
La première partie, à gauche, est composée :
- du logo
- d’une barre de recherche,
qui n’est présente nulle part ailleurs sur la page. Mais ce n’est pas un e-commerce ou un site de contenu dans lequel il y a beaucoup de produits/d’informations différentes pour lesquels la barre de recherche est essentielle. - des icônes de réseaux sociaux en petit
- du copyright
Liens rapides et contact
Au centre du pieds de page, deux colonnes :
- liens rapides avec toutes les pages principales du site
- contact :
- petite phrase pour exposer leur rayon d’action (mondial)
- ville et pays
- numéro de téléphone
- adresse mail
Remarquons que pour faciliter le contact, il n’y a qu’à cliquer sur le téléphone ou l’adresse mail pour être directement redirigé vers l’application d’appel ou celle de mailing.
Newsletter
Et la dernière colonne de droite, qui se situe à l’emplacement le plus important pour une fin de page (…avec notre regard qui parcours la page en diagonale de haut à gauche vers le bas à droite), c’est la zone d’inscription à la newsletter.
Trois informations sont demandées:
- le prénom,
- le nom,
- l’adresse mail.
Avec le remplissage automatique, ça ne prend pas plus de temps que de juste remplir l’adresse mail et cela permet de personnaliser les emails de la newsletter.
Une petite phrase pour donner l’objet de cette newsletter et rassurer qu’on ne se fera pas spammer et hop !
Par contre, il n’y a pas de petite phrase RGPD comme nous devons en mettre nous, en Europe.
Et sur mobile ?
N’oublions pas qu’en moyenne, pas moins de 80% des visiteurs sont sur mobile !
Mais ce n’est peut-être pas ton cas ? Nous allons voir immédiatement si c’est le cas de ce studio… ou pas.
Héro
L’organisation du héro a été revue :
- la personne est maintenant placée à droite
- les textes et les boutons appels à l’action sont à gauche (pour éviter de cacher le visage souriant ?)
- le menu est sur la droite et l’appel à l’action est remplacé par trois petits points.
Quelques remarques :
J’aurais préféré voir les appels à l’action centrés et un peu plus bas.
Pour ce qui est des menus, je trouve très perturbant d’avoir « deux menus » collés l’un à l’autre. Je ne sais pas à quoi m’attendre, du coup je n’ai peut-être pas envie de prendre le temps de tester si je suis vraiment pressée…
Pieds de page
Le pieds de page est lui aussi adapté : d’une navigation de gauche à droite on obtient une navigation de haut en bas.
Mais cela fait finalement un pieds de page très long pour un mobile, et il faut aller vraiment tout en bas pour pouvoir s’inscrire à la newsletter… Je ne suis pas sûre que le taux d’inscription à la newsletter sur mobile soit très haut !
D’autre part, les copyright du site, qui se trouvent tout en bas traditionnellement, sont maintenant dans la partie haute du pieds de page. Troublant.

Ce qu’il faut retenir de l’analyse de la page d’accueil de Finn & Gray
La page d’accueil de Finn & Gray est exemplaire (à mon humble avis) pour sa conception visuelle et l’enchaînement logique des sections.
On en retient :
- photo d’un client potentiel, ravi, sur le héro (pour se projeter)
- conception sobre et simple avec beaucoup d’espaces vides
- pleine largeur pour en avoir plein les yeux (surtout pour le portfolio)
- trois derniers articles de blogs
- le feed Instagram intégré
Et, l’appel à l’action principal qui est décliné tout au long de la page (pour éviter les répétitions) : « Let’s chat »
Par contre, je ne pense pas que la majorité des visiteurs de ce site soient sur mobile car l’organisation n’est pas optimale.
Ce site a été fait avec Elementor Pro : il aurait été utile de créer deux pieds de pages différents, parfaitement adapté aux différents appareils sur lesquels ils seraient visualisés et qui n’apparaît que lorsque le visiteur est sur l’appareil pour lequel chaque pieds de page a été conçu.
Merci d’avoir lu cet article, j’espère qu’il te sera utile ! Comme toujours, n’hésite pas à me faire part de tes remarques ou problèmes rencontrés dans les commentaires 😉
Ah et si tu veux apprendre à faire du webdesign avec la suite Affinity, je te propose de rejoindre le premier groupe facebook francophone dédié à Affinty !
A très vite !
9 réponses
Très bon exercice ! Ce genre d’analyse me plait pour le mélange de la technique (que je cherche à apprendre), et pour la dimension artistique que je n’ai vraiment pas comme faculté, compétences. Merci vivement la prochaine 🙂
J’adore ce type d’analyse, c’est super intéressant ! Merci ! Je dois justement refaire ma page d’accueil car j’ai travaillé avec une graphiste illustratrice sur mon identité visuelle. Je dois donc passer sur tous mes supports pour intégrer tout ça. Du boulot en perspective. Mais cela m’amuse bien aussi. Je vais y aller petit à petit.
Merci beaucoup pour ton retour ! Oui, ça prend beaucoup de temps de faire tout ça, mais si c’est un plaisir, tout va bien !
Bonjour,
Merci beaucoup pour cette analyse riche en enseignements. Cela me donne envie d’améliorer ma page d’accueil ! Une petite question : qu’est-ce que la graisse ?
Merci beaucoup pour ton commentaire ! C’est vrai que je n’ai pas expliqué la graisse. Il s’agit en fait de l’épaisseur de la police (par exemple, « normal » ou « en gras » que l’on retrouve sur les outils de traitement de texte classiques :))
A très bientôt !
Il est clair que j’ai vraiment du boulot. Ma page d’accueil est vraiment moche? Heureusement, j’ai un super logo, grâce à une super artiste. Merci Gabrielle.
Mais non elle n’est pas moche, mais est-ce qu’elle est efficace ? C’est quand même la priorité 😉 et merci <3
T’es trop forte ! Tes articles me donnent vraiment envie de booster le design de mon site et donc je rajoute ça à ma to do list. Même si j’aime bien mon thème trop de choses me dérangent car je pense qu’ils augmentent le taux de bond sur mon site alors que j’écris vraiment avec le cœur et met ma patte dans mes articles . ( je me lance des fleurs 🙂 🙂 🙂 )
Merci !! Oui le design peut jouer en effet… Nous pourrons en discuter si tu veux 🙂