Web: Design: Gitcoin Toolbox

[owocki]

right now the featureset of gitcoin is competitive with other bounty projects…

but in the future, gitcoin could maybe be a toolbox… a one stop shop that sells rocket fuel for open source software repos.

I would like one of the designers in the community to come up with a design for a module tentatively entitled 'toolbox'.

Summary: Tips and bounties are only the first couple products that are to be offered in the network. For each of our persona types (developer, repo leader, sustianer), there will be multiple products. This module will be a centrralized dashboard where members of the network can

• for active tools, turn tools on / off
• see upcoming or 'preview' tools
• 'view more' about tools they might be interested in

[gitcoinbot]

__This issue now has a funding of 0.09 ETH (63.41 USD) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $10557.72 more Funded OSS Work Available at: https://gitcoin.co/explorer

[thelostone-mc]

Still a little unclear on what qualifies as a tool ! Could you elaborate a bit ?

Also are you saying Different roles -> different tools ? Would all the tools be readily available to every user ?

why would we want to provide an option to activate / deactivate tools like tips. A lil confused here

[gitcoinbot]

__The funding of 0.09 ETH (63.94 USD) attached has been claimed by @algae12.__

@algae12, please leave a comment to let the funder (@owocki) and the other parties involved your implementation plan. If you don't leave a comment, the funder may expire your claim at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $10645.38 more Funded OSS Work Available at: https://gitcoin.co/explorer

[algae12]

_Yay!_ Some design work on the repo 😄
I'd be happy to work on this issue and will be able to provide mockups by this Wednesday.

[owocki]

@algae12 great!

Still a little unclear on what qualifies as a tool ! Could you elaborate a bit ?

We'll be launching more tools (for example, an hourly compensation tool) as the project evolves. This page will serve as an index of all of those tools. Sorry I can't be more specific (many of the tools aren't ready to be discussed publicly yet).

Also are you saying Different roles -> different tools ? Would all the tools be readily available to every user ?

Yes, all tools will be readily available to every user. I just think that the 'different roles' thing is an easy taxonomy to classify them. It's like the agile ticket specification thing, As a __who__, I want to __what__ so I can __why___.

why would we want to provide an option to activate / deactivate tools like tips. A lil confused here

hmm... yeah.. we'll need to see if the on/off paradigm is the right way to think about this. my thoought for this index page was that people could 'express interest' in an upcoming tool by clicking on it, thereby putting them on the waitlist (i.e. they get alpha access, and the organization gets to learn about what tools ppl are excited about).

but maybe for the live issues themselfs, the on/off paradigm doesnt work and each tool should just be active for all users.

@algae12 let me know if any of this isn't clear to you.

[algae12]

@owocki All clear captain 👍

[thelostone-mc]

Alright that provides a certain amount of clarity ^_^

[algae12]

Toolbox Design V1.0

Here it is, I hope you like it 😁
Let me know about any design changes you might have in mind 🖊

Notes

As you see, I switched to using the Open Sans typeface, as discussed on the slack channel.

What stands out more then the new font is the new surrounding design, which is part of a gitcoin.co redesign I'm working on. Please let me know if you like this new look and feel and I'll continue working on it. Obviously, this toolbox design can be implemented in the existing gitcoin.co site and still follow the design guidelines.

Files

Sketch

[owocki]

this is very cool. thanks @algae12

[owocki]

lets do 24 hours of feedback and see what ppl think

[thelostone-mc]

@algae12 this is nice !! Big fans of the cards.
My two cents

• what if we were to center align the content + title within a card (or shift toggle button to the right or left )
• have you used open sans for both heading and body ? ( I've often been advised to pair it up with Lora or Libre Baskerville and the end result is usually better thanks to the contrast )
• the toggle button looks a lot bit too flat but yeah that can be worked up. No biggie

PS: the left side bar has a lot of white space ( too much of anything is bad I guess)
I'm not sure if or what we can fill it with. :/
Nothing pops into my head as of now but yeah just putting it out there

[algae12]

@owocki Sounds good to me.

@thelostone-mc Glad you like it 😄
Thanks for the feedback! I'll try and tackle some of the issues you have raised:

what if we were to center align the content + title within a card (or shift toggle button to the right or left)

My reasons for the card alignment decisions on the card are simple:

• The description is text heavy and therefore should be left aligned for ease of reading (centered text is a pain to read).
• The toggle button should be the center piece of the card. It needs to call the users attention, and clearly imply interaction. For those reasons, I centered it, creating an alignment contrast between the description and the toggle button.

Here are the different alignment options, if anyone else wants to weigh in on this:

Left aligned description, centered toggle button.

All left aligned.

All centered.

have you used open sans for both heading and body ? (I've often been advised to pair it up with Lora or Libre Baskerville and the end result is usually better thanks to the contrast)

I have been using Open Sans for both heading and body. I decided to go with color and weight contrasts instead of type contrast. I feel that type contrast works really well for online magazines or landing pages, but less so in technical pages, such as profiles or settings configures.

This is how the toolbox will look with a Baskerville - Open Sans font pair:

the toggle button looks a lot bit too flat but yeah that can be worked up. No biggie

Well, that's purely a matter of taste 😜

PS: the left side bar has a lot of white space ( too much of anything is bad I guess)
I'm not sure if or what we can fill it with.

Everything surrounding the actual toolbox module is still an early draft of the new design, so don't take any of it as even close to final. However, this white space can be handled with some minimal illustrations in order to make the sidebar less empty.

[thelostone-mc]

• the all centered card still looks better to me but let's see what the others say
• I think I like your original idea that best ^_^ sans for both! Baskerville doesn't look great here.

Apart from that, everything else id awesome ^_^

[owocki]

@algae12 paying this out now. thanks!

[gitcoinbot]

__The funding of 0.09 ETH (64.54 USD) attached to this issue has been approved & issued to @algae12.__

• Learn more at on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $11337.32 more Funded OSS Work Available at: https://gitcoin.co/explorer

[algae12]

@owocki Thanks 👍
Always happy to work with you :)

[abitrolly]

https://gitcoin.co/tools