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.

Étape 1 : poser une grille avant tout élément

Une mise en page sans grille glisse vers l’approximation. Démarrez par 12 colonnes pour le web, 6 ou 8 pour un poster, avec des gouttières de 16 à 24 px. Cette structure invisible aligne automatiquement chaque bloc et libère l’œil du calcul permanent.

Dans Figma : Layout grid > Columns > Count 12, Gutter 16. Cette configuration suit le standard Bootstrap et garantit que vos maquettes restent intégrables sans surprise par un développeur front-end.

Étape 2 : établir une hiérarchie visuelle en 3 niveaux

Trois niveaux suffisent : titre (40 à 64 px), sous-titre ou intro (18 à 22 px), corps de texte (14 à 16 px). Au-delà de 3 tailles, la hiérarchie devient confuse et le lecteur ne sait plus où poser le regard d’abord.

Vérifiez par le test du « plissement des yeux » : plissez devant la maquette. Si vous repérez immédiatement le titre principal sans lire, la hiérarchie tient. Sinon, augmentez l’écart de taille ou jouez sur la graisse.

Étape 3 : maîtriser le contraste de luminosité

Le contraste texte/fond doit atteindre au minimum 4,5:1 pour le corps et 3:1 pour les gros titres (norme WCAG AA). Un texte gris clair sur fond blanc est joli en présentation mais illisible en plein soleil dakarois sur écran de téléphone.

curl -s "https://webaim.org/resources/contrastchecker/?fcolor=333333&bcolor=FFFFFF&api"

Sortie attendue : un ratio supérieur à 12:1 pour ce couple. Si vous obtenez un ratio sous 4,5:1, foncez la couleur de texte ou éclaircissez le fond avant de valider la maquette.

Étape 4 : appliquer la règle des tiers pour cadrer une image

Divisez mentalement l’image en 9 cases. Placez les éléments importants (visage, produit, horizon) sur les lignes ou aux intersections. Cette règle, héritée de la peinture classique, fonctionne autant pour une photo Instagram que pour une couverture LinkedIn.

Évitez le centrage systématique : il fige la composition. Décentrer crée du mouvement et invite le regard à parcourir la zone vide, qui devient un espace de respiration.

Étape 5 : choisir une palette de 5 couleurs maximum

Une couleur dominante (60 % de la surface), une secondaire (30 %), une couleur d’accent (10 %), plus 2 neutres (noir/blanc ou gris). Au-delà de 5, l’identité se dilue et chaque support devient un patchwork.

Outils gratuits : Coolors.co génère des palettes harmoniques en 1 clic, Adobe Color extrait une palette depuis une photo. Sauvegardez la palette en variables CSS dans votre projet pour garantir la cohérence sur 10 supports différents.

Étape 6 : sélectionner 2 polices, jamais plus

Une police titre (souvent une display ou une sans-serif géométrique), une police corps (sans-serif neutre type Inter, Source Sans, ou serif lisible type Lora). Une 3e police casse la cohérence sauf usage très ponctuel (chiffres tabulaires).

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Sortie attendue : la police Inter chargée en moins de 200 ms après le rendu HTML, avec un FOUT (flash of unstyled text) imperceptible si display=swap est bien présent.

Étape 7 : gérer l’espace blanc comme un élément à part entière

L’espace blanc (ou « négatif ») n’est pas du vide perdu : c’est un séparateur visuel qui guide la lecture. Les marges intérieures (padding) doivent au minimum doubler la taille du texte le plus grand de la zone.

Sur un site marchand dakarois, multipliez les espaces de respiration autour du bouton « Acheter » : un bouton serré entre 3 blocs de texte capte 40 % moins de clics qu’un bouton isolé.

Étape 8 : tester l’alignement avec la règle de proximité

Les éléments liés (label + champ, prix + bouton, titre + paragraphe) doivent être proches. Les éléments distincts s’éloignent. Cette règle, formulée par les gestaltistes, structure inconsciemment la lecture.

Test : éloignez-vous d’un mètre de l’écran et regardez la maquette. Si vous identifiez 3 ou 4 « blocs » distincts, la proximité fonctionne. Si tout fusionne en une bouillie, augmentez les écarts entre groupes.

Étape 9 : pratiquer la composition par mimétisme

Choisissez 3 références (Apple, Stripe, le site d’une ONG ouest-africaine bien designée comme Lumitel ou Wave) et reproduisez à l’identique 1 page de chacune. Cet exercice, hors de tout client, muscle l’œil et la main en 6 à 10 heures par référence.

Dans la continuité sur la mise en pratique, voyez notre guide portfolio design. Pour systématiser ces choix sur un produit, lisez comment créer un design system.

Étape 10 : auditer chaque livrable sur 6 critères

Avant de livrer, cochez : grille respectée, hiérarchie 3 niveaux, contraste WCAG AA, palette à 5 couleurs max, 2 polices, espace blanc suffisant. Six cases en 2 minutes. Cette discipline élimine 80 % des allers-retours client.

La composition visuelle se construit projet après projet. À 30 livrables audités selon cette grille, vos automatismes sont calibrés et vos maquettes passent du premier coup.

Étape 11 : adapter la composition aux écrans mobiles dominants

En Afrique de l’Ouest, plus de 80 % du trafic web vient du téléphone. Concevez en mobile-first : maquettez d’abord la version 375 px, puis adaptez vers le desktop. L’inverse oblige à élaguer brutalement et casse la hiérarchie.

Sur mobile, augmentez la taille du corps de texte à 16 px minimum, espacez les zones cliquables d’au moins 44 px (recommandation Apple Human Interface Guidelines). Un bouton de 30 px reçoit 3 fois plus de clics ratés sur un écran tenu en marche.

Étape 12 : valider auprès d’un utilisateur réel avant livraison

Montrez la maquette à 3 personnes hors de votre métier (un commerçant, un étudiant, un parent). Demandez-leur de citer en 5 secondes l’action principale attendue. Si 2 sur 3 hésitent, la hiérarchie n’est pas claire et la composition doit être retravaillée avant la mise en production.

Ce test à 0 FCFA évite des coûts de refonte qui peuvent atteindre 200 000 à 500 000 FCFA après lancement. Il devrait être systématique sur chaque livrable significatif.