Réponse en bref
Il n’existe pas de meilleure page d’accueil unique, mais les exemples publics montrent deux schémas qui fonctionnent. GOV.UK place d’abord une recherche et les tâches les plus courantes ; le modèle du US Web Design System s’ouvre sur un héros, un slogan, une courte liste de preuves et un seul appel à l’action. Choisissez selon ce que fait d’abord votre visiteur, et soignez la vitesse sur mobile.
Ce qu’une page d’accueil doit accomplir dans son premier écran
Une page d’accueil se lit en quelques secondes, et le premier écran décide donc si le visiteur reste. Il doit dire à quoi sert le site, pour qui, et quoi faire ensuite. Le US Web Design System décrit ainsi son héros : il donne le ton du site et dit de quoi parle la marque, avec un titre, un court paragraphe d’explication et un bouton d’appel à l’action.
Le test est simple. Montrez le premier écran à quelqu’un pendant cinq secondes et demandez ce que fait l’entreprise et sur quoi il cliquerait. Si la réponse est floue, la décoration plus bas ne la corrigera pas. Les bons exemples de page d’accueil diffèrent par le style, mais tous répondent à ces deux questions sans faire défiler.
GOV.UK : une page construite autour de la recherche et des tâches courantes
La page d’accueil de GOV.UK est un exemple utile, car son public est immense et varié. Elle s’ouvre sur un titre simple, le meilleur endroit pour trouver les services et informations du gouvernement, et sur une zone de recherche juste en dessous. Vient ensuite une liste intitulée Populaire sur GOV.UK, avec des liens comme se connecter à des comptes ou consulter sa prévision de retraite de l’État, si bien que les démarches les plus fréquentes sont à un clic.
Plus bas, tout est regroupé sous Services et informations : prestations, entreprises et indépendants, conduite et transports, et une dizaine d’autres. Chaque groupe porte une ligne qui dit ce qu’il contient, par exemple taxe sur les véhicules, contrôle technique et permis de conduire pour la conduite. La leçon pour une entreprise est la ligne sous chaque lien. Un libellé nu comme Services oblige à deviner ; un libellé avec une précision permet de bien choisir.
Le menu suit la même logique. Son panneau de navigation compte deux groupes, Services et informations et Activité du gouvernement, et le second donne de nouveau une ligne à chaque entrée, comme Recherche et statistiques, décrit comme rapports, analyses et statistiques officielles. Deux groupes clairs avec une phrase d’aide valent mieux qu’une longue liste en vrac de libellés que seuls comprennent ceux qui les ont écrits.
Le modèle de page d’atterrissage du US Web Design System, bloc par bloc
Le US Web Design System publie un modèle de page d’atterrissage, et c’est une image claire du schéma guidé par le message. Dans l’ordre : un en-tête avec une zone de logo, un héros, une section de slogan, une liste graphique en grille de quatre blocs média, une section d’introduction avec un grand bouton d’appel à l’action, puis un pied de page avec navigation, réseaux sociaux, téléphone et e-mail de l’organisme. Le dernier élément, l’identifiant, affiche le domaine, l’organisme de tutelle et des liens obligatoires comme À propos, Assistance d’accessibilité et Politique de confidentialité.
Ses propres conseils sont aussi utiles que la mise en page. Il faut d’abord mener une recherche pour décider quoi dire et de quoi les utilisateurs ont besoin, rester simple en n’ajoutant ni formulaires ni navigation latérale, et retirer tout composant inutile. Le modèle peut servir de référence pour une page d’accueil, et il suggère d’envisager de retirer l’en-tête si la page doit conduire à un seul appel à l’action.
Les blocs qui reviennent : valeur, preuves, accès et contact
Mettez les deux exemples côte à côte et les mêmes blocs apparaissent sous d’autres noms. La phrase de valeur est le titre de GOV.UK ou le héros et le slogan de USWDS. Les preuves sont la liste graphique, qui, selon le modèle, peut mettre en avant des valeurs, des domaines d’action ou des résultats. Les accès sont les liens regroupés de GOV.UK et les blocs média du modèle. Le contact vit en pied de page, où le modèle place un téléphone et un e-mail.
Pour une petite entreprise, cela donne une liste courte. Une phrase qui énonce l’offre. Quelques faits ou réalisations qui l’appuient. Des accès vers les trois ou quatre pages importantes, comme services, tarifs et cas clients. Un moyen visible de vous joindre. Tout le reste, d’un fil d’actualités à une rangée de badges, doit mériter sa place face à ces quatre éléments.
Guidé par la recherche ou par le message : quel schéma convient à votre visiteur
Les deux exemples sont deux réponses à une même question : que fait d’abord le visiteur ? Sur GOV.UK, les gens arrivent avec une tâche et souvent des mots en tête ; la recherche et la liste de tâches passent donc en premier. Sur un modèle d’atterrissage, les gens viennent pour s’informer et recevoir une invitation ; un message et un bouton passent donc en premier.
Une entreprise avec quelques services suit en général le message : expliquer ce que vous faites et orienter vers la bonne page de service. Une entreprise avec un catalogue, beaucoup d’articles ou plusieurs types de clients a plus vite besoin d’accès et de recherche. Quel que soit votre choix, une action principale doit rester en vue, et le reste de la page doit la soutenir au lieu de lui faire concurrence.
Vitesse et mobile : les chiffres de web.dev
Une page d’accueil jolie mais lente perd le visiteur avant qu’il voie le design. web.dev nomme trois Core Web Vitals et leurs seuils de bonne valeur : Largest Contentful Paint de 2,5 secondes ou moins, Interaction to Next Paint de 200 millisecondes ou moins et Cumulative Layout Shift de 0,1 ou moins. Ils s’évaluent au 75e centile des chargements de page, séparément sur mobile et sur ordinateur.
Sur une page d’accueil, le Largest Contentful Paint est souvent déterminé par le héros. Selon web.dev, il rapporte le temps de rendu de l’image, du bloc de texte ou de la vidéo le plus grand visible dans la fenêtre, et juge mauvaises les valeurs supérieures à 4,0 secondes. En pratique, une photo lourde dans le héros est la première chose à vérifier. Testez sur un vrai téléphone avec une connexion normale, pas seulement sur un ordinateur de bureau.
Les deux autres chiffres comptent aussi sur une page d’accueil. Une réponse à un toucher en 200 millisecondes ou moins garde le menu et le bouton de contact réactifs. Un décalage de mise en page de 0,1 ou moins signifie que le bouton ne se dérobe pas pendant le chargement d’une image, ce qui est la façon dont on finit par toucher ce qu’on ne voulait pas.
Comment mesurer la page d’accueil une fois en ligne
Les avis sur une page d’accueil ne coûtent rien ; les chiffres valent davantage. L’aide de Google Search Console définit les métriques du rapport de performances : impressions, combien de fois quelqu’un a vu un lien vers votre site sur Google ; clics, combien de fois on a cliqué ; taux de clics, calculé comme clics divisés par impressions ; et position moyenne, où 1 est la plus haute. Vous pouvez répartir les données par appareil pour voir si le mobile se comporte autrement.
Associez-les à votre propre mesure de l’action qui compte, comme les demandes envoyées ou les appels lancés, et ne changez qu’une chose à la fois. Ajoutez les Core Web Vitals de la même page. Si le premier écran a été réécrit et que les clics depuis la recherche restent stables pendant que les demandes montent, la réécriture a fonctionné auprès des visiteurs ; si elles baissent, vérifiez la vitesse et le premier écran avant d’accuser le trafic.
Que préparer avant de commander le design d’un site d’entreprise
Vous pouvez concevoir vous-même une page d’accueil si l’offre tient en une phrase et que vous avez quelques faits réels à montrer. Commander a du sens quand le site doit porter beaucoup de services ou de pages, bien fonctionner sur ordinateur et sur mobile, et garder un système visuel dans tous les modèles. Préparez votre offre en mots simples, la liste des pages nécessaires, les preuves que vous pouvez montrer, votre logo et vos couleurs, et des exemples de pages d’accueil que vous aimez, avec la raison.
Le design de site d’entreprise de VITON13 Studio, sur sa page de service, livre un plan de site jusqu’à 20 pages et 6 modèles pour ordinateur et mobile, avec un kit d’interface adaptatif. Le prix démarre à $113 assisté par IA ou à $173 réalisé par un humain, avec 7–12 jours ouvrés. Envoyez l’offre et la liste des pages, et le périmètre comme le prix sont confirmés par écrit avant le début du travail.
Checklist pratique
- Écrivez une phrase qui dit ce que le site offre et à qui, et placez-la dans le premier écran.
- Choisissez une action principale et gardez-la visible sans faire défiler.
- Listez les trois ou quatre accès dont les visiteurs ont besoin et ajoutez une ligne sous chaque lien.
- Testez la page sur un téléphone et comparez-la à LCP 2,5 s, INP 200 ms et CLS 0,1.
- Ouvrez Search Console, filtrez par appareil et notez clics, impressions et taux de clics.
Questions et réponses
Quel est le meilleur exemple de design de page d’accueil ?
Il n’y en a pas un pour toutes les entreprises. GOV.UK est un bon modèle quand les visiteurs arrivent avec une tâche, et le modèle d’atterrissage du US Web Design System en est un quand il faut expliquer une offre et inviter à une action.
Quelles mises en page conviennent à une page d’accueil ?
Deux publiques : une mise en page guidée par la recherche, avec liste de tâches et liens regroupés, comme sur GOV.UK, et une guidée par le message, avec héros, slogan, courte liste de preuves et bouton d’action, comme dans le modèle USWDS.
À quoi doit ressembler ma page d’accueil sur téléphone ?
Elle doit énoncer l’offre et l’action principale sans faire défiler, se charger vite et ne pas sauter. web.dev évalue les Core Web Vitals séparément sur mobile et ordinateur ; vérifiez donc la version mobile à part.
La page d’accueil doit-elle contenir un formulaire de contact ?
Pas forcément. Le modèle USWDS conseille de rester simple et de ne pas ajouter de formulaires ni de navigation latérale. Beaucoup d’entreprises renvoient vers une page de contact et mettent téléphone et e-mail en pied de page.
Comment savoir si ma nouvelle page d’accueil fonctionne ?
Suivez l’action visée, comme les demandes envoyées, et lisez dans Search Console clics, impressions, taux de clics et position, filtrés par appareil. Comparez les chiffres avant et après chaque changement pris séparément.