Dark Fashion Lookbook Website – Figma + Framer + Art Direction

Matt

Matt Szyszka

📍 Context

NOIRFOLD is a conceptual fashion label born from rebellion — positioning itself as an anti-brand, where identity is erased and expression takes form through shadow and silhouette. They needed a lookbook-driven website that felt more like an immersive editorial than a traditional eCommerce site.

🎯 Goal

Design and build a digital experience that communicates the brand’s philosophy of anonymity, absence, and non-conformity — without relying on conventional UX/UI cues. The site had to feel cinematic, uncompromising, and entirely on-brand.

✍️ My Role

UI/UX Design (Figma)
Visual Direction + Typography System
Lookbook Layouts
Framer Development (Scroll-based transitions + responsiveness)
Motion direction (Subtle parallax + fade-ins)
Brand Strategy Translation → Digital Experience

⚙️ Process

1. Discovery & Brand Immersion
I immersed myself in NOIRFOLD’s manifesto and visual codes — minimal palettes, concealed faces, stark contrasts. The user experience needed to reflect a sense of mystery and intentional friction.
2. UX Wireframes with Narrative Flow
Instead of a typical eComm UX flow, I mapped a scroll-based narrative:
“BEYOND DEFINITION” → “COLLECTION OF THE UNSEEN” → “PHILOSOPHY” → “DISCOVERY.”
Each section acts like a visual poem, not a sales funnel.
3. Visual & Interaction Design (Figma)
Grid-based editorial layouts
High-contrast monochrome photography presentation
Dynamic typography scaling
Vertical rhythm guided by shadow and whitespace
Hover effects and transitions that feel like disappearing memories
4. Build & Motion in Framer
Used Framer to prototype and launch the live site
Scroll reveals, shadow overlays, and seamless transitions
Mobile-responsive with no compromise in mood or detail

✅ Outcome

Successfully translated an abstract, art-driven philosophy into a coherent, scroll-based digital journey
Drove strong engagement and time-on-site (users spent 2–3x longer browsing compared to standard lookbooks)
Resulted in features on niche fashion/art platforms
NOIRFOLD continues to grow its cult following among design-led consumers

🛠️ Tools Used

Figma · Framer · Jitter (for early animation tests) · Photoshop (image prep)

💬 “You managed to capture exactly what NOIRFOLD stands for — without ever saying it directly. The silence, the tension, the aesthetic — all of it is there.”

— NOIRFOLD Founder
Like this project

Posted Oct 29, 2025

Designed and built a cinematic, immersive website for NOIRFOLD, reflecting their anti-brand philosophy.