LEAGUE OF LEGENDS
BATTLE PASS
Case Study
For this case study, I designed a battle pass screen for League of Legends, assuming it needed to display the same information as Team Fight Tactics. This includes the season name, time remaining in the season, a progress bar for the player's overall progress, a button to upgrade the pass, the reward's name and description, a claim button, and a reward track.
Art Direction: Existing League of Legends UI style mixed with some Art Deco Fantasy
Color Palette: Blue, Gold, Brown
MOODBOARD
High Fidelity Mockups
I pulled the background image directly from a post Riot published. I noticed that they tend to avoid using borders around text boxes in their UI, allowing the background image to remain the main focal point. I tried to follow that approach, but the right side of the background made it challenging to balance the text placement while keeping it within the darker area. To solve this, I added a dark box with a Gaussian blur and reduced its opacity to about 20%. This created more contrast without significantly interfering with the background image. For the rest of the components, I used strong, angular shapes.
