Champion Select - Redesign [Work In Progress]

grrttshw·6/28/2015, 5:50:24 AM·14 votes·3,478 views
http://i.imgur.com/Ockb5hl.png

WELCOME After seeing a wide variety of proposed Champion Select redesigns, I thought I would take a shot at doing one of my own.

I've been playing League of Legends for a long time, and I've seen everything change through out the years. So I wanted to showcase what I thought could be a solid solution to something that I think has been needing an overhaul for a long time, and just hasn't got the love and attention it really needs.

I'll give you guys a breakdown of all my design choices to explain why I did what I did and how I think these things would allow for a better overall visual appeal, but more importantly better functionality.

DESIGN AESTHETIC I took most of the styling directly from the front page of the launcher, I then modernized the other elements to match that same style as well. The one thing I noticed the most about the previous champ select screen was the poor use of space overall. it just seemed like everywhere I looked there was space going unused and the fantastic artwork that League thrives on is barely visible, I aimed to fix that.

GOALS

  1. get all the elements to look like they belong in the current launcher.
  2. use as much space as possible, while maintaining functionality and not interfering with usability.
  3. make the art much more visible
  4. showcase mastery of champions with new mastery system
  5. make bans more visible
  6. Make rune pages and masteries easier to navigate / select
  7. Search bar size and priority - make searching much more simple.

There are other goals but they were much less important to me than the ones listed here.

Let me know what you guys think, I work on this thing live on my twitch channel so its totally open to critique based on feedback from you guys. Anything helps. Also if you have questions feel free to ask, I'll fill you in :D

More to come soon.

14 Comments

MVDuneCats6/28/2015, 6:24:44 PM5 votes

I don't like that rune page and masteries selection relies on horizontal scrolling. The less horizontal scrolling I have to do, the better.

Leetri6/28/2015, 1:33:49 PM3 votes

I'll start with the things I like as is. 1: It's really clear and easy to see what everything does. 2: No wasted space. One thing I disliked about that other concept everyone posts every once in a while is how it uses like 20% of the window. 3: I love how the bans look, really organic and they don't seem tacked on like they do on the current design. 4: You can clearly see a lot of your roster at any time. That other concept almost halves the number of champions you can browse at any time.

Lastly there's a few things I'd personally change. It's mainly about colour. 1: Incorporate more gold trims around certain boxes, you can see what I mean on the main menu around the shop and profile buttons. 2: Change the "Lock in" button to look like the "Play" button on the main menu, this button is too red and lacks the swirly details on the "Play" button. 3: To go along with this the "Your Pick" arrows has to change to the orange colour and maybe have some swirly details as well. 4: It's a bit too blue, so maybe changing some boxes to orange or black would spice it up. Again, you can see what I mean on the main menu. 5: The chat typing bar and the search bar do not match in colour (one is grey one is white). Make them match for cohesiveness. 6: The Mastery and Rune windows are a bit too big, they overpower the chat window which should be one of the main foci. 7: Adding filter options, such as "Favourites" and "Role", so you can easily browse what you need. No more having to drag through your entire list to find a support that could fit the team. This is a great opportunity to add those.

Overall I love the design, I'd just change some colours to make things pop more.

The Ellimiist6/28/2015, 1:43:29 PM2 votes

Tbh I just want Dota 2's ability to customize the champions that show up and in what order.

TomA3X6/28/2015, 2:37:30 PM2 votes

I like it, could you add space for champion mastery. It would be good to know your teammates stats on a champion as they pick it.

Corndawg6/28/2015, 3:00:49 PM2 votes

Pretty cool, I like that you didn't spend too much time adding little details, and left it at a more simplistic view, and I love how you could actually SEE your runes and masteries, because sometimes I get mine mixed up lol

LMTD EDTN6/28/2015, 3:20:56 PM2 votes

thats pretty awesome

gafratt6/28/2015, 4:31:14 PM2 votes

Add a "sort champions" button?

blueberrypancake6/28/2015, 10:46:18 PM2 votes

If I was New York Times I'd call it "Sleek" xD

Icestar11866/28/2015, 10:50:26 PM2 votes

Better than the rest, but it's too blue and has horizontal scrolling.

ChromeFluxx6/29/2015, 12:26:10 AM2 votes

You know, considering the fact that the HUD update team wont have anything on their plates after they're done with the HUD update, they'll likely redo things like this, if not this.

Sid886/29/2015, 6:08:38 PM2 votes

well done sir... well done...

Best Darius KR6/28/2015, 1:37:22 PM2 votes

It's the best i've seen so far