Étude de cas · App mobile & Desktop · UI Design
VisionXpro2,
l'interface des lunettes AR.
Conception d'un site produit pour des lunettes de réalité augmentée haut de gamme. Un design sombre et technique, avec une identité visuelle cyan, pensé pour convertir et impressionner.
Site produit responsive — HTML / CSS / JS, animations GSAP. Voir le prototype Figma ↗
Application companion interactive — contrôle du HUD en temps réel, calibrage des lunettes, notifications.
Un produit tech qui doit inspirer confiance et désir
VisionXpro2 est un concept de lunettes de réalité augmentée ultra-légères. L'enjeu du design était double : communiquer la performance technique (Bluetooth 5.3, résistance IPX4, titane et verre) tout en créant un désir d'achat immédiat. Un site produit qui ressemble davantage à Apple qu'à une fiche technique.
Design sombre, accents tech, hiérarchie claire
Un hero immersif avec le produit en vedette
Les lunettes occupent toute la largeur de l'écran sur fond sombre. Le titre cyan en bas crée un contraste fort et ancre visuellement l'identité du produit dès l'arrivée.
Cyan comme couleur d'action unique
Une seule couleur vive — le cyan (#00D4E8) — pour tous les éléments interactifs : bouton CTA, tags specs, icônes Bluetooth. Cette contrainte crée une cohérence immédiate et renforce le sentiment high-tech.
Les specs comme argument de vente
La section "Excellence Technique" liste les caractéristiques sous forme de tableau épuré — Bluetooth, IPX4, matériaux — avec des étiquettes cyan. Les données techniques deviennent des arguments visuels, pas une liste aride.
Une application mobile pour piloter les lunettes
Au-delà du site produit, j'ai conçu l'application companion des VisionXpro2 : un cockpit complet pour piloter l'affichage tête haute et configurer l'appareil, dans la même identité cyan.
Un contrôleur HUD en direct
Aperçu temps réel de l'affichage projeté dans le verre — navigation, santé, messages, météo — façon Even Realities, sur une vue immersive.
Calibrage & réglages séparés
Tout le matériel (optique, son, affichage, firmware) dans « Calibrage » ; tout le système (compte, langue, confidentialité, thème clair/sombre) dans « Réglages ».
Deux interfaces réelles, codées sans framework
Site desktop animé (GSAP)
Le site produit est intégré en HTML/CSS/JavaScript avec des animations GSAP au défilement, responsive du mobile au desktop.
HUD en canvas temps réel
L'aperçu du HUD dans l'app est rendu en <canvas> JavaScript : scène animée, overlays de données et effet de lentille — sans librairie.
Thème, langues & chargement à la demande
Thème clair/sombre et sélecteur multilingue en JS natif, et aperçus interactifs chargés au clic pour préserver la performance.
Ce que j'ajouterais
Le prototype couvre le parcours produit principal. Deux axes d'approfondissement naturels :
Une démo AR interactive
Permettre à l'utilisateur de visualiser les lunettes en réalité augmentée via la caméra de son téléphone, directement dans le navigateur — le produit lui-même comme outil marketing.
Un configurateur de couleurs
Choisir la finition des branches (titane brossé, noir mat, doré) avec un rendu 3D en temps réel — l'étape d'avant la pré-commande pour augmenter l'engagement.