Web: design: ios gitcoin.co landing page

[owocki]

What

We will be launching the Gitcoin iOS app soon.

In order to facilitate this launch, I would like to design a very simple web interface to show off the app and all it can do.

The site should drive the user to the main CTA of the page, which is to download the app from the iTunes app store.

About the iOS App

The Gitcoin iOS experience allows you to browse funded work in OSS from anywhere you can take your mobile device.

Just download the app, sync your github profile, and then swipe through funded work in open source software. The app will intro you to repository owners with whom you've matched.

Assets

https://youtu.be/F9e_0xF620w
https://www.dropbox.com/sh/rdv7xy0gihjbt5g/AABm_xCgVs2_zwUkrbLRINBga?dl=0

[gitcoinbot]

__This issue now has a funding of 0.1 ETH (71.74 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
• $10820.53 more Funded OSS Work Available at: https://gitcoin.co/explorer

[Elaniobro]

Are you looking for a design? Or the coding of said design?

[owocki]

a design

[owocki]

i will do a new bounty for coding of said design

[gitcoinbot]

__The funding of 0.1 ETH (85.51 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
• $12984.17 more Funded OSS Work Available at: https://gitcoin.co/explorer

[algae12]

@owocki I'm gonna try and take on another design issue upon myself, expecting the design to be ready by this Sunday.

[owocki]

[algae12]

@owocki Okay, here it is, hope you like :)

Design (Updated):

Assets:

Sketch

Sketch file

[thelostone-mc]

@algae12 the green to purple transition. It's wow !!
Would you happen to have the color transition schemes ?

Also when you drew up the design for this , did you intentionally change the navbar ?
It's different from https://github.com/gitcoinco/web/issues/133

[owocki]

Also when you drew up the design for this , did you intentionally change the navbar ?

I think this is a different issue, right?

In general, I think the navbar should usually stay consistent across the site... I know the current one is not perfect though!

[owocki]

I really <3 the design. Can't wait to see what others think!

[owocki]

one thing thats missing from this design is a footer.. mihgt be worth it just to take the current footer and make it a little cleaner (black on white instead of white on dark).

[thelostone-mc]

I think this is a different issue, right?

well I just wanted to make sure whoever claimed this, didn't put in effort to make this navbar and
finally go back to the original one. So if we have a specific design in mind, it ca updated throughout the site

In general, I think the navbar should usually stay consistent across the site

Agreed 👍

[PixelantDesign]

I may not have all of the context for this landing page...

Looks nice and clean! I do agree with comments above around navigation structure being new. Stylistically the iconography and type also seem to be an evolution from the brand.

The current design tells me how to but might be missing on what it is...all of this depends on what we think the use case is for a user that is coming to download the app.

I think it would also be helpful to have some context of the following on this page.

[algae12]

@thelostone-mc Really glad you dig that gradient as much as I do 😄
Here's the transition scheme:
linear-gradient(-228deg, #8E2ABE 0%, #37EA9C 100%)

Regarding the nav bar - It is intentional. I wanted to make the mobile landing page stand out a bit from the other sections of the site, so I changed the styling (not structure) of the navbar to fit in with the page style. It's still the same navbar layout but under the new coating:

[thelostone-mc]

@algae12 Ah makes sense ^_^
@Elaniobro you would probably need this to finish up the styling :D

[algae12]

@owocki I'm glad you like it!
Updated the design a tiny bit and added a footer.
Also, forgot to include the sketch files before I went off to bed yesterday, added them to the comment as well 😃

[algae12]

@PixelantDesign Thanks for the feedback! The requirements state it should be -

very simple

And that does make sense if you take into the account the fact the user will enter this page already equipped with the knowledge of what Gitcoin is (he read that in the main landing page). What he doesn't yet know is how to use the mobile app Gitcoin provides, and that app is really simple, so much that we were able to sum it up in 3 easy steps.

[owocki]

closing this now. i think we can treat the design or close-to-final for MVP. https://github.com/gitcoinco/web/issues/174 @Elaniobro its all you!

[gitcoinbot]

__The funding of 0.1 ETH (71.79 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
• $11264.56 more Funded OSS Work Available at: https://gitcoin.co/explorer

[Elaniobro]

@algae12 is there a tablet/phone view of this design? Also, looking for a way to view the .sketch file(s) you uploaded to the issue above. Do you know of a good way to do so?

[owocki]

https://zeplin.io is quite good for viewing sketch files

[owocki]

defer to @algae12 on mobile view.. i think well likely be able to get by by writing some quick media queries though