I redesigned the Valorant ranked icons. What do you think?

Posted by Steve

Monday, May 4, 2020 9:57 PM

I redesigned the Valorant ranked icons. What do you think?

Hi all, I’m a UI/UX designer. My friends and I were very excited for Valorant ranked, and disappointed when we saw the icons. When I heard Shroud complain in one of his videos, I felt the need to give the icons my own hot take.

Why I felt like the Valorant ranked icons were lacking:

  • Silhouettes are not distinct enough
  • Platinum is a rusted copper color
  • Immortal and Valorant don’t feel powerful enough
  • Tiers are cleverly incorporated into the icons, but it makes every rank feel the same, and not intuitive

What I tried to achieve in my design:

  • Progression of silhouettes. Each rank grows upon the last
  • Intuitive colors that rank up with you
  • “Make Immortal and Valorant great again”
  • Easy to tell which tier
  • Taking advantage of the existing Valorant imagery, such as:
    • Valorant logo
    • Valorant ranked icon
    • Ultimate charge dots
    • Valorant loading screen spark animation

Here is my design:

Colored

Grayscale

I reused as many of the original colors as possible. I eventually had to do some tweaking because bronze, gold, immortal used very similar colors. I used Phoenix as inspiration for Immortal, which seems apt, right?

Here’s a mockup of what it would look like in-game (screenshot taken from somewhere on Reddit):

My design process:

  • Sketching a fuck ton of ideas and researching ranked icons from other video games
  • Looking at a lot of Valorant imagery to create a moodboard
  • Mocking up icons in Figma (because I’m a UI/UX designer) in grayscale first to create distinct silhouettes
  • Adding colors
  • Mocking it up on a screenshot to see what it would look like

Overall, took me a day to do. Shout-out to my boyfriend who gave really helpful critiques throughout the process. Hope you all like it!

My last sketch before taking it to Figma.

What all tiers would look like.

Edit: I woke up to 12.7k upvotes. Thank you all very much for the enthusiasm and feedback. Solid points and ideas made in the comments.

Edit edit: 14.4k upvotes-- you guys make me want to go back and try a few things, such as adding embers to Immortal, and tweaking the colors to align more with the matte aesthetic of the UI. I meant for Platinum to feel a different, like a breaking point into high rank. It was a risk, but I personally think the shape is really cool. If this ever were implemented for real, the tier dots might have to be changed for small res.

References

  • https://www.reddit.com/r/VALORANT/comments/gdl3es/i_redesigned_the_valorant_ranked_icons_what_do/
  • https://reddit.com/gdl3es

More Like This