Saturday, February 20, 2010

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.


Chris Hortsch


enRoute Film Festival


Simple Art


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


PlanHQ


Campaign Monitor


Wufoo


Traffik


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

MailChimp


Digimurai


Enrichment


Wishlistr


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


Mark Lamb


OnWired


Design Moves Me


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


Icon Designer


Jason Larose Design


Benjamin David


Paramore|Redd



Related content
30 Creative Illustrative Website Headers
25 Stylish Website Footer Designs
20 Websites to Help You Master User Interface Design

No comments: