What Is This & Why

Legends of Runeterra is a video game made and published by Riot Games. I decided to take this project, the creation of a new Home Page user interface for a limited time event, because of the wealth of assets and concepts available from Riot Games' flagship game, which Legends of Runeterra is based on, League of Legends. Legends of Runeterra and League of Legends have shared events in the past, and as such this project has precedence for it's existence. As to why I chose to work on this project, I have plenty of examples of creating usable and good looking designs from scratch, but I wanted to use this project to display my ability to create and do design work with existing content within existing frameworks. I aimed, and accomplished at finishing this project in around one week by reusing many assets from both Legends of Runeterra and League of Legends to create this new experience for Legends of Runeterra players based on a classic League of Legends event.

Past Legends of Runeterra Event Designs

The main inspiration for this project came from past Legends of Runeterra events and their designs. Below is the main event home page that I referenced for this project. I chose to use the home page design from a past Legends of Runeterra event as my primary reference instead of the base home page design in order to better understand what content needed to be included, what content was commonly altered for event-specific designs, and what type of rewards were commonly given for free and premium event missions.

Goals For The Design

One of the major goals, as touched on previously, was to create something new from existing content and materials while keeping the overall design consistent with their design framework for seamless integration. I also understood my own limitations for this project and planned to work accordingly around them. The limited time-frame I gave myself as well as the absence of a dedicated art team behind me to create more intricate visuals were two of the largest limitations I placed on myself and while I would have loved to do more with certain aspects of the design I settled with my original goal of displaying what could be done with existing elements in a short amount of time.

Re-using Of Existing Assets

As I did not have access to the original design materials, I recreated many of the UI elements to the best of my ability, making sure to keep the general layout and sizing consistent between my new design and the reference material. While this was additional work I needed to do for this specific project, many of these materials would have already been available to me to reuse in a realistic setting. However, there were also a lot of elements which I was able to reuse from either the Legends of Runeterra game itself, or it's sister game, League of Legends. For starters, the "Harrowing" event which I based my new design on is a common once a year occurrence in the League of Legends game which in turn gave me years of material to pull from. Reward images and icons specifically were some of the areas where I pulled content from League of Legends.

Additionally, I got creative and reused elements such as character borders (seen below) as the basis for my reward card design, reworking the border into two different frames, one for the free rewards and one for the premium rewards. The cards themselves were modeled after the cards from the reference, making sure that the premium cards looked a bit more intricate to make sure there was a clear enough difference for the users.

Finalized Design

Below is the finalized design I ended up with for a Harrowing event home page in Legends of Runeterra. I believe that I did a decent job of following the original's style framework and was content with my ability to reuse existing content in new and creative ways in order to design something new. Of course there are still issues I have with this finalized design, for example I don't believe I made the distinction between the free and premium rewards cards clear enough and would attempt to differentiate them even more if I was to do this again.