25 Stylish Examples of Headers in Web Design

Jun 26 2009 by Thomas Hardy | 39 Comments

A website’s header is one of the first things a user sees when opening your website so it’s important to get it right; if a user doesn’t like your header design, they may just leave your website before even looking at what content you have to offer.

There are many different types of headers, and in this collection, we’ll show you 25 beautiful header designs from various types of websites in the hopes of inspiring your creativity.

1. 61 Pixels

61pixels

2. Abduzeebo

abduzeebo

3. Ali Felski

alifelski

4. Basmitree

basmitree

5. British Space Organisation

britishspaceorganistaion

6. Dev Thought

devthought

7. Ellis Lab

ellislab

8. Jason Reed

jasonreed

9. Jayme

jayme

10. John Joubert

johnjoubert

11. Marc Handdetrucs

marchanddetrucs

12. By Marina

marina

13. Mosaiko

mosaiko

14. Naldz Graphics

naldzgraphics

15. No Milk Today

nomilktoday

16. One Button Mouse

onebuttonmouse

17. Stephen Fry

stephenfry

18. That Indie Dude

thatindiedude

19. The Great Bearded Reef

thegreatbeardedreef

20. The Piss Biscuit

thepissbiscuit

21. Tutorial9

tutorial9

22. Vectips

vectips

23. Web Burza

webburza

24. Web Designer Wall

webdesignerwall

25. XHTML IT

xhtmlit

Related content

About the Author

Thomas HardyThomas Hardy is a web designer from Newcastle upon Tyne (UK), here is his portfolio. He founded Design-Heaven, where he regularly blogs. You can will also connect with him on Twitter.

39 Comments

John G

June 26th, 2009

This is pretty inspiring stuff. I might just go back and revamp my header…

Matt S

June 26th, 2009

I love seeing how creative headers can be and this article is great, thanks a bunch. I enjoy ’61Pixels’, ‘By Marina’, ‘Web Designer Wall’ and ‘XHTML IT’ the most. Inspires me to try something more decorative in my next header, :).

curtismchale

June 26th, 2009

While i agree that these headers are great. we see the same headers used in all of the ‘amazing header’ posts. I doubt that this small but great sample is all that is truly out there.

Benq

June 27th, 2009

Another rubbish list. Just listing your friend’s blogs and put some extra web site on it. This quality of the Sixrevisions is getting worse.

BryanRegencia

June 27th, 2009

These are good inspirations Thomas, thanks for sharing. I’m also thinking of creating a new look and feel for my website, this post is a big help.

Thanks!

W3planting

June 27th, 2009

i am using a ready made template (done a few tweaks in header) but need to do a revamp to appear in list :)

T-Law

June 27th, 2009

Tutorial9 my favorite, thanks for inspiration!

richard

June 27th, 2009

nice article, plenty of inspiration. my favourite would have to be “mosaiko” (No.13)

Carina

June 27th, 2009

Thank you so much for the inspiration! I have to work on my header as soon as I get some time …

Alex BuckyBit Covic

June 27th, 2009

meh – hit and miss. Always depends on who you wanna catch, of course. “Beautyful” is not a word in my book.

Alex BuckyBit Covic

June 27th, 2009

…nor beautiful ;-)

E.Flo

June 27th, 2009

Numbers 11 & 16 are my faves! nice list

elizabeth

June 27th, 2009

Great post — great examples. Particularly like simple, clean headers that engage readers directly.

Rob Hawkes

June 27th, 2009

Thanks for including the British Space Organisation in your list.

designiac

June 27th, 2009

My favorite one is “web designer wall” (No. 24). There are many similar headers everywhere, but this one is really nice.

Eoin Redmond

June 27th, 2009

Thanks for sharing the wealth – always useful to see what’s out there – it does help get the brain moving for new client projects – thanks Eoin

Rush

June 27th, 2009

61 pixels is awesome!

Moises de Moura

June 28th, 2009

Thanks for listing my header in your blog. It’s pleasant to have my work appreciated. Moises Moura, owner of mosaiko.com.br (Sorry for my poor english :-))

Angela

June 28th, 2009

This is great for inspiration. I’m always having trouble coming up with ideas for headers and navigation, this post will come in handy.

Mahallo

June 28th, 2009

My favorite is Stephen Fry header. Thanks for collection!

Madeline Ong

June 28th, 2009

I adore the art on Marc Handdetrucs’s blog. And the lovely Web Designer Wall background, of course. It’s a classic. :)

insic

June 28th, 2009

Dev Thought header effects and animation rocks!

Afford

June 29th, 2009

Thanks for the great info. I am a web designer myself and the header is one of the most important things on a website. It needs to be attractive and needs to grab the users attention.

Ashley Adams

June 29th, 2009

They say, well begun is half done. It’s the same with web design. You design a good header and half your web design worries are over. This post is a great way to get inspiration to get adventurous with your web design ideas.

Matt

June 29th, 2009

That is one hell of a list, I think it might be a good think to start gathering inspiration… ;)

Abhilash

June 30th, 2009

How is my web site header

Caitlin

June 30th, 2009

I really like Web Burza’s header, but I’ve always had a soft spot for robots. Great post–thanks!

Denny

June 30th, 2009

The Piss Biscuit is awesome, as well as Tutorial9.

شات

July 1st, 2009

My favorite is Stephen Fry header. Thanks for collection!

Alisa Rogers

July 2nd, 2009

I am very thankful to you for provide me this valuable info.

sltwin

July 3rd, 2009

And I absolutely love how you guys thought that marchand de trucs could be someone’s name where in fact it says “Stuff vendor” in french. very funny

ajay

July 6th, 2009

this is stunning, thanks for sharing.

Kaka

July 7th, 2009

This is an amateur’s list… mostly made of 1year+ websites seen everywhere…

+ 2 typos in site names
Basmati Tree and Marchand de Trucs… not a guy called Marc I’m afraid, see credits page…

Lauren Wolff

August 6th, 2009

Really lovely ideas. Such a change from years and years of boring, plain, unimaginative layouts. These ideas have yet to reach South Africa. I am hoping to stay ahead of the curve though.

Santosh Shelke

December 24th, 2009

I really like Mosaiko’s header, Thanks for collection!

syria

June 27th, 2010

My favorite is Stephen Fry header. Thanks for collection!

Ajay

June 6th, 2011

Being a SEO I keep headers to be minimal. The lest the better. I’m a big fan of inserting 728×90 in header which doesn’t give much scope for header design.

Web Designer Wall’s header is simply awesome.

Imran

August 5th, 2011

Thanks for a great list.

IgniteWebsites

August 8th, 2011

Thanks for the inspiration. I think websites headers are the most difficult element to perfect in web design. They are also the most important element on the page as that is what the eye is drawn to first. I like the Jayme Header.

Leave a Comment

Subscribe to the comments on this article.