Wyrmwares

Premium TTRPG Dice & Accessories with Fantasy Theme

[ Portfolio Demo ]

Role

UI/UX Design & Development

Timeline

3 Weeks

Visit Demo

View Live →

Project Overview

Wyrmwares is a fantasy-themed e-commerce platform specializing in premium TTRPG dice sets and tabletop gaming accessories. The design combines atmospheric fantasy elements with practical e-commerce functionality.

Project Goals

Enable product customization with ease
Showcase dynamic theme switching
Highlight animated components
Ensure accessibility and responsiveness

Design Process

Research & Strategy

Analyzed tabletop gaming communities and e-commerce sites to identify opportunities for combining fantasy aesthetics with practical shopping functionality.

Visual Identity

Developed a bold design system:

Color Palette:
#BB9AF7 #E0AF68 #F7768E
Typography: Space Mono for a tech-inspired feel
Interactive gradients and animations

Technical Implementation

Built with modern web standards:

Semantic HTML for accessibility
CSS Grid and Flexbox for responsive layouts
JavaScript for dynamic interactivity
Performance optimization techniques

Key Features

Theme Switching System

Dark Mode

Light Mode

Persistent theme preferences that respect system settings while allowing user control through an elegant toggle UI.

Product Customization

Metal Finish

Number Color

Interactive product customization system for dice sets, allowing users to personalize finish, style, and color options.

Immersive Shopping Experience

The Arcane Bazaar

Atmospheric shopping interface with fantasy-themed naming and intuitive filtering for product discovery.

User Experience

Navigation Flow

Shop

→

Product

→

Cart

Fantasy-inspired terminology creates an immersive shopping experience for tabletop gamers while maintaining clear e-commerce navigation patterns.

Typography System

Cinzel

Inter

Cinzel adds fantasy-themed elegance to headings while Inter provides excellent readability for product descriptions and details.

Interactive Elements

Hover Animations

Runic Dice

✦ 65.00

Subtle hover states with color transitions and elevation changes enhance usability and provide visual feedback.

Loading States

Processing Order

Animated loading states keep users informed during server operations and form submissions.

Technical Achievement

                            99
                            Accessibility Score
                            WCAG 2.1 AA Compliant
                        

                            95
                            Performance Score
                            Lighthouse Mobile
                        

                            12KB
                            CSS Bundle Size
                            Minified & Compressed
                        

Key Takeaways

Themed E-commerce

Immersive themed designs can enhance rather than hinder the shopping experience.

Performance Optimization

Optimized assets and efficient code ensure a smooth user experience across devices.

Accessibility First

Inclusive design is essential for creating a platform that works for everyone.