Page 1 of 1

Critique my header design.

Posted: Thu Oct 13, 2011 5:06 am
by social_experiment
I've created the header depicted in the image. I feel it's complete but i would like some fresh input on where it can be improved or updated. Something that's not visibile is the hover image for navigation, a linear fill with the orange on top and the white at the bottom.

Re: Critique my header design.

Posted: Thu Oct 13, 2011 4:21 pm
by pickle
This is quite subjective & of course the final effectiveness depends on how it fits into the whole design. With that said:

1) The search should be in the top right. Always in the top right. Users almost exclusively expect the search to be there & nowhere else.
2) Your gradient on the current search bar is inconsistent with the other gradients. It should be lighter on the top.
3) The "This is a header" section has too much padding on the bottom
4) Why is there that bar between the links & the "This is a header" section? Personally it seems too large for an artistic flourish & should be removed.
5) What will those links link to? Different pages within the site? The paradigm for links at the very top seems to be that each link (or tab) will show a different pane. So if they showed stuff like you Bio, Portfolio, Contact info - that would make some sense. With that said, it just seems wrong to put the navigation links above the header.

Re: Critique my header design.

Posted: Thu Oct 13, 2011 5:20 pm
by social_experiment
1. Ok
2. I've done a bit of testing with the gradient placement and found the current one satisfactory but i'm going to implement the given suggestion and see what it looks like.
3. It's actually the height set to a minimum value to accomodate the header image. In your opinion, is there any limit or a maximum height value for a header image?
4. The bar is part of the header image at the top. Originally i didn't have the menu at the top and gave the header a margin of 1% at the top.
5. They will link to pages as you mention, a contact page, about page and a portfolio page. I've had them below the header but i don't like the look of the layout with them in that specific position. I've had a look at my morgue and a few of the sites that do have links at the top also have some sort of image to compliment the link, i might add something like that to see how it affects the design.

Thanks for the feedback :)

Re: Critique my header design.

Posted: Thu Oct 13, 2011 5:31 pm
by pickle
2) The idea is that a gradient is supposed to give a space dimension by simulating a light source. 2/3 of your gradients have the light source from the bottom. I have found though, that colours that look good in a gradient don't necessarily look good when the gradient is reversed. Generally with light-on-top gradients, the difference between the 2 colours is smaller

3) In my opinion, the header section should be as small as possible, while still being an obvious title for the page. If a page is all white with 14px font, a red rectangle at the top with size 14px font could work. Why is the image not in the mockup?

Re: Critique my header design.

Posted: Thu Oct 13, 2011 5:41 pm
by social_experiment
pickle wrote:2) The idea is that a gradient is supposed to give a space dimension by simulating a light source. 2/3 of your gradients have the light source from the bottom. I have found though, that colours that look good in a gradient don't necessarily look good when the gradient is reversed. Generally with light-on-top gradients, the difference between the 2 colours is smaller
Ok, i understand what you are saying
pickle wrote:Why is the image not in the mockup?
I haven't really decided on what to use. I'm looking from something that will compliment the site, the site is about development so i thought maybe something code related, a piece of code that has a low opacity or keywords below each other like : php development cms, etc.

Re: Critique my header design.

Posted: Fri Oct 14, 2011 1:26 am
by social_experiment
I've made some of the changes to the latest revision of the design. Since i had no idea about what image to use i settled for a tagline that i use in a similar manner as an image but with the bonus of being more flexable. The area containing the header and tagline is set to a height of 150px. I also used a generic image to keep the gradients similar. Lastly the navigation bar and search bar have been swopped around.

Re: Critique my header design.

Posted: Fri Oct 14, 2011 9:53 am
by pickle
Looks good. I'd tweak the navy gradient a touch to make it span the whole section. Right now it looks like it just covers the first 1/3. I'd also dial down the lightness at the top of the links bar. It does affect readability a tiny bit, and the difference in colours seems greater than the other gradients. Lastly I'd shrink the size of the tagline a bit, as the font size is too close to the header font size.

Re: Critique my header design.

Posted: Fri Oct 14, 2011 11:05 am
by social_experiment
Thanks for all the feedback. The attached image is what i have come up with after the suggestions; I lowered the fontsize for both the header and the tagline, and i'm thinking of removing the gradient totally from the navy area, it looks a touch better without it. Something i might also change is the color to the lighter blue that was on top of the image. The links bar gradient is a bit higher and the orange color is what the hover state looks like.

Re: Critique my header design.

Posted: Fri Oct 14, 2011 2:01 pm
by pickle
Ya, that looks fine. The orange might be a touch too light for the white text though.