Un camarade de promo m’a envoyé la maquette de son site personnel en me demandant « qu’est-ce qui cloche, je trouve ça moche mais je sais pas pourquoi », et j’ai mis presque dix minutes avant de mettre des mots précis sur ce qui n’allait pas. Ça m’a poussé à vraiment formaliser les règles que j’appliquais jusque-là instinctivement. Une bonne mise en page repose sur une poignée de règles concrètes (grille, hiérarchie, contraste, espace blanc) qui font la différence entre une page qui retient l’attention et une page que le visiteur quitte en trois secondes.
- La grille structure ta page et évite le fouillis visuel
- Le point central et la règle des tiers guident l’œil du lecteur
- Le blanc tournant aère le contenu au lieu de le saturer
- La hiérarchie et le contraste mettent en avant ce qui compte vraiment
Grille, point central et règle des tiers
Ce sont les trois éléments qui te sauvent la mise si tu veux une page équilibrée. La grille est souvent le premier truc qu’on néglige, alors que c’est elle qui donne de la cohérence à tout ce que tu poses sur la page.
Le point central vient ensuite structurer l’ensemble : c’est lui qui organise ce que le visiteur voit en premier. Et pour savoir où placer tes éléments importants, la règle des tiers reste l’outil le plus simple, celui que j’utilise moi-même dès que je prépare une page.
Bien organiser ta page
Une bonne mise en page, ce n’est pas juste poser des blocs ici et là en espérant que ça respire. Le blanc tournant (l’espace vide autour de tes éléments) évite de saturer le contenu, et la répétition de certains éléments graphiques donne du sens à l’ensemble.
Reste la hiérarchie : c’est elle qui détermine ce que l’œil voit en premier, en deuxième, en dernier. Ajoute à ça une bonne échelle et des contrastes travaillés, et ta page passe d’un empilement de blocs à un vrai parcours de lecture.
Les 7 éléments à vérifier avant de publier
| Élément | Ce qu’il apporte |
|---|---|
| Grille | Cohérence et alignement entre les blocs |
| Point central | Un repère visuel fort dès le premier coup d’œil |
| Règle des tiers | Un placement naturel des éléments importants |
| Blanc tournant | De l’air autour du contenu, moins de fatigue visuelle |
| Répétition | Une identité visuelle reconnaissable d’un écran à l’autre |
| Hiérarchie | Un ordre de lecture clair (titre, sous-titre, corps) |
| Contraste | Les éléments clés qui ressortent vraiment |
Passer ta page en revue avec cette liste te permet de repérer en quelques minutes ce qui cloche, sans avoir à tout refaire depuis zéro.
Les erreurs qui reviennent le plus souvent
La plus fréquente : vouloir tout mettre en valeur en même temps. Si chaque élément est en gras, en couleur vive et en gros caractère, plus rien ne ressort vraiment, et le regard du visiteur ne sait plus où se poser. Deuxième erreur classique : négliger les marges. Un contenu collé aux bords donne une impression de bricolage, même si le fond est bon.
Troisième piège : copier une mise en page qui fonctionne ailleurs sans l’adapter à ton propre contenu. Une grille pensée pour un site e-commerce ne convient pas forcément à un blog personnel : la structure doit servir ton contenu, pas l’inverse.
Comment j’ai reformulé le problème de mon camarade
En regardant sa maquette de plus près, le vrai souci n’était pas esthétique mais hiérarchique : son titre principal, son sous-titre et son bouton d’action faisaient tous la même taille, dans des couleurs de contraste comparable. L’œil ne savait littéralement pas où se poser en premier. On a repris ensemble sa page en appliquant juste deux changements : une taille de titre nettement supérieure au reste, et un bouton d’action dans une couleur qui ne réapparaissait nulle part ailleurs sur la page. Le résultat lui a semblé « évident » une fois fait, alors qu’il tournait en rond dessus depuis des jours. Le tip que je retiens de cet échange : quand une page « sonne faux » sans raison identifiable, commence toujours par vérifier la hiérarchie visuelle avant de retoucher les couleurs ou les images, c’est souvent elle la vraie coupable.
FAQ
Faut-il un logiciel spécial pour appliquer la règle des tiers ?
Non, la plupart des outils de mise en page (Canva, Figma, l’éditeur de ton CMS) proposent un calque de grille activable en un clic.
Le blanc tournant fait-il perdre de la place utile ?
Non, il en fait gagner en lisibilité : un contenu trop dense décourage la lecture, même s’il tient sur moins d’espace.
Ces règles s’appliquent-elles aussi à un site web, pas seulement à un visuel ?
Oui, exactement les mêmes principes guident la mise en page d’une page web, y compris la structuration de son contenu (voir mon article sur comment bien structurer le contenu de son site).
Comment savoir si ma mise en page respecte bien la hiérarchie visuelle ?
Ferme les yeux à moitié en regardant ta page : si tu distingues encore clairement un titre, une accroche et un point d’action, ta hiérarchie fonctionne. Sinon, retravaille les tailles et les contrastes.
Par quoi commencer quand une page « ne sonne pas juste » sans raison évidente ?
Vérifie d’abord la hiérarchie visuelle (tailles, contrastes) avant de toucher aux couleurs ou aux images : c’est souvent elle qui est en cause, pas l’esthétique générale.
Article publié en juillet 2014, mis à jour le 24 juillet 2026.