Posted by Steve
Monday, May 4, 2020 9:57 PM
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:
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
The solo queue experience
Posted by Otto
Sunday, October 9, 2022 7:00 AM
Chamber Buff
Posted by Otto
Tuesday, January 25, 2022 7:28 AM
Sage Wall Boost On Ascent
Posted by Otto
Tuesday, December 22, 2020 1:14 AM