Web: as a user, i want to ahve an 'in alpha' badge on alpha tools, so i can know which tools aren't yet GA

[owocki]

we should have some sort of “in alpha” badge on alpha tools like the leaderboard, profiles, and offchain explorer.. that way we don’t lose credibility when something is not quite 100% on those pages

https://gitcoin.co/tools

[sethmcleod]

How about something like this, a red tinted tag that matches the theme of those used for USD and ETH on the Issue Explorer

[sethmcleod]

Here is an orange tinted version. In my opinion the pink version matches our theme better, but red tones are usually used for errors whereas orange is used for warnings.

[mkosowsk]

@sethmcleod Looks great to me! I like the orange for the reason you mentioned but I do not have a designer's eye 🤔

[e-n-l]

How about an icon, something less language dependent?

I'm thinking a hex shape, like the stickers, with a Greek Alpha character on it.

[sethmcleod]

In my opinion text makes more sense here. Icons are great for concepts that most people are familiar with, like a heart for _like_ or hamburger for _menu_, but this concept isn't something you see often and I'm not sure most people would even relate this to the Greek character.

[owocki]

i think text is fine for the tools page. the users should maybe know already that the tools on the /tools page are in alpha bc they are listed under a heading that says 'tools in alpha'.

i should have been more clear when writing up this ticket.. i was looking for a badge i could put on each of these pages

https://gitcoin.co/profile/
https://gitcoin.co/faucet
https://gitcoin.co/offchain
https://gitcoin.co/leaderboard

that would signify that these tools are in alpha. i feel like a user could find themselves on any of the above pages and not know they are alpha (whereas on /tools its a little more clear bc of the header)

[sethmcleod]

Ahh that makes sense. In that case, my first thought would be to have a similar tag that fixes to the bottom left or right corner of the page as the user scrolls. When hovered over, you could add a tooltip that explains a bit more.

[mbeacom]

How about something like the "fork me on github" ribbon..?
https://github.com/simonwhitaker/github-fork-ribbon-css

[sethmcleod]

Yeah! I was thinking along the same lines, though I'm turned off by how much screen space those ribbons take up.

[mbeacom]

@sethmcleod Yeah... I just tried this out and it looks kind of meh.

[owocki]

[mkosowsk]

Web 3.0 starting to look a lot like Web 1.0... time is a flat circle? 🤔

[mbeacom]

@sethmcleod Yeah, I'm not a big fan either. 😂

[sethmcleod]

I think that's definitely a step in the right direct @mbeacom I just wish they wouldn't have gone with a 45 degree angle 🙄

[mkosowsk]

Honestly that looks like an arm band of mourning or protest to me...

[mbeacom]

I feel like I need to don a band of mourning for github fork ribbon. 😢

[e-n-l]

[mkosowsk]

Think this might be the one guys... could be a real game changer. Thoughts? 🤔

[e-n-l]

Maybe something along the top bar instead?

[owocki]

sorry guys, i was kidding when i suggested 'under construction' themed images. i was a mean 90s kid when those images were on geocities everywhere

[jakerockland]

Coming at this from another angle, could have a modified "alpha" logo for pages that are in alpha or reflect alpha parts of the project.

I can see not wanting to due this due to it introducing some potential for branding inconsistency, but I think there are ways to do it that are subtle enough that mitigate that and it is something that seems to be consistently present across all pages.

Perhaps something like this?

[e-n-l]

:shrug: TBH, I'd already made up that hex icon before your 90s flashback...

I was just playing with ideas that could visually convey "alpha." (those are actually GitCoin colors)

[PixelantDesign]

Lots of fun ideas here! From a brand perspective, I recommend that we keep the label a healthy distance away from the Gitcoin logo to 1) avoid the confusion that the entire Gitcoin product is in the alpha stage and 2) avoid confusion that label is at all part of the logo.

[owocki]

i wonder if it'd make sense for each tool to have it's own 'alpha' below under it's 'logo' (or subheader, if we dont want to have the overhead of making a logo for each tool)

[willsputra]

@owocki it might work if each tool's 'logo'/'title' position is consistent 😄

[owocki]

i like what you did there.. @PixelantDesign what do you think?

[owocki]

81e04b710f8ff04ac1cdbb1d9145f67db8ba94f5 commits a simialr badge to what @willsputra suggested. check it out => https://gitcoin.co/tools (and then click to each alpha tool)

[PixelantDesign]

@willsputra I think the tag concept works if the headers are consistent across the board. The tags are little hard to read, could you try darkening the type color or go black type on yellow?

[willsputra]

@PixelantDesign black type looks good too!

[PixelantDesign]

The Alpha tags are much easier to read @willsputra. Will you be helping us implement these changes (Headers and Alpha badge)?

[willsputra]

@PixelantDesign I'm still new to this whole committing code to open source so it might take some time. If someone else would like to help implement it, please go ahead. 🙂

[mkosowsk]

@willsputra I've got some cycles so am ready to help if you want a hand making a Pull Request to Gitcoin :)

Main steps:

1. Fork Gitcoin to your own repo
2. Make your changes and commit them there
3. Create a pull request from your fork via https://help.github.com/articles/creating-a-pull-request-from-a-fork/
4. Address feedback as needed 👍

I defer to the excellent @thelostone-mc for guidance for comments and corrections. Good luck!

[willsputra]

@mkosowsk wow thanks a lot! I'll give it a try in this couple of days.

[mkosowsk]

@willsputra let me know if you need a hand :) Pretty confusing to start but very powerful once you get the hang of 👍🏻

[willsputra]

@PixelantDesign I'm seeing 3 different font styles currently for the headers:
https://gitcoin.co/leaderboard (Muli)
https://gitcoin.co/gas (Futura)
https://gitcoin.co/universe (Futura - bolder)

Should we make these header fonts consistent? If so, which font should we use?

[mkosowsk]

@willsputra I believe Muli is the standard now but defer to @PixelantDesign 👍

[thelostone-mc]

@willsputra Ah we've picked the Muli family and we are migrating it slowly as the pages are getting updates

I believe we will still keep Futura but i doubt they pages where the tag will be used wont be one of those ! @PixelantDesign can answer this better

For the badges stick to Muli !!

Also since you are new to open source , me and @mkosowsk are at your service. Reach out to us on slack any time :)

[willsputra]

@mkosowsk @thelostone-mc thanks! I've added the badges in Muli without making changes to the header fonts. is this alright? screenshots:

[owocki]

i like this

[mkosowsk]

@willsputra looking sharp! 👍

[thelostone-mc]

@willsputra looking solid \m/

[thelostone-mc]

Oh you might wanna check up the alpha tag on the top earners page - mobile , seems out of place

[willsputra]

thanks all for the feedback! lemme know if this one's alright :)

[willsputra]

oops so sorry for the many commits.

[owocki]

follow up ticket => https://github.com/gitcoinco/web/issues/792