Le Bento Webdesign est une approche moderne inspirée des principes du design japonais, plus spécifiquement du concept du Bento Box, une boîte à déjeuner traditionnelle japonaise. Cette boîte compartimentée contient plusieurs aliments soigneusement arrangés, et chaque élément est mis en valeur tout en étant intégré harmonieusement dans l'ensemble. Le Bento Webdesign applique ce principe de compartimentation et d'équilibre visuel au design de sites web.

Origine et principes :

Le terme « Bento Webdesign » provient de l'analogie avec la boîte à Bento, où chaque « section » ou « composant » du site web (comme les menus, les images, les textes, les icônes) est soigneusement agencé dans une disposition claire et cohérente. Ce type de design vise à offrir une expérience utilisateur optimale grâce à une organisation claire et une hiérarchisation intuitive des informations.

Les principaux principes du Bento dans le domaine du WebDesign incluent :

Modularité : Chaque élément du site est traité comme une unité autonome (comme les cards dans un Bento Box), mais toutes ces unités fonctionnent ensemble de manière cohérente.
Simplicité et minimalisme : Comme la présentation des aliments dans une boîte Bento, le design vise à ne pas surcharger l'utilisateur. Il s'agit de mettre l'accent sur l'essentiel en évitant les éléments visuels superflus.
Équilibre et harmonie : Le design repose sur l'équilibre visuel entre les différents éléments de la page. La disposition doit sembler ordonnée et réfléchie, en utilisant l'espace de manière efficace.
Clarté : L'objectif est de rendre l'information facile à comprendre et rapide à localiser, avec un design qui guide naturellement l'utilisateur à travers les différentes sections du site.

En somme, le Bento en WebDesign est une approche esthétique qui allie fonctionnalité et esthétique dans un format facilement navigable et visuellement agréable, inspirée par la discipline et la simplicité du Bento traditionnel.

Ce projet est accompagné de ressources disponibles en annexes et est composé de trois challenges :

Démarrage
Conception
Responsive

Vous allez jouer avec les notions de Positionnement et les notions de Display pour arriver au résultat. L'objectif ici est de s'approcher le plus possible du rendu présenté par la maquette dans un temps imparti.

Attention, il y a quelques subtilités.

Challenge n°02 : Conception

Objectifs

Avec ce second challenge, vous allez entrer dans le vif du sujet. Dans un premier temps, posez la structure tel que vous l'imaginez, puis styliser la grille et ensuite les cellules internes aussi appelées "cards". Avancez progressivement. Vous vous occuperez du responsive dans le prochain challenge.

Consignes

Pour ce challenge, voici quelques consignes :

Poser la structure
Styliser les éléments en descendant dans le hiérarchie (Section - Grille - Cards)
Une modification de style doit donner lieu à la création d'un .class. Ne laissez pas des "Div Block 325".
Essayez de réutiliser au maximum vos .class
Si besoin, ajoutez une combo-class mais n'allez pas au-delà de 3 .class pour un élément. Si vous en avez besoin, créer une .class sur-mesure pour cet élément.

Afin de réaliser ce projet avec brio, fixons-nous un objectif de temps. Pour concevoir ce projet, je vous donne 1h30. C'est à vous !

Annexes

Mise en pratique