Tous les projets

Deskmos

E-commerce

Le studio de setup : choisis ton univers, compose en 3D à l'échelle réelle, reçois tout en une commande.

Voir le sitenova-desk-amber.vercel.app
Rôle
Produit, 3D & full-stack
Catégorie
E-commerce
Stack principale
Next.js · Three.js / R3F · TypeScript
01Le contexte

Composer un bureau, aujourd'hui, c'est dix sites, dix livraisons, et la découverte à l'arrivée que rien ne va ensemble. Les photos produit sont toutes prises dans des univers différents, les dimensions sont écrites en petit, et personne ne dit si l'écran de 27 pouces tiendra sur le plateau de 120. Le doute fait abandonner le panier. Ou pire : il fait acheter, puis renvoyer.

02Le problème et la réponse
Le problème

Impossible de visualiser et de composer son setup avant d'acheter, ni d'être sûr que les pièces sont compatibles entre elles. Et tout s'achète en ordre dispersé.

La solution

Trois univers complets (Lumen, Volt, Mochi), chacun avec ses packs. Un Studio 3D à l'échelle réelle où chaque pièce se remplace en direct, et une seule commande à la fin, expédiée d'Europe.

03Le produit, écran par écran
Captures du site en ligne
Ouvrir le site
nova-desk-amber.vercel.app
Accueil — Une promesse en trois mots (choisis, compose, reçois) et les trois univers présentés comme trois mondes complets, pas trois filtres de couleur.
01 / 08 · Accueil

Une promesse en trois mots (choisis, compose, reçois) et les trois univers présentés comme trois mondes complets, pas trois filtres de couleur.

Captures d'écran du site en production, prises telles quelles. Les prix et délais affichés sont ceux du site au moment de la capture.

04Les partis pris
01

Des univers, pas un catalogue

Minimal, Gaming ou Kawaii : chaque univers est une palette, une typographie et un choix de pièces cohérents entre eux. Le visiteur choisit une ambiance avant de choisir un produit. C'est ce qui enlève le doute.

02

Une 3D fidèle plutôt que belle

Un bureau de 140 cm mesure 140 cm, un écran 27" mesure 61 cm. Les formes sont simplifiées, les dimensions sont vraies : le Studio sert à voir l'encombrement et les proportions, pas à remplacer une photo.

03

Le système comme navigation

Sept orbites autour d'un soleil : le bureau, la surface, l'écran, le clavier, le rangement, les détails, la lumière. On avance d'orbite en orbite, le total se met à jour, et rien n'est imposé : on peut garder son propre bureau.

04

Écrire d'où viennent les pièces

Pas d'avis inventés ni de compte à rebours. Une page dit ce qui est expédié d'Europe, ce qui vient d'un partenaire, et comment il est rémunéré. La confiance se construit en l'écrivant.

05La planche de design
// palette
#F7B54A
#7C86B0
#0A0A0C
#F5F5F7
// échelle typographique
AaDisplay · 600
AaTitre · 550
AaCorps · 400
// partis pris visuels
  • 01Un fond encre (#0F111A) et une seule couleur chaude, le « nova » (#F7B54A) : c'est le soleil du système, il n'apparaît que là où on agit.
  • 02Trois univers, trois palettes complètes : Lumen crème et sarcelle, Volt noir et magenta, Mochi rose et lavande. Même structure de page, monde différent.
  • 03Unbounded pour les titres, Instrument Sans pour le texte, DM Mono pour tout ce qui se mesure : prix, dimensions, délais. On lit un chiffre avant de lire un mot.
  • 04L'orbite est le motif de la marque : dans le logo, autour des scènes, et comme navigation du Studio. Une seule métaphore, poussée jusqu'au bout.
06Pourquoi cette stack
Three.js / R3F
React Three Fiber pilote la scène 3D avec les mêmes composants React que le reste de l'interface. Le Studio et le panier partagent un seul état.
Next.js
Les pages univers et packs doivent être indexables et rapides ; la 3D se charge par-dessus, jamais à la place.
TypeScript
Dimensions, compatibilités, prix : des données qui se contredisent vite si rien ne les tient. Chaque pièce est typée, chaque orbite aussi.
Vercel
Une URL par branche, un déploiement par commit. Le Studio se teste sur un vrai téléphone dix minutes après le changement.
Next.jsThree.js / R3FTypeScriptVercel

Un projet du même genre ?

Décrivez-moi votre situation. Je vous dis ce qui est réaliste,
dans quel ordre, et ce que je ferais différemment.

amauryandrade1998@gmail.com