UI/UX Design — Printemps 2024

Le pain d'Orsay

Dans le cadre d’un projet personnel, j’ai voulu mettre à l’épreuve mes compétences en me laissant une semaine pour réaliser la landing page du site d’une boulangerie fictive : Le Pain d’Orsay. Bien sûr, cette boulangerie, avant d’avoir un site, avait besoin d’une identité ainsi que de clients. Alors, avant de m’attaquer à la conception du site, j’ai réalisé une charte graphique et étudié le profil type d’un client de la boulangerie pour orienter ma future conception.

Comment plaire à tout le monde ?

On ne peut pas… Alors, il nous reste deux options : tout arrêter là (mais bon, ce serait dommage que cette page se retrouve vide de contenu) ou cibler. Ici, on cible une clientèle aisée, prête à casser la tirelire pour de la qualité, de la personnalisation et de l’efficacité.

Persona

Charte graphique — Logo

Une DA façon rive gauche.

Tout comme beaucoup de commerces de proximité, la boulangerie Le Pain d’Orsay reprend les codes de son environnement pour créer son identité. Historiquement située à deux pas du musée et du quai d’Orsay, elle en tire directement son nom et présente une identité raffinée pour plaire à la clientèle locale.

Présentation de la palette de couleurs de la charte graphique. Dominante marron avec une gamme de teintes allant du beige clair au marron foncé. Les valeurs hexadécimales et les codes de couleur RVB et CMJN sont indiqués.

Charte graphique — Couleur

Sélection typographique de la charte graphique. Deux polices sont mises en avant : “Outfit” pour les titres et interactions, une police moderne sans-serif, et “Playfair” pour le corps de texte, une police serif élégante.

Charte graphique — Typographie

Série de photographies illustrant l’univers visuel de la marque. Images de pains, plats préparés, ingrédients naturels et artisans en train de travailler, reflétant une ambiance artisanale et authentique.

Charte graphique — Photographie

Tadaaaam !!

Sans plus attendre, voici le résultat final.

Capture d’écran du site Le Pain d’Orsay, une boulangerie artisanale. La page d’accueil présente un pain de mie sur une planche en bois, accompagné de tranches grillées avec du beurre et de la confiture. Une section interactive permet aux visiteurs de créer leur propre pain en sélectionnant des ingrédients personnalisés. Plus bas, un encart raconte l’histoire de la marque, illustré par des images d’un boulanger au travail et d’une vendeuse en boutique. Une carte interactive affiche l’emplacement des boulangeries à Paris. Enfin, une section recettes propose des plats à base de pain, comme des tartines au comté et au caramel, un sandwich signature et une salade césar aux croûtons de brioche.

Maquette

Version mobile

Rome ne s'est pas construite en un jour.

Dès le départ, j’ai instauré une approche structurée :Avant de me lancer dans le design, j’ai défini l’architecture globale à travers un zoning, puis j’ai créé des wireframes pour cadrer la mise en page et optimiser l’expérience utilisateur. Une fois la structure établie, j’ai utilisé Figma pour concevoir l’interface. Cette approche n’empêche pas pour autant le design d’évoluer au cours des étapes si besoin. La preuve avec la section “Où nous trouver”.

Wireframe représentant une carte interactive avec plusieurs points de localisation. Chaque point est relié à une fiche d’information comprenant une image et du texte descriptif.

Wireframe — Section "Où nous trouver"

Version mobile

Wireframe d’une page produit avec un grand visuel, un descriptif détaillé à gauche et une galerie d’images en grille à droite. Un bouton d’action en bas invite à en savoir plus ou à acheter.

LinkedIn

E-mail

Le pain d'Orsay

Comment plaire à tout le monde ?

Persona

Charte graphique — Logo

Une DA façon rive gauche.

Charte graphique — Couleur

Charte graphique — Typographie

Charte graphique — Photographie

Tadaaaam !!

Maquette

Version mobile

Rome ne s'est pas construite en un jour.

Wireframe — Section "Où nous trouver"

Version mobile

Wireframe — Section "réseaux sociaux"

Navigation

Ressources

Contact