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°03 : Responsive

Objectifs

Avec ce dernier challenge, vous allez terminer en beauté avec l'adaptation responsive du projet. Votre objectif est double. Dans un premier temps, il faut adapter le contenu à une vue mobile. Dans un second temps, il faut ré-ordonner les cards afin qu'elles correspondent à l'ordre défini sur la maquette.

Consignes

Pour ce challenge, voici quelques consignes :

Faites les choses dans l'ordre
Adapter en version mobile dans un premier temps
Réorganiser les cards dans un second temps
Appliquer les correctifs si nécessaire

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

Une fois le projet terminé, copiez le lien en lecture seule et accédez au formulaire de rendu disponible en annexes. Ajoutez les informations et c'est fini ! Nous vous enverrons une correction par email (assurez-vous d'ajouter le bon email).

Annexes

Mise en pratique