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

Quoi de mieux pour apprendre le webdesign que d'analyser des sites au top ? Regardons celui de Finn & Gray, le studio de deux graphistes !
Page d'accueil Finn&Gray : Analyse du Héro

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 :

>> Site Finn&Gray <<

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

Page d'accueil Finn&Gray : Analyse du Héro
Page d’accueil Finn&Gray : Analyse des éléments du héro

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

Finn & Gray : section "les problèmes des clients"
Finn & Gray : section “les problèmes des clients”

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

Finn & Gray : section portfolio
Finn & Gray : section 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

Finn & Gray : section "Proposition de valeur"
Finn & Gray : section “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

Finn & Gray : section "Processus"
Finn & Gray : section “Processus”

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

Finn & Gray : section derniers articles
Finn & Gray : section derniers articles

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

Finn & Gray : section Instagram
Finn & Gray : section 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.

BE RIGHT BACK. Giphy

*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 !

Finn & Gray : pieds de page de la page d'accueil sur ordinateur de bureau
Finn & Gray : pieds de page de la page d’accueil sur ordinateur de bureau

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

Finn & Gray : hero de la page d'accueil sur mobile
Finn & Gray : hero de la page d’accueil sur mobile

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

Finn & Gray : pieds de page de la page d'accueil sur mobile
Finn & Gray : pieds de page de la page d’accueil sur mobile

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 !

Et si tu penses que ça peut intéresser tes amis ou ta famille, n'hésite pas à partager !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email
Partager sur whatsapp

6 réponses

  1. 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 🙂

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

    1. 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 !

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Hello !

Savais-tu que je t’avais préparé un guide-questionnaire pour t’aider à réaliser ton logo ? Et c’est évidemment gratuit ;)

Ne tarde pas à t’inscrire si tu le veux !