How Important the Header is? Web Gurus Explains it.

the_power_of_header When it comes to designing a website/wordpress theme or any kind of site the  header is one of the most important things to consider because it the the first thing the visitor see when they visit your site.  Your header is your website identity. The first thing your see when you meet somebody is their face. Your header is your website is your website’s face.

In this article, I try to explain the importance of having the right header.  I also,  asked three of the best web designer’s out there to share their opinions and suggestions.

So, What is the header?

In a document/website , a header is some combination of text and images that can be made to appear at the top of each page when displayed or printed. (Source: Webopedia)

Consider this image. I edited the image (orginal here) just to show an example. First impression of a website is the best impression. Therefore,it is vital to have a proper header. The header can be  styled  differently to match your  visitors need/attention. However, here are the most commonly used style.

Logo and Navigation

header_navigation

Noupe shows the logo and the navigation.  The logo grabs the visitors attention and navigation allows the visitor to easily access the content.

Logo Only

atterntion_header_yatescom

This site is focused on the logo.  The big logo emphasize the message to reveal the designer’s personality , while the navigation rests vertically.

Image Gallery

image_gallery_icondesigner

Here is a different site, that’s taking a different approach. The first thing you see is a scrolling image gallery. The image gallery drives attention to work of the web designer.

Using Icons in Header.

big_icon_quadtechcommy
Sometimes it is better to show it visually present the content with icons, images to make it easy for the average user. This website  features the header  with a logo, search bar and big icons navigation. Visitors eyes are visually drawn to the big icons.

How should I design my header?

I asked couple of Design gurus ( very nice people)  Chris Coyier,Andy Sowards , Jacob Gube to share some thoughts and advice about importance of headers.

Chris Coyier

chris 1. How important it is to have a good header?

The obvious answer is that the header of any site is typically it’s identity or it’s “branding”. It is your big opportunity to let people know what site they are on and make a memorable impression. Whenever there is talk about standardizing css class names, the popular choice for the header area is always

, so that tells you something right there.

2. What was your idea/inspiration behind the CSS-tricks header and how did you designed it?

The “tag” has been with me a long time on CSS-Tricks. It’s my “logo” more or less. It’s a little generic, but I like it and it has definitely became part of the branding. I’ve also always had (and enjoyed) having a big footer on CSS-Tricks. This design iteration has kind of an outer space theme going on, so the header kicks it off with a small stripe of outer space to tie the whole page together. Next time around, I’m going to do something a little more significant with main navigation. It used to be far more prominent and I think that needs to come back.

css-tricks

3. What is your advice for the rest of us?
One of the most beautiful things about the web is that its so fluid and easy to change things. If you aren’t happy with your header today, you can change it! You could change your header every single day if you wanted. Of course you wouldn’t want to do that probably because you want to branding be somewhat consistent (otherwise it wouldn’t be “branding”), but you get my point.

Andy Sowards

andy1

1. How important it is to have a good header?

I feel that a good header is extremely important. It is the first thing that your visitor sees, and if it is eye catching and memorable, they are more likely to keep you in their mind, and even show their friends your site because of the time you put into it. Also, it can get you featured in all kinds of other blog posts that think your design is awesome, which in turn, gives you more exposure to the community and potential
clients/visitors.

2. What was  your idea/inspiration behind the andysowards.com header and how did you designed it?

Well I was trying to figure out a theme for my site, and did not want to do anything that I had seen everywhere. So, I first thought up the post apocalyptic theme, but could not figure out a good way to implement it, I read an article in web designer magazine (good mag btw) that was talking about using the world around us for inspiration. so I started looking at architecture pictures and decided to go with a cityscape feel that had been taken over in a post apocalyptic world.

skyline-v18

3.  What is your advice for the rest of us?

Whatever you do, do it with your whole heart. Put everything you have into it, and it WILL pay off. Never give up and
constantly improve yourself and your skills. Never stop soaking in everything the world has to offer and your creativity and inspiration will always be bursting out of you. Thank you for your time! I hope you enjoyed this interview :)

Jacob Gube

jacob_avatar_200x200
1. How important it is to have a good header?

A website’s header is probably one of the most important, yet most often neglected, parts of a web design. It’s the first thing the user sees when they visit a site and it (usually) contains important information such as the site name/logo, primary navigation, site search, and much more. If you’re the entrepreneurial type, the header is the number one location to place advertisements, and advertisers covet this section of a web page.
2. What was  your idea/inspiration behind the sixrevisions header?

For the Six Revisions header, I wanted to keep it as short as as possible so that once the user enters the site, their eyes get directed towards the content and the page title. As you can see, it’s only about 110 pixels high (including the primary navigation), and the Six Revisions logo is plain and simple so that it doesn’t overpower the top half of the web page.
The color scheme: I was inspired by the weather of the day I designed the mockup; it was s dreary, rainy day and the colors I chose for the header, as well as the entire site, reflected that time of the year.
For the overall design, my one and only goal was to make the content central to the design; every component of the design was created to reflect this philosophy and I hope I was successful in that regard.

six_revisions

3. What is more important? Simplicity or great design?
Simplicity and a design’s usability will always be greater to me versus a great design: a web design isn’t a piece of art (though it can be) – it is merely a conduit to the site’s content and if you have a great design but the content lacks substance, then it doesn’t matter how great it is. You should look at a web design as an aid to the site’s content: you should build a site around the content, not the other way around.
I’m a big fan of Minimalist designs. The Minimalist philosophy applies not only to my design tastes, but also to my personal life. I don’t like clutter, I don’t like extraneous features – if it doesn’t serve any purpose, it’s getting thrown away. You can read more about my thoughts on the matter on a Smashing Magazine article I wrote called “Showcase Of Clean And Minimalist Designs“.

Well folks there are you have it. The experts have shared their thoughts. I am just going to add some info that I think can be useful.

Don’ts !

  1. Do not leave a big space between your content and top of the page. It shows that you could not think of anything to put in there, but it might work in some cases. Look the following example, for someone it might be a wonderful design, while someone else it might not like it. Depends on personal choice.

just_logo_kirieno

  1. Don’t put too much ad in the header. You want the visitors to for the content not to click on the ads.
  2. Do not go crazy with the design, As Jacob said simple is design is effective.

Do !

  1. Make your headers clickable, its allows users to get to back to homepage easily.
  2. Be creative. Your design should reflect what the site is about.

logo_icon_nav_1pixelbrushcom

  1. Make the navigation accessible, user-friendly. If users has to struggle too much to find something they would probably leave. For example: Fuelyourcreativity has a user-friendly navigation. User can navigate through the site easily.

fuel

  1. Do not hesitate to add social networking sites and feed in the header. You can use icons or text links. It is an easy way to promote.

logo_social_bookmar_psdfan

  1. If it is personal site or portfolio you can always take a different approach than usual design.

no_header_nataliadevallecomar

Here some more headers for your inspiration.

no-header_custom-tshirtseu

Colorful Header

image_gallery_terrasse-concept

More resources…

I hope this information has been useful and maybe you think about some of the advice when your designing and coding.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • http://www.freedomstudios.co.za Graham

    Very interesting article.
    I agree 100% – Headers are very important!

  • http://www.tntstudio.ca TNTStudio

    Great article however note in the title of the page the misspelled text… “Improtant” should be “Important” no?