Satellite est le design d’un site de produit fictif présenté sous forme de prototype Figma interactif. Créer une interface web hautement interactive exige une planification et des tests rigoureux avant d’écrire la moindre ligne de code. Le défi consistait à conceptualiser un produit numérique fictif et à tracer une expérience utilisateur sans faille, sans s’appuyer sur un environnement de développement réel.
Mandat et objectif
Conceptualiser un produit numérique fictif et tracer une expérience utilisateur sans faille sous forme de prototype Figma interactif, sans s’appuyer sur un environnement de développement réel.
Rôle et responsabilités
Croquis basse fidélité, système de design dans Figma (grilles, typographie), architecture des composants et construction du prototype interactif.
Crédits
Projet scolaire de conception. Cette étude de cas conceptuelle a été réalisée à partir des designs de produit, de l’image de marque et des images du projet original Satellite sur Behance. Tous les droits sur la marque et les ressources originales appartiennent à leur créateur. Le système de design et le prototype sont faits par moi.
Utilisation d’IA
Aucune IA n’a servi à réaliser le projet : le système de design et le prototype ont été construits manuellement dans Figma. J’ai utilisé Claude Code seulement pour intégrer cette fiche au portfolio, à partir de mon étude de cas. Ma contribution personnelle comprend les croquis, le système de design, l’architecture des composants et le prototype interactif.
Étapes de production
-
Étape 1 : Identité visuelle & wireframes
J’ai commencé par des croquis basse fidélité pour établir l’architecture de base, puis je suis passée à Figma pour construire un système de design évolutif à l’aide de grilles strictes et d’une typographie brutaliste moderne.
-
Étape 2 : Architecture des composants
Pour garantir la maintenabilité du prototype, j’ai construit une architecture de composants rigoureuse avec des boutons en auto-layout, des états de survol interactifs et des superpositions dynamiques pour simuler une expérience de navigation réaliste.
-
Étape 3 : Prototype interactif
J’ai relié les écrans dans le moteur de prototypage de Figma : les composants interactifs et le smart animate reproduisent les micro-interactions et les animations déclenchées au défilement, sans JavaScript.
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
Simuler des micro-interactions complexes et des animations déclenchées au défilement uniquement dans le moteur de prototypage de Figma, sans JavaScript personnalisé.
Solutions
J’ai utilisé les composants interactifs avancés et le smart animate de Figma pour créer une expérience fluide et sans accroc qui imite un environnement de production réel.
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.