Improving the design of the top banner

Question

A few weeks ago this site got a bit of a redesign as part of SE's move towards a responsive design, as detailed in this announcement. This also went live for everyone on December 7th. Now the reception of that redesign here was, like on many places around SE, less than positive.

However, SE is willing to work with the communities on improving some of their first ideas to some degree, as explained in this related question. In order for this, we ought to start a discussion about specific aspects of the design and as the most prominent part, as well as one of the most contentious and dissatisfactory, I'd first like to concentrate on the site banner here, as it's also the primary identifying element of our site design (containing, at least before the responsive change, our beloved movie scene images) and deserves the best treatment we're able to get out of SE.

So what have we got so far

The first iteration of the site banner we got was a plain banner in our signature orange-red colour with the logo on the left and a miniature version of the film strip on the right (anchored on the right content boundary, i.e. above the right sidebar):

This wasn't received too well and shortly before the responsive design went live, SE reworked it entirely into the (as of now) current version with the logo put between the images of a full-sized film strip in their old red-tinted colour palette (which also made the whole banner quite a bit darker).

The logo is still anchored to the left content boundary, while the film strip is anchored to the left window boundary. Thus it scrolls through under the logo when resizing the window.

Let's see if we can do better

Since the current iteration still doesn't seem all that satisfying for various reasons, I'd like to encourage some discussion to help guide the designers to something that might be a compromise SE as well as many of our site's users might be able to live with. So, feel free to discuss the top banner and what you think it does good, what you think it does bad, and maybe how it could be improved.

However, be sure to contentrate on the why. Try to explain why aspects of the banner seem problematic to you (or why they're awesome) rather than just saying "it's all crap". You don't need to have an alternative solution ready, we're not designers here anyway, as long as you can provide guidance for the designers as to why something doesn't work for you. And if you have an alternative ready that you think would be awesome, try to explain why and what it does better. We're not downright providing our own design here rather than trying to guide the SE design team to a solution. Of course if you love the current iteration, feel free to say so too, but explain why and what it does better than the original site design.

The top banner does have some limitations, though. First of all, it's of course fixed in size across all of SE. It also has to contain the site logo in the left part (relative to the content area), i.e. right above the left sidebar. The rest of the banner can be an image that can be anchored differently (and thus "move" upon window resize) to the logo, but it's a little unclear if it has to. A major motivation for this whole responsive design movement is also that the design adapts to changing window sizes (and should work on desktop and mobile). While it might not be worth the effort to optimize the design for all possible view configurations, that's still something to bear in mind.

Answer 1

Okay, first of all, let's look at the current iteration and its problems:

• It's too dark. It deviates significantly from our site's signature bright orange-red as devised in the original design concept (), making it look a little more drab altogether. There are two main reasons for that. First, they actually made the site logo part of the film strip frame, which is darker than the background behind it (that contains the original colour). Secondly, they also didn't get the transparency of the individual film scenes right. So rather than having the bright background colour shine through in the film scenes, it's a little darker and often merges with the frame, which is also less than optimal for setting them apart from the frame.
• The logo seems crammed in between the film scene images and with the image being anchored differently from the logo, it can cause them to be cut off a little oddly around the logo. However, they tried to mitigate that a little by making the logo part of the film strip frame and rounding off the cutoff area. This helps, but there might still be some breathing room needed around the site name.

However, I do think this iteration might be a move into the right direction. We have the luxury of having many small film images (17 as a whole, at least from the old design) to fill the whole banner space and they also have about the right size to just fit into the full-height banner. So I would like to work from that and adress the specific problems above. I did a very crude MS Paint job to demonstrate how I could imagine the current top banner idea to work:

1. Rather than putting the logo as part of the frame, I put it inside a "film shot" (I also had to move it down a slight bit to achieve that). This has the advantage of having our bright signature orange-red of the background around the logo. It also gives the logo more breathing space and a clearer separation from the rest of the film scenes, I think. On the other hand it also integrates it a little better, since the sprocket lines at the top and bottom go right through the entire banner now.
2. I made the bright background shine through the individual film scenes a little more. I actually did this by a crude floodfilling of the backgrounds but the designers might be able to use more elaborate methods for better results, working with transparencies in the original images maybe. All in all, this brightens up the film images too and brings the whole banner more in concordance with the site's colour palette.

3. I would actually anchor the film strip at the same position as the logo, if that is possible. This way the film scenes will not be cutoff around the logo rather than properly moving with the logo for all sizes. The only place where the images will be cutoff would be the sides of the window, but that's a natural place for image cutoff as well as the least noticable place. The way I specifically did it, the "logo scene" also starts exactly at the left content area, so as soon as the space on the left and right disappears and the content starts to shrink, the logo will be neatly placed at the left window boundary, with the rest of the image getting cut off only on the right side:

   

   It might also work with the current behaviour of having the images scroll through under the logo. That case would still profit from the logo having its own film scene section (gheez, I really have to brush up on that technical film terminology, how embarassing ;-)) and thus being emphasized more than the current crammed in version. But we'd still end up with odd tiny film scenes. So I think anchoring it with the logo might be preferable.

4. As to the mobile view, or when the window width gets too small in general, I think it might be preferable to just drop all film strip shenanigans altogether and use the plain red-orange banner with the logo only. The proper cutoff point for that might be when the site is narrow enough for both side-bars to disappear, as that also seems to be the image cutoff point on many other sites with a background image.

This is one specific solution I provided, but it's based on some general musings I had about why the current design's problems are the way they are and how I think they could be mitigated. It's not set in stone (hell, it was made in a few minutes with MS Paint), but I hope it provides some insights into the specific problems a proper design ought to tackle. In practice there would be additional things to consider (for example I pretty much overwrote the 4 images that are actually under the logo when I made my version. Of course they should rather be added to the rest of the film strip. It should probably also still me made repeating even if we have quite a few images for a significantly wide window size).

_{As an addendum, I also have to say that I liked the more pronounced colours of the very first iteration (they didn't use the red-tint for the white/grey parts), but I think that wouldn't work as well in a full-sized film strip like the current one and the one proposed above, as it could become a little too messy. It might, however, still be worth a try, provided there's untinted versions of the images available to the designers.}