Analyse d’une page d’accueil : Finn & Gray

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 😉

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 !