A better homepage banner

[timothyfcook]

Due to my intense dislike of the banner resulting from #3711 I offer a rough sketch of some alterations to improve the design:

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[chadwhitacre]

@timothyfcook Looks good as a mockup. Next step would be clean this up and make a PR.

Your ticket title says "homepage." What do you envision on inside pages? Something different?

[chadwhitacre]

cc: @sils1297 per gratipay/project-review#36 (comment)

[chadwhitacre]

Here's the original for the current banner if you want to start with that:

[chadwhitacre]

[chadwhitacre]

[chadwhitacre]

[chadwhitacre]

I'm struggling with this. Without the lines of the banner image, I'm not sure what all of the elements of the top of the page relate to.

[chadwhitacre]

Without the banner, the content area also gets lost:

[chadwhitacre]

For comparison:

[chadwhitacre]

The stronger banner demarcates the left and right boundaries of the page, and also sets off the "top stuff" from the content area.

[chadwhitacre]

[chadwhitacre]

Needs more work, @timothyfcook. :-)

[chadwhitacre]

The pxm is 11 MB, so I'm reluctant to put it in the repo. I've uploaded it here:

https://www.dropbox.com/s/osrk0pt7j8soo24/banner.pxm?dl=0

Here's a branch with my code so far:

https://github.com/gratipay/gratipay.com/tree/no-wood

[chadwhitacre]

Okay! @timothyfcook is putting the squeeze on. He threw in $20 and I found a 10-spot in my pocket. That and some heartcoins and stickers and we've got a designer co-resident here at Stack on the case: he's going to do an illustration for us that we can hopefully drop-in replace for the picture of my table. :)

[timothyfcook]

So stoked.

[chadwhitacre]

Raw:

[chadwhitacre]

First cut at placement:

---

---

[timothyfcook]

Looking great! I would maybe render the edge of it differently. Less of that border/drop-shadow. Maybe flat with rounded corners to match your button and icon style.

[chadwhitacre]

edge of it

What is "it"? The profile pic and chalkboard?

[timothyfcook]

the green rectangle. the whole banner box.

[chadwhitacre]

There is a 1px border on the top and bottom of the green rectangle, but ... you are seeing a drop shadow on the green rectangle?

[chadwhitacre]

More subtle coloring:

---

---

[timothyfcook]

looks good more subtle. Yeah, it's the 1px border. What does it look like without that, but with slightly rounded corners (like the rounded corners on the buttons). Obvs would have to sync the corner-rounding with that yellow notification box as well.

[chadwhitacre]

I used this and this to colorize the image. Then I trimmed transparent pixels, resized it, and positioned it in CSS.

[chadwhitacre]

Moving to #4267 ...

[chadwhitacre]

What does it look like without that, but with slightly rounded corners (like the rounded corners on the buttons). Obvs would have to sync the corner-rounding with that yellow notification box as well.

If you can live without that and can give a +1 to #4267, I will merge that and deploy it right now. :-)

[chadwhitacre]

@timothyfcook Because that is SCOPE CREEP you didn't SAY ANYTHING ABOUT THE Border just the image!

[timothyfcook]

Agreed. lol. separate ticket.