Designing Your Website Header

Designing Your Website Header Like the Pros

By: Tim Priebe
Many sites have some sort of banner on the top of their site. This is a part of the page header and can include the name of the site, and possibly even the navigation for the site. But how do you create a banner that looks professional?

There are several options you need to keep in mind for your header. It could be a photograph, artwork (computer generated or not) or some combination of the two. You need to decide if your logo and/or navigation will be incorporated into the header, or displayed some other way.

When you set out to create your header, there are a few general guidelines to keep in mind. First off, it needs to be rectangular and should not be too tall. The taller it is, the less actual content on your site people will see at first glance. And the less content they see, the less likely they will be to hang around. My personal guideline is a max of about 200px high. There have been some exceptions, but that’s the general guideline I use.

As you create the header, remember that it’s all in the details. Things like rounded corners, gradients, drop shadows, partially transparent text, outlines… All that matters, and can make your header look much better. Don’t use every single effect available to you, but 2-3 of them can bring your header up to that next level.

And as always, once you’ve completed your header, have a few people take a look at it before it goes live on your website. It always helps to get an impartial opinion or two. Others will be looking at the header for the first time, where you’ve been staring at it the whole time you’ve been working on it.