Site du jour : Elle & Riley

Site du jour : Elle & Riley

Les sites de mode ne sont pas forcément innovants en matière d’expérience utilisateur et d’UI, mais quand ils sont jolis sobres, et un peu original, cela vaut le coup de les montrer.

Elle & Riley est une marque de mode spécialisée dans le cachemire de luxe. Elle est réputée pour proposer des vêtements et accessoires en maille de haute qualité, souvent caractérisés par des designs intemporels, élégants et confortables.

L’agence qui a fait le site a pris le parti de mettre en avant les collections de Elle & Riley à travers des images qui occupent tout l’espace de l’écran. Voici l’analyse qu’en fait Gemini.

1. Structure et Mise en Page (Layout)

• Design en écran scindé (Split Screen) : La page utilise une division 50/50, ce qui est une tendance forte dans le e-commerce de luxe. Cela permet de promouvoir deux catégories ou ambiances distinctes (ici, le prêt-à-porter vs les accessoires) avec une importance visuelle égale, sans hiérarchiser l’une par rapport à l’autre.
• Symétrie : L’équilibre visuel est parfait, avec le logo centré servant de point d’ancrage, et les éléments de navigation répartis équitablement à gauche et à droite.

2. Typographie et Hiérarchie Visuelle

• Mélange de polices (Font Pairing) :
  • Les titres (“Fine Cashmere”, “The Perfect Pair”) utilisent une police avec empattements (Serif), élégante et classique, qui évoque le luxe, la tradition et la qualité éditoriale (style magazine).
  • Les menus et boutons utilisent une police sans empattements (Sans-Serif), moderne et géométrique, assurant une lisibilité optimale pour les éléments fonctionnels.
• Hiérarchie : La taille des polices guide clairement l’œil : d’abord l’image, puis le titre de la catégorie, et enfin le bouton d’action.

3. Palette de Couleurs et Esthétique

• Minimalisme chromatique : L’interface repose sur des tons neutres (blanc, gris, beige). Cette absence de couleurs vives dans l’UI elle-même permet de mettre en valeur la texture des produits et la petite touche de rouge (le motif lèvres) sur la chaussette.
• Transparence : Le fond du header est transparent, laissant les images occuper tout l’espace (full bleed). Cela crée une immersion immédiate, bien que cela puisse parfois poser des problèmes de lisibilité (contraste) si l’image derrière le texte est trop claire (notamment pour le menu de gauche).

4. Navigation et Éléments Interactifs

• Menu “Hamburger” déconstruit : Au lieu d’un menu caché ou d’une barre horizontale classique, les liens principaux (Shop, New Arrivals, etc.) sont listés verticalement à gauche. C’est un choix éditorial qui rappelle le sommaire d’un magazine.
• Icônes standardisées : À droite, les icônes (recherche, compte, favoris, panier) suivent les conventions standard du e-commerce (Loi de Jakob), ce qui rassure l’utilisateur et facilite l’utilisation sans apprentissage.
• Appels à l’action (CTA) : Les boutons “Shop Now” sont des rectangles blancs à bords nets avec texte noir. Le contraste élevé les rend immanquables tout en restant chics.

5. Bilan Global L’UI est conçue pour communiquer le “luxe discret” (Quiet Luxury). Elle privilégie l’espace négatif, la photographie de haute qualité et une typographie raffinée pour suggérer que la marque vend plus qu’un vêtement : elle vend un style de vie apaisé et sophistiqué.

Découvrir le site

Découvrir nos prestations en design d’interfaces