Domaine Boudau

Le Domaine Boudau est un domaine viticole dont le site nécessitait un rafraîchissement. J'en ai maquetté la refonte graphique dans le cadre de ma formation d'UX/UI Designer à l'école L'Idem, au Soler: un projet fictif, réalisé en environ quatre semaines, l'ergonomie d'alors n'étant pas propice à un processus de vente optimal. C'est le pendant de la refonte Delmas Musique, l'autre refonte graphique que j'ai menée en 2020: même format de livrable, tout autre univers.

De l'étude concurrentielle aux écrans

Nous avons d'abord étudié les interfaces mises en place par la concurrence, domaines de la région comme grossistes de la vente en ligne. Cette étape a permis d'établir un moodboard, qui a servi de base à la création du web design avant sa déclinaison en maquettes. L'ordre compte: on regarde ce qui existe, on en tire une intention visuelle, on met en pages ensuite.

Les écrans couvrent le parcours d'achat de bout en bout. L'accueil s'ouvre sur une photographie de vignes plein cadre et la signature du domaine, Suivent une gamme mise en avant avec son millésime, son appellation et son prix d'entrée, et une sélection de bouteilles portant leurs macarons de concours, avec ajout au panier direct.

La boutique adosse une colonne de filtres de sélection, par catégorie de vins et par couleur, à une grille de produits avec compteur de résultats et tri. La fiche produit dispose les caractéristiques en étoile autour de la bouteille, reliées par des pointillés: couleur, année et note de dégustation d'un côté, appellation et vendanges de l'autre. La version responsive reprend tout cela, jusqu'au tunnel de commande (coordonnées, adresse de livraison, moyen de paiement) et aux avis clients notés.

Adobe XD, Photoshop, Illustrator

Les maquettes sont faites sous Adobe XD, un outil de conception d'interface qui travaille par plans de travail, un par écran, et qui permet de relier ces écrans entre eux pour simuler la navigation avant qu'une ligne de code n'existe. Maquetter une version mobile y revient à reposer les mêmes contenus sur des plans de travail à la largeur d'un téléphone. L'exercice force à trancher tôt: ce qui reste visible, ce qui se replie, ce qui passe derrière un menu.

Adobe Photoshop et Adobe Illustrator encadrent ce travail. Photoshop est un éditeur d'images matricielles: il manipule des pixels, donc des photographies, avec ce que cela suppose de détourage, de recadrage et de retouche. Illustrator est un éditeur vectoriel: il manipule des points et des courbes, qui se redimensionnent sans perte, ce qui en fait le terrain des logos et des pictogrammes. La mention UI/UX qui les accompagne dans la liste n'est pas un logiciel mais la nature de la mission: le livrable, ici, ce sont des écrans, et la fiche est classée en concept UX.

Projet de formation, donc fictif, mené sur environ quatre semaines. Le déroulé complet est visible sur Behance.