Limbo Art Studio
A Research-Driven Approach to Online Art Gallery Design
Overview
Limbo Art Studio is a contemporary online art gallery designed with a research-backed approach to UI/UX that prioritizes user satisfaction and engagement. Drawing from academic research on digital art platforms, this project demonstrates how evidence-based design principles can create an intuitive, visually compelling experience for art collectors and enthusiasts.
Research Foundation
This project was informed by Wijaya et al.'s (2021) research on "The Effect of UI/UX Design on User Satisfaction in Online Art Gallery," which identified four critical factors for successful online art gallery design:
- Web system must be simple - Minimize cognitive load and visual clutter
- Web system must be consistent - Maintain predictable patterns throughout
- Web system must work properly - Ensure reliable, bug-free functionality
- Web system must fulfill user requirements - Address actual user needs and expectations
The research compared successful platforms like ArtStation and DeviantArt, revealing that users prefer clean, light interfaces with responsive design and features that directly support their goals. These findings directly influenced every design decision in Limbo Art Studio.
Key Research Insights Applied
- Responsive Design: The research emphasized that responsive websites make it easier for users to interact with content across devices
- Visual Aesthetics: Users tend to prefer lighter, cleaner designs over dark themes for art gallery contexts
- Feature-Rich Experience: Supporting features (filtering, registry, detailed artwork views) significantly improve user satisfaction
- Performance: Proper functionality and smooth interactions are non-negotiable for positive UX
Design Principles
1. Simplicity First
The interface uses minimal navigation (Gallery, Info, Registry) and a clean layout that lets the artwork speak for itself. This aligns with research showing that simple systems reduce cognitive load and increase user satisfaction.
- Fixed header with only essential navigation
- Single-page application architecture for seamless transitions
- Minimal text, maximum visual impact
- Generous white space to prevent visual overwhelm
2. Consistency Throughout
Every interaction follows predictable patterns:
- Hover states use uniform opacity transitions (0.3s ease)
- Typography maintains consistent hierarchy
- Color palette limited to black, white, and accent grays
- Grid layouts remain consistent across breakpoints
3. Functional Excellence
Informed by the research emphasis on proper functionality:
- Smooth page transitions with fade-in animations
- Responsive design that adapts from mobile to desktop
- Interactive filtering system for artist-specific browsing
- Real-time form validation and success feedback
- Google Sheets integration for reliable data persistence
4. User-Centric Features
Based on research into user requirements for online galleries:
- Artist Filtering: Quick access to specific artist portfolios
- Collector Registry: Formalized system for purchase tracking and community building
- Detailed Artwork Pages: Comprehensive information including medium, dimensions, and pricing
- Interactive Home Experience: Engaging pixel-based interaction on desktop (with mobile fallback)
Key Features
Interactive Pixel Eraser (Desktop)
A unique, engaging home page experience where users can "erase" a pixelated artwork to reveal the "LIMBO" logo beneath. This creates an immediate emotional connection and demonstrates technical sophistication.
How it works:
- Randomly selects artwork from the collection on page load
- Converts image to pixel grid with customizable pixel size
- Tracks mouse movement to erase pixels within radius
- Protects logo text area from erasure
- Click to reset and try again
UX Rationale: Creates memorable first impression while maintaining simplicity (mobile users see static logo). This addresses research findings about the importance of engaging user experiences.
Filterable Gallery
Clean grid layout with artist-based filtering:
- Responsive grid adapts from 1 column (mobile) to multi-column (desktop)
- Smooth hover effects indicate clickability
- Instant filtering with no page reload
- Maintains visual consistency during transitions
Collector Registry
Integration with Google Sheets for purchase tracking:
- Clean form design with clear required fields
- Real-time submission to cloud storage
- Success message confirmation
- Optional fields for flexible data collection
Responsive Design
Mobile-first approach with breakpoint at 768px:
- Navigation adapts from horizontal to stacked
- Gallery grid collapses to single column
- Interactive features gracefully degrade
- Touch-friendly interaction targets
Technical Implementation
Architecture
Single Page Application (SPA) Pattern provides instant navigation without page reloads, improving perceived performance and user satisfaction.
Performance Optimizations
- CSS-Only Animations: Fade transitions use GPU-accelerated transforms
- Event Delegation: Efficient event handling for gallery items
- Lazy Loading Ready: Structure supports future image lazy loading
- Minimal Dependencies: No frameworks = faster load times
Accessibility Considerations
- Semantic HTML structure
- ARIA labels for interactive elements
- Keyboard navigation support
- High contrast text for readability
- Scalable typography with rem units
User Experience Decisions
Color Palette
Choice: Clean white background with black text and gray accents
Research Justification: Wijaya et al. found that users "tend to dislike dark websites because dark websites make the website less attractive" in art gallery contexts. The light palette also allows artwork colors to remain true without color cast interference.
Typography
System Font Stack: Uses native fonts that load instantly, look familiar to users on their platform, and maintain brand neutrality that lets artwork shine.
Navigation
Fixed Header Design: Always accessible without scrolling, with thin profile and unobtrusive border separation. Consistent, simple navigation supports the research finding that systems must be "simple and consistent" for optimal user satisfaction.
Form Design
Collector Registry Approach: Clear visual hierarchy with labels and inputs, inline validation feedback, success state prominently displayed, and optional fields clearly marked. Reduces friction in purchase process while building collector community.
Results & Insights
Design Validation Against Research
| Research Factor | Implementation | Evidence |
|---|---|---|
| Simplicity | Minimal navigation, clean layouts | 3 main pages, consistent spacing |
| Consistency | Uniform transitions, typography | All hover states 0.3s, single font family |
| Proper Function | Tested interactions, responsive | Form validation, smooth animations |
| User Requirements | Filtering, registry, details | Artist filter, collector system, artwork pages |
Technical Performance
- Page Load: < 2 seconds (optimized assets)
- Interaction Responsiveness: Immediate feedback on all interactions
- Mobile Performance: Graceful degradation maintains functionality
Lessons Learned
What Worked Well
- Research-Driven Design: Starting with academic research provided clear, validated design principles
- Vanilla JavaScript: No framework dependency meant faster development and lighter codebase
- Progressive Enhancement: Desktop interactions enhance but mobile experience remains solid
- Simple Backend: Google Sheets integration provides reliable data storage without complex infrastructure
Challenges Overcome
- Pixel Eraser Performance: Initial implementation caused frame rate drops; optimized with requestAnimationFrame
- Responsive Images: Maintaining artwork aspect ratios across breakpoints required careful CSS
- Form Validation: Balancing user-friendly feedback with proper validation took iteration
Key Takeaways
- Research matters: Academic studies provide valuable frameworks for practical design
- Simplicity scales: Clean, minimal design works across contexts and devices
- Consistency builds trust: Predictable patterns make users comfortable
- Function over flash: Reliable interactions trump impressive but buggy features
- Know your users: Understanding actual needs beats assumed requirements
References
Wijaya, A., Kefry, Wihalim, W., & Gunawan, A. A. S. (2021). The Effect of UI/UX Design on User Satisfaction in Online Art Gallery. 2021 1st International Conference on Computer Science and Artificial Intelligence (ICCSAI), 120-125. https://doi.org/10.1109/ICCSAI53272.2021.9609764