Header image needed for our OpenCollective site

[phated]

We are planning to work with https://opencollective.com for funding and sponsorship but we are in need of a banner image for the site.

Some examples of sites using Open Collective and their banner images:

• https://opencollective.com/mochajs (custom)
• https://opencollective.com/yeoman (default)

cc @tylersticka

[nicolemors]

Hi! Are there specific image dimensions that the banner image needs to be?

[phated]

Hey @nicolemors - it looks like their default image is 1280x640. The mocha page is using an image that is 2560x1280 but I think that is overkill because they aren't serving smaller images for smaller screensizes.

[phated]

The banner for the yeoman header seems to adjust between 719px and 851px tall and the width is the entirety of the browser window, so maybe the default size is too small. Maybe a 1920x1080 would be best; What do you think?

[nicolemors]

Yes that image size sounds good. 👍
I was looking at gulp red as a background color, but it is problematic with the color of the green call-to-action contrast wise. How much (if any) customization can you do of the text and button color?

[phated]

I think that is hardcoded into their platform and it can't be changed per page, unfortunately.

[phated]

I've reached out to their engineering team to see if button color customization could be implemented.

[nicolemors]

Awesome! In the mean time I am experimenting on how to make both colors play nicely together.

[phated]

@nicolemors it sounds like they are open to the ability to customize the color but it would be something I would be adding to the platform. I should have some time this coming Wednesday or Thursday or next week. Were you thinking the button background color would be the only thing to change or the text color also?

[nicolemors]

The white text looks great on the red, however the link color is pretty low contrast on the red as well. ![screen shot 2016-05-02 at 4 36 14 pm]

(https://cloud.githubusercontent.com/assets/1895290/14971109/11322b1a-1084-11e6-9a64-bfd15ce84007.png)

[phated]

Maybe they'd be open to adding a text shadow to the link text for all platforms. I'm not sure though. I was wondering what color you'd rather have the green button be and if the text inside it would need to change color.

[nicolemors]

Hey @phated, I went ahead and played around in the browser with an image I created. Here are different size screen grabs from that experiment.

My first design goal was to incorporate the gulp red into the back ground. Next, I wanted to include the gulp cup logo in some way. Adding in the cup logo proved challenging when it got down to small screens. So the image I made crops out the cup on small screens by placing the cup to the left of the viewport. Once I had the cup in, I didn't want it to just be all floaty in the space so grounded it with a darker shade of the gulp red. I also wanted to add some interest to the layout by making it more of an angle slash. This creates some motion and makes it overall more dynamic. I think at medium-ish sized screens it cuts through the CTA which is a fun bonus, drawing the eye to the call to action.

About that call to action... I experimented with making it a few different colors and landed on the black with reverse out white for maximum legibility and in my designerly opinion, it just looks nice. I think maybe making an alternate customization of white with black text could be a useful design option for other images as well.

For the blue link text above the headline, I added a simple text shadow of 1px 1px 1px rgba(0, 0, 0, 1) as you suggested earlier.

Let me know what you think + if you have any questions.

[phated]

@nicolemors that looks awesome! I still have to find time to help them implement the button customization but I really like the black with white text you have here.

[tylersticka]

Small suggestion (if it's even possible) might be to make the "GulpJS" link text white but with an underline (instead of blue with a shadow). (Just an idea.)

[phated]

@tylersticka I could run it past them, but it isn't configurable and needs to work across all their groups.

[phated]

@nicolemors @tylersticka it looks like they have a temporary solution to our styling woes. They are going to add a class based on the group URL slug and we can vary CSS using that. Was there any other styling that you would want to change?

[nicolemors]

That's it from me!

[phated]

@nicolemors can the mockups use @tylersticka's idea for the GulpJS link?

[nicolemors]

I added border-bottom: 1px solid currentColor to the link. If you just enable the text decoration the underline interferes with the descenders.

[phated]

Thanks! Would you mind sending a Pull Request to this repository with the assets? Everything in this repo is Creative Commons 0

[nicolemors]

Sure, do you have a preference of where I put it?

[phated]

No preference; however you'd like to submit it is fine.

[phated]

Closed by #10. Many thanks to @nicolemors and @tylersticka for helping with this!

[phated]

@nicolemors @tylersticka great news! We've launched the OpenCollective and it's using the work done here: https://opencollective.com/gulpjs

Thanks so much for helping with this!