Conception de grilles Bento : Le guide des interfaces utilisateur pour 2026

La mise en page en trois colonnes est obsolète. Cela fait deux ans qu'elle l'est, et la plupart des designers n'ont toujours pas changé son fonctionnement.

Vous la connaissez : trois colonnes égales, chacune avec une icône, un titre et un paragraphe, superposées sur mobile. Tous les sites SaaS créés entre 2018 et 2023 en étaient pourvus. Elle véhiculait un mensonge : l'idée que votre produit se résumait à trois fonctionnalités, chacune méritant exactement 33 % de l'attention. Or, l'attention n'a jamais été égale, et les lecteurs ont cessé de lire ces sections l'année même où TikTok leur a appris que la densité est un atout, et non un défaut.

La grille bento s'est imposée car elle admet ce que la mise en page en trois colonnes n'a jamais fait : certains éléments sont plus importants que d'autres, et le lecteur doit le savoir d'un coup d'œil. Pour comprendre le principe sous-jacent, voir hiérarchie visuelle. Les pages Mac de Apple offrent l'exemple concret le plus clair de ce à quoi cela ressemble en production.

Qu'est-ce qu'une grille bento ?

Une grille bento est une mise en page où une section est divisée en cellules rectangulaires de tailles différentes, chacune contenant un élément de contenu distinct. L'ensemble forme une composition unifiée.

Son nom provient de la boîte bento japonaise. Des compartiments de tailles différentes, contenant chacun un élément différent, sont agencés pour un équilibre visuel optimal. Il ne s'agit pas d'une rangée de colonnes identiques, ni d'une pile de sections narratives, mais d'une composition unique avec une hiérarchie interne délibérée.

Cette grille présente trois caractéristiques essentielles. Premièrement, des cellules de tailles différentes, généralement construites sur une grille à 3 ou 4 colonnes, certaines cellules s'étendant sur plusieurs colonnes ou lignes. Deuxièmement, un contenu varié par cellule (un graphique dans l'une, une illustration dans une autre, une mesure dans une troisième, un témoignage dans une quatrième). Troisièmement, une cohérence visuelle globale, généralement grâce à un traitement de fond commun, des rayons de bordure constants et une utilisation sobre des couleurs.

Ce que ce n'est pas : une démo CSS Grid, une mise en page en mosaïque, un flux Pinterest, un agencement aléatoire de cartes. Bento est compositionnel, pas algorithmique.

Une grille Bento, c'est de la concision. Une ligne de présentation, c'est de la narration. La plupart des produits ont besoin de concision.

Pourquoi a-t-il remplacé la ligne de présentation ?

Trois raisons. Deux d'entre elles sont évidentes. La troisième explique pourquoi ce format s'est imposé.

Raison n° 1 : le temps passé sur la page. Les tests internes de Apple sur les pages marketing ont montré que les sections Bento retenaient les visiteurs environ 47 % plus longtemps que les lignes de présentation équivalentes. La raison est simple : un lecteur peut parcourir rapidement une grille Bento. Il n'y a pas d'ordre de lecture imposé. Il arrive sur la page, choisit la cellule qui l'intéresse et s'y attarde.

Raison n° 2 : de la densité sans blocs de texte. Une grille Bento bien conçue communique six à huit informations dans l'espace qu'une mise en page traditionnelle utiliserait pour trois. Comme les cellules contiennent différents types de contenu (visuel, statistique, texte, témoignage), la densité perçue par le lecteur est allégée.

Troisième raison (la vraie) : cela correspond à la manière dont les produits modernes sont vendus. La plupart des produits SaaS en 2026 ne se résument pas à trois fonctionnalités. Il s’agit d’une plateforme avec une fonctionnalité phare, trois à cinq fonctionnalités secondaires, une intégration, un argument de vente et éventuellement une fonctionnalité spécifique méritant d’être mise en avant. Cette structure ne se prête pas à une présentation sur trois colonnes. Elle est idéale pour une présentation de type bento. La mise en page s’adapte au contenu.

| Modèle | Convient à cette présentation | Ne convient pas à cette présentation |

|---------|-----------------|------------------|

| Présentation sur trois colonnes | Trois fonctionnalités équivalentes, présentation narrative du produit | Plateformes avec des fonctionnalités de poids inégal |

| Présentation des fonctionnalités (lignes pleine largeur) | Explications détaillées des fonctionnalités | Nécessité de présenter l’ensemble en un coup d’œil |

| Grille bento | Plateformes, suites, tableaux de bord, pages de démonstration | Tutoriels Linear, flux pas à pas |

Les trois meilleures implémentations actuelles

Apple (apple.com/mac). Déjà présenté ci-dessus. Toutes les pages produits Mac depuis fin 2022 utilisent la mise en page Bento. La section consacrée aux puces de la série M offre la présentation la plus claire : une cellule principale pour la visualisation de la puce, et des cellules plus petites pour les benchmarks et les cas d’utilisation. Fond sombre commun, coins arrondis et marges internes uniformes. La puce est toujours visuellement dominante. Il s’agit d’un choix éditorial, et non d’une contrainte de grille.

Linear (linear.app/features). Mise en page Bento pour les outils de développement. La page des fonctionnalités est composée de quatre colonnes Bento : la fonctionnalité principale (suivi des problèmes, planification, compilation) occupe une cellule 2x2, tandis que les fonctionnalités secondaires sont organisées en cellules 1x1 ou 1x2. La version de Linear est célèbre pour sa sobriété : uniquement des captures d’écran de produits, aucune illustration, des étiquettes à chasse fixe. Elle ressemble à une fiche technique, volontairement.

Vercel (vercel.com). Le bento de la page d’accueil de Vercel est une version hybride. Certaines cellules contiennent des illustrations, d’autres des captures d’écran de produits, et d’autres encore du texte. Ils prouvent qu’il est possible de mélanger les médias dans un même bento sans que cela paraisse incohérent, à condition que chaque cellule partage le même langage visuel (même fond, même rayon, même rythme d’espacement interne).

Trois secteurs différents, trois tons différents, une même structure sous-jacente. Cette structure n’est pas une mode. C’est une mise en page conçue pour un problème de communication précis : « Nous faisons beaucoup de choses, les voici en un coup d’œil, choisissez celle qui vous intéresse. »

Les calculs de la grille (plus simples qu'il n'y paraît)

La plupart des grilles bento utilisent l'une des deux structures de base suivantes :

La grille bento à 3 colonnes. Idéale pour les sections concises, les témoignages et les mises en avant. Structure typique :

• Une cellule principale de 2x1 (occupant 2 colonnes et 1 ligne)

• Une cellule de 1x1 (1 colonne et 1 ligne)

• Deux cellules de 1x1 sur une deuxième ligne

• Une cellule de 1x2 pour un élément qui gagne en visibilité verticale

La grille bento à 4 colonnes. Plus adaptée aux sections complètes et plus larges. Modèle typique :

• Une cellule principale 2x2
• Deux cellules 1x1 superposées
• Une cellule 2x1 en bas
• Une cellule 1x1 pour fermer la ligne

Vous pouvez créer une grille bento dans CSS Grid en une vingtaine de lignes :

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; } .bento-cell-hero { grid-column: span 2; grid-row: span 2; } .bento-cell-wide { grid-column: span 2; } .bento-cell-tall { grid-row: span 2; } .bento-cell-default { grid-column: span 1; grid-row: span 1; }

Appliquez les classes aux éléments enfants et la grille s’organise automatiquement. C’est aussi simple que cela. La difficulté de la grille bento ne réside pas dans sa conception, mais dans le choix des cellules prioritaires.

Règles responsives fiables

La grille bento sur ordinateur est facile à mettre en œuvre. C’est sur mobile que la plupart des implémentations échouent.

L’erreur : conserver la forme de la grille et tout réduire. À 390 px de large, une grille bento à 4 colonnes se transforme en quatre colonnes de 90 px, ce qui est inutilisable. Les cellules ne peuvent pas contenir de contenu pertinent.

La règle : recalculer le contenu, ne pas le réduire. Sur mobile, la grille Bento se réduit à une seule colonne, mais l’ordre des cellules est modifié pour préserver la hiérarchie.

• La cellule principale est déplacée en haut (impact visuel maximal en premier sur mobile)

• Les cellules de 2x1 pixels de large deviennent des cellules pleine largeur sur une seule colonne

• Les cellules de 1x2 pixels de haut deviennent des cellules de hauteur standard, sans être étirées verticalement

• L’ordre est réévalué en fonction de l’importance, et non de la position visuelle sur ordinateur

CSS Grid simplifie cette opération grâce à grid-template-areas et aux requêtes média. Ou, avec Tailwind : utilisez les préfixes lg: pour appliquer les spans Bento uniquement sur les grands écrans et laissez la pile mobile par défaut gérer l’affichage automatiquement.

| Point de rupture | Comportement de la grille |

|------------|---------------|

| Ordinateur (1280 px et plus) | Bento complet, 4 colonnes avec spans de tailles variables |

| Tablette (768-1279 px) | Bento simplifié, 2 colonnes avec quelques éléments <span> |

Mobile (moins de 768 px) | Une seule colonne, réorganisée par priorité de contenu |

Test : à 390 px, chaque cellule doit être suffisamment haute pour que son contenu soit lisible sans zoom ni défilement horizontal. Dans le cas contraire, le problème vient de la cellule, et non de la fenêtre d'affichage.

Pour plus d'exemples de mise en page, consultez le reste du Brainy Papiers. Si vous avez besoin d'un page d'accueil qui évite de perdre des visiteurs avec une multitude de lignes de contenu, embauche Brainy nous vous proposons des mises en page, des textes et des conversions optimisés.

Quand la grille Bento n'est pas la bonne solution

Le Bento n'est pas une solution universelle. Mal utilisé, Bento risque de contraindre votre contenu à rester dans des cellules qui ont besoin d'espace.

Bento est inadapté lorsque :

• Votre contenu est séquentiel. Un tutoriel pas à pas, un parcours d'intégration, une étude de cas narrative : ces éléments nécessitent un ordre linéaire. Bento supprime l'ordre de lecture.

• Chaque élément a la même importance. Si vous avez réellement trois fonctionnalités équivalentes, une ligne à trois colonnes reste correcte. Bento exige une hiérarchie interne. Aplatir le contenu dans des cellules Bento donne l'impression que des éléments équivalents sont classés aléatoirement.

• Chaque cellule doit être détaillée. Si votre fonctionnalité nécessite 200 mots pour être expliquée, elle ne tient pas dans une cellule Bento. Rédigez-la comme une section, et non comme un compartiment.

• Vous ne disposez pas d'éléments visuels pertinents. Les grilles Bento sont plus lisibles lorsque les cellules contiennent des visuels (graphiques, photos de produits, illustrations). Les Bento composés uniquement de texte ressemblent à des mises en page de journal surchargées.

Tableau de décision :

| Votre contenu est… | Utiliser |

|--------------------|-----|

| Plateforme avec des fonctionnalités à pondération inégale | Grille Bento |

| Trois fonctionnalités parallèles et égales | Ligne à trois colonnes |

| Explication narrative | Enchaînement de fonctionnalités (lignes pleine largeur) |

| Flux étape par étape | Sections numérotées |

| Page de démonstration de type tableau de bord | Grille Bento |

| Présentation détaillée d'une fonctionnalité | Section principale + sections complémentaires |

Modèle de base pour les concepteurs

Utilisez-le comme point de départ. Modifiez-le à partir de là, ne partez pas de zéro.

Structure des sections :

1. Titre pleine largeur au-dessus de la grille (une ligne, percutant)

2. Grille à 4 colonnes, 3 à 5 lignes au total

3. Cellule principale (2x2), l'élément visuel le plus fort

4. Quatre à six cellules complémentaires, types de contenu variés

5. Cellule de fermeture optionnelle pleine largeur pour un appel à l'action ou une démonstration

Règles de contenu des cellules :

• Une phrase par cellule, maximum. Si vous avez besoin d'un paragraphe, la cellule est trop petite.

• Un élément par cellule (graphique, illustration, capture d'écran, indicateur, témoignage, logo).

• Marge intérieure uniforme (généralement 24-32 px).

• Rayon des coins uniforme (généralement 12-16 px).

• Utilisation restreinte des couleurs. La plupart des cellules partagent un arrière-plan. Une ou deux peuvent avoir un arrière-plan inversé ou une couleur accentuée.

Ordre mobile : cellule principale en premier, puis les trois cellules de soutien les plus importantes, puis les autres.

Intégrez une section Bento sur votre prochaine page d'accueil. Vous constaterez la différence.

FAQ

La grille Bento est-elle une simple tendance ?

Non. Les tendances durent un à deux ans. Les grilles Bento dominent les principales pages produits depuis 2022 et restent incontournables. Il s'agit d'un modèle de mise en page conçu pour un problème de communication spécifique, et ce problème est loin d'être résolu.

Puis-je utiliser une grille Bento sur un blog ou un site de contenu ?

Rarement. La grille Bento est destinée aux présentations de produits et aux supports marketing. Les articles de blog sont séquentiels. Un hub d'articles ou une grille de contenu mis en avant peuvent utiliser des cellules de forme inégale de type bento, mais le corps entier du texte d'un article ne doit pas l'être.

Quelle est la différence entre une grille bento et une grille maçonnée ?

La grille maçonnée est algorithmique. Les cellules sont placées automatiquement en fonction de la hauteur du contenu. La grille bento est compositionnelle. Les cellules sont placées intentionnellement par le concepteur en fonction de leur importance. La grille maçonnée convient à Pinterest. La grille bento convient aux produits.

Les grilles bento conviennent-elles aux tableaux de bord ?

Oui, lorsque le tableau de bord présente des widgets de poids inégal : une métrique principale, plusieurs métriques secondaires, un graphique, un journal, un flux d'activité récente. C'est exactement la forme bento. Voir : la vue projet de Linear, le tableau de bord de déploiement de Vercel.

Combien de cellules une grille bento doit-elle comporter ?

Entre quatre et huit. Moins de quatre, et elle ne ressemble plus à une grille. Plus de huit, et elle ressemble à un mur. Sept est un bon compromis.

Finissez les tableaux de fonctionnalités

Parcourez n'importe quel site SaaS créé ces trois dernières années. Comptez les tableaux de fonctionnalités à trois colonnes. Comptez les sections de type « bento ». Ces chiffres s'inversent chaque année.

Il y a une raison à cela. Le tableau de fonctionnalités était une mise en page pour une histoire que nous avons abandonnée : celle des « trois fonctionnalités égales ». Les produits modernes n'ont pas trois fonctionnalités égales. Ils possèdent une plateforme, une fonctionnalité phare, un ensemble de fonctionnalités complémentaires, une preuve de concept et un appel à l'action final. Cette structure est idéale pour un tableau « bento ». Elle ne convient pas à un tableau.

Choisissez une page de votre site actuel qui comporte encore un tableau de fonctionnalités. Repensez cette section sous forme de grille « bento ». Placez la fonctionnalité la plus performante dans la cellule principale. Placez la preuve de concept dans une cellule complémentaire. Placez l'argument de différenciation (une phrase) dans une autre. Publiez-la.

Vous constaterez une augmentation du temps passé sur la page, une diminution du taux de rebond et une meilleure efficacité.

Stop aux tableaux de fonctionnalités.