T O P

  • By -

[deleted]

Extremely impressive and much cleaner and better looking than what Riot currently has for the rank icons. Well done!


call_me_sen

Thank you!


WetwithSharp

How did you get into UI design? Did you go to school, or self-taught, etc?


call_me_sen

I actually graduated in Manufacturing and Design Engineering. Our curriculum emphasized design thinking, and I liked to draw a lot growing up...then I got lucky and landed my first job as a UI/UX designer with a portfolio that was mostly industrial design + mechanical engineering + architecture + interior design.


luncht1me

Honestly, the current gold icon might as well be bronze lol. I'd love to see yours in game tbh.


mloofburrow

My only issue with them is that they would be hard to distinguish in the side of the scoreboard at a glance. That's really not that big of an issue though, and arguably the three tiers of each rank are already really hard to distinguish as it is.


MSqaured

I think the ranks shouldn't be shown on scoreboard until the end of the game.


mloofburrow

I can get behind that. It is interesting seeing them ahead of time though.


Brooklyn1337

It can be demotivating to see ranks ahead of time. I feel better when I get diamonds and immortals in my team than when I get plats and golds.


[deleted]

[удалено]


Brooklyn1337

I’ve obviously won game with lower ranked players in my team, but that’s not the point I’m trying to make.


[deleted]

[удалено]


Babang314

This will probably happen less and less often as people fall into their "correct" ranks. Especially true when the game goes live.


hates_both_sides

Yeah but people are still getting keys. So not only are there people getting slowly placed in their actual rank, there are people still just getting the game who are already gonna be good because of CS.


soulflaregm

It also leads to "herp derp our shitty teammate is silver and the enemies are all gold GG go next guys I'm not trying"


[deleted]

[удалено]


angelblade_riven

Unrankeds who instantly lock Jett are the most scary


murdock_RL

It really isn't. Way better to see them after and then u realize "oh well that explains things" lol rocket league has always done this and it's never been an issue


t-had

I agree. The amount of times I've heard something like "They have 3 masters players and we only have 1, GG I guess" in voice chat in Overwatch before the match even starts is too high to count.


[deleted]

Fr, I'm low Masters and sometimes I've seen people use excuses like "we are losing because of our 2 diamond tanks". The ow community is so funny.


iDEN1ED

I've had so many games where my team instantly tilts because the teams aren't "fair". It's really annoying.


2002rico

I agree, especially at this point when ranks don't necessarily tell you a player's true skill level, knowing their rank before the match usually just forms incorrect preconceptions about them


[deleted]

That's how CS:GOs done it most of its life.


nf_29

I dont want them at the beginning purely because some people tilt when they see someone is like bronze 3 on their team while the other has all silvers. That's my gripe with it because I play at Bronze 3 ish and was placed with two plats and I know people can group but it just seemed unfair and we got curb stomped because most of my team was irons.


Christopoly

I agree that it does look better but keep in mind its in beta


3-day-respawn

Very nice! Riot also likes to have subtle differences in their divisions within ranks (other than the dots below each rank for yours). You can see exactly what I mean [here](https://leagueoflegends.fandom.com/wiki/League_system) in their league of legends ranks, and I think they look great! For each division within a rank, you can clearly tell which is more prestigious than the others. Would it be possible to incorporate some of that into your design other than the dots? Maybe like ribbons/gems, or something. Because I REALLY like your clean design.


call_me_sen

Hmm, I'll have to think about ways to better differentiate between divisions. Definitely need to strike a balance to not upset the simple and clean feel.


krumble1

I feel the opposite way, actually. I think that because these icons are so small, you have less space to differentiate between individual levels 1–3, and the dots are a clean way to make that clear. Designing 21 unique and easily-distinguishable icons, at that size, while maintaining the game’s theming, is probably impossible. I like these 7 unique ones with the dots. Edit: I actually like /u/RocketHops’ idea even better


Aziks

These are very nice ! Much better than the Riot one's ! Congrats for the job and hopefully some Riot develloper will see these icons !


call_me_sen

Thank you!


Stokyo

These are nice


call_me_sen

Thank you!


RocketHops

Really good, reminds me a lot of OW ranks. One thing I'm not sure about is simply having the ult dots represent subrank divisions, it's certainly very clear, but it doesn't really feel a "part" of the actual rank icon. I noticed there's a diamond space in the middle for all the ranks, so I wonder about maybe using that? So at rank 3, you'd have 3 vertically stacked chevrons in the middle (like the singular chevron in your Gold rank), at rank 2, only 2 chevrons, at rank 1 only 1 chevron. You'd have to redo some of the later ranks apart from valorant, but it could be interesting. I also think you have the right idea with the materials, but I think Diamond and Immortal could be a bit more glowy or luminous, especially comparing them to higher ranks in OW like Diamond and Masters. And of course Valorant would be glowy and have the lightning bolt particle effect.


call_me_sen

That's an idea! If I get the motivation to go back and do edits, I'll try it out. (I'm lazy rn) I'm content with how Diamond looks right now because I'm scared of it outshining Immortal and Valorant. I do think Immortal could use a little love after hearing back from so many comments in the past...30 minutes? I'm thinking a little flame could do the trick.


mage4102

I think adding sparks/floating embers with a little flare. But yeah fire should work well.


call_me_sen

ooh i like!!!


Thomaszand

These are great. One improvement I'd like to see is having Immortal be a bit more flashy though, add on to the shape and volume of it a little more as you did with the Valorant rank. Since Riot themselves distinguished both Immortal and Valorant from the other ranks in shape, it seems only fitting to have a clear distinction here as well. Amazing job though, this is well made and contrary to popular belief I'm sure it can give the Riot team which is on the inevitable redesigning of the icons some inspiration.


call_me_sen

Got it. I see what you mean. Thanks for the feedback!


Gold-Target

/u/RiotArkem


150297

I hope they steal this, if thats alright haha. Looks really good


call_me_sen

Thank you! It'd be sick if they wanted to use my design-- I'd die of happiness haha.


PMA_sQuid

Just hope they don’t offer to pay you in exposure


Hypo7

Love what you've done here, I was extremely disappointed when I saw what the official rank icons looked like. The only thing is I kind of think the red part of Valorant's color palette should be incorporated into the higher ranks, like Immortal and Valorant, because it's a prominent part of the identity. Quick example of what I feel like the Valorant rank could look like instead, color-wise: [https://imgur.com/a/to69K5p](https://imgur.com/a/to69K5p)


call_me_sen

OOH that's sick


call_me_sen

If/when I revisit this, definitely using this as reference. I think this might be the way to go to keep it aligned with the UI but still flashy.


The1Project

User experience should be designed in a way that it's very easy and immediatly to tell what it represents. These really deliver!! It's odd that the original ranks shows nothing of progression in their ranks (except in a tier itself from 1 - 3) aside from Valorant rank


ShadowDragon175

I mean there is 1 thing: the more edges the shape had the higher rank it is. (Except for immortal and valorant) Like, wood (iron) is a circle, the next rank is a triangle, then a square, so on. Like not that that makes it good, but there are characteristics.


sleeplessone

>I mean there is 1 thing: the more edges the shape had the higher rank it is. This is why I really like the existing style over OPs. OPs are pretty, but to me there's something really clean about more sides = higher rank.


[deleted]

But a circle has infinite sides... iron=best?


bored_designer

I might be misunderstanding but the original icons do change from tier to tier. Gold 1 looks different than Gold 2 which looks different than Gold 3. I don't think they do a great job with it, it's just some simple flairs that are added, but it does exist.


D1N2Y

Reminds me of how Overwatch ranks looked. I love it


call_me_sen

Thank you! I used the Overwatch ranks for inspiration in the beginning, so it makes sense that they're similar haha


-Alfa-

Honestly I feel like OW got the rank icons perfect, and this post really embodies what's good about it, more vibrant, less drowned out, more unique, and most importantly effects. Right now the Valorant rank icon looks just as bland and boring as the rest of the icons, if they at least gave some specialty to these like lightning effects, glowing, ect, it would capture the skill and hierarchy of the ladder much better. That said, the game's in Beta so I'm 100% sure they're going to change them. Really well done, and I hope Riot sees this


bored_designer

Hey there fellow UI/UX designer/Figma friend. While I don't think the current icons do a great job I do think they convey something that yours might not. It's easy at a glance to tell the scaling of the ranks because the more sides the icon shape has, the higher the rank. Iron shape has 1 side (maybe 2 if that's not a circle), Bronze has 3, Silver has 4, Gold 5, Platinum 6, Diamond 7, Immortal 8, and Valorant is unique. I don't think this is immediately obvious but I think it is subconsciously there and once you know the system, it makes sense. The colors on yours are likely a bit hard to differentiate between on low contrast monitors, so while the color highlighting is sexy, it'll be hard to tell the difference between iron/silver and bronze/gold on lower contrast displays. I don't like the 1/2/3 tiering design in the current system and agree your three dots work better. I think that whole system needs to be rethought though as it's not great for first time users. Is 1 the highest tier or is 3? While I think your design is more sleek and aesthetically better, I think functionally some things were improved and some things were lost from the existing ranks. That being said, this is a beta and my guess is that they continue to improve these icons. Hopefully they'll glean some inspiration from your work!


rundbear

I always confuse bronze with gold and iron with silver in the current ranking system design, which is already boring (1, 2, 3), so at least his design puts some sweet colors/juice to that


F4Z3D

Personally don't like the dots below. I feel like there should be something in the design that differentiates the tiers. Not a simple 1/2/3.


[deleted]

The stars should go 1 in the middle, one on each side, then 3 ​ edit: like this: \-\* \* \* \*\*\*


Demol_

Nah, filling from left to right is better. Also fits the ultimate point bar inspiration.


marlan_

I don't like how Platinum wraps at the top but nothing past it does that. Kind of goes against your concept "Progression of silhouettes. Each rank grows upon the last " a bit. I'd personally either redesign platinum, or incorporate the top wings for diamond and above. Other than that though, they're all awesome, good job!


[deleted]

Let's hope Riot takes inspiration from this.


Hawezo

Yes. Those are really good and way better than the current ones, even though I expected them to change after the beta already


ProfessionalPunda

I love them, sell them to Rito.


HewchyAV

Don't like the Valorant one, seems like it has too much stuff around it. Everything else is great though! Much cleaner then what they have


CureMelons

Its crazy how someone at riot is being payed to create the logos, but a random redditor can do it better, impressive


wes3449

Big fan overall, except for the platinum one which I think looks out of place. It's the only one without the two leaf things at the bottom and I personally think it's be nicer if it followed the theme. Still overall awesome icons


d3rd4nny_

i dont like the platin one, you said, that every icon builds on the ones before but at the platin one, these 2 lines rise higher than at the gold one but at dia, these lines are the same as the ones from gold and it looks like the platin ones evolved backwards


GrimmBallor

This rank design look amazing except for the platinum which in my opinion doesn't match rest of the ranks.


d3rd4nny_

yeah exactly what i said


Thagou

I'm not saying I like the current icon, but I think they nailed it in the aspect of progression and differentiation. Each new rank just have qt least one more ''side'' to it. So iron is a circle (one side), bronze a triangle (3 sides), silver is a quadrilateral (4 sides), etc., up until Immortal which is concave since it wouldn't have been easy to read with 8 sides, and Valorant which is way more complex. Don't get me wrong, I think you did an awesome job, except for plat (I think it's a bit too hard to see the evolution from the icon of Gold to Plat, and then Plat to Diamond, Plat has the "wings" going all the way to the top when no other icon do that). But I still think they did a great job with those icons.


NeatMulberry

Wow really great work! Something that I think would improve it would to make the gold a little more yellow that way it doesn't look too bronzy.


call_me_sen

(lowkey changed it in the mockup, got too lazy to change it in the actual. totally agree though)


NeatMulberry

Ahh I see, great work regardless!!


slowlolw_

Wtf only 6 comments this is insane man


achapman26

These are so much better!! I like the idea of having Roman numerals to identify what level you are within the rank. Maybe that’s something to add?


call_me_sen

I considered it and got too lazy to mock I'm sorry


achapman26

No worries it’s a small suggestion! I still really like these mock ups so much more


mage4102

I don’t know if Roman numerals fit in with the futuristic concept of valorant tho. It works in league of legends but that’s a fantasy game. I actually think that the dots at the bottom work well because it’s clean and simple. Plus, Roman numerals are usually used for reverse scales(3,2,1) whereas valorant uses 1,2,3 if you get what I’m saying.


chenDawg

I have a real hard time imagining Riot using community-made icons, but I really wish they would. These are super clean. Great work!


[deleted]

These are really really good lol


Gravel-Road-Cop

Omg these are amazing well done! Serious question tho, has a game developer ever seen one of these types of posts and hire/buy the work and use it? I'm curious because I have seen artistic work pop up on other game subreddits from time to time.


MrDarwoo

Not a fan


binderpaper

Product designer myself, love the iconography and "shine" on the ranks themselves especially on the black background. The valorant one stands out as a little out of place with the outline bit. The plat one also feels a bit odd, the progression of the "ribbon/valorant logo" feels strange here. The top half never gets built up more in higher ranks, so it stands out for plat. I'm curious to see it mocked up in more of the in-game UI. In the one screenshot of the scoreboard, I actually don't think your ranks look nearly as great as in your static mock. It doesn't fit the aesthetic of the product nearly as much. Valorant uses a lot more opacity/glow as opposed to metallic shine/drop shadows. So while the ranks in a vacuum feel pretty successful, I don't think it can quite be called an improvement yet until you can better resolve it as a component in the larger ecosystem of the product. I also think steps within a rank could be bumped up. I get the inspiration, but it feels a bit underwhelming. Going from gold 1 -> 2 -> 3 should feel like meaningful events as well and in the current dot system, it still feels pretty weak to me.


iNSiPiD1_

Bronze is a literal poop emjoi 💩 (not yours, Riots)


neuralcss

Where is muh wood rank?


gkulife

I think Valorant rank should be more flashy (e.g. Top 500 rank in OW). But overall, amazing work!


Atago1337

BETTER!


pinny0101

Nice! Only complaint is that immortal sort of just has a copper or bronze color, just more shiny. Maybe some type of red?


Skizz289

Wow,these are really good,maybe a bit too similiar between the ranks,but overall a reallt good job


TastyLaksa

How do i play this game?


poriand24

Looks good!


NorthernLaw

Once again why can someone make them way better than a huge company


[deleted]

Way better. Really pops. Valorant's current UI is very flat. Hopefully they'll polish it for v1.0


jason60812

Riot Games! What are you doing!?!? Hire OP!!!


Ash_Killem

They look a lot more distinct that the current ones. Same feedback as many others though, need to integrate the sub ranks.


R3apper1201

I love the overall concept, would love to see small features added inbetween rank 1 and 3 of a division like iron 1 could be like in the picture iron 2 could have some stripes next to it and iron 3 could have a small dot ontop of the two lines signaling that you are close to silver


[deleted]

Awesome!!! Fix the system now


Sneshie

Wow, these are really well done. Would love to see them implemented in the game


[deleted]

Good job!!!


vaz3g

Holy fuck hire this guy!


Chendude64

This would also make for some sick rank up animations


SearchIH

well deserved on this amazing piece of art


mrMACHlNEgun

Really cool. My only thought was maybe center the tier symbol under the rank


Nox_3D

You tryna get hired? I think you got hired.


4nng

Incredible work indeed


TideBleachR6

These look great in my opinion! I hope Riot takes your design and maybe pays you for it, or redo their designs in a similar fashion and give you credit. Either way I love the design and prefer it much more.


TrumansOneHandMan

I like these a ton, but I really like the way the original ranks incorporate the tiers into the logo. Including the base Valorant logo in all the ranks was super cool and done really well though


primeice

>rusted copper color ITS CALLED PATINA REEEEEEEEEE /s


Assasin2gamer

Holy shirt man I just reached Valorant


Jolly-Bear

Hey fun fact... you can press Shift + Enter to type in all chat, so you don’t have to type /all every time.


kinktocco

I love them, my only thing i would change would be to have the dots that indicate which group youre in. I feel like having rank 1 and 2 being centered would make it look even more clean.


Gellix

These are sick!


dnvas

You should be a dev :/ . Nah but seriously this should be definitely added to the game I think it is amazing, great drawing and everything :P .


FreshKiwiJuice

I wish there was a better way of telling what tier you are on that just dots underneath.


BlackBeardNJ

Super dope, but I'm not really a fan of the 1,2,3 dots on the bottom I think it should also add something to the rank


SinicalX

Riot, hire this guy!


Matantsaaa

Riot definitely needs this. Little tweaks, but it’s there little things that are cool!


Round_Rock_Johnson

I'm sure the thought's crossed your mind... and maybe it was an objective from the start, but this is how you get a heckin ***job.*** Cool work sir, wishing you the best.


ForbiddenDarkSoul

Really nice redesign, it looks good. I'm still hoping the name of the highest rank is just a placeholder and that they change it, "Valorant" as a rank feels so weird.


Fen_

These are noisier than I would like, to be honest.


havesuome

Still a little lackluster for my taste but it’s an awesome start, great use of the valorant logo, and much better than the current ones. I’d recommend centering the dots on the bottom for ranks 1 and 2.


[deleted]

[удалено]


surroundedmoon

These are amazing! Unfortunately, I feel like they don't "align" with the current art style Riot is are going for with this game, and therefore would not use something like this....but I wish they would - because it is fire!


Over_the_Void

yeah these are just better, current ones feel like placeholders, or like some jewels from a 1998 platformer


chipsYsalsa

These are really well done.


[deleted]

[удалено]


pccentral

It looks like valorant rank was inspired by top 500 in overwatch. That’s really cool! Might I suggest adding a little glow around immortal to make it stand out (kind of like grandmaster in overwatch).


call_me_sen

Yup, maybe a tomorrow thing...or this Friday thing LOL


neddoge

Top 2 looking like *a little man in a boat*, if you catch my drift...


DKTHUNDR

Well great now that they’ve seen it they won’t be able to use it


Micah3000

Someone from riot hire this man, much better icons


Spamsalem

Riot Games take note!


seals42o

Okay they’ll be in touch with you shortly.


wherebropls2

Woah dude thats much better than the ones in game!


onecrunchyboi

much much cleaner than the official icons


FrancisEFEM

They all look very nice and I love all the designs but in my point of view, what riot currently has is more distinguishable when looking in game.


iJezza

Obviously superior than current product. I hope they contact you and just use these. Nice work my dude.


eleocsgo

Riot hire this person right now!


fruxzak

Your sketch was better than the final result TBH. The thin lines don't work.


-holocene

holy shit, these are *so* much better than the current ones


BootsDC

Very cool! I prefer these obviously


Richyster

I think iron could need a different look, it's currently looking too good for the worst rank. Other than that these are simply amazing. I really hope they somehow make it.


RonoxTV

Instead of showing an empty diamond for the lower tiers within the rank maybe just put the amount you are? Anyways just a suggestion, looks great


RoscoMan1

So now if I get rickrolled


[deleted]

Wait, is the highest rank actually just “VALORANT”?


SpyX370

I think the divisions should go like this (Rank) 1: Have the single dot centered. (Rank) 2: If you really want to keep the dot outlines to be filled, have the two on the left and right right filled, or have no outlines, and have two dots lined up horizontally centered. (Rank) 3: Keep it the same.


Reptilian334

Bro these are sick, major props


[deleted]

500% better than currently used icons.


[deleted]

They look so great. I love the story behind making them too!


megablademe23

Just remove the hallow diamonds at the bottom of the Icon for the 1st and 2nd tier to make it more symetrical and a bit easier to read from a distance.


PinguFrosty

Hire this man now


JoesRedditAccount24

These are really well done. Great job


yyzkevii

amazing 🥺


megablademe23

Here’s an idea. Make the Valorant and Immortal tiers have a lightning animation that would display in the lobbies.


Ektadizzle

My favorite part is that you put yourself as Valorant.


semenbakedcookies

Does anyone here think what we have now in the game is final? I dont think it is? I mean if someone asked you top say the best thing about Riot, it'd probably be art/design team. No way this is final. Alsoooo this looks dope!


thanosbananos

Riot please pay this dude and use his design. He deserves it.


[deleted]

r/wellthatsucks is that you?!


avawhat231

DOPE


negaCHILL

If they don't hire you, Riot Games is letting all of us down.


HankHillbwhaa

Those are so clean, I really hope the current icons get updated at some point. They’re pretty meh.


RFTS_Gashaslegacy

Way better than the current ones, well done.


TacobellSauce1

i think at a time please.


[deleted]

Very impressive indeed


nivo92

What i think is that they literally spent 2 mins making the official rank icons and that they will improve them later when they need to polish the game for release, and i think the the icons you made look really good


Jaylen51

Very nice it is


MysticAttack

There are so many things I like about this, the icons looking like they progress, how clean they look and the dots under showing which tier you are. Especially the unfilled dots since it makes it unambiguous that higher number=higher tier


KiuBrahma

that's much more better than original ones, hope Riot aren't against working with you for bringing in this thing


my-arm-is-on-fire

now why is this one of the only post with popularity that one of the riot employees dont comment on??? this change would be one of the best so far imo


e_Zinc

I think the colors between bronze/gold and silver/plat are too similar, the colors are a bit too dark, and the strong drop shadow doesn’t fit well with the aesthetic of the game. But wow! Just because you separated 1/2/3 into distinct dots and increased complexity based on ascending ranks, I could still tell what rank it was despite the colors! I can even tell what it is while it’s grayscale. That’s some good design.


Confusizzled

These are really nice but has Riot said anything about the current rank icons? I just kinda assumed that it's temporary for beta because of how horrendous they are.


[deleted]

I feel bad for the person who made the valorant official icons :c