Some www.fpo header mockups

I worked through these fedoraproject.org redesign header mockups today with Sijis’ feedback. I’m really liking the last one, #7. 🙂 Sometimes you just have to keep trying, keep experimenting, until you discover something that works.
The problem we were trying to solve here was having two competing navigation bars, and placing the navbar in such a manner that I felt it wouldn’t necessitate an awkward non-front page layout. In #6 and #7 you can see the two navbars have been collapsed into one, and it’s above the main banner / slideshow area. Sijis suggested moving it above the banner and I think it works really well. The problem with it on the bottom is that if you have a subpage that doesn’t have a banner, it makes the nav bar move up and down the page making it much more complicated to move between pages via that navbar (when the navbar itself jumps around the page you have to refind your place on the page to click on a nav item.)
Anyway, I hope these are at least nice eye candy, if not a more interesting study of how to solve a design problem through iteration. 🙂

#1

#2

#3

#4

#5

#6

#7

17 Comments

  1. Chris says:

    I like #2 best – but maybe with the reworked menus from #6 & #7. The big beautiful image with the overlayed message is great, plus it's easily clickable. Big areas upon which I want to click and see all pages.

  2. Tom "spot" says:

    I do miss the clear "Download" "Join" "Get Help" buttons in #7, that just seems so nice for people who hit the website and are looking for those items to be able to immediately click them and bypass everything else.

  3. I like #3 the best, but I'm afraid people will think that it's too similar to http://www.redhat.com's way of doing things. (I don't think it's that similar, but it's close enough to make people wonder.) But that shouldn't keep you from doing it.
    It would be most awesome if it were really easy to adjust where on the photo that transparent box could be. 🙂
    Also, congrats 😉

  4. I like the single navigation bar in #6 and #7, initially it was confusing, not only having two navigation bars, but the second one was also in an unusual place, in the middle of the content.

  5. First thought on looking at all of these is that the desktop screenshot is…cluttered. Too much open at once, and viewed through the small window of the images as embedded in this page, it's information overload. Dunno what plans might be for the slide show blips, but splitting the applications into those might be a reasonable remedy. But maybe this is all just a first impression from insufficient information/experience — afraid I don't have time to investigate more deeply. I'm sure you'll consider/ignore me as you think best regardless. 🙂
    I'm pretty sure Firefox's intro page acquired its current huge Download button at some point in the design process — strongly think that's something you should absolutely have. (Whether those downloads will translate into users is another question — design can help with that conversion, but ultimately I think that problem must be tackled primarily in other ways.)

  6. I like #5. The dark content area offsets the otherwise very bright colours.

  7. I live #2 and #3 the best, I think it's these two designs have the advantage of being more discoverable than "click on a number or on a left|right arrow to discover more".
    Indeed a visitor directly see all 'selling' points : "Free your desktop", "Printing made easy" and so on…

  8. Daniel Devine says:

    The only problem is that they all look great – who could decide!?!?
    #7 would be a good choice except I don't really think that the yellow arrows to either side are really obvious to the user of the site — I don't think I normally would have noticed them unless I was looking for them. I think the action they perform needs to be more obvious and they may be more obvious and look better when not right on the edge of the page.
    There should also probably be a small piece of JavaScript which rotates through the categories. Shouldn't be very hard to make it so that the page works fine without JS too.
    #1 to #5 all look really cool and I like them, but I think some people may think they look a little *too* cool.
    Congratulations on your engagement!

  9. Fri13 says:

    1 and 5. The gray right box with numbers and blue top panel. They were the thing what made the whole site professional and very clear and intuitive.
    I think if I should choose from those. It would be no 5.

    1. i agree. #1 and #5 look the slickest to me. clean, straight to the point, simplicity with style. #2 and #3 are too busy at glance. and #6 and #7 make me think of what we have right now. the one and five give color contrast and some depth to the page.

      1. oh, by the way, these looks fantastic! you guys do a great job! i'm glad you are using your mad skillz for fedora.

  10. For me, #7 is just perfect – the download button is clear if you know you just want to get the latest Fedora, but the nice big menu bar means it's also clear how to get to the additional information if you want that.

    1. Oops, didn't match the numbers up to the pictures right. I meant #6. #7's multi-tone background just feels cluttered compared to the clean look of #6.

  11. I will be honest, #5 catches my eye the most…. #1 seems kind of plain to the eyes where as #2-4 bombard me with alot of information. Where #1 doesn't seem to give alot of information, #2-4 is VERY "busy" in doing that…. maybe too much so.
    #6-7 are very simple, displays the information in a way that is easy to digest. But being simple, it simply lack a means of attracting the viewer since they suffer the same issue as #1, they are plain to look at.
    The reason that I will not suggest #5 outright is that, for some reason, it feels like a familiar look. It feel as if it something that Apple Inc. would have done… which could present some issues.
    Outside of that, there are a few minor things that I would have to question…. like the need for two home labels in #1-5, if the "go" button is really necessary beside the search bar, etc.
    That is my rather small opinion at this time.
    Duv

  12. Misha Shnurapet says:

    I really like #5 and #6 as the most clean ones. I think that the gray gradient on #7 is kinda like dirty water on the back of a white car. 🙂

  13. I wonder why buttons [HOME | DOWNLOAD | JOIN | GET HELP] are not in #6 and #7. With those buttons, #6 and #7 are the winners 🙂
    Cheers,
    Germán.

  14. […] Fedora, Fedora Design Team, Websites by mairin on September 3, 2010 So it’s been a while, a month really, since I’ve given you an update on the Fedora website redesign. Well, in the past month […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.