Gnawhaus Artist Portfolio Platform Design

Cain

Cain A.

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
Like this project

Posted May 8, 2025

Designed a bold artist portfolio platform with a dynamic gallery and commission system.