Critique my header design.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Critique my header design.

Post 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.
Attachments
Header image
Header image
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Critique my header design.

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Critique my header design.

Post 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 :)
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Critique my header design.

Post 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Critique my header design.

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Critique my header design.

Post 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.
Attachments
Revised mockup
Revised mockup
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Critique my header design.

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Critique my header design.

Post 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.
Attachments
Final mockup
Final mockup
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Critique my header design.

Post by pickle »

Ya, that looks fine. The orange might be a touch too light for the white text though.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply