Designing a Website Header

When designing a website, it’d be nice to say I visualise the final product and then work my way to achieve it. Having designed numerous websites in the past 15 years, I’ve discovered that some of my best design ideas come from experimenting – with only a vague idea of what the end result would be. Place a circle here, stroke it, mask it with stripes, move it there – experimenting. And often, I’d start with the header.

Header design is much more than the strip of color at the top of each page. It’s the first thing visitors see. A header usually contains the logo which conveys the business image and the menu bar that presents creative opportunities with its buttons and rollover states. Spend the time creating a visually appealing header and the rest of your page will be easier to design.
Headers may vary in its content and design but the above is typical. I find myself choosing between three main styles of headers:

1. A header defined by a bounding box equal in width to the page. eg. Crown Car Hire Melbourne
2. A header area with a background color/image that extends horizontally to the edges of the browser window, eg. Throwstone Melbourne Web Design
3. A borderless header that floats above the main content area that uses the overall page’s background color/image as its own, eg. St Andrews Christian College

If you’re new to web design, experiment with the above three styles and see how creatively you can implement them. Headers can vary in height but I find 160px works well and accommodates logos and menu bars of most dimensions without taking up too much room before users reach the useful content of your site.

Finally, visit as many sites as you can and gain inspiration and ideas from the work of others.