Membership Design Submission #2 - Icon Design Studies

samgawaran commented 2 years ago

Summary

Got feedback on the theme and finalized what colors we would be using in the last issue. This submission covers the process of designing the icons.

All of the icons shown here are SVGs so there wouldn't be a problem in terms of the quality.

Details

Design Feedback and Old Icon Ideas

Got a lot of useful feedback on https://github.com/colonistio/design/issues/94 from Github and my friends, after some thought, I think it would be better to use Flat Colors for the membership bgs, since it helps with the contrast for the icons, much simpler and reduces visual strain for the whole screen.

Old Icon ideas came from here: https://github.com/colonistio/design/issues/16#issuecomment-1110315275

Colonist Coins and Military Chevron

I looked over the old ideas and Juan and I thought that the colonist coins are the best of the bunch so I implemented them here. Also, based on some quick research on rankings/memberships, Military Chevrons are also an option since a lot of players are familiar with the rankings or tiers of those, with almost all shooter games using them to denote skill or level

Ideas from AAA Games

Took some inspiration from the games I researched last submission and felt that Apex Legends and Valorant icons may work the best for us. I retained the elements of what makes us Colonist using the hexagon shapes and retaining the light colors for the icons.

Mobile View and Recommendations

Added the mobile view here. I recommend exploring Symbols since in my opinion, it fits the criteria of what we want for membership icons, uses flat colors and hexagons and like AAA games, detailed enough to make players want to buy those memberships.

Related Submissions

https://github.com/colonistio/design/issues/94

Submission Checklist

[x] I did not leave out anything that has already been implemented
[x] I considered mobile (table & phone) devices
[x] I considered horizontal & vertical mobile devices
[x] I considered small & large screen desktop devices
[x] I considered all possible use-cases of the design, including disconnects, page refreshes, scrolling, changing tab, hovering etc.
[x] I considered all related screens this feature might effect. (Landing page, Lobby, Room, Game, Store, Community, Press-kit etc..)
[ ] I checked out data on Google Analytics, Indicative and Metabase to make the right decision.
[ ] I considered C&K, SF, large maps and other possible future modes and maps
[ ] I considered 2nd order effects
[x] I looked at examples of other products
[ ] All designs I submitted are final and for implementation purposes

samgawaran commented 2 years ago

for review: @demiculus @goktugyil @JuanRoman77

Esqarrouth commented 2 years ago

I like Apex>Valorant. The others aren't good.

Also Gradient vs Flat should be decided by the general artistic guideline of the website. Which color schema have we been using? Stay consistent with that

samgawaran commented 2 years ago

Also Gradient vs Flat should be decided by the general artistic guideline of the website. Which color schema have we been using?

Majority of the color schemes are flat. only the Settlement, Cities, Metropolis and other few assets use gradient thats why I opted to go gradient when designing with using the settlement packs in mind.

So using Flat Color fits our general artistic guidelines

JuanRoman77 commented 2 years ago

Symbols (Valorant) make definitely more sense.

Clearer hierarchy
Simpler icons
Stronger, not plain. Icons stand out more, making it easier to identify

My only hesitation is that the gold mineral icon has a diamond shape. The top edges should be sharper, to be consistent with the other 2 icons (no rounded edges), and so it doesn't look too much as a diamond.

samgawaran commented 2 years ago

This is the new symbols design iteration (Finalized)

Esqarrouth commented 2 years ago

Aren't you supposed to be hiking or something 😅

samgawaran commented 2 years ago

Update

This is the latest approved design for the membership icons/name

Changes:

Changed icons from Mineral to Symbols
Changed names from Gold Platinum etc. to Plus, Premium, Elite
Increased the size of the check icons to reflect changes in https://github.com/colonistio/katan/pull/7508

demiculus commented 2 years ago

https://www.loom.com/share/59f7f7d1c75f444abc9d03881f11c58a

JuanRoman77 commented 2 years ago

The icons are too plain, that's why I suggested Sam to add some darker lines or filling, so they looked more like the mineral ones.

colonistio / design