Gnawhaus Artist Portfolio Platform Design

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.

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

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

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

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.

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.

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

97 Lighthouse Performance Score (desktop)

12KB CSS Bundle, minified and compressed

100% SVG icon implementation, no icon fonts or external assets

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