Avoid Imagery In Your Website’s Header

Monday, March 3rd, 2008

Categories: Web Design

I believe (and I’m not alone in this Web 2.0 train of thought) that your website’s header should be void of the use of imagery. I’m having a hard time finding a well-known organization or companies website to use as an example because modern companies have realized their mistake. So I whipped one up as an example:

This is a Bad Header

Bad Header

Why It’s a Bad Header

Overlooked - In eye-tracking studies, headers were overlooked in favor of the site’s content. The general population is known to bee-line right for information and avoid images (even images supplementing the content).

Whitespace - Similar to print media, website’s need their share of whitespace. It allows the site to breathe and feel less heavy. Don’t be afraid of having a slight gradient as the only element supplementing your wordmark or logo and the top of your page.

Not Timeless - Whitespace doesn’t age, you don’t suddenly grow old of it. If your header contains very specific imagery, what happens if your company targets another niche? Of course, the header will need to be addressed.

Valuable Space Wasted - This above-the-fold space has been stuffed with imagery. If users will overlook your banner, use the space wisely for features or information important to the user.

What Can You Do?

Drop the imagery. Your wordmark should be prevalent and shouldn’t have to compete for attention with graphic. If you’re insistent on imagery, keep it below the wordmark. Like I mentioned in the example above, try including a site search, contact information, my account, login and/or register links in this premium location.

That’s all for now. Hope that helps.