Satellite est le design du site d’un produit fictif, présenté en prototype Figma interactif. Le défi : imaginer le produit et tout le parcours de l’utilisateur avant d’écrire une seule ligne de code.
Mandat et objectif
Imaginer un produit numérique fictif et tout son parcours utilisateur dans un prototype Figma interactif, sans environnement de développement.
Rôle et responsabilités
Recherche et moodboard, croquis basse fidélité, système de design dans Figma (grilles, typographie), architecture des composants, construction du prototype interactif et contrôle de qualité.
Crédits
Projet scolaire. Le design du produit, l’image de marque et les images viennent du projet original Satellite sur Behance, et tous les droits appartiennent à leur créateur. Le système de design et le prototype sont faits par moi.
Utilisation d’IA
Aucune IA n’a servi au projet : j’ai tout construit manuellement dans Figma. J’ai seulement utilisé Claude Code pour intégrer cette fiche au portfolio. Ma contribution personnelle comprend la recherche, le moodboard, les croquis, le système de design, les composants, le prototype et le contrôle de qualité.
Étapes de production
-
Étape 1 : Recherche et moodboard
Satellite est un casque d’écoute qui se transforme en haut-parleur portable, pour écouter de la musique partout. À partir de produits semblables et de photos, j’ai résumé son ambiance en trois mots, rythme, multicolore et épuré, puis j’ai monté un moodboard d’interfaces, de typographies, de couleurs et d’ondes sonores.
-
Étape 2 : Identité visuelle & wireframes
J’ai commencé par des croquis pour poser la structure, puis j’ai construit dans Figma un système de design avec des grilles strictes et une typographie brutaliste moderne.
-
Étape 3 : Architecture des composants
J’ai construit des composants réutilisables (boutons en auto-layout, états de survol, superpositions) pour que la navigation semble réelle et que le prototype reste facile à modifier.
-
Étape 4 : Prototype interactif
J’ai relié les écrans dans Figma : les composants interactifs et le smart animate reproduisent les micro-interactions et les animations au défilement, sans JavaScript.
-
Étape 5 : Contrôle de qualité
Pour finir, j’ai fait un contrôle de qualité du fichier en cinq volets : design system, cohérence visuelle, prototype, nomenclature et structure. J’ai vérifié entre autres les instances, la grille, les espacements et le parcours utilisateur. Le fichier se termine par une réflexion sur mes choix : un style technologique épuré, un peu comme Apple, avec des éclats de couleur parce que le produit est fait pour passer de bons moments.
Technologies
-
Système de design, composants en auto-layout et prototype haute fidélité construits entièrement dans Figma.
-
Les composants interactifs avancés et le smart animate de Figma reproduisent des micro-interactions et des animations déclenchées au défilement, sans JavaScript.
Défis
Faire des micro-interactions et des animations au défilement seulement dans Figma, sans aucun JavaScript.
Solutions
J’ai utilisé les composants interactifs et le smart animate de Figma pour que le prototype réagisse comme un vrai site.
Résultat final
Un prototype Figma haute fidélité qui simule une navigation réaliste : composants en auto-layout, états de survol, superpositions et micro-interactions.