Web Design: The Anatomy of a Header

September 13, 2011
the anatomy of a header

A website is like a puzzle, made up of pieces that fit together to make a bigger picture and achieve a goal. The goal of any one website may vary, but the pieces that make up the page are fairly standard from one to the next. One of the most important of these pieces is the header.

The header is at the top of the page, the first thing the user sees when they come to the website. You never get a second chance to make a first impression and if the adage is true, the header is a very important piece of the puzzle. So how does a header make a good impression?

Start with a logo

boerne-wild-west-day-header.jpg

Every website worth making should have a logo, if not officially, then some type or mark that will stand in. The logo brands the page and tells the user to whom the website belongs. Logos are generally in the top left-hand corner of the page, because research suggests that in cultures where people read top-to-bottom, right-to-left, the eye naturally starts there. It's not uncommon to put the logo in the center of the header, because it's the next most logical place the eye would travel.

Help the user find their way

little-black-dress-society-header.jpg

Perhaps the most important element in the header is the main, or primary navigation. The purpose of navigation is to organize the website's content at a high level, allowing the user to find information they seek quickly and accurately. Common practice is to keep the main level navigation to about five items, so that it's clear what the user should do based on the goals of the website. Too many navigation choices can disorient site visitors and make the site difficult to use.

Add in some key links

liquid-frameworks-header.jpg

Global navigation is a menu of links that aren't essential to the success of the website but are key pages the user should be able to access with ease. By definition, global navigation can be found on every page, whether it be in the header or the footer. More often than not, we put it at the top of the page because over the years, users have learned to expect these links in the header. Common items found in the global navigation are contact us, forum and login links.

When navigation isn't enough

digett-header.jpg

Sometimes, websites have so much content that navigation menus aren't the fastest way to find information — enter the search bar. It's a safe bet that most users know how to use a search bar, take Google for instance. Users also know where to find a search bar, because nine times out of ten, it's in the header.

A good impression

Not every header is the same, but the parts that make up a good header are well established. Orient the user with a logo, show them around with primary navigation, throw in some meaningful global links, and when necessary, let them search the site with one click of the mouse.

Do you have a good header?

Is your website header doing its job? To find out how your website stacks up to the competition, sign up for our free website analysis.

Analyze my website!