Gnawhaus (Demo Project)
Note: This is a capability demo based on a real client project. Names, branding, and content have been modified to preserve client confidentiality.
🩸 Project Concept
Gnawhaus is an artist portfolio platform that merges a bold, aggressive aesthetic with professional functionality. The experience centers around sharp black-and-gold styling, clear commission tiers, and a dynamic gallery built to scale with the artist's work.
🎯 Project Goals
Design a high-impact visual identity rooted in stark contrasts
Create a commission booking system with pricing clarity
Build a flexible, filterable gallery for ongoing updates
Ensure performance and elegance across all devices
✍️ Design Approach
Visual Identity:
#050505 background with #E0B810 and #C8A40E accents for a premium, slightly abrasive contrast
Typography:
Space Grotesk chosen for its punchy geometry and edge
Branding:
Sharp SVG elements and metallic textures lend weight to the visual tone
UX:
Clear, deliberate flow from gallery to contact to commission
💎 Key Features
Metallic Logo System:
Premium SVG mark with animated shimmer—lightweight, scalable, and consistent across platforms
Commission Pricing Blocks:
Tiered system with visual hierarchy and animated hover states
SKETCH – $40
FULL COLOR – $100
Each tier is framed in gold, with icons and microinteractions to reinforce value
Dynamic Gallery Grid:
Responsive masonry-style layout
Category filters with smooth transitions
Low-lag image loads and SVG placeholders for speed
🧭 User Journey
Home → Gallery → Contact → Commission Inquiry
The navigation flow is intentionally streamlined, designed around artist visibility and immediate user action—whether it’s browsing or booking.
🎨 Typography System
Headings: Space Grotesk
Body: Space Grotesk (light + regular weights)
This single-font system keeps the design cohesive, while its wide spacing and clean lines enhance readability on dark backgrounds.
⚠️ Design Challenges
Legibility in Darkness:
Gold-on-black requires careful contrast tuning to ensure text remains accessible and comfortable to read across devices
Mobile Visual Density:
Maintaining the site’s dramatic flair without overwhelming small screens
Iconography & Performance:
Using SVGs instead of icon fonts for full control and crisp rendering
📈 Performance Highlights
97 Lighthouse Performance Score (desktop)
12KB CSS Bundle, minified and compressed
100% SVG icon implementation, no icon fonts or external assets
🔑 Takeaways
Bold Can Be Usable:
A visually loud aesthetic can still deliver clarity and conversion when carefully structured
Microperformance Matters:
Every asset—SVG, JS, image—is tuned for speed, ensuring no aesthetic decision compromises experience
Artist-First UX:
Prioritizing gallery access, contact flow, and commission transparency ensures the portfolio works for the creator, not just the viewer
0 likes · 7 views · May 8, 2025
Designed a bold artist portfolio platform with a dynamic gallery and commission system.
