UI Design, Art Direction
League of Legends - Championship Ashe
In this school project, the goal was to create a beautiful e-commerce interface. League of Legends, by Riot Games, is one of the most played game in the world. Also known as "LoL", the game, playable on PC, has a very dense esport scene, spreading in the entire world. Inspired by the Championship Ashe skin available in game, I wanted to recreate the user interface of the official LoL launcher in a 2017 League of Legends World Championship context.
Company
School project
Date
April 2021
Team
Karim Manaa - Art Director, UI Designer
Moodboard. You can open the moodboard here.
Used fonts : FrizQuadrata Std. & Open Sans.
League of Legends is a very old game now and the game gets a lot of update, especially for user interface. However, every revamp keeps the essence.
The challenge was to create a brand new user interface by keeping what makes LoL.
Inspired by the mondrianisme, I tried to create a similar structure.
Wireframes.
Final interface, check out the original Figma file here.
League of Legends is a game as a service. The game is supposed to live by himself, with multiple updates. I wanted to make the game alive by adding animations and micro-interactions. I used the original Ashe animation made by Riot Games talents.
Because an art direction is not exclusively visual, I also thought about the ambiance. What's the better music for this than the official anthem of these 2017 Worlds.
Mock-up and final video (turn up the volume plz). You can test the micro-interactions by your own here.