A Showcase of Effective Headers in Web Design


In viewing a website, the first thing that we notice is, of course, the header. It is actually the portion that catches the viewer’s notice first before the content most especially for random searches or viewing. In one of our previous post, we have showcased several cool and interesting footers for websites. As a follow-up to this post, we have come up with a collection of the footer’s counterpart in web layout.

Here is A Showcase of Effective Headers in Web Design that you can look into for new ideas on successful headers. Check out these items and be inspired in creating your own outstanding header!!!

You may want to take a look at the following related articles:

40+ Examples of Horizontal Scrolling Websites

30 Beautiful and Illustrative Website Footers

35 Inspiring Watercolor Effect in Web Design

45+ Excellent Examples of Flash Websites Design

Effective Headers in Web Design

The Alamo Basement

the alamo basement

Visit Site

Gary Nock

gary nock

Visit Site

Nition Design

nition design

Visit Site



Visit Site

Dale Harris

dale harris

Visit Site

Aya Kaito

aya kaito

Visit Site

Fran Fernandez

fran fernandez

Visit Site

Carbon Sugar

carbon sugar

Visit Site

Mike Poss

mike poss

Visit Site



Visit Site

By Land Sea or Air

by land sea or air

Visit Site

Brown Blog Films

brown blog films

Visit Site

The Pixel

the pixel

Visit Site



Visit Site

Vunky Blog

vunky blog

Visit Site

Sob Controllers

sob controllers

Visit Site

The Rox

the rox

Visit Site

Black Moon Dev

black moon dev

Visit Site

Web Designer Depot

web designer depot

Visit Site



Visit Site

Work Awesome

work awesome

Visit Site

Cult F

cult f

Visit Site

Ready Pphoto Site

ready photo site

Visit Site

Hey Josh

hey josh

Visit Site

Smooth Piece

smooth piece

Visit Site

JR Velasco

jr velasco

Visit Site



Visit Site

Ug Smag

ug smag

Visit Site

Tru Speaks

tru speaks

Visit Site

Source Bits

source bits

Visit Site

Mark Forrester

mark forrester

Visit Site

Hey Indy

hey indy

Visit Site



Visit Site

Split Dadiz

split dadiz

Visit Site

Leave a Comment

  • Jeromine

    Another inspiring post. keep up the good work naldz

  • Havinae

    Good choice there.

  • Barbara

    I’m going to have to disagree on this one. Most of these headers are pretty, certainly image heavy, but not especially effective. Most of them you have to hunt around for navigation. Amd, some are so large that the content is completely dwarfed.

  • Mia

    Great compilation of some elaborately designed headers & the websites they are home to . I know several of them , and there are a few I have not seen yet – which I will do so now :)
    Thank you for your effort in putting this together for the community’s inspiration ! :)


  • Shiva

    I really like the style of Gary Nock and Acko. All of these show great ingenuity.

    Acko almost has a Trom feel to it. Great designs all!

  • No.1 Web Design

    Great collection! thanks for share!

  • Simon

    Good collection, but what makes an effective header? I came expecting ideas and tips and examples. This is more ‘sexy headers’ or ‘stylish super designed headers’!

  • Ryan Minick

    Some really great looking websites here. Every time I think I’m happy with ours site I see something else that makes me want to tweak ours some more! Gotta love it!

  • Drew

    I like these hugely but they all seem to be blogs or similar. How about a collection of effective e-commerce headers or manufacturing company headers for balance and contrast.

    Keep up the good work!

  • Waheed Akhtar

    Amazing headers!

  • wpBlast

    These headers are very inspiring. I love the illustrations in many of these.

    Nice post!

  • Cliff

    I’m going to agree with barbara. While stylish and image intensive graphics can be effective for capturing attention or displaying your work, some of these take up excessive room without displaying much useful content. Not effectively balancing their use of screen real estate.

    However, many of these _are_ very effective headers by displaying things like navigation, logos, and artwork that establish or are consistent with the look and feel of the website.

    Overall still a great post!

  • inspirationfeed

    What about inspirationfeed?

  • Purnendu

    wow, that kind of Graphics Design I am going to use to my website.
    nice work keep up..

  • ManishRawat

    Some really inspirational header designs, but in a stride of showing up the creativity the importance of content has been compromised and this is something serious for profession website designs.

  • cryptonit

    What do you mean by “effective headers”? For me those headers are overloaded. Ok I admit they all look pretty cool. But my eyes want to look at the header all the time. So the content don’t get the attention it deserves…

    Hope you understand what I mean (I really hope my english will get better some day…)

  • Smashing Web Development

    Great list – love the inspiration of these. Thanks~

  • Etienne

    Can you do the same thing with real company website examples ?! I don’t think so.

  • Rob T

    Beautiful and very inspiring designs.

  • Smashing Buzz

    amazing concepts you sharing in this article. thanks

  • Rachel

    Awesome collection… truly inspiring…

  • Phil

    Thanks for sharing this inspirational list

  • Marc

    After viewing these examples
    I started thinking about the meaning of the term effective…

  • Matthew Heidenreich


    I was just about to say the same thing. Flashy and creative headers. No so much on effective. Nice collection still. Thanks.

  • Reinette

    Thank you so much for such true inspirational examples! I am definitely a fan! keep up the good work!

  • Nikunj

    Nice headers need to improve my creativity to match this type of work.

  • Ash

    Those are really inspiring, very creative designs.