Menu

Five Types of Effective Headers in Web Design

Advertisement

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.

This was published on Apr 23, 2009

92 Comments

Excellent article!

Kawsar Ali Apr 23 2009

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

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.

misterfaster Apr 23 2009

nice roundup!

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

Mittal Patel Apr 24 2009

Fantastic examples !!!

FrankyXu Apr 24 2009

Nice~ Thank u.

Great collection. Lewro’s blogs header excellent.

om ipit Apr 24 2009

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

Luiz Dias Apr 24 2009

Great post! Already bookmarked!

Cat Johnson Apr 24 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!

Love the selection.

thank you for this usefull posting.

great article. really helpfull!

Carl - Web Site Design Instructor Apr 24 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?

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 Apr 24 2009

very excellent !!! THANX A LOT.

David Wright Apr 24 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 Apr 24 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.

Good quality picks, thanks for sharing.

Patternhead Apr 24 2009

Some great inspiration here, thanks :)

Eric Kureck Apr 24 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 Apr 24 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 Apr 24 2009

Great article.

Jacob Gube Apr 24 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!

Great list, thanks! :)

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

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.

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 Apr 24 2009

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

stratigo.com

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

@philmacnevin

Roy Vergara Apr 24 2009

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

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 Apr 24 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 Apr 24 2009

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

@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 Apr 24 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 Apr 24 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)?

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

Abounding Media Apr 25 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.

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 Apr 25 2009

Super post and so helpful! Ty!

myDevWares Apr 25 2009

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

thanks

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 Apr 25 2009

very well categorized…

@3drockz

Tony Chester Apr 25 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

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?

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

Addicott Web Apr 26 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 Apr 26 2009

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

designwashere Apr 26 2009

Excellent post and really nice categorized headers.

Thanks!

Addicott Web Apr 26 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 Apr 26 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 Apr 26 2009

Wow Nice compilation, stumbled

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 Apr 27 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 Apr 27 2009

Very nice! Thank you for writing this article.

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

Eric Roth May 05 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 14 2009

Nice Samples. The design are awesome!

Farid Hadi May 20 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 29 2009

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

Mariusz Jun 17 2009

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

as usual mailchimp made again to the list

Fred Campbell Jun 17 2009

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

SJL Web Design Jun 17 2009

Great post, some lovely and effective headers.

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

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 Sep 08 2009

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

Alistair Sep 14 2009

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

Rak Design Sep 20 2009

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

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

mktanny Nov 04 2009

awesome,stumbled it

Stockport Nov 09 2009

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

Ryan Dearlove Nov 18 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 Nov 22 2009

Merci pour l’information, je la cherchais longtemps!

Shubham Dec 25 2009

wow very nice headers…..!!

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

Web catch Feb 16 2010

Top post some great headers.

Club Penguin Mar 06 2010

I like smaller ones that have a purpose with them.

Orlando Mar 22 2010

It looks great and makes an impact.

chicago web design Apr 09 2010

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

Mukundan Srinivasan Jun 28 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.

Great post great headers.

great work…….love the design,

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

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 19 2011

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

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

Header Graphic Garden Aug 21 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!

Great list. Very impressive.

Awesome headers! Thanks for sharing it. :)

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

Cheers!

Dave Designer Sep 29 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 Nov 19 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.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners