Exemple de site web par type d’activité : quelles mises en page fonctionnent et pourquoi

Un exemple de site web s’apprécie mieux classé par mission

Qui cherche un exemple de site web cherche souvent une allure : une couleur, une police, une image frappante. Une boulangerie et un cabinet d’avocats peuvent partager une palette et rien d’autre : l’une vend le pain du lendemain, l’autre attend un premier appel soigné. Ce qui se transpose d’un site à l’autre, c’est le schéma : ce qui occupe le premier écran, combien d’étapes mènent à l’action, où sont les coordonnées.

Ce guide classe donc les exemples par mission : vendre un service, vendre des produits, prendre des rendez-vous, montrer des travaux ou informer. Les mieux documentés sont les systèmes de design publics, car ils publient leurs raisons. Le GOV.UK Design System, maintenu par une équipe du Government Digital Service britannique, propose styles, composants et modèles. Le US Web Design System se présente comme le système de design du gouvernement fédéral américain.

Un site de services : l’offre, les preuves et un vrai bloc de contact

Pour un plombier, un expert-comptable ou une agence de traduction, la mise en page qui marche place l’offre au premier écran : ce que vous faites, pour qui, où, et un bouton pour demander un devis. Chaque service a sa page, car chacun se cherche avec ses propres mots. Puis viennent des preuves précises. Le guide de Google sur le contenu utile demande s’il est évident pour le visiteur qui a écrit la page et si elle montre une expertise de première main. Sur un site de services, ce sont de vrais noms, de vrais projets et des conditions écrites.

Pour le contact, le modèle du GOV.UK Design System se reprend presque tel quel : un téléphone avec ses horaires, un e-mail avec un délai de réponse annoncé, les canaux dans le même ordre partout, les réseaux sociaux en dernier et les éventuels frais expliqués. Une entreprise qui écrit en combien de temps elle répond prend un engagement qu’on peut lui rappeler.

Une boutique en ligne : catégories, fiches produit et vraies photos

Une boutique a une structure plus profonde : accueil, catégories, fiches produit, panier, paiement. La documentation de Google sur la structure d’un site e-commerce demande que les pages soient accessibles par la navigation et que les pages importantes, comme le produit le plus vendu, soient liées depuis l’accueil. Son guide des données structurées produit indique que les acheteurs peuvent voir prix, disponibilité, avis et livraison dans les résultats, à la discrétion de Google. Leçon de design : ces informations vont sur la page, près du bouton d’achat.

Les photos font une bonne part de la vente. Le guide de Google sur les images note que les photos de haute qualité plaisent plus que les images floues, conseille de les placer près du texte qui s’y rapporte et préfère un texte alternatif descriptif, « chiot dalmatien qui rapporte la balle », à un simple « chiot ». Pour une boutique, ce sont de vraies photos de l’article sous plusieurs angles, avec une description à côté.

Prendre rendez-vous : les leçons du service GOV.UK de réservation du permis

Un exemple public de réservation limpide est la page GOV.UK où les élèves conducteurs réservent l’examen pratique. Avant son unique bouton Start now (« Commencer »), elle dit qui peut réserver, que les nouveaux créneaux sont publiés chaque lundi à 6 h et que le service fonctionne de 6 h à 23 h 40. Elle liste ensuite ce qu’il faut : le numéro du permis britannique, une carte bancaire et, au besoin, le numéro du moniteur.

Selon le GOV.UK Design System, une page de démarrage donne juste assez d’informations pour comprendre ce que fait le service et s’il répond au besoin, coût et durée approximative compris. Son modèle de pages de questions conseille une question par page, un bouton « Continuer » plutôt que « Suivant » et aucun astérisque sur les champs obligatoires. Une clinique ou un salon peuvent suivre le même ordre : prestation, date et heure, coordonnées.

Pour les démarches petites et moyennes, le Design System place une page de vérification des réponses juste avant la confirmation, avec un lien de modification par réponse. La confirmation donne un numéro de référence s’il existe, la suite et son calendrier, et les coordonnées. Les WCAG 2.2 ajoutent un critère voisin, Redundant Entry : une information déjà donnée dans le même processus est reprise automatiquement ou proposée au choix.

Portfolio et sites d’information publique : laisser parler le travail

Pour un photographe, un architecte ou un studio de design, le contenu, c’est le travail : la mise en page doit s’effacer. Le schéma habituel est une grille de projets, chacun ouvrant une page de grandes images et un bref récit. Le guide de GOV.UK sur les images convient bien à un portfolio : utiliser la photo quand il importe de montrer une chose telle qu’elle est, éviter les photos de banque d’images génériques et les images contenant du texte. Gardez les légendes en vrai texte près des images, lisibles par les gens comme par les moteurs de recherche.

Les sites qui informent le public, comme une mairie, une école ou un centre d’aide, servent à trouver vite une réponse. Les principes de design du gouvernement britannique commencent par les besoins des usagers et comprennent « C’est pour tout le monde », avec l’idée qu’un design accessible est un bon design. Le guide de navigation du GOV.UK Design System ajoute qu’un menu n’est pas un plan du site et n’a pas à lister chaque partie d’un service.

Les règles d’accessibilité qui changent un design : contraste, cibles, libellés

Les WCAG, règles pour l’accessibilité des contenus web, viennent d’un groupe de travail de l’Initiative pour l’accessibilité du web du W3C. Les WCAG 2.2, publiées le 5 octobre 2023, ajoutent neuf critères aux WCAG 2.1. Le contraste minimum, de niveau AA, exige au moins 4,5:1 pour le texte et 3:1 pour le grand texte ; la taille de cible, au moins 24 sur 24 pixels CSS, sauf exceptions ; et le texte doit pouvoir être agrandi à 200 % sans perte de contenu. Une éventuelle obligation légale dépend du pays et du secteur : vérifiez votre cas avec un spécialiste.

Pour les formulaires, le composant de champ de texte du GOV.UK Design System veut un libellé pour chaque champ, visible le plus souvent, et déconseille le texte indicatif à sa place : il disparaît dès qu’on tape et les styles par défaut des navigateurs échouent souvent au contraste. Il conseille aussi d’ajuster la largeur du champ au contenu attendu.

Ce qui rend un site moderne en 2026, au-delà de la tendance de l’année

La vitesse se sent avant la moindre police. Le guide Web Vitals de web.dev fixe trois objectifs : Largest Contentful Paint en 2,5 secondes au plus, Interaction to Next Paint de 200 millisecondes ou moins, Cumulative Layout Shift de 0,1 ou moins, mesurés au 75e centile des chargements. Google Search Central indique que ses systèmes de classement utilisent les Core Web Vitals, mais que de bons résultats ne garantissent pas les premières places et que la pertinence passe avant.

Le téléphone est l’écran principal, pas une copie réduite. Selon la documentation de Google sur l’indexation mobile first, Google indexe et classe la version mobile du contenu, et demande d’y mettre le même contenu, les mêmes titres et le même texte alternatif que sur ordinateur. Le guide du design adaptatif de web.dev ajoute qu’il ne faut pas bloquer le zoom et rappelle que la théorie classique de la lisibilité suggère 70 à 80 caractères par ligne. Depuis GOV.UK Frontend 6.0.0, le texte courant de GOV.UK fait 19 pixels même sur petit écran. De vraies photos du produit, de l’équipe et des locaux font le reste.

D’un dossier d’exemples à un brief qu’un designer peut chiffrer

Rangez chaque exemple de site web dans un tableau de schémas, pas dans un dossier de captures à cloner. Le guide de GOV.UK sur le droit d’auteur explique qu’au Royaume-Uni la protection est automatique et couvre les œuvres artistiques originales, photographie comprise, et les œuvres écrites comme les logiciels et le contenu web. Le contenu d’une autre entreprise n’est donc pas une matière première. Une page de démarrage à bouton unique reste une solution courante ; pour un cas douteux, consultez un spécialiste de la propriété intellectuelle de votre pays.

Sous chaque exemple, écrivez trois lignes : le lien, la mission du site et le schéma à reprendre. Ajoutez ce que vous seul pouvez fournir : la liste des pages, l’action unique de chacune, vos photos et textes, les pays et langues où vous vendez, et qui répond à une demande et en combien de temps. Cette feuille décrit une structure, pas une ambiance, et un designer peut la chiffrer.

Un modèle tout fait convient quand son schéma correspond déjà à la mission : un portfolio simple, un site de services en une langue. Commander le design a du sens quand la mission exige son propre parcours, comme la réservation, un catalogue ou plusieurs langues, quand il faut respecter des règles de contraste, de vitesse et de formulaires, ou quand votre temps vaut plus dans l’entreprise. VITON13 Studio conçoit des sites d’entreprise pour des clients de tous les pays, à distance. Apportez cette feuille ; les guides en lien expliquent le coût et comment examiner le portfolio d’un studio.