League of Legends UI Redesign
This League of Legends UI Redesign project was made for my Game User Interface Design course. I used assets from League of Legends to recreate the game's Champion Select and Loading Screen UI to be more friendly to new and casual players. I have also made an interactive UI using Unity that can be played through the following link:
https://akoreyu.itch.io/league-ui
In this project, I wanted to create an UI that lets inexperienced player know more about their and other players' Champion kit and abilities before getting into the game. Moreover, I aimed to remove the unfair advantage that hardcore players get from using third party software, by including important gameplay information straight into the game.
This League of Legends UI Redesign project was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project.
All assets including, but not limited to, League of Legends logo, champion splash art, champion icons, ability icons, ability descriptions, rank borders, summoner icons, and background art are credited to Riot Games.
Full UI Redesign - Interactive Build Demonstration.
Play at: https://akoreyu.itch.io/league-ui
Champion Select UI
Skin Selection Screen Redesign
Champion Select UI - Champion Catalog Screen Redesign.
Two extra UI boxes that give general meta information, recent changes, and ability descriptions for the selected champion.
Champion Select UI - Abilities Preview Screen Design.
By clicking on the champion abilities on the side, the middle screen will show video demonstrations of the abilities.
Loading Screen UI
A panel for each player with 5 sections each showing: Champion splash art, Ability descriptions, Champion mastery with playstyle descriptions, Eternals, and Recent champion changes.
UI Redesign Goals
UI Redesign Flow Chart
Wireframe Sketches 1
Wireframe Sketches 2
Champion Select UI Wireframe
Loading Screen UI Wireframe