Dead Luxe — Demo Luxury Fashion E-Commerce Platform
Luxury Fashion E-commerce with Mortality Aesthetics.
Overview
Client: Self-Directed Demo Project
Industry: Luxury Fashion & Conceptual E-Commerce
Role: Designer & Developer
Timeline: 2 Weeks
Tech Stack: HTML5, CSS3, Vanilla JavaScript, LocalStorage, SVG Branding, Custom Photography
Dead Luxe is a self-directed demo project exploring how narrative-driven, mortality-inspired branding can intersect with luxury e-commerce. The goal was to create a platform that felt less like a typical shop and more like a time-worn atelier brought to digital life, where browsing products feels like unearthing artifacts rather than scrolling through a catalog.
Objectives
- Evoke the atmosphere of memento mori and patina through restrained digital design.
- Transform product exploration into a narrative, archaeological discovery.
- Build credibility with fashion-forward clients by pairing sophistication with restraint.
- Seamlessly integrate custom cart and gallery systems without sacrificing performance or accessibility.
Process
Research & Discovery
Studied mourning attire history, memento mori traditions, and luxury shopping behaviors. Identified storytelling, texture, and restraint as the core design pillars to distinguish Dead Luxe from conventional fashion e-commerce.
Visual Language & Brand System
- Typography: Playfair Display (heritage luxury) + Montserrat (modern clarity).
- Logo: Scalable SVG for precision and timelessness.
- Palette & Texture: Desaturated tones, subtle patina, and cinematic photography to evoke timeworn elegance.
Technical Implementation & Animation
- Custom Cart System: Persistent state via LocalStorage, dynamic updates, animated confirmations.
- Horizontal Lookbook Gallery: Narrative-first, immersive product discovery.
- Cinematic Animations: Hover reveals, transitions, and horizontal scroll for tactility.
- Performance & Accessibility: Semantic HTML, ARIA roles, optimized images, and fast LCP.
- Original Photography: Directed and retouched custom imagery to reinforce concept.
Outcome
- Performance: 95 Lighthouse Performance Score (desktop), 0.9s Largest Contentful Paint.
- Accessibility: 97 Lighthouse Accessibility Score (WCAG 2.1 AA compliant).
- Experience: SPA-like flow with stateful cart and seamless navigation.
- Narrative Integration: Product pages read like poetic obituaries, positioning the brand as both philosophical and stylish.
Key Metrics & Impact
- Custom Cart System — Persistent cart with dynamic quantity management and cinematic confirmation overlays.
- Horizontal Lookbook Gallery — Narrative-driven horizontal scroll for editorial discovery.
- Narrative Product Presentation — Product copy as “obituaries,” with hover interactions revealing details.
- Philosophical Journal/Manifesto — Brand-building content elevating Dead Luxe beyond commerce.
Tools & Tech
- Design Challenges: Darkness vs. Desirability — Balancing decay-inspired aesthetics with aspirational luxury.
- Digital Craftsmanship: Communicating artisanal detail through interaction design and photography.
- Elegance in Restraint: Avoiding cliché gothic motifs, focusing instead on texture and typography.
- Technical Highlights: Custom Cart & Modal Architecture — Vanilla JS with persistent state and dynamic updates.
- Cinematic Animation System: Advanced CSS/JS transitions for tactile interactivity.
- Performance & Accessibility: Optimized imagery, semantic markup, ARIA roles, and inclusive design.
Reflection
Dead Luxe was an exploration in turning commerce into narrative ritual. By merging luxury design systems, mortality-inspired aesthetics, and bespoke technical architecture, this project pushes e-commerce beyond the transactional, positioning the brand as both a conceptual statement and a functional shop.