Side by Side
A promotional website for a Latvia-made tabletop RPG system. Built to showcase the game world, demonstrate mechanics through interactive examples, and connect its growing player community.
Year
2024
Role
UX/UI Design, Front-End Development
Technologies
Project Gallery
The Problem
Traditional RPG websites prioritize rules and purchasing over atmosphere. For Side by Side, this creates a gap between the game’s actual experience and its first impression. The site needed to set tone and expectations early, so visitors understand the kind of game this is before engaging with detailed content.
Design Direction
Dark Immersive Theme
The site uses a subdued, dark palette to support the game’s serious tone while allowing character artwork to dominate the first impression. The interface remains intentionally minimal, giving the illustrations space to establish atmosphere and identity before text or mechanics are introduced.
Typography Pairing
Seagram for the logo and headers — ornate and hand-crafted, evoking the fantasy genre without becoming a cliche. Baskerville for body text — classical, highly readable, fitting for long-form game descriptions and lore. Oswald for UI labels and navigation — clean and functional, staying out of the way.
Scroll-Driven Storytelling
Locomotive Scroll drives the page flow, creating parallax effects and section-by-section reveals. The experience unfolds as you scroll — hero artwork, game philosophy, interactive demo, community news — mirroring how a tabletop session builds momentum from introduction to action.
Technical Highlights
- → Markdown-based content management. News posts, FAQ entries, and game materials are authored in markdown with YAML frontmatter. A custom DAO layer parses and serves content at build time via static generation — no CMS dependency, full version control over every piece of content.
- → Interactive gameplay demonstration. A dedicated example page walks through character cards, stat displays, dice mechanics, and dialogue sequences using Framer Motion animations. Instead of describing how the game plays, the site shows it — animated step by step.
- → Locomotive Scroll integration. A custom React hook and context provider wrap the scroll library, enabling smooth scrolling, parallax, and scroll-triggered animations across every section. A ResizeObserver keeps scroll calculations accurate on viewport changes.