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.

School project

April 2021

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.




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.

Interested in working together? Get in touch!

©2021 Karim Manaa