Riot Games Website Design
Riot Games is an American video game developer, publisher, and esports tournament organizer, most known for their game League of Legends. League is one of the most played PC games in the world and a key driver for the growth of esports.
This mock website had to include all of the variables for LeagueSpot’s tournament creation program as well as be inclusive of Riot’s branding to fully show what a season could look like when working with LeagueSpot’s team.
UI/UX & Web Designer
2023
Figma
Adobe Photoshop
Adobe Illustrator
1 Week
Visual Design
Design System
Web Design
Layout Design
Prototyping
Overview
I was tasked with designing a website using Riot Games' branding that would simulate a tournament season. The emphasis was on the branding and user experience. Custom registration pages, options and tournament views plus more were all included.
Challenge
I needed to figure out a good solution on how to distribute tournament information to players and hosts alike so it was not misunderstood by participants. Typography hierarchy and platform experience were top priority so tournament information was not mistaken by anyone on the platform.
Solution
Designing a simple but effective system within the brand's language allowed me to be more flexible with how I laid out content on the website. Tournament data can be overwhelming to look at sometimes so I wanted to have a clear hierarchy of information for participants to view it comfortably.
Process
User Flow
The first step was to map out the user journey so that I could understand how the user would interact with the product. Doing this allowed me to identify areas for improvement and make changes to the user experience. I wanted users to easily and quickly find what they were looking for.
Typography
Pairing the sans-serif font, Spiegel, with a more ornate font like Beaufort fit perfectly with the branding of Riot Games. Various weights were used throughout the design.
Colors
By using Riot Games’ brand white, gray
and black as the main colors, it allowed me to use the red to draw users’ attention to important buttons and information, encouraging users to focus and click.
Design System
I created a full system with button styles, colors, accordions, checkboxes and more to fit with Riot Games’ branding. This created
a cohesive visual design language
across the whole experience.
