Mademoiselle Fée est une boutique de robes de mariées à Angers avec un site vitrine sur lequel j'avais mis en place la vente en ligne il y a quelques années. En 2021, Blandine et sa collaboratrice Romane m'ont confié la refonte de leur site.
Objectifs visuels
Créé en 2014, le design du site paraissait assez daté vu de 2021 :
- Une mise en page inadaptée aux écrans d'aujourd'hui (mobile, haute définition),
- Des modèles de page rigides, limitant la capacité de créer des pages originales selon les besoins de la boutique.
- Des visuels étriqués malgré leur importance dans la démarche client.
L'objectif était donc de moderniser la mise en page, de réchauffer l'atmosphère générale du site et de mettre en avant les visuels de haute qualité.
Objectifs techniques
Côté technique, le site reposait sur un thème parent qui n'était plus mis à jour depuis plusieurs années, rendant difficile toute mise à jour de WordPress sans risquer de créer des bugs.
Il fallait donc recréer un thème personnalisé indépendant, plus facile à maintenir dans le futur. Cette refonte était également l'occasion de construire les pages en capitalisant sur les fonctionnalités offertes par le nouvel éditeur de contenu de Wordpress, Gutenberg, bien plus souple que l'éditeur "classique".
Approche
Design
Le site historique étant basé sur une palette autour de la couleur grise issue du logo, il fallait introduire de nouvelles teintes pour obtenir une palette suffisamment riche avant de travailler les éléments graphiques du site. Cette nouvelle palette a donc été développée à partir du design d'intérieur du showroom Mademoiselle Fée : les couleurs ont été réchauffées grâce à l'influence de la teinte terracotta, le poids du gris dans la palette a été réduit, et des couleurs d'accent ont été introduites (vert empire, marron-brun) pour la compléter.
Côté typographie, pour arriver à un rendu plus "moderne", il fallait redéfinir l'importance visuelle de Playfair Display. Afin de se détacher de l'aspect classique apporté par cette police à empattement, son usage dans le corps de texte a été remplacé par une police sans empattement, plus légère. Seuls les éléments d'interface qui ressortent et confortent le branding (titres, boutons, éléments de navigation) utilisent désormais la police historique.
Une fois le langage graphique validé, j'ai créé deux maquettes de proposition de page d'accueil, suivant chacune une piste différente mais utilisant les mêmes références graphiques fondamentales.
Développement
Après quelques retouches sur la maquette validée, j'ai pu démarrer le travail d'intégration en construisant un thème WordPress sur mesure.
Les différents éléments composant les pages (blocs de couleur, boutons, titres, galeries photo, etc.) ont été mis en forme sur la base des blocs existants de l'éditeur Gutenberg.
Certains blocs personnalisés, comme les blocs de lien vers les collections, visibles sur la page d'accueil, ont dû être réalisé spécialement pour le site sous la forme d'une extension.
J'ai ainsi réalisé un modèle de chaque page-type directement dans Gutenberg, puis, après retouches et validation, décliné ces modèles pour réintégrer le contenu existant. Étant reparti de zéro pour cette version du thème, j'ai dû également remettre en forme toutes les pages de la boutique en ligne en adaptant le rendu fourni par WooCommerce au nouveau design.
Accompagnement
Une grande partie de ce projet a été consacré à l'accompagnement des clientes sur la prise en main de leur nouveau site internet avec, entre autres :
- Formation sur la nouvelle interface d'édition,
- Accompagnement sur la conformité RGPD et mise en place des pages légales,
- Prise en charge de tous les réglages techniques, dont le changement d'hébergeur web,
- Révision du fonctionnement du formulaire de contact pour éviter les spams.
Résultat
Le nouveau site mademoisellefee.fr est en ligne depuis debut 2022.
