Thématique

Mise en page / Layout Playground

Un layout propre, c’est une grille + des marges cohérentes + une hiérarchie lisible. Ici tu peux “lire” la structure : colonnes, rythme, spacing, modules. Moins d’effets. Plus de système.

Grille : 12 colonnes (web)

structure
12-col gridmodules 6/6 – 4/4/4

Exemple : hero en 6/6, puis 3 cartes en 4/4/4. La grille te force à rester cohérent.

Règlessimple
Gutter constant Max-width Modules répétés Alignements

Règle d’or : tu ne “dessines” pas une page, tu “poses” des modules sur une grille stable. Le style arrive ensuite.

Grilles alternatives : 8 colonnes & 4 colonnes

responsive
8-col grideditorial

8 colonnes = plus “magazine”, souvent plus simple à tenir.

4-col gridmobile

Mobile : moins de colonnes, plus de verticalité. Garder la même logique de modules.

Rythme vertical : spacing system

8pt

Le “propre” vient souvent du spacing. Un système simple : multiples de 8 (8/16/24/32/40/48). Même si tu ne mesures pas au pixel près, garde des écarts cohérents.

Spacing tokens8 / 16 / 24 / 32
8
16
24
32
Résultatrespiration

Section

Un rythme lisible

Les espaces réguliers rendent la page “premium” instantanément.

Astuce : si tu hésites, ajoute de l’espace (mais de manière cohérente).

Hiérarchie : scanner la page en 3 secondes

H1/H2/body
Good hierarchyclear

Guide

Layout propre = règles simples

Titres nets, sous-titres secondaires, texte lisible. Une seule couleur d’action.

Primary Secondary Tag
Bad hierarchynoisy

Titre moyen

Sous-titre presque pareil → on ne comprend pas ce qui est important.

Tout est au même niveau. Résultat : fatigue visuelle.

Check rapide : si tu réduis la page à 30% (zoom out), tu dois toujours voir clairement les titres et les blocs. Si tout devient un “mur”, hiérarchie trop faible.

Do / Don’t (layout)

rules
DOsystem
  • Utiliser une grille (12/8/4) + modules répétés
  • Limiter la largeur du texte (60–80 caractères)
  • Spacing cohérent (multiples de 8)
  • 1 couleur d’action, le reste neutre
  • Hiérarchie claire (H1/H2/body)
DON’Tchaos
  • Changer la grille à chaque section
  • Coller le texte bord à bord (pas de respiration)
  • Utiliser 3 accents de couleur partout
  • Empiler des effets pour “faire design”
  • Tout mettre au même niveau de titre

Le layout “premium” est souvent le plus simple : peu de règles, mais appliquées partout, sans exception.

Layout — approfondissement

Patterns, composition & recettes de mise en page

Tu as déjà la base (grille, spacing, hiérarchie). Là, on ajoute ce qui fait vraiment “studio” : patterns de lecture, composition, breakpoints, et des gabarits réutilisables pour tes pages et articles.

Patterns de lecture : F & Z

scanning
F-pattern

Idéal pour pages d’articles : le regard scanne les lignes hautes, puis descend sur la colonne gauche. Mets les infos clés (titre, sous-titre, tags) dans ces zones.

Z-pattern
①
②
③
④

Idéal pour landing pages : le regard va de gauche → droite, descend, puis finit sur le CTA. Place ton CTA dans la zone “④” (bas-droit).

Articles : F-pattern Portfolios : grille stable Landing : Z-pattern E-commerce : cartes

Composition : poids visuel & équilibre

balance
Équilibrépoids réparti

Hero

Titre qui tient la page

Un bloc fort + un bloc secondaire = composition stable.

Le contraste vient du format et de la densité, pas d’un effet “random”.

Déséquilibrétout crie

Trop d’éléments “forts”

Résultat : fatigue. Le regard ne sait pas où se poser. Il faut un “silence” (neutre).

Règle rapide : sur une section, choisis 1 élément dominant. Tout le reste sert le dominant (taille, contraste, spacing).

Responsive : breakpoints & comportements

adapt
Overlay (12 colonnes) + contenu démo visuelle
Breakpoints conseilléssimple
  • ≤ 480px : 1 colonne, modules empilés
  • ≤ 768px : 4 colonnes (ou 1–2), texte plus large
  • ≤ 1024px : 8 colonnes, sections plus aérées
  • ≥ 1200px : 12 colonnes, max-width constant
Règles de conversiondesktop → mobile
  • Un “3 cartes” devient 1 carte / ligne
  • Un hero 2 colonnes devient titre puis image
  • Les sidebar deviennent sections en dessous
  • Le CTA reste visible mais plus simple

Recettes de page (templates)

ready-to-use
Template AArticle “guide”
  1. Hero : titre + sous-titre + tags
  2. Intro : 4–6 lignes max
  3. Sommaire : ancres vers sections
  4. Sections : 2 colonnes (texte / exemple)
  5. Résumé : 5 bullets + checklist

Avantage : lecture fluide et structurée, parfait pour ton site “Design Atlas”.

Template BPortfolio “showcase”
  1. Hero image + titre court
  2. Grille : 2×3 ou 3×4 modules
  3. Case study : objectif → process → résultat
  4. CTA : contact / soumission

Avantage : impact visuel maximum, peu de texte, “studio vibe”.

Template CLanding “ressource”
  1. Hero + promesse claire (1 phrase)
  2. 3 bénéfices en cartes
  3. Exemples (avant/après)
  4. FAQ courte
  5. CTA
Template DPage “ressources”
  1. Filtres (catégories) — même sans JS : sections
  2. Listes en cards
  3. Tags & niveaux (débutant → avancé)
  4. Derniers ajouts

Checklist d’audit (layout)

10 points
Lisible Cohérent Grille Spacing Scan
  1. Le texte dépasse-t-il 80 caractères par ligne ?
  2. Les marges sont-elles constantes (haut/bas/gauche/droite) ?
  3. La hiérarchie est-elle visible en zoom-out ?
  4. Le nombre de styles de titres est-il limité (H1/H2/H3) ?
  5. Le spacing suit-il un rythme (8/16/24/32…) ?
  6. Les blocs “cards” sont-ils alignés sur une grille stable ?
  7. La page a-t-elle un élément dominant par section ?
  8. Les CTA sont-ils rares et placés au bon endroit (Z-pattern) ?
  9. Sur mobile, tout reste-t-il lisible sans scroller 15 ans ?
  10. As-tu supprimé au moins 1 élément “décoratif” inutile ?

Si tu coches tout ça, ton layout est déjà au niveau “pro”. Ensuite seulement tu peux te permettre des folies visuelles.