Comment utiliser la conception de grilles Bento dans vos projets Web

Article original : How to Use Bento Grids Design in Your Web Projects

Je crois que nous avons tous remarqué la tendance des mises en page Web méticuleusement organisées, rappelant les boîtes à bento japonaises. Ces "Bento Grids" ont rapidement gagné en popularité, offrant une manière visuellement attrayante et structurellement cohésive de présenter du contenu en ligne.

Dans cet article, nous allons explorer les origines, l'essor et la mise en pratique de la tendance des grilles bento, en examinant comment elle allie esthétique et fonctionnalité dans le design Web moderne.

Prérequis

• Fondamentaux de HTML et CSS (CSS Grid)
• Bases du Web Design

La Philosophie Derrière les Grilles Bento

Le concept des grilles bento remonte à la tradition japonaise de servir une variété de plats dans un seul contenant segmenté connu sous le nom de bento box. Cette méthode de présentation non seulement assure un repas équilibré, mais plaît également à l'œil par son organisation et sa simplicité.

Bento Japanese Box

Traduite en design Web, les grilles bento offrent une expérience similaire : du contenu diversifié segmenté en zones distinctes, le rendant à la fois accessible et esthétiquement équilibré.

La philosophie des grilles bento repose sur la compartimentation et l'organisation. Elle crée un rythme prévisible que les utilisateurs peuvent suivre, réduisant la charge cognitive et améliorant l'expérience utilisateur globale. La symétrie et l'ordre du design offrent un sentiment de calme et de contrôle, répondant au désir des utilisateurs de simplicité et de structure au milieu du chaos d'Internet.

L'Essor des Grilles Bento

Bien que l'utilisation de grilles en design ne soit pas nouvelle, la tendance spécifique des grilles bento a commencé à gagner en traction alors que les designers cherchaient à créer des mises en page plus organisées et adaptées aux mobiles.

Des géants comme Apple utilisent ce modèle de design dans leurs vidéos promotionnelles pour leurs produits également.

Apple mac promotional infographic

La tendance a également connu un regain de popularité avec l'avènement de la mise en page CSS Grid et l'accent croissant sur le design minimaliste qui ne sacrifie pas la fonctionnalité pour la forme.

Les plateformes qui mettent l'accent sur le contenu, telles que les magazines en ligne, les sites éducatifs et les portfolios, ont été parmi les premiers adopteurs des grilles bento. Leur adoption a mis en lumière la capacité de la grille à présenter divers types de contenu dans une mise en page harmonieuse, améliorant ainsi la navigation et la lisibilité.

Examen de la Tendance

Les grilles bento modernes sont souvent caractérisées par des lignes épurées, des formes géométriques et une division claire de l'espace. Elles se composent généralement de :

• Le titre d'une fonctionnalité
• Une courte description de la fonctionnalité
• Une infographie ou un contenu interactif.

Cette tendance a été propulsée par son impact positif sur l'expérience utilisateur. Une grille bento bien implémentée guide les utilisateurs à travers le site Web avec facilité, permettant un accès rapide à l'information sans les submerger de choix.

Avantages de l'Utilisation des Grilles Bento

1. Organisation et Cohésion Améliorées : Les grilles bento apportent un haut niveau d'organisation au design Web, permettant une présentation cohésive de contenus variés. Cette segmentation facilite la digestion de l'information de manière structurée pour les utilisateurs.
2. Attrait Esthétique : La symétrie et les lignes épurées inhérentes aux grilles bento sont visuellement attrayantes, offrant un look soigné et professionnel qui peut améliorer l'identité visuelle d'un site Web.
3. Réduction de la Fatigue de Défilement : En utilisant efficacement l'espace dans une seule vue, les grilles bento peuvent afficher une quantité significative de contenu, ce qui peut réduire le besoin de défilement excessif.
4. Clarté Métaphorique : La métaphore de la boîte à bento communique efficacement le concept d'une expérience complète et équilibrée, ce qui peut être particulièrement utile pour présenter les fonctionnalités d'un produit ou un portfolio de travaux.
5. Navigation Améliorée : La prévisibilité et l'ordre des grilles bento aident à une navigation simple, car les utilisateurs peuvent facilement passer d'une section compartimentée à une autre.
6. Compatibilité avec le Design Réactif : Les grilles bento s'intègrent parfaitement avec les principes de design réactif, facilitant l'ajustement sans effort de la mise en page d'un site Web pour accommoder diverses tailles d'écran et appareils.
7. Focus sur le Contenu : La mise en page de la grille met en avant le contenu sans distractions inutiles, ce qui peut être crucial pour les sites où le contenu est important, comme les galeries en ligne ou les plateformes axées sur l'information.
8. Facilite la Capture Complète du Produit : Dans le contexte de la présentation de produits, les grilles bento offrent aux utilisateurs la commodité de capturer toutes les informations essentielles en une seule fois. Avec le contenu bien organisé dans des compartiments distincts, les utilisateurs peuvent facilement prendre une capture d'écran ou sauvegarder une seule vue de la grille, s'assurant ainsi de capturer tous les détails pertinents sans avoir besoin de multiples interactions ou de naviguer à travers diverses pages.

Inconvénients des Grilles Bento

1. Surcharge d'Informations Potentielle : Bien que les grilles bento puissent réduire la charge cognitive grâce à l'organisation, il existe un risque d'entasser trop d'informations sur un seul écran, ce qui pourrait submerger les utilisateurs.
2. Hiérarchie Visuelle Limitée : La structure uniforme des grilles bento peut parfois conduire à un manque de hiérarchie visuelle, rendant plus difficile pour les utilisateurs de déterminer l'importance de certains contenus par rapport à d'autres.
3. Considérations Concernant la Loi de Hick : Une grille densément remplie présente aux utilisateurs une multitude d'options, prolongeant potentiellement leur processus de décision. Cette abondance de choix peut entraîner le paradoxe du choix, où les utilisateurs éprouvent de l'indécision ou une navigation plus lente en raison de la multitude d'options disponibles.
4. Rigidité du Design : La nature structurée des grilles bento peut parfois restreindre les éléments de design créatifs et conduire à une expérience utilisateur monotone si elle n'est pas mise en œuvre avec variation et contenu dynamique.
5. Défis SEO : Les moteurs de recherche peuvent avoir des difficultés à analyser la pertinence du contenu lorsqu'il est réparti dans de nombreux compartiments de grille, ce qui peut potentiellement impacter le SEO s'il n'est pas correctement structuré.
6. Problèmes d'Accessibilité : La nature compartimentée des grilles bento peut présenter des défis d'accessibilité, en particulier pour les utilisateurs qui dépendent des lecteurs d'écran ou de la navigation au clavier, si elles ne sont pas conçues en tenant compte des normes d'accessibilité.

Grilles Bento en Pratique

La création de grilles bento implique généralement l'utilisation de la mise en page CSS grid et flexbox, qui offrent des solutions robustes pour créer des mises en page complexes avec facilité. Les grilles bento sont appréciées pour leur flexibilité et leur réactivité, permettant au contenu de s'adapter de manière fluide à différentes tailles d'écran.

Pour cet article, voici le design que nous allons créer pour l'interface ci-dessous :

desktop design to recreate

Pour commencer, créez quelques divs dans votre balisage.

<body>
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>

Ensuite, utilisez la propriété grid, grid-template-columns, et grid-template-rows pour définir le nombre de lignes et de colonnes que vous souhaitez.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

Le dernier ingrédient pour obtenir une grille de style bento réside dans l'utilisation de la propriété grid-template-areas qui est utilisée pour nommer les zones de la grille selon la position que vous souhaitez qu'elles occupent sur la page.

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
}

Enfin, attribuez ces noms à l'élément exact que vous souhaitez voir occuper cet espace.

.item {
  border: 2px solid #464545;
  border-radius: 5px;
}

.grid .item:nth-child(1) {
  grid-area: hero;
}
.grid .item:nth-child(2) {
  grid-area: aside2;
}

.grid .item:nth-child(3) {
  grid-area: aside3;
}
.grid .item:nth-child(4) {
  grid-area: aside4;
}

.grid .item:nth-child(5) {
  grid-area: aside5;
}

Vous devriez obtenir ce résultat :

Bento structure achieved

Il ne reste plus qu'à remplir les cases avec leur contenu et leurs actifs appropriés. Vous pouvez trouver certains actifs/contenu dans ce repo.

Bento Grid with its content filled

Une autre utilité de la propriété grid-template-areas est la facilité avec laquelle vous pouvez obtenir une réactivité avec elle. Dans notre exemple, pour rendre la page réactive, vous passez une nouvelle paire de chaînes sur votre seuil préféré.

Sur les écrans de tablette :

@media screen and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hero   hero   hero   hero"
      "hero   hero   hero   hero"
      "aside2 aside2 aside2 aside3"
      "aside4 aside4 aside5 aside5";
  }
}

Tablet Screens

Et sur les petits écrans :

@media screen and (max-width: 750px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "hero   hero   hero"
      "aside2 aside2 aside2"
      "aside3 aside3 aside3"
      "aside4 aside4 aside4"
      "aside5 aside5 aside5";
  }
}

Smaller screens

Règles Courantes des Grilles Bento

Voici quelques bonnes règles à suivre lors de la création de grilles bento :

• Grouper le Contenu Connexe : L'un des principes fondamentaux des grilles bento est de regrouper le contenu connexe dans chaque segment. Cela améliore la capacité de l'utilisateur à localiser et à comprendre rapidement les informations qu'il recherche. En organisant le contenu de manière logique, les designers peuvent améliorer l'engagement et la satisfaction des utilisateurs.
• Varier les Tailles des Cases : Évitez d'utiliser la même taille pour chaque case dans la grille. Varier les tailles des cases peut créer un intérêt visuel et une hiérarchie, attirant l'attention sur les éléments clés tout en maintenant l'équilibre global. Cette variation peut aider à guider les utilisateurs à travers le contenu et à mettre en évidence les informations importantes de manière efficace.
• Établir une Hiérarchie Visuelle : Bien que la variation des tailles des cases contribue à la hiérarchie visuelle, l'établissement d'une hiérarchie visuelle englobe une gamme plus large d'éléments de design. En plus des tailles des cases, les designers doivent considérer des facteurs tels que la couleur, la typographie et le placement pour prioriser certains éléments par rapport à d'autres.
• Prioriser le Carré Central : Dans les grilles bento traditionnelles, le carré central a souvent une signification spéciale et agit comme un point focal. Les designers peuvent utiliser ce carré central pour mettre en avant des informations critiques ou des fonctionnalités clés, ponctuant efficacement la grille et attirant l'attention des utilisateurs sur ses éléments principaux.
• Limiter le Nombre de Cases : Pour maintenir la clarté et éviter de submerger les utilisateurs, il est recommandé d'utiliser neuf cases ou moins dans la grille bento. Limiter le nombre de cases garantit que la mise en page reste gérable et facilite la navigation et la compréhension pour les utilisateurs.
• Envisager un Motif en Spirale : Bien que ce ne soit pas une règle stricte, envisager un motif en spirale peut ajouter une couche supplémentaire d'intérêt visuel à la conception de la grille bento. Cela implique d'organiser le contenu dans un motif courbé ou en spirale dans la grille, créant une mise en page dynamique et engageante qui encourage l'exploration.

Informations Supplémentaires

Je voudrais souligner quelques points dans l'article qui n'ont pas été mis en avant.

• Tout d'abord, l'article a été inspiré par la vidéo de Tom Geoco sur les grilles bento.
• BentoGrids est une excellente ressource pour trouver de l'inspiration en design si vous êtes intéressé. Si vous êtes intéressé par le code complet, voici le repo, GitHub, et la version live. Demo.
• L'inspiration pour le design de la grille que nous avons construite provient de FrontEnd Mentor.

Conclusion

Les grilles bento se distinguent comme une tendance significative dans le paysage du design Web moderne, offrant un mélange d'attrait esthétique et de clarté fonctionnelle. Elles représentent une éthique de design qui valorise l'ordre, la beauté et la centralité de l'utilisateur.

À mesure que les technologies Web évoluent, les principes sous-jacents des grilles bento continueront d'informer les meilleures pratiques, encourageant les designers à créer des expériences non seulement visuellement convaincantes, mais aussi intuitivement navigables.

Informations de Contact

Vous souhaitez me contacter ? N'hésitez pas à me joindre sur les plateformes suivantes :

• Twitter / X: @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com