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°01 : Démarrage

Objectifs

Avec ce premier challenge, vous allez prendre le temps d'analyser la maquette et créer les bases de votre projet Webflow. Prenez ce moment pour pleinement comprendre la grille Bento et préparez au mieux vos assets (variables, médias & typos).

Consignes

Pour ce challenge, voici quelques consignes :

Dupliquer le projet Figma sur votre Workspace Figma
Utilisez les pages Figma "Aide" niveau par niveau si vous en sentez le besoin
Créez le projet Webflow dans votre dossier du Workspace Webflow "initWeb Formations"
Ajoutez vos variables, votre police d'écriture et vos médias.

Pour ce premier challenge, pensez à la Structure cachée derrière ce Design, pensez au Display:Flex & Grid, pensez au Box-Model. N'hésitez pas à prendre un papier et un crayon pour dessiner la structure à côté.

Afin de réaliser ce projet avec brio, fixons-nous un objectif de temps. Pour démarrer ce projet, je vous donne 20 minutes. C'est à vous !

Annexes

Mise en pratique