Know Why Your Website’s Header Is Driving People Away

Posted in Tips, Web Design2 years ago • Written by 14 Comments

Whichever website you visit, the first thing that you will notice is the header image of that website. Later on, scrolling down the page or admiring the header image is something that depends on the purpose of your visit. The point is that the header image (or, to be more generic, the header section) is a very important part of any website design. Header images have been an integral part of websites for a long time, but lately original designers have given a whole new life and excitement to header images. It is the header image that initiates the mission of any website and a dull header image might just kill the experience.

Today, we will go through the basic semantics of header image design and how the very default looking header images are still sitting on most websites. We will try to figure out what web designers can do to create jaw dropping header images and use examples to understand how designers are actually implementing original ideas.

Old is no more the gold


Gone are the days when a regular rectangular header image design will be good enough for your upcoming website design. Notice that if your website is very old and has its own fan following then you might not have to experiment with header images, but if you are new in business then you have to do something different so as to attract visitors. I am sorry to say, but the wrapper of the chocolate is an important reason behind you buying that chocolate. Get it?

There are plenty of default designs and plugins available that make it super easy for website designers to come up with a basic header image but that just isn’t helping you out. If you want to be part of this business then get real. Think. Out. Of. The. Box!

It will sound a bit weird if we tag something as default design in today’s website design industry, but unfortunately it is true. The structure that you see above has become, more or less, the default website design for those who want to go live real quick. Register a domain, pick up a template and you will be live within minutes. But, is that of any use? The ready-to-go designs help you go online but don’t help you get the attention of internet surfers. True?

So, how can we actually take our first step toward out-of-box looks? What can one really do with the default header shapes, sizes and designs? Aren’t they supposed to be what they are? Well, they are supposed to be the way they are, but with a little tweaking we can actually make them look super attractive. Here are my suggestions when it comes to tweaking your header images:

Submerge!


Don’t compare this tip with something that pops out of the screen due to its amazing design. Rather, what I am trying to suggest here could well be a simple but unique way to make your headers look different from the rest. This is actually the easiest too, once you are into it.

Look at the header image of Gary Nock. It is more or less merged with the rest of the website design. You will never find such kind of rectangular in shape header images. Rather, such header images submerge with the rest of the design which as a result gives the website design the clean and riveting look. So, when I say “submerge” then I mean merge your header image design with the rest of the website design in a fashion that the old rectangular look of the website is not around to turn off your readers.

Break The “Text Book” Definition of Dynamic Headers


Enough of  the jQuery codes to make your headers look dynamic. Can’t we make them look a bit different considering the fact that almost everybody is either using a jQuery based header or a (good old) flash header.

Check out the above header design from Raskulls. The website has done well to balance the looks of a dynamic header with a clean header image. The end result is a sleek looking header image that does justice to the niche of Raskulls. See, I am not asking you to give up on jQuery or Flash either. What I want you to understand is that it is high time that we start looking for header image designs that are sleeker and different from the rest. You’ve got to stand out to attract visitors.

Ditch the Rectangle


I won’t give you an example in this case as my first tip of submerging the header image with rest of the website design was almost similar to this. See, we are used to the usual rectangular looking header images. As I said before, they have become part of the default website design which is of no use. What if you ditch the rectangle shape of header images and look for something which is different. This is when you will attract attention and that is the sole purpose of your website. True?

Ditch the Header Itself!


OUCH! What was that?

Well, that was getting rid of something that confuses you the most. If you are not happy with your rectangular looking header image design and you are not sure of anything different then why not just ditch the header itself? Why can’t we start with the content directly and use a small square in the sidebar for the name of the website? What is the real problem? There isn’t any hard and fast rule suggesting that headers are a must for a website design, and if it isn’t a rule why do we actually have to stick with them?

Have a look at Sony’s portal displaying its tablets. Sony has smartly left only a little  amount of space on top for the name and menu while the rest acts as the place where content is displayed. Really, if you are not sure about the kind of header that you should use then you will be better off ditching the header. Try it!

Keep Thinking Different. Don’t Give Up!


This is supposed to be the usual tip of any inspiration pointers and it applies here too, but with a slight difference. The point that I want you to understand here is that if you keep trying the different looks for your header image then you are bound to come up with something which is a lot better than the rectangular looking header images. And, trust me on this one, any header shape will look better than a rectangular header image design.

Your hard work and your honesty should be reflected in your out-of-box header image design. This is when visitors understand the seriousness of your purpose and end up giving more time to your website. Also, keep changing your header images. Experiment with different looks and see what leads to a jump in your traffic. Try. Fall. Getup. Try. Succeed. Continue Trying.

Inspiration


Juan Diego Velasco – Web Designer Portfolio

juandiegovelasco-inspiring-header-designs

Giancarlo Fajardo – Creative Graphic Design Portfolio

giancarlo-fajardo-inspiring-header-designs

Duirwaigh Studios

duirwaigh-inspiring-header-designs

N.Design Studio

ndesign-studio-inspiring-header-designs

Octwelve – Blog of designer MeryLuc Melgar

octwelve-inspiring-header-designs

Pixel Cool

pixelcool-inspiring-header-designs

Shaun Groves

shaungroves-inspiring-header-designs

Conclusion


Header images have come a long way. I know plenty of websites that have successfully experimented with header image designs, but I know so many who still go live without proper design plans. Please remember that you might be better off with a simple looking header image design if your website is old with huge visitor numbers. In that case, the visitors are aware of the quality of content that your website produces and this is when an attractive header image is not that important. But, if you are new in business then better take care of the looks of your website design otherwise be prepared to end up nowhere.

51 Written ArticlesWebsite

Salman Siddiqui is an alpha geek, design guru and seasoned WordPress critic. Writing, for him, started out of ego but it has become the most luring and enlightening career option of his life. He is walking that extra mile for his freelancing dream.

14 Comments Best Comments First
  • Aakash

    Wednesday, February 8th, 2012 08:55

    1

    Simple but creative header is effective!!

    0
  • Paul

    Wednesday, February 8th, 2012 14:48

    5

    I think either ditch the header or create something different. I do like keeping it simple just like on 1st web designer site where it’s just a logo and the main nav I think thats fine.

    0
  • Marie

    Wednesday, February 8th, 2012 14:43

    4

    It would be great if you included links to tutorials to help people “get outside the box”

    0
    • Salman Siddiqui

      Wednesday, February 8th, 2012 18:29

      8

      Marie – If someone new the recipe to success then everyone would be successful. You are an artist. You know what you want your website’s visitors must see. Then you are the best person to think what the header design can be. No tuts will help in this case..

      0
  • Jeremiah

    Wednesday, February 8th, 2012 09:04

    2

    I couldn’t agree more, time for more innovation – with that said, I’ll second your comment “Ditch the Header entirely!” And a lot of the old methods are no longer applicable, or “gold” like you said… Nice post, great read Salman.

    0
  • Paul

    Wednesday, February 8th, 2012 14:01

    3

    I all sounds a bit too artsy partsy for me. I really do NOT like the examples you give from a usability perspective.

    0
    • Martin

      Wednesday, February 8th, 2012 15:14

      6

      I agree with Paul on this one. The examples you have given are way to artsy for a business website but dumping the header might be a nice new solution to all of those standard layouts I keep seeing and my clinets seem to want at the moment (customer is king).

      All have a Nivo slider or something similar. There is no creativity in the general layout but more in the details. Now all we need is, is to get both of them together and be creative!

      0
      • Salman Siddiqui

        Wednesday, February 8th, 2012 18:30

        9

        Martin – You said it at the end. Be Creative :)

        0
  • idham

    Wednesday, February 8th, 2012 09:18

    7

    Great… But how about if no images in header?

    0
  • Sunny

    Tuesday, February 14th, 2012 13:26

    13

    What do you suggest about heavily informative or large product websites like electronics website.
    We can’t use above designs for that. Please give suggestions.
    Thanks.

    0
  • Esmaeil Ajorian

    Sunday, February 26th, 2012 17:23

    14

    I think ditching the header is not a perfect solution. Let me give you an example: think of a book structure. Definitely you would expect the book to have the cover and the title first, and second would be ISBN information, book author and so on, and I think web design has also some structure like this. People fell into the habit of seeing the header. I think in web design header is a must and people always expect to see header of the websites. and as Aakash said: Simple but creative header is effective!!

    0
  • Saket Jajodia

    Thursday, February 9th, 2012 15:21

    12

    Yes, old is no more gold these days as if you use IE6 now you won’t be able to do (almost) anything on the web. And really liked the Juan Diego Velasco design..

    0
  • Saeed Neamati

    Thursday, February 9th, 2012 08:33

    11

    Thanks for the article. However I believe that having a large header to prevent you from seeing the big title of the content can be preventive. I mean, after looking at Google Analytics for mouse click tracking of the visitors of my personal website, I found that the header shouldn’t be so large to enforce users to scroll down, to see the title of the content they’ve requested.

    0
  • Salman Siddiqui

    Wednesday, February 8th, 2012 18:31

    10

    Thanks all for the positive comments. It means a lot to me :)

    0
  • Esmaeil Ajorian

    Sunday, February 26th, 2012 17:23

    14

    I think ditching the header is not a perfect solution. Let me give you an example: think of a book structure. Definitely you would expect the book to have the cover and the title first, and second would be ISBN information, book author and so on, and I think web design has also some structure like this. People fell into the habit of seeing the header. I think in web design header is a must and people always expect to see header of the websites. and as Aakash said: Simple but creative header is effective!!

    0
  • Sunny

    Tuesday, February 14th, 2012 13:26

    13

    What do you suggest about heavily informative or large product websites like electronics website.
    We can’t use above designs for that. Please give suggestions.
    Thanks.

    0
  • Saket Jajodia

    Thursday, February 9th, 2012 15:21

    12

    Yes, old is no more gold these days as if you use IE6 now you won’t be able to do (almost) anything on the web. And really liked the Juan Diego Velasco design..

    0
  • Saeed Neamati

    Thursday, February 9th, 2012 08:33

    11

    Thanks for the article. However I believe that having a large header to prevent you from seeing the big title of the content can be preventive. I mean, after looking at Google Analytics for mouse click tracking of the visitors of my personal website, I found that the header shouldn’t be so large to enforce users to scroll down, to see the title of the content they’ve requested.

    0
  • Salman Siddiqui

    Wednesday, February 8th, 2012 18:31

    10

    Thanks all for the positive comments. It means a lot to me :)

    0
  • idham

    Wednesday, February 8th, 2012 09:18

    7

    Great… But how about if no images in header?

    0
  • Paul

    Wednesday, February 8th, 2012 14:48

    5

    I think either ditch the header or create something different. I do like keeping it simple just like on 1st web designer site where it’s just a logo and the main nav I think thats fine.

    0
  • Marie

    Wednesday, February 8th, 2012 14:43

    4

    It would be great if you included links to tutorials to help people “get outside the box”

    0
    • Salman Siddiqui

      Wednesday, February 8th, 2012 18:29

      8

      Marie – If someone new the recipe to success then everyone would be successful. You are an artist. You know what you want your website’s visitors must see. Then you are the best person to think what the header design can be. No tuts will help in this case..

      0
  • Paul

    Wednesday, February 8th, 2012 14:01

    3

    I all sounds a bit too artsy partsy for me. I really do NOT like the examples you give from a usability perspective.

    0
    • Martin

      Wednesday, February 8th, 2012 15:14

      6

      I agree with Paul on this one. The examples you have given are way to artsy for a business website but dumping the header might be a nice new solution to all of those standard layouts I keep seeing and my clinets seem to want at the moment (customer is king).

      All have a Nivo slider or something similar. There is no creativity in the general layout but more in the details. Now all we need is, is to get both of them together and be creative!

      0
      • Salman Siddiqui

        Wednesday, February 8th, 2012 18:30

        9

        Martin – You said it at the end. Be Creative :)

        0
  • Jeremiah

    Wednesday, February 8th, 2012 09:04

    2

    I couldn’t agree more, time for more innovation – with that said, I’ll second your comment “Ditch the Header entirely!” And a lot of the old methods are no longer applicable, or “gold” like you said… Nice post, great read Salman.

    0
  • Aakash

    Wednesday, February 8th, 2012 08:55

    1

    Simple but creative header is effective!!

    0

Comments are closed.

54.196.189.229 - unknown - unknown - US