DailyUI 019 – Leaderboards

As someone who plays a lot of video games I’m used to seeing a lot of boring leaderboards. So to keep up with that background and the trend of injecting Street Fighter related things into my designs, here’s a re-representation of the Street Fighter 5 world rankings pulled from Shoryuken.

Right off the bat I wanted to give the top/selected one a bigger area, picture and more information. I feel like I could have added even more info here, like tournaments joined and location. The text became way too big and could have been resized to fit more info beneath the scoring.

I wanted to do much more with the character icons, but the way the official artwork looks made it quite difficult to mask out only the characters, as there’s a lot of flare and effects going on. So they became rather boring instead, but it works.

For the colours, I wanted contrasts. The main branding of the Street Fighter V logo is warm colours, red, orange and yellow. As I’m not too fond of using those as a main branding colour, I made it the background and accent colour instead. For main colour I used a purplish blue. The end result turned out pretty well.

At first I had the entire list in blue, but it wore the colour out too much I think. It also took away the emphasis from the selected person, making them stand out less. So I decided to make it a mix of light and dark grey instead.

Font used is Avenir Next Bold throughout, to emphasise the names and scoring much more, as well as making it easier to parse all the information.

That’s it for now. Peace.