Badges
jayceeday opened this issue · 10 comments
hello, following up to our Octicon meeting today, I would like a recommendation on what Octicons I can use for badges.
Badge Octicons
Here is the current selection (I removed ones we spoke about in the meeting)
I would like to add megaphone, and if there are others that are fit!
You can also use this Figma file and just leave here what I can use
Natalya suggested that we follow the "Lucky Charms Rule" and just leave heart stars horseshoes clovers and balloons, and not GitHub UI. I'm not super sure what is used where so would be good to know what those Lucky Charms are.
Suggested Badges Icons
A question I forgot to ask is what I should do for our 5 suggested badges
This is what I currently have, but open to suggestions if you know of better ones! I'm really not set on the "Moderator" icon.
thank you all!
I spoke with Taryn as it was brought up a couple times that I should speak with her about branding
I messaged her and she said:
Okay, cool. Fun feature! I don’t have any concerns about colors or icons, but agree that the :lower_left_paintbrush: Moderator one doesn’t feel quite right. What about megaphone?
Working session notes (From Ash):
@jayceeday shared the upcoming user badge concepts that include colored label badges and octicons. The main question is around the set of icons to be allowed and @tallys made the suggestion for the "Lucky Charms" rule where we detach from any brand/product-related visuals and supply more generic options such as heart, sun, moon, bug, etc.
I missed this session yesterday, but I’m reading the discussion now and my two cents more than not using UI specific icons is to not use icons with special meanings (ie: The north star icon, which is now reserved for Arctic Codevault), or not to use icons which don’t match the badge semantically (ie: The brush for moderation, which implies graphics/visual/design/art and was made for things such as themes, or color pickers).
I don’t have a problem myself with some of the badges like “rapid reviewer” using a flame, trusted responder using the speech bubbles, or core team using people, but I also see how those could be somehow refined, or if we have the resources, consider new metaphors we don’t have (for example a gavel / mallet for moderator), or a normal star or badge icon for “valued contributor”.
On a secondary note, I feel like the 16px icons feel cramped inside of the labels (some of them touching the borders) and I'm also thinking about the small icons Julius made for timeline icons and if it would make sense to expand that set for those badges, unless we consider making the badges bigger, but that could also throw off the rest of the design.
thanks @edokoa !
I have changed the moderator icon to the megaphone based on taryn's suggestion. I don't think we have a perfect one for that yet, but is better than the paint brush 
Could you link me to the the project that Julius did that you are referring to and what size were the icons?
I wanted to make the badges 22px high to make it more spacious but the maintainer badge we currently have is 20px high, we could update this but might increase scope. The 20px high also better fits in places, I can try with the smaller octicon and see how that feels!
I met with Jon Rohan in a Primer meeting, here are some points we spoke about:
Once we have decided on the Octicons then we can try out the smaller icons with the badge, and hopefully the Octicons team can give feedback.
These were the options:
I think we have to keep the 18px line height + 1px border (top and bottom, so 20px, because that is what we use everywhere else for labels. Jon said it'd be a bigger lift to make the padding larger, so should try with the smaller icons.
Here is for the suggested labels, do the octicons look too small? Or is this better than my previous screenshot?
@jayceeday I'm not sure how I feel about resizing the octicons as our usage guidelines state that the icons should be used at their intended size of 16px or 24px. I'm happy to work with you on how we can find a good solution together though. As @edokoa mentioned this could be an instance where we expand the sizing for the 12px icons which is the same size as the feed icons created by @Juliusschaeper.
As far as the icon set goes, I would remove the followingf icons:
- code-scan icon which is the search with <> as that is specifically used for security code scanning.
- asterisk/north-star icon used for Arctic Code Vault, you could replace with the regular star icon
The rest of the set feels pretty generic which I feel works.
Just chiming in to +1 @ashygee: Octicons should never be resized, that's why I was proposing expanding the 12px set.
Thank you @ashygee + @edokoa !
When I mentioned the different sizing, I was referring to expanding the 12px set by Julius, not an entirely new size.
Here is an example of using the 16px vs. expanding Julius' 12px set. Would love your feedback of which one you think looks better, and if I can expand the set? I think I like the 12px ones.
Also for the icon set I'd love to use the trophy, ruby and certified. Not sure exactly where else in GH they are used. Could I replace some with these? Maybe the certified is already saved for something similar.
Moved to our private repo https://github.com/github/primer/issues/1188