[Design] Banners on the Front Page

Harry Wood mail at harrywood.co.uk
Sat May 11 15:52:47 UTC 2013


I've designed a slightly smaller SOTM Birmingham banner (165 x 116)
http://harrywood.dev.openstreetmap.org/temp/sotm-birmingham.png


I suggest we put it on the site and display it    

...or display the SOTM US one if rand<0.4  (40% of the time. Decided on page load)

This is the SOTMUS one:
https://github.com/samanpwbb/openstreetmap-website/blob/1781f56180fe6597d4f1808734f71b470a227bc1/app/assets/images/sotm-us-ad.png

Harry


> Brian emailed me with an image previously. I'll share it here:
> http://harrywood.dev.openstreetmap.org/temp/comeToSotm.png
> That's actually quite massive. 165x165 pixels
> 
> Previous banners were smaller e.g. 165x116 for this SOTM PDX one. I think the tokyo one (can't find it in github just now) was shorter than it was wide too. 
> https://github.com/mvexel/openstreetmap-website/blob/cd280aeac2874305b2d65871c56e2f02b1f2e7ef/app/assets/images/sotmpdx.png
> 
> A taller image shoves things further down the page. "Make a donation", and indeed the bottom of the banner image itself will start to fall off the bottom of the screen for non-logged in users.  I'd suggest that should be redesigned a bit less tall in line with previous banners. (agree / disagree anyone?)
> 
> 
> But we could consider a banner at size 165x50 similar to this SOTM scotland banner, or shorter even :
> https://github.com/openstreetmap/openstreetmap-website/blob/749caaff73596e284c39ce7d0a840f8a0a50687d/app/assets/images/sotmscotland.png
> 
> That's if we wanted to place both banners,  SOTM black bull and SOTM US,  on top of eachother.  So in this case we'd need the SOTM US image a bit smaller too. This one:
> https://github.com/samanpwbb/openstreetmap-website/blob/1781f56180fe6597d4f1808734f71b470a227bc1/app/assets/images/sotm-us-ad.png
> 
> Does anyone want to prototype that?
> ...or it's probably quite trivial to put in a bit of randomised flipping code, if we just go with both images at a larger size.
> 
> 
> Harry



More information about the design mailing list