Conception de mise en page

Que fait Conception de mise en page ?

Aperçu

La plupart des pages échouent sur le rythme, pas sur les idées. La typographie est correcte, les couleurs sont correctes, et pourtant la page ressemble à un modèle, parce que l'espacement vertical a été décidé section par section et que rien ne s'aligne.

Principe central : choisissez une échelle d'espacement, une échelle typographique et un système de sections avant de styliser quoi que ce soit, puis n'introduisez jamais une valeur qui ne figure pas sur ces échelles.

Le système de sections

Les sections de contenu partagent une poignée de valeurs. Les scènes épinglées sont l'exception.

Élément	Règle
Titre de section	une taille pour chaque section de contenu (par exemple 48 sur desktop, 38 sur téléphone)
Bord gauche	un seul bord, égal au bord du logo de navigation. Une échelle ajustée à la hauteur déplace le bord, donc mesurez-le
Étiquette	un style de pastille au-dessus du titre
Carte	un rayon, un filet, une teinte. Jamais bord plus ombre plus fond
Carte de fin	le titre sur les rangées de la grille, les boutons sur la rangée suivante, pas de phrase supplémentaire

Les scènes épinglées et défilées conservent leurs propres tailles de scène. Elles sont conçues pour être à la hauteur de la fenêtre d'affichage, et leur espace blanc est une piste de défilement. Ne réduisez pas une scène épinglée sans repositionner chaque position qui est un pourcentage de celle-ci.

Une page où chaque section a sa propre taille de titre, son propre bord gauche et sa propre carte semble assemblée. Ce tableau empêche cela.

Rythme d'espacement

Décidez de l'échelle une fois pour toutes. Une base de 4px avec une rampe géométrique couvre tout :

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

Pilotez tout l'espacement des sections via deux jetons, --sec entre les sections et --blk entre les blocs à l'intérieur d'une section. Resserrer une page lâche signifie modifier deux nombres, pas quarante. Sur une page, 48 et 40 unités sur desktop et 36 et 28 sur téléphone ont réduit le document d'environ 10 %.

Les tailles des éléments ne changent pas lorsque vous resserrez le rythme. Cartes, typographie, logos, boutons : conservez-les tels qu'ils ont été conçus. Comparez les tailles des composants entre l'ancienne version et la nouvelle pour le prouver.

Le padding des sections est ce qui fait s'effondrer les pages. Auditez chaque jonction, pas chaque section :

Jonction	Écart total	Interprétation
Deux sections sans rapport	200-240px	chapitres séparés
Un bloc qui continue celui du dessus	40-80px	un chapitre, deux parties
Média à fond perdu rencontrant une section	0	une coupe

Mesurez la somme du padding-bottom de la section supérieure et du padding-top de la section inférieure. Une page avec 120/60, 64/20, 24/0 et 0/120 produit des écarts de 180, 84, 24 et 120 sans aucune logique. Le lecteur le ressent comme de la négligence sans pouvoir le nommer.

Un écart de plus d'environ 240px sur un fond de couleur unie nécessite quelque chose à l'intérieur. Soit resserrez-le, soit placez-y un appel à l'action.

Le premier écran

Dimensionnez le héros de sorte que la bande suivante apparaisse sur le premier écran. clamp(620, 100svh - 150, 900) unités place la bande de preuve en vue après un défilement. Un héros qui remplit la fenêtre d'affichage et ne montre rien en dessous cache la preuve dont la page dépend.

Les composants partagés appartiennent au site

Une navigation, un pied de page ou un bouton qui existe sur le site en ligne est le design. Ne le restylisez pas sur une nouvelle page. Lorsqu'il semble différent sur la nouvelle page, la cause est presque toujours une surcharge au niveau de la page qui fuit. Comparez les styles calculés avec ceux du site en ligne et supprimez la surcharge, limitée au point de rupture où elle fuit.

Échelle typographique

Deux familles maximum : une d'affichage, une de texte. Les chiffres dans une police d'affichage se lisent comme conçus ; les chiffres dans une police de corps de texte ordinaire se lisent comme des données.

Définissez toujours font-variant-numeric: lining-nums tabular-nums sur tout nombre qui se trouve dans une rangée avec d'autres nombres. Sans cela, "3 000" et "500 000+" ne s'aligneront pas et vous ne saurez pas pourquoi.

L'espacement négatif entre les lettres s'adapte à la taille : environ -0.02em pour les tailles d'affichage, 0 pour le corps de texte, positif 0.08em sur les sourcils en majuscules.

Faites correspondre exactement les largeurs typographiques du design. Voir extracting-figma-truth pour le piège de la taille optique.

Cartes et grilles

Le bug de carte le plus courant est un contenu inégal produisant des cartes inégales.

Avant	Après	Pourquoi
.card { padding: 2rem } dans une grille	ajouter align-items: stretch sur la grille et height: 100% sur la carte	sinon les cartes sont aussi hautes que leur propre contenu
Le contenu s'écoule de haut en bas	margin-top: auto sur l'élément qui doit se trouver en bas	épingle la métrique ou l'appel à l'action à une ligne de base commune entre les cartes
L'étiquette s'enroule sur 1 ligne dans une carte, 2 dans une autre	min-height égal à 2 lignes sur l'étiquette	maintient la ligne de base identique pour chaque carte
<img> avec taille intrinsèque	wrapper avec aspect-ratio + object-fit: cover sur l'image	une grille d'images aux proportions mixtes n'est pas une grille
Fond gris derrière les cartes	blanc avec un filet de 1px	les fonds se lisent comme des espaces réservés, les filets se lisent comme conçus

Blocs de statistiques et de nombres

Un bloc de nombres a trois parties dans un ordre fixe : source ou étiquette au-dessus, chiffre, légende en dessous. Le chiffre est le plus grand élément du bloc et chaque chiffre de la rangée partage une ligne de base.

• Ne mettez jamais un non-nombre dans un emplacement de nombre. "Creative Ops" dans une rangée avec "150+" et "3 000" se lit comme une erreur. Soit trouvez le nombre, soit déplacez ce fait dans la prose.
• Un chiffre qui s'enroule sur deux lignes casse la rangée. "6 semaines à 24 heures" devient "24h" avec le reste dans la légende.
• Limitez la légende à deux lignes. Si elle en nécessite trois, c'est que la légende fait le travail du chiffre.

Bandes de logos

Les logos sont dimensionnés par poids optique, jamais par boîte englobante. Un logo empilé, un badge carré et un mot-symbole sur une seule ligne définis à la même hauteur CSS sembleront faux de trois manières différentes.

Commencez par : logo empilé 44px, badge carré 40px, mot-symbole 22px, puis ajustez à l'œil. Normalisez chaque marque à une seule couleur d'encre. Des couleurs de logo mélangées donnent à une bande un aspect gratté. Seuls les logos en blanc ou en noir vont dans une bande (voir writing-claims-that-hold).

CSS partagé et débordement sur téléphone

Une règle de largeur écrite pour un composant desktop, comme width: 37rem !important, peut rendre tout le document plus large qu'un téléphone (428 contre 390). Le symptôme est une bande blanche sur le bord droit. Vérifiez scrollWidth par rapport à clientWidth à 390, et limitez les largeurs fixes aux points de rupture pour lesquels elles ont été conçues.

Les signes d'une page issue d'un modèle

• Chaque section est centrée
• Les paddings des sections sont tous 120px quelle que soit la relation
• Les cartes ont à la fois un bord, une ombre et un fond
• Les titres sont définis dans la police de corps de texte avec un poids plus lourd
• Les nombres sont dans la police de corps de texte
• Deux couleurs d'accent, dont aucune n'est celle de la marque
• Des valeurs de border-radius de 4, 8, 12 et 16 toutes sur une même page

Checklist

• Chaque valeur d'espacement figure sur l'échelle ; les sections fonctionnent avec deux jetons
• Chaque écart de jonction de section est délibéré et se situe dans l'une des trois bandes
• Une taille de titre, un bord gauche, une étiquette, un style de carte pour toutes les sections de contenu
• La bande suivante apparaît sur le premier écran
• Les composants partagés correspondent aux styles calculés du site en ligne
• Les cartes dans une grille ont la même hauteur, avec une ligne de base interne partagée
• Tous les médias dans une grille partagent un seul aspect-ratio
• Les nombres utilisent des chiffres tabulaires et alignés
• Les logos sont dimensionnés optiquement et ont une seule couleur d'encre
• Aucun débordement horizontal à 390
• Aucun écart de plus de 240px qui ne contienne rien