Header Design & Usability

"Let's slap on a logo and stick a navigation up there already!"

Subscribe to our weekly newsletter and receive the latest in the web's best design trends, tutorials, information and more.

There are several principles that should guide your thought process when designing a header. Most designers simply throw up a logo and slap on a navigation without truly giving it anymore thought beyond the act alone. But the fact of the matter is, is the header is one of the most, if not *the* most important aspects of your site. It's the thing the visitor first sees.

We're trained early on to read from left to right, top to bottom. So the first thing that your visitors are focused on right after or during the page load, is the upper left portion of your site. This is generally where the visitor expects to see a logo (ie, your brand) and a navigation. When you're designing a header, it's of key importance that you keep the fact that your visitor's eyes will initially focus on the upper portion of the site.

Does this mean that every site you design has to have a logo in the upper left corner with a horizontal navigation? Not at all, but I will say it's the safest path to choose. The vast majority of sites out there abide by this structure. If you're designing a site in which access information is of key importance, it's the safest route in the realm of usability.

So let's take a look at a few examples of good header designs, and bad header designs.

The Bad

This example should be no surprise to anyone with the least bit of artistic talent that it's a bad header design. First issue, there's no padding on the top/left of the logo which is always a no no. It clashes with the side of the browser. The navigation is right aligned and hardly noticeable that it's the primary navigation. Everything is *cluttered* beyond belief. Use this as an example of what not to do when you design your next header.

This one is quite a bit better in a design sense from the first one, but at first glance it's a little bit tricky. There is really only one issue with this header that I have a problem with, and it's the fact that the logo and the selling point is completely cased within a 2px gray border. Why is that bad? Because it looks a *lot* like a banner! Visitors have, overtime become blind to those certain graphics that look like advertisements. This header design would be improved immensely just by removing the 2px border.

The issue with this one once again is the lack of padding, and the navigation is really not very noticeable And when you do notice it, guess what; it looks like a google adsense textlink block. Definitely what you don't want to do. It's also cluttered a bit up top with the UPS and 15% off ad, those could easily be stuck somewhere else prominent.

There are three issues with this header. First, lack of padding on the logo (as with the couple examples). Secondly, the logo is cut in half by the background. The upper portion is blue, bottom is white, and it just makes it really cluttered looking. It makes it that much harder for the visitor to remember it. And the third issue, although not a big one, from a design perspective it's a bad idea to leave a big open gap to the right of the navigation. Either spread the links out further, add a link, or put something else of use in that value position.

Bunch of issues with this head design. I'm not a fan of the line going through/behind the logo, as with the example above, it adds more distraction to the actual logo. Now the main issue is the fact that it seems as though there are 2 navigations. First you have the line of white links at the top (the true navigation), and then just beneath it you have the "what works:" blip which is styled in the same exact manner except for link color. This creates for clutter, and initial confusion.

The Good

This is a simple / standard example of an effective header that does what it's supposed to. The logo is displayed in a noticeable prominent fashion, there's a big navigation with easy to read links. Am I a fan of all the dropshadows? No, but it works and that's the point. Not every site has to be ultra web 2.0 in order to be usable.

This is much like the example above. A logo that's easy to see with good padding, a secondary logo, and the very simple and effective navigation. And notice, they have a secondary navigation, except it's at the very top and not emphasized as much. This is how double navigations should be constructed. Whichever takes the priority over the other, should emphasized a lot more in order to avoid clutter and confusion.

If you ever want your visitor's attention at the top, you just stick a half naked woman in the header! Sorry, I'm a joker.

A very noticeable navigation, and this time the logo down further. I'd say it pulled off the objective efficiently. Letting your visitors know exactly what your site / service is about is of key importance. These people decided to give it priority over the logo, which I think is fine since they really designated a good noticeable area for the logo itself.

As simple as it gets and yet still very appealing. A logo, a navigation, and that's that. What else do ya need? :)

After all of those examples, it should become clear of what a truly effective header design is. It's about only placing what is necessary in the header; giving the logo enough space and padding; and keeping the navigation easy to read and visible.

All Design Tutorials (View All)

Comments (0)