Tutoriel : Les bases de la composition visuelle

La composition visuelle : pourquoi certains designs « fonctionnent » et d’autres non

La composition visuelle est l’art d’organiser les éléments (texte, images, boutons, espaces) sur une page pour guider le regard de l’utilisateur et communiquer un message clair. Un designer qui maîtrise la composition crée des pages où l’œil sait instinctivement où aller, quoi lire en premier, et sur quoi cliquer. Un designer qui l’ignore crée des pages confuses où l’utilisateur se sent perdu.

La règle des tiers : structurer l’espace

Divisez mentalement votre page en 9 zones égales avec 2 lignes horizontales et 2 lignes verticales. Les éléments importants (titres, CTA, images-clés) doivent se trouver sur les lignes ou à leurs intersections — ces 4 points focaux attirent naturellement le regard.

En web design, cela se traduit concrètement par :

• Le titre principal positionné dans le tiers supérieur de l’écran, aligné à gauche ou centré
• Le bouton CTA principal positionné au croisement des lignes (jamais perdu au milieu d’un bloc de texte)
• L’image hero occupant les deux tiers de la largeur, avec le texte dans le tiers restant

Cette règle n’est pas rigide — c’est un point de départ. Les meilleurs designers la connaissent et savent quand la casser intentionnellement pour créer un effet de surprise.

La hiérarchie visuelle : dire à l’œil quoi lire en premier

Sur une page web, l’utilisateur ne lit pas — il scanne. Des études d’eye-tracking montrent que les visiteurs suivent un pattern en F sur les pages de contenu (ils lisent le haut, puis scannent le côté gauche) ou un pattern en Z sur les landing pages (haut gauche → haut droit → bas gauche → bas droit).

Pour créer une hiérarchie visuelle efficace, jouez sur 4 leviers :

1. La taille

L’élément le plus grand attire le regard en premier. Votre titre principal doit être nettement plus grand que le sous-titre, qui doit être plus grand que le corps de texte. Un ratio courant :

• H1 : 36-48px (titre principal)
• H2 : 24-30px (sous-titres de section)
• H3 : 18-22px (sous-sous-titres)
• Corps : 16-18px (paragraphes)
• Caption : 12-14px (légendes, notes)

2. Le contraste

Les éléments à fort contraste avec leur environnement attirent l’attention. Un bouton orange sur un fond blanc se voit immédiatement. Un bouton gris clair sur fond blanc est invisible. Utilisez le contraste pour faire ressortir les éléments importants (CTA, messages d’erreur, promotions).

3. L’espace blanc (whitespace)

L’espace vide autour d’un élément le met en valeur. Plus un élément a d’espace autour de lui, plus il paraît important. Apple est le maître de cette technique — leurs pages produit utilisent des marges énormes qui donnent un sentiment de luxe et de clarté.

En CSS, donnez à vos sections des paddings généreux :

.section {
    padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 4rem);
}

/* L'espace entre les éléments compte autant */
.hero-title {
    margin-bottom: 1.5rem;
}
.hero-subtitle {
    margin-bottom: 2rem;
}
.hero-cta {
    margin-bottom: 0; /* le bouton a du whitespace naturel grâce au padding de la section */
}

4. La couleur

L’élément coloré attire le regard dans un environnement neutre. Si votre page est en noir, blanc et gris, un seul élément en bleu vif (votre CTA) captera immédiatement l’attention. C’est le principe de l’accent color dans un design system.

L’alignement : l’outil invisible de la cohérence

L’alignement crée un sentiment d’ordre et de professionnalisme. Les éléments mal alignés — même de quelques pixels — donnent une impression d’amateurisme que l’utilisateur ressent inconsciemment.

Règle pratique : tous les éléments d’une section doivent être alignés sur une grille commune. En CSS Grid ou Flexbox, l’alignement est géré automatiquement. Le problème survient quand vous mélangez des marges et paddings incohérents.

/* Utilisez un système d'espacement cohérent basé sur 8px */
:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
}

/* Tous les éléments utilisent ces valeurs — jamais de "13px" ou "27px" arbitraires */

La proximité : grouper ce qui va ensemble

Les éléments proches les uns des autres sont perçus comme liés. Les éléments éloignés sont perçus comme distincts. C’est la loi de proximité de la Gestalt, et elle est fondamentale en web design.

Exemple concret : une fiche produit avec le nom, le prix et le bouton « Acheter ». Si le prix est aussi éloigné du bouton que du titre de la section suivante, l’utilisateur ne sait pas instinctivement à quoi le prix se rapporte. Rapprochez les éléments liés et éloignez les groupes distincts :

/* ❌ Espacement uniforme — tout semble au même niveau */
.product-name { margin-bottom: 24px; }
.product-price { margin-bottom: 24px; }
.product-button { margin-bottom: 24px; }
.next-section-title { margin-bottom: 24px; }

/* ✅ Proximité = regroupement logique */
.product-name { margin-bottom: 8px; }   /* nom et prix = groupe serré */
.product-price { margin-bottom: 16px; } /* prix et bouton = liés mais distinct */
.product-button { margin-bottom: 48px; } /* séparation nette avant la section suivante */

Le mouvement et la direction : guider l’œil

L’œil humain suit naturellement certaines lignes et directions :

• Les flèches et les regards : si une photo montre une personne qui regarde vers la droite, l’œil du visiteur suivra ce regard. Placez votre CTA dans la direction du regard de la personne sur la photo
• Les lignes diagonales créent du dynamisme et du mouvement. Les lignes horizontales créent du calme. Les lignes verticales créent de la stabilité
• Les gradients et les dégradés guident l’œil du clair vers le foncé ou du coloré vers le neutre

La répétition : renforcer la cohérence

La répétition d’éléments visuels (même style de bouton, même typographie, même palette de couleurs, même style de carte) crée une identité cohérente et aide l’utilisateur à comprendre le système. C’est exactement ce que fait un design system.

Concrètement, si vos cartes de blog ont un coin arrondi de 12px et une ombre douce, toutes vos cartes (produits, témoignages, équipe) doivent avoir le même traitement. L’utilisateur apprend inconsciemment que « cadre arrondi + ombre = contenu cliquable ».

Exercice pratique : analyser une page existante

Prenez une page web que vous admirez (Apple, Stripe, Linear, Notion) et analysez-la avec cette grille :

1. Hiérarchie : plissez les yeux pour flouter la page. Quels éléments ressortent en premier ? En deuxième ? En troisième ? C’est votre hiérarchie visuelle
2. Alignement : tracez des lignes verticales imaginaires. Tous les éléments sont-ils alignés sur 1-2 grilles cohérentes ?
3. Proximité : les éléments liés sont-ils proches ? Les groupes distincts sont-ils séparés par un espace suffisant ?
4. Contraste : quel est l’élément le plus contrasté de la page ? Est-ce le CTA principal ? Si non, c’est un problème
5. Espace blanc : la page « respire-t-elle » ou se sent-elle encombrée ?

Faites cet exercice sur 5-10 sites. En quelques heures, vous développerez un « œil » pour la composition qui transformera la qualité de votre propre travail.