Gnawhaus
Dark Character Artist Portfolio & Commission System
[ Adapted from Client Work ]
Project Overview
Gnawhaus is an artist portfolio that combines aggressive aesthetics with professional functionality. The design embraces a stark black and gold palette while maintaining clear pricing and easy commission access.
This case study is an anonymized adaptation of a real client project, with branding and specific content modified to protect client confidentiality while preserving the core design approach.
Project Goals
- Design a striking brand identity
- Create an efficient commission system
- Build a flexible gallery system
- Optimize for mobile devices
Design Process
Brand Identity
Developed a sharp, memorable aesthetic:
- Color Palette:
#050505 #E0B810 #C8A40E
- Typography: Space Grotesk for edge
- SVG animations & metallic effects
Commission System
Streamlined the booking process:
- Clear tier structure
- Transparent pricing
- Simple contact flow
- Mobile-optimized forms
Technical Stack
Built for speed and flexibility:
- Vanilla JS for smooth transitions
- CSS Grid for responsive layouts
- SVG optimization
- Progressive enhancement
Key Features
Gold Identity
Premium metallic SVG logo with animated shimmer effects built for versatility across platforms.
Commission Tiers
Clear pricing structure with distinctive gold accents highlights premium options.
Gallery System
Dynamic masonry grid gallery with category filtering and consistent gold theming.
Design Challenges
Dark Balance
Creating high-contrast, readable text while maintaining the stark black and metallic gold aesthetic.
Social Links
Designing an intuitive system to showcase art samples and direct followers to various social platforms while maintaining brand consistency.
Mobile Experience
Ensuring the dramatic aesthetic translates seamlessly to mobile, where most social media traffic originates.
User Experience
Clear Navigation Flow
Simple, direct paths to gallery content and social media profiles where visitors can follow the artist's work.
Typography Decisions
Space Grotesk provides edgy character while maintaining excellent readability even at smaller sizes on dark backgrounds.
SVG Implementation
The site uses lightweight SVGs for gallery placeholders, enabling fast loading and perfect rendering at any scale.
<svg viewBox="0 0 64 64" fill="none" stroke="black" stroke-width="2">
<path d="M32 8L56 32L32 56L8 32L32 8Z"/>
<path d="M32 16L48 32L32 48L16 32L32 16Z"/>
<circle cx="32" cy="32" r="8" fill="none"/>
</svg>Each gallery placeholder is under 200 bytes, compared to 20-30KB for a typical image placeholder.
Technical Achievement
Key Takeaways
Brand Balance
Strong aesthetics can coexist with clear information hierarchy.
SVG Performance
Optimized vector graphics provide both flexibility and speed.
Mobile First
Starting with mobile constraints leads to better overall UX.