01
Type Pulse
Une typographie qui réagit à un contrôle.
Pulse. Une composition typographique à intensité réglable.
Le web,
à l’état d’essai.
Un atelier personnel pour explorer le design, les interactions et le mouvement avec Codex.
Champ d’interaction
Déplacez le point
Un geste · une réponse
Un terrain d’essai,
à taille humaine.
Moon Lab est un espace isolé où j’explore des idées d’interface, des interactions et des approches visuelles avec Codex.
Chaque expérience sert à apprendre, comprendre et affiner des techniques avant de décider si elles ont leur place ailleurs.
Expériences en cours
Six études de démonstration · interfaces, interaction, mouvement
Des idées en mouvement
à l’échelle d’un écran
02
Soft Orbit
Un champ de points d’encre guidé par le pointeur.
Passez le pointeur ou le doigt dans le champ.
03
Scroll Atlas
Une transition cartographique en couches au défilement.
Relief · couches · défilement
Les lignes se découvrent à mesure que le terrain défile.
04
Field Notes
Une composition éditoriale qui s’adapte au contenu.
Étude · 01
Matière
en mouvement
Des interfaces plus sensibles par une attention portée aux détails du mouvement.
01 / 03
05
Form / Feedback
Des états de validation clairs et sensibles.
06
Motion Study
Un tracé qui se révèle dans l’espace.
Le mouvement a une fonction
Trois micro-interactions pour des usages concrets et utiles.
Petits gestes
· grands effets
01
Retour
Un appui qui confirme l’action et donne un repère visuel immédiat.
Prêt
02
Origine
Un menu qui s’ouvre depuis son déclencheur et reste maîtrisé au clavier.
03
Révélation
Un tracé se dessine au passage pour guider le regard.
Une ligne à la fois
La matière des interfaces
Des éléments concrets, pensés pour des usages réels.
États · usage
· comportement
Boutons
Des états reconnaissables à chaque geste.
Champ & cases
Un libellé reste visible, le focus aussi.
Contrôles
Des commandes natives, avec une présentation cohérente.
Mouvement réduitRéglage de démonstration
Retour d’état
Le message décrit l’état; la couleur le renforce.
Exemple : préférence conservée localement.
Vérifiez le format de l’adresse.
En attente.
Du brief au terrain d’essai
Une méthode légère pour passer de l’idée à une interface mise à l’épreuve.
Cadrer · prototyper
· animer · évaluer
- 01
Cadrer
Clarifier l’intention, les usages et les limites du terrain.
- 02
Prototyper
Explorer rapidement des pistes d’interface et les tester en contexte.
- 03
Animer
Donner au mouvement une fonction lisible et mesurée.
- 04
Évaluer
Observer, ajuster et garder ce qui améliore l’expérience.
Quelques principes de travail
- Une interaction sert une intention.
- Le mouvement renforce la compréhension.
- La performance fait partie du design.
- L’accessibilité accompagne chaque état.
- Un prototype se teste et s’améliore.
Outils de conception
Du regard au geste,
puis au code.
- emil-design-eng
- Finition des interfaces et détails d’usage
- prototype
- Variantes interactives et exploration
- animate
- Mouvement intentionnel et micro-interactions
- impeccable
- Cohérence visuelle, accessibilité et responsive
Technologie
HTML · CSS · JavaScript natifs
Sans framework ni collecte de données.