Five Types of Effective Headers in Web Design

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.