Craft
Visual explorations and motion studies that show interface craft. These are experiments, not Product Design case studies.
Visual explorations
- Neo-Brutalism · FinTech
Brutal
A high-density trading terminal with raw borders, hard shadows, and algorithmic option chains.
Demonstrates information density and hierarchy under a high-pressure visual language.
- Swiss Typography · Grid System
NYT Swiss Redesign
An editorial homepage rebuilt around baseline grid discipline and asymmetric whitespace.
Demonstrates typographic hierarchy, grid discipline, and responsive editorial structure.
- Spatial Computing · VisionOS
Emirates Vision Pro
A 3D spatial boarding pass with interactive card flips, live flight maps, and IFE seat selection.
Demonstrates spatial interaction behavior and depth as navigation.
- Tactile UI · Claymorphism
Nest Clay
A friendly smart-home interface with soft dome shadows and tactile ambient dials.
Demonstrates tactile feedback, visual affordance, and state clarity.
- Dark Mode · Information Density
Campus
A dark student workspace featuring interactive deep-work sparklines, course schedules, and GPA metrics.
Demonstrates dashboard hierarchy, information density, and responsive behavior.
- 8-Bit Design System · Game HMI
Kitchen Quest
A retro pixel-grid interface exploring fixed-grid layouts, chef selection, and XP reward loops.
Demonstrates system thinking through fixed-grid components and game-like feedback.
- Monospace CLI · DevSecOps
Retro Terminal
A CRT phosphor terminal login exploring scanline shaders and keyboard-first auth flows.
Demonstrates interface craft through keyboard-first auth states and constraint-driven styling.
Motion studies
- Micro-Interactions · Feedback Loops
Linear Interaction States
A tactile interaction system with hover physics, optimistic loading states, and success confirmations.
Demonstrates interaction feedback and state transitions.
- Continuous Scroll · Depth Scaling
Vision Pro Scroll Reveal
An Apple-style scrubbed scroll narrative transitioning smoothly from headline into spatial hardware.
Demonstrates motion as narrative progression and depth scaling.
- Emotional UI · Gamification
Pip Mascot State Machine
A character animation system driven by interaction state machines (idle, happy, celebrate, and level-up).
Demonstrates state-machine behavior and emotional feedback.
- Scroll Choreography · Narrative UX
Zenith Browser Reveal
A scroll-driven product story choreographing the transition from chaotic tabs to calm spaces.
Demonstrates scroll choreography as product storytelling.
- Spatial Continuity · View Transitions
Spatial Page Transitions
Ten directional screen transitions maintaining user orientation across deep navigation hierarchies.
Demonstrates spatial continuity and orientation across navigation.