Pourquoi certains sites web semblent haut de gamme — la liste d'audit

Les sites qui semblent haut de gamme ne le sont pas grâce à ce qu'ils ajoutent. Ils le sont grâce à ce qu'ils refusent : pas de mises en page surchargées, pas de trois polices en compétition, pas d'animation à chaque défilement. L'écart entre amateur et premium est une liste de petites décisions vérifiables.

Voici la liste que j'utilise quand un client demande « pourquoi mon site a l'air bon marché à côté du leur? ». Notez chaque ligne : réussi ou échoué. Sous 70 pour cent, la refonte se paie d'elle-même.

Typographie

• Le texte courant reste sous environ 65 caractères par ligne. Les lignes plus longues sont le signe le plus courant d'un site gabarit.
• Deux familles de polices maximum : une pour les titres, une pour le texte.
• Interligne d'environ 1,5 pour le texte courant, plus serré (1,1 à 1,2) pour les titres.
• L'emphase passe par le gras, jamais l'italique. Le souligné est réservé aux liens.
• Les nombres qui changent (prix, statistiques) utilisent des chiffres tabulaires pour ne pas sautiller.

Hiérarchie et mise en page

• Un seul point focal clair par écran. Si tout crie, rien ne porte.
• L'espacement suit un rythme (multiples de 4 ou 8 pixels), pas des écarts au jugé.
• L'espace blanc sert de structure. Les sites premium laissent respirer les sections; les sites bon marché ont peur du défilement.
• Le contenu s'aligne sur une grille perceptible. Test : pourriez-vous tracer les colonnes à la règle?

Couleur

• Une palette retenue : une famille de fonds, une encre, au plus un accent.
• Le contraste du texte atteint WCAG AA (4,5:1 pour le texte courant). L'« élégance » gris sur gris qui échoue à ce test n'est pas de l'élégance.
• Un état n'est jamais transmis par la couleur seule — les erreurs ont aussi une icône ou du texte.

Mouvement

• Les animations n'utilisent que transform et opacity, pour tenir 60 images par seconde.
• Tout reste sous 300 ms. Plus long, et l'interface semble s'attendre elle-même.
• Les actions fréquentes (menus, listes déroulantes, retour de saisie) sont instantanées. La meilleure animation est souvent l'absence d'animation.
• Les boutons répondent à la pression — une réduction d'échelle vers 0,97 à l'activation suffit.
• Le site respecte prefers-reduced-motion. C'est vérifiable dans les outils de développement et presque personne ne passe le test.

Vitesse et mobile

• Chargement rapide sur un téléphone de milieu de gamme en réseau cellulaire, pas seulement sur le portable du designer.
• Les images sont dimensionnées à leur conteneur et servies en formats modernes.
• Les cibles tactiles font au moins 44 pixels. Les doigts ne sont pas des curseurs.
• Aucun déplacement de mise en page au chargement : rien ne saute pendant la lecture.

Confiance

• Un vrai nom d'entreprise, une adresse et un contact joignable dans le pied de page.
• Les pages légales existent et sont à jour (ici au Québec : vie privée conforme à la Loi 25).
• Aucun lien mort, aucun texte de remplissage, aucune année de copyright périmée.
• Le chemin vers le contact coûte un clic depuis n'importe où sur le site.

Comment l'utiliser

Copiez la liste dans une note. Ouvrez d'abord le site sur votre téléphone — la plupart des verdicts tombent après trente secondes d'usage mobile. Vérifiez ensuite les détails sur ordinateur. Notez honnêtement.

Le motif que vous trouverez : les sites qui semblent haut de gamme réussissent les lignes ennuyeuses — contraste, rythme d'espacement, vitesse de chargement — pas les lignes spectaculaires. La retenue se compose. C'est tout le secret, et il est gratuit.