Five Types of Effective Headers in Web Design

Apr 23 2009 by Lee Munroe | 92 Comments

Your website’s header makes an immediate impact on your user so it’s important to get it right. Think about what you’re trying to achieve, what’s the first thing you want to tell your users when they visit your site, what will intrigue them and get them to read further?

A header gives you room to play and be creative, especially on the homepage, and there are a number of techniques you can use to connect with your user.

Take a look at these 5 different types of header design and see how the examples have used them creatively to make an impact.

The Huge Header

Takes up a lot of room and can be risky as you’re taking up valuable space, but done right it looks great and makes an impact.

Lewro’s Blog

Lewro's Blog

Chris Hortsch

Chris Hortsch

enRoute Film Festival

enRoute Film Festival

Simple Art

Simple Art

Alpha Multimedia Solutions

Alpha Multimedia Solutions

The Web App

Web apps generally want to show a screenshot of their product with a prominent call to action button that will immediately entice users to find out more or signup.

Ekklesia 360

Ekklesia 360

PlanHQ

PlanHQ

Campaign Monitor

Campaign Monitor

Wufoo

Wufoo

Traffik

Traffik

The Illustrated Character

Illustrated characters are currently a popular trend. They add character, personality and a sense of friendliness to your website.

MailChimp

MailChimp

Digimurai

Digimurai

Enrichment

Enrichment

Wishlistr

Wishlistr

Cleverful

Cleverful

The Portfolio Screenshots

If you want to show off your work then use this layout to show different examples of work alongside a tagline introducing yourself.

Tony Greer

Tony Greer

Mark Lamb

Mark Lamb

OnWired

OnWired

Design Moves Me

Design Moves Me

James Lai Creative

James Lai Creative

The Carousel

Carousels allow you to fit in more information into the header with a slider effect. Useful for websites with many features or for showing off your portfolio. With the Javascript libraries currently available they are very easy to implement.

Rob Palmer

Rob Palmer

Icon Designer

Icon Designer

Jason Larose Design

Jason Larose Design

Benjamin David

Benjamin David

Paramore|Redd

Paramore|Redd

Related content

About the Author

Lee Munroe is a freelance Web designer from Belfast. His primary expertise is front-end web design; XHTML, CSS, web standards, Javascript, user experience. He also has experience with Flash, ASP, PHP, Ruby on Rails, WordPress, SEO, content management. Check out his personal website: Lee Munroe and The Big Word Project. Follow him on Twitter.

92 Comments

Zach

April 23rd, 2009

Excellent article!

Kawsar Ali

April 23rd, 2009

Ahh.. Lee is all over writing good posts. Really well written

Matt

April 23rd, 2009

This is a good post, I actually sent it to a client I’m working with to help them see what can be done with headers.

Lisa

April 23rd, 2009

Hi, Lee and Six Revision! I really enjoyed this article. Refreshing and gave me some ideas!

Mittal Patel

April 24th, 2009

Fantastic examples !!!

FrankyXu

April 24th, 2009

Nice~ Thank u.

taylan

April 24th, 2009

Great collection. Lewro’s blogs header excellent.

om ipit

April 24th, 2009

hohoho, vector illustration header, i think that’s cool

Luiz Dias

April 24th, 2009

Great post! Already bookmarked!

Cat Johnson

April 24th, 2009

What a great, thought-provoking collection of ideas and sites. As always, the core of the design should center on the goals for the site/business/product etc. These examples nicely illustrate the necessity of different styles to get the job done. Thanks for the inspiration!

Crowd

April 24th, 2009

Love the selection.

tato

April 24th, 2009

thank you for this usefull posting.

great article. really helpfull!

Carl - Web Site Design Instructor

April 24th, 2009

Is anyone else noticing that many of the featured designs are illustration based. I mean it seems to be the era of the Illustrator with regards to web design these days….thoughts anyone?

Max

April 24th, 2009

The first entry – http://www.lewro.com/ – is a stolen design. The original is http://www.quommunication.com/ and lewro just copied it. you shouldn’t present thieves on this blog…

arunbeysi

April 24th, 2009

very excellent !!! THANX A LOT.

David Wright

April 24th, 2009

Great post! Although I’m not much on HUGE HEADERS, I love that Mailchimp mascot. I wish I had come up with it.

Thanks for also spotlighting some other cool looking sites! SimpleArt also looks great!

David Bradley

April 24th, 2009

I don’t find the large header style endearing at all. I want to get straight to the content. But that said, the portfolio screenshot approach goes half in size but also shows what the content might be…nice one for journalist resume type sites or for web designers certainly.

liam

April 24th, 2009

Good quality picks, thanks for sharing.

Patternhead

April 24th, 2009

Some great inspiration here, thanks :)

Eric Kureck

April 24th, 2009

Nice post.
I would like to suggest you guys to explore the creative process of designing and some post about how to design complex websites from scrap.

thank you

Frank West

April 24th, 2009

A nice collection offering some good ideas including a few I’ve not seen before.

Great collection, will be referring back to this tomorrow when I start the next project.

Thanks!

Jon Pape

April 24th, 2009

Great article.

Jacob Gube

April 24th, 2009

Thanks for all the positive commentary everyone, Lee did a great job on this one and I’m going to do all I can to get him to write more for us!

@Cat Johnson: Great connection and insight, thanks for sharing!

@Carl – Web Site Design Instructor: I know, I’ve had to bust out Illustrator off its web design hibernation.

@Max: You’re right, that’s way too similar. Let me figure out the best course of action here, if it was indeed copied from the site you mentioned – we’ll either replace it, remove it, or put a note on the description. Thanks for leaving a note about it.

@David Bradley: I’m with you on that when it comes to blogs and content-centered sites. See the Six Revisions header, very small (in height) and unobtrusive, direct to the point. With that said, I do like large headers for product centered sites. It’s an effective way to engage your visitors visually and a great way (if you have one) to entice them to take a tour or test run, or otherwise influence their behavior on your site.

@Eric Kureck: Nice idea – let me see what I can do about that!

Luke

April 24th, 2009

Great list, thanks! :)

Campaing Monitor my fave – its a big space but its well utilised.

lewro

April 24th, 2009

Hi Jacob. Thanks for presenting me on your site and thanks Lee for mentioning me in his article. I has been inspired by quommunication as well as about 20 other sites but obviously I have not stolen anything from the site. The lighting effects are quite popular and are used on so many sites these days. Thanks again for sharing.

Denise

April 24th, 2009

Hi,I’mjsut setting up an ecommerce gift shop – I have only scanned this and it has helped!! thanks a million……any tips for me for redobi? still working on it.check it out.

Stratigo

April 24th, 2009

very good article.
The Mailchimp website is a great example of an excellent contemporary web design.

stratigo.com

Phil

April 24th, 2009

Awesome stuff! I shared this with me comrades in the design world. Keep up the great posts :)

@philmacnevin

Roy Vergara

April 24th, 2009

Thanks for including my site (Design Moves Me). It’s an honor to be included with some really nice sites!

mxt

April 24th, 2009

Nice images but I feel that the five h3 tags should stand out a little bit more from the last image of the previous group.

Maybe one or more of

– have some more white space above the text
– make the text bigger
– place a separator somewhere near the text

???

mxt

Jacob Gube

April 24th, 2009

@lewro: That’s what I thought: that you were inspired by the design. Although let me be the first to say that they’re really similar!

@mxt: The option I picked is white space above the text to address this issue prior to your comment, but I guess I guess you feel it’s still not enough whitespace? I think the main issue is that the h3′s are short, that’s why they’re easy to miss.

I’ll play around with the settings because honestly, I’ve been feeling the same way (but just thought maybe it was my personal preference).

Arpen Patel

April 24th, 2009

great work…….love the vectors, fun and classy! gotta get mine done

Lewro

April 24th, 2009

@jacob – I value your opinion and I can see that the dark bg and position of h1 is similar. The red cup would not work on light bg so well. Keep up the good work.

Tony Chester

April 24th, 2009

Thanks again Jacob for keeping OnWired in mind for your awesome posts.

I think I’m siding with @lewro here. His top header is very similar but he did produce the black header on his own and outside of that element, his design is unique enough from Quommunication.

That’s my two cents for what they’re worth.

Tony

Jacob Gube

April 24th, 2009

@Lewro: Yep, just on first impression really. But with @Tony Chester judging in on the matter (he’s well-versed on design theft – OnWired’s design has been stolen many times over), I think you’re alright.

Hey Tony, if you check back on this, what’s the Flickr set URL that has a round-up of all designs that ripped off OnWired (hope I’m not just talking crazy here)?

Adrian

April 24th, 2009

I like this list mostly for the sites, not the headers. :)

Abounding Media

April 25th, 2009

There is a lot to learn here. While some of the differences are subtle, you broke them into categories very well. Most use a lot of real-estate, so they need to be thought out well. Thanks for the post.

Edison

April 25th, 2009

Hey the design are very impressive website designs.

I’m a web design myself but i’m always weak at creating my own design. this page really helps me a lot.

Thank you keep it coming. :) i do not copy design, i just use them for ideas.

give me comments about my website if you can i am always bad at commenting at my own :(…

Edison

Heather

April 25th, 2009

Super post and so helpful! Ty!

myDevWares

April 25th, 2009

Beautiful examples of headers…very inspirational when I’m designing. Would love to see more posts like this…

BenSky

April 25th, 2009

Very very useful, headers are always the starting point of a web layout for me, and if you don’t get it right the rest of the site is going to follow badly also.
Its interesting to look at the relationship between the header style/shape and the logo shape too! To a degree the logo shape can dictate how your header and nav bar come together!
Great post thanks for sharing!

Navdeep

April 25th, 2009

very well categorized…

@3drockz

Tony Chester

April 25th, 2009

@jacob Here’s a few of the sites that used us as some heavy inspiration – http://www.flickr.com/photos/onwired/sets/72157607199888982/

Tony

Roger

April 25th, 2009

All presented designs are attractive but I wonder how these designs would do under Jakob Nielsen’s scrutiny. Also I believe Seth Godin asked “where’s the banana?” An attractive design is important but does it get the job done?

fabimc

April 25th, 2009

I had to scroll down some of those headers just to see the content :-/

Addicott Web

April 26th, 2009

This was an interesting post, thanks for putting it together! Does anyone have any preferred carousel plugins for WordPress that they use? I did a Google search and found a few, but would be curious to hear other people’s opinions. I would love to incorporate something like that on my website.

Jacob Gube

April 26th, 2009

@Addicott Web: What are the options you’re considering? There’s a ton of them out there.

designwashere

April 26th, 2009

Excellent post and really nice categorized headers.

Thanks!

Addicott Web

April 26th, 2009

@Jacob Gube: The two that I found were the WordPress Flash Photo Carousel Plugin (http://blueprintds.com/2008/09/16/wordpress-flash-photo-carousel-plugin/) and the WordPress Image Carousel Plugin (http://wpforsale.com/premium-wordpress-plugins/wordpress-image-carousel-plugin/). I’m only beginning to explore the possibility of including it on my website, and either one looks like it would work fine, I suppose I was just curious if there was a preferred one out there that people recommend using.

Stuart McLean

April 26th, 2009

OK – absolutely beautiful – but what I want to know is which header is going to reduce by bounce rate and compel my visitors to buy (sign up) for my product – and which are going to make them think beautiful web site and move on.

Harsh Agrawal

April 26th, 2009

Wow Nice compilation, stumbled

Marvin

April 27th, 2009

hehe, cool article. yeah i think these 5 are the most common. my site has propably the illustrated one, but its no character x)

Lee Munroe

April 27th, 2009

Thanks for all the comments and glad to see most found it useful. Thanks Jacob for publishing it.

Some have pointed out that some of these headers are perhaps too big, or having to scroll to see the content. Again, it goes back to what your goal is and what your site is trying to ‘sell’ to the user.

Roger made a good point about Seth Godin’s “where’s the banana?”. The banana is the thing or ‘action’ that stands out over everything else on the page, and basically tells your user to ‘click here’. So generally your banana or ‘call to action’ should be located in the header, and should be obvious.

Merewald

April 27th, 2009

Very nice! Thank you for writing this article.

Ched

April 30th, 2009

Great article, and thanks for including enroutefilm.com. Looks like it’s in good company in this post.

Eric Roth

May 5th, 2009

Great suggestions and examples, especially for a newbie like myself who lacks a natural sense of web design.

Thank you for sharing your insights! I will have my web designer and blog designer look at this page.

clenn Sunico

May 14th, 2009

Nice Samples. The design are awesome!

Farid Hadi

May 20th, 2009

Big headers can look awesome and if done right and used in the right applications they can help convert too, so it doesn’t have to be a “waste of space” as many would say.

Some of these are really nice. Thanks for a good roundup.

Dietmar

May 29th, 2009

Nice List! Great if you get stucked in the design process!

Mariusz

June 17th, 2009

Great stuff, I use tag line as “huge header” on my website myself and people quite liked it so far. :)

Mars

June 17th, 2009

as usual mailchimp made again to the list

Fred Campbell

June 17th, 2009

This is bookmarked and tweeted! I’m sure I’ll have many happy returns! Well done and thank you.

SJL Web Design

June 17th, 2009

Great post, some lovely and effective headers.

robb

July 3rd, 2009

yeap big headers are always amazing.
im impressed most of the time.
good article.

Dave

August 13th, 2009

Big headers are great for impact but certainly need to be considered before use. If the content is important (blog etc) not always the best

Honey Singh

September 8th, 2009

Though the big headers are inspiring but often compromises with the website loading times.
The posts have some cool resources and suggestions !

Alistair

September 14th, 2009

Great set of big headers, some amazing designs, thanks for sharing the inspiration.

Rak Design

September 20th, 2009

Great headers, I think I’m in love with the Simple Art design.

Jason

October 20th, 2009

It’s work like this that keeps me inspired and interested in design :D

mktanny

November 4th, 2009

awesome,stumbled it

Stockport

November 9th, 2009

Some amazing and visually stunning examples of great headers. Given me some good ideas…

Ryan Dearlove

November 18th, 2009

Thanks, interesting read our team of website designers found it very interesting, it always good to look at examples and be inspired.

Thanks TB Team

mrka911

November 22nd, 2009

Merci pour l’information, je la cherchais longtemps!

Shubham

December 25th, 2009

wow very nice headers…..!!

ajay

January 5th, 2010

thanks for this type of article.after a long surfing i got this one ALL HEADERS ARE VERY ATTRACTIVE.thanks again.

Web catch

February 16th, 2010

Top post some great headers.

Club Penguin

March 6th, 2010

I like smaller ones that have a purpose with them.

Orlando

March 22nd, 2010

It looks great and makes an impact.

chicago web design

April 9th, 2010

Yeah, after going through your post, I also realized the importance of a good header. Thanks for the insight.

Mukundan Srinivasan

June 28th, 2010

Wow all the 5 types are so nice. My favorite is the huge header – Chris Hortsch. Nice blog header will definitely make a great impact. Great post.

Mika

September 12th, 2010

Great post great headers.

Hery

January 4th, 2011

great work…….love the design,

especially the Traffik and mailchimp site. have great design on both of these site.

Karen

May 5th, 2011

Thanks so much for this info. I’ve been worried about my own header and I didn’t know what to do with it. Your article’s given some ideas!

Chicago Kids

May 19th, 2011

The first is my favorite. Makes such a big statement.

Rahman

July 19th, 2011

Great post, I love dis, please keep post like that and footer design too…

Header Graphic Garden

August 21st, 2011

It’s always helpful for an artist to look at things in a “contrarian” way — asking herself, “If I created graphics the OPPOSITE way of how I would normally do it, what will happen?” I’m used to designing website headers in a very strict canvas space which doesn’t hog the whole page or detract from the written content below it. But whenever I see these cool, huge header styles of sites, I have to admit I wonder if I’m missing out on something!

Jamie

September 5th, 2011

Great list. Very impressive.

Ash

September 27th, 2011

Awesome headers! Thanks for sharing it. :)

You have provided lots of idea for creating the stylish headers.

Cheers!

Dave Designer

September 29th, 2011

I’m a big fan of the styling of James Lai’s header. He has since re-designed the site, but the screencap you have it pretty slick.

Larry Pitts

November 19th, 2011

You know I never really put a lot of thought in the headers of websites. On my own I just put up the name of the site with a bit of a design that was provided by the theme. But now that I look at some of these, wow, they definitely make an impact. The simple art one really caught my eye.

Leave a Comment

Subscribe to the comments on this article.