Système de Grille Bento

Que fait Système de Grille Bento ?

Objectif

Le système de grille Bento fournit une méthodologie pour organiser du contenu disparate (indicateurs de performance clés, illustrations visuelles, widgets interactifs, citations et teasers de fonctionnalités produits) en une grille modulaire unifiée. Inspiré des bento boxes japonais traditionnels, il établit un équilibre asymétrique entre différentes hauteurs et largeurs de cellules. Ce système résout le problème de conception de la fragmentation visuelle sur les tableaux de bord, les pages d'accueil et les portfolios en imposant des règles proportionnelles strictes, un espacement interne cohérent et des échelles typographiques structurées. Il transforme ce qui pourrait facilement devenir une mise en page chaotique en une hiérarchie visuelle soignée, scannable et accessible.

Cas d'Utilisation

• Vitrines de Fonctionnalités SaaS : Présenter un mélange diversifié de capacités produit, de statistiques de performance, d'intégrations système et d'aperçus d'interface utilisateur interactifs sur une seule section de page d'accueil.
• Tableaux de Bord de Données et Métriques : Regrouper les indicateurs clés de performance (KPI), les graphiques et les résumés opérationnels dans des blocs visuels à haute densité.
• Portfolios et Études de Cas : Présenter des travaux créatifs, des images de projets, des citations de clients et des flux de travail de conception dans une présentation dynamique et non linéaire.
• Collections E-commerce : Mettre en avant des produits vedettes, des collections limitées, des bannières promotionnelles et des preuves sociales dans une mise en page éditoriale à fort impact.

Quand NE PAS Utiliser

• Listes de Contenu Uniformes : Si la page comprend des éléments répétitifs identiques (par exemple, des listes standard d'articles de blog ou des grilles de produits), utilisez card-ui-system ou responsive-grid-system.
• Narrations Purement Hiérarchiques : Pour les mises en page qui dépendent d'un récit linéaire et séquentiel (par exemple, "Étape 1, Étape 2, Étape 3"), utilisez step-progress-system ou section-composition-system.
• Données Tabulaires Complexes et Volumineuses : Si les utilisateurs ont besoin de comparer des valeurs techniques exactes ou de lire des lignes de données alphanumériques, utilisez data-table-ui-system.
• Articles Axés sur le Contenu : Pour les pages éditoriales où l'objectif principal est un texte fluide et ininterrompu, utilisez article-layout-system.

Entrées

1. Inventaire et Priorité du Contenu : Une liste des éléments à placer dans la grille bento, classés par hiérarchie (1 Héros Principal, 2-3 Support, 2-4 Accents).
2. Taxonomie des Actifs Visuels : Le type de contenu dans chaque cellule (image statique, illustration animée, curseur interactif, texte brut, métrique numérique).
3. Colonnes Cibles et Points de Rupture : Système de colonnes desktop (généralement une grille maîtresse à 4 colonnes), adaptation tablette (généralement 2 colonnes) et règles d'empilement mobile.
4. Échelle d'Espacement Fluide : Marges fluides et jetons de rembourrage pour les gouttières et les dispositions internes des cellules (provenant de fluid-spacing-system).
5. Jetons de Conception de Marque : Échelle typographique, rayons de bordure, styles de bordure, échelles de remplissage d'arrière-plan et jetons d'élévation (provenant de elevation-and-depth-system et fluid-typography-system).

Sorties

1. Carte Géométrique de la Grille Bento : Un plan de coordonnées proportionnelles spécifiant les étendues de colonnes (grid-column: span X) et les étendues de lignes (grid-row: span Y) pour chaque cellule.
2. Spécifications de l'Anatomie Interne des Cartes : Règles pour l'espacement structurel, l'imbrication du contenu et l'alignement dans différents rapports d'aspect des cellules.
3. Ordonnancement du DOM et Carte d'Accessibilité : Une séquence logique d'onglets montrant comment la structure source HTML maintient l'accessibilité entre des positions visuelles irrégulières.
4. Plan d'Empilement Responsive : Spécifications de transition précises montrant comment la grille asymétrique se simplifie pour les écrans tablette et mobile.

---

Workflow

1. Établir la Géométrie et les Colonnes de la Grille

Commencez par définir la grille de coordonnées sous-jacente.

• Structure de Grille Maîtresse : Standardisez sur une grille CSS à 4 colonnes pour les mises en page desktop (1200px+). Cela fournit d'excellents facteurs mathématiques pour les largeurs de cellules (1/4, 2/4, 3/4 ou 4/4).
• Hauteurs de Pistes Asymétriques : Définissez la hauteur des lignes explicitement ou utilisez grid-auto-rows: minmax(180px, auto) pour établir une base proportionnelle carrée ou rectangulaire horizontale (rapport d'aspect 1:1 ou 2:1 par unité).
• Gouttières Fluides : Utilisez un jeton d'espacement fluide pour l'écart de grille (par exemple, gap: clamp(16px, 2vw, 24px)) pour que les cellules restent visuellement séparées mais étroitement liées.

2. Cartographier et Allouer le Contenu par Hiérarchie Visuelle

Ne dispersez pas les éléments au hasard. Classez chaque cellule dans l'un des trois niveaux structurels :

• La Cellule Héros Principale (S'étend sur 2x2 ou 3x2 pistes) : Occupe environ 40 à 50 % de la zone de la grille. Héberge l'actif visuel, la vidéo ou la métrique la plus importante. Elle dicte le point d'entrée visuel de toute la section.
• Cellules de Support (S'étendent sur 2x1 ou 1x2 pistes) : Mettent en évidence les fonctionnalités intermédiaires ou les statistiques clés. Elles sont plus hautes ou plus larges que les blocs de base pour accueillir du texte structuré à côté d'un graphique.
• Cellules d'Accent (S'étendent sur 1x1 piste) : Réservées aux petits éléments visuels, métriques à valeur unique simples, icônes ou badges. Elles complètent la grille pour maintenir un contenant rectangulaire.

3. Concevoir l'Anatomie Interne d'une Cellule Bento

Appliquez des contraintes d'espacement internes strictes pour que les cellules restent cohérentes :

• Rembourrage Unifié : Appliquez un rembourrage interne cohérent sur toutes les cellules, généralement un jeton de rembourrage fluide (par exemple, padding: var(--space-m)). Exception : les cellules d'accent (1x1) peuvent utiliser un rembourrage légèrement plus serré (--space-s).
• Modes d'Alignement Interne : Utilisez flexbox (display: flex; flex-direction: column; justify-content: space-between) à l'intérieur des cellules pour aligner verticalement les blocs de texte en haut et les accents visuels (métriques, graphiques) en bas.
• Arrière-plan et Bordures : Standardisez sur un rayon de bordure uniforme (par exemple, border-radius: 16px à 24px) sur toutes les cellules. Utilisez un remplissage d'arrière-plan subtil (par exemple, une teinte neutre, un fond de verre translucide, ou une surface de carte à faible contraste) pour établir des limites de carte distinctes.

4. Organiser l'Ordonnancement du DOM pour l'Accessibilité Clavier et Lecteur d'Écran

Les mises en page de grille irrégulières peuvent provoquer un décalage entre l'ordre de lecture visuel et l'ordre physique du DOM.

• Flux de Lecture Naturel : Séquencez les éléments dans le document HTML dans un ordre logique de gauche à droite, de haut en bas, comme ils seraient lus.
• Évitez la Modification d'Ordre : N'utilisez jamais order en CSS et ne positionnez pas les cellules arbitrairement d'une manière qui saute des éléments focalisables. Si la cellule 1 se trouve en haut à gauche et la cellule 2 en haut à droite, elles doivent apparaître dans cet ordre dans le DOM, même si la disposition CSS Grid les étend différemment.
• Titres Sémantiques : Donnez à chaque cellule riche en contenu une balise de titre claire et descriptive (généralement <h3> ou <h4>), correspondant au plan de la section parente <h2>.

5. Définir l'Empilement Responsive et les Points de Rupture

Assurez-vous que la grille gère correctement le changement d'échelle de la fenêtre :

• Desktop (1200px+) : Mise en page à 4 colonnes. Étendues de colonnes et de lignes asymétriques.
• Tablette (768px - 1199px) : Passez à une grille à 2 colonnes. Remappez les étendues afin que les cellules 1x1 s'étendent sur 1 colonne et les cellules 2x1 s'étendent sur les deux colonnes (2 colonnes pleine largeur).
• Mobile (moins de 767px) : Réduisez la grille entièrement en une pile verticale à 1 colonne (grid-template-columns: 1fr). Supprimez les hauteurs de ligne explicites (grid-auto-rows: auto) et laissez les éléments s'écouler naturellement, la hauteur étant déterminée par le rembourrage interne et la taille du contenu.

---

Règles de Décision

Quand Étendre les Colonnes vs. les Lignes

Type de Contenu de l'Élément	Règle de Décision d'Étendue	Géométrie Desktop Recommandée
Métrique à Fort Impact / Fonctionnalité Principale	Étendre à la fois les colonnes et les lignes pour créer un centre focal.	grid-column: span 2; grid-row: span 2;
Visuels Larges / Chronologies / Graphiques	Étendre les colonnes horizontalement ; garder la hauteur sur 1 ligne pour attirer les yeux horizontalement.	grid-column: span 2; grid-row: span 1;
Longue Liste de Texte / Images Hautes	Étendre les lignes verticalement ; garder la largeur sur 1 colonne pour attirer les yeux vers le bas.	grid-column: span 1; grid-row: span 2;
Métriques Uniques / Badges / Icônes	Ne pas étendre. Garder en tant que bloc carré standard.	grid-column: span 1; grid-row: span 1;

Mise à l'Échelle Typographique dans les Cellules Bento

• Dimensionnement Adaptatif : N'utilisez pas la même taille de typographie pour toutes les cartes. Gardez l'échelle typographique proportionnelle à la taille de la carte.
• Carte Héros : Utilisez font-size: clamp(1.5rem, 4cqi, 2.25rem) (en utilisant les unités de requête de conteneur cqi si elles sont prises en charge) pour les titres.
• Carte d'Accent (1x1) : Limitez le titre à font-size: clamp(1rem, 2.5cqi, 1.25rem) et gardez les descriptions brèves (max 2 lignes) ou omettez les descriptions entièrement en faveur d'une icône + métrique.

Contenu Contenu vs. Débordement

• Mise en Page Contenue : Placez le contenu entièrement à l'intérieur du rembourrage de la carte avec un minimum de 16px d'espace de respiration entre le texte et les bordures. Idéal pour les cartes riches en texte et informatives.
• Mise en Page Débordante : Laissez les éléments visuels (captures d'écran de produit, maquettes 3D détaillées, graphiques complexes) déborder vers le bas et/ou les bords droit de la carte, masquant le trop-plein (overflow: hidden sur la cellule). Le texte reste rembourré et lisible en haut. Utilisez ceci pour la carte Héros Principale et les cartes visuelles de support.

---

Contraintes

• Visibilité du Focus (WCAG 2.2 SC 2.4.11 / 2.4.13) : Si une cellule est focalisable (par exemple, agit comme une grande carte de lien), elle doit avoir un contour :focus-visible explicite et à contraste élevé. Les indicateurs de focus ne doivent jamais être coupés par le conteneur de la grille parente ou les limites de la carte.
• Cibles Tactiles (WCAG 2.2 SC 2.5.8) : Tous les éléments interactifs dans les cellules bento (boutons, toggles d'extension, curseurs) doivent avoir une taille de cible minimale de 24x24px avec un espacement environnant suffisant, en privilégiant 44x44px pour les déclencheurs mobiles.
• Alignement de l'Ordre de Lecture (WCAG 2.1 SC 1.3.2) : La séquence de contenu analysée par les lecteurs d'écran doit correspondre à la signification sémantique et à la séquence visuelle de la grille bento. La cellule en haut à gauche doit toujours apparaître avant les cellules en bas à droite dans le DOM source.
• Ratios de Contraste (WCAG AA) : Tout texte dans les cartes bento doit respecter un contraste minimum de 4.5:1 par rapport à l'arrière-plan de la carte. Évitez d'utiliser des gris subtils à faible contraste pour les descriptions dans les cartes teintées.

---

Schémas d'Échec Courants

• L'Effet "Tiroir à Bric-à-brac Visuel" : Mettre des éléments arbitraires dans une grille bento simplement parce qu'ils rentrent. Chaque cellule doit servir un objectif de narration cohérent pour la page parente.
• Déconnexion DOM-Visuel : Disposer visuellement les cartes dans un ordre tout en les laissant dans une séquence complètement différente dans le HTML. La navigation par onglet du lecteur d'écran et du clavier saute de manière chaotique dans la grille.
• L'Explosion de la Mise en Page Mobile : Garder des étendues de colonnes codées en dur sur les écrans mobiles, ce qui force les cartes à rétrécir, provoquant un débordement du texte et le rendant complètement illisible.
• Conflit de Rayons de Bordure Excessifs : Utiliser un rayon de bordure massif sur les cartes tout en gardant des marges minuscules et nettes, ou imbriquer des éléments internes avec des rayons de bordure qui ne correspondent pas à la courbe de coin concentrique de la carte externe.
• Manque d'Ancre Focale : Créer une grille où toutes les cellules ont exactement la même taille (par exemple, toutes 1x1 ou toutes 2x1), ce qui élimine le point d'entrée de la mise en page et provoque une fatigue de balayage.

---

Critères de Validation

• Géométrie Unifiée : La grille utilise un cadre de coordonnées sous-jacent cohérent (idéalement une mise en page à 4 colonnes sur desktop) avec des gouttières uniformes.
• Hiérarchie Claire : Un seul bloc "Héros" est visuellement dominant et établit un point d'entrée de mise en page clair.
• Ordre de Tabulation Naturel : La tabulation dans les éléments de la grille se déplace de manière prévisible de gauche à droite, de haut en bas, correspondant à la mise en page visuelle.
• Empilabilité Mobile : La mise en page passe proprement à une pile à une seule colonne sur les fenêtres mobiles (< 768px) sans débordement horizontal.
• Cohérence de l'Espacement Interne : Le rembourrage des cellules est identique sur toutes les cartes similaires, avec un alignement vertical uniforme des éléments.
• Conformité au Contraste AA : Les rapports de contraste pour tous les blocs de texte et indicateurs d'état dans chaque carte respectent au moins la norme WCAG AA de 4,5:1.
• Sécurité Interactive : Les cibles tactiles pour tous les widgets dans les cartes bento respectent le seuil WCAG 2.2 de 24x24px.