Inspiration: 35 Wonderful Website Headers

Website headers are a very important aspect of any web design, whether the website is a blog, a portfolio, an informational site or even an online store. It is, along with the logo, one of the first things a new user will see when visiting your website. Your website, just like a human-being, should have a personality; the best way to “present” your website’s personality is via the header design. This allows the visitor to quickly determine not only the quality of the site, but if the content is something they think they will enjoy.

This post showcases 35 awesome header designs to help inspire you for your next web design project. All of the showcased headers capture the attention of their target audience incredibly well, therefore keeping them on the website for a longer period of time. And let us know what your favorite header is in the comments!

Section 1. Illustrated Headers

Praline En Schachtel

As soon as this wonderful header has loaded we’re welcomed to a happy and cheerful environment with a great personal touch. The friendly feel of the header counteracts the fact that the navigation doesn’t seem to exist at all.

BAD Health

Meomi

Once again we are presented with a cheerful environment with the ‘Meomi’ header design. The illustration is, in fact, animated using Flash, so be sure to take a quick look at the live website. Although the design is quite busy, it is easy to adjust to, making it easy to find our way around the site without any problems. The use of a tag line below the navigation menu makes it clear to new visitors what the website is and who it is aimed at – just incase you hadn’t already gathered from the beautiful Flash illustrations.

Blog What? Design

Et Toque!

Et Toque! also uses a Flash animated illustrated header. They incorporate cute character design with bright, eye-catching colors and a superb composition. The navigation is located at the bottom of the page which, in a way, is quite unusual; Et Toque! however have managed to pull it off very well.

Bienenstich Band

Matt Hamm

Matt Hamm’s portfolio website has followed a reasonably recent and modern trend by letting his new visitors know what he does in big, bold lettering. To emphasize the word ‘Hello.’ a dark blue color has been used – this makes the personality of the website friendly and very personal. The use of a shadow directed onto the navigation menu at the top of the page makes it stand out more than it already does – it’s almost impossible not to click on the links. To top it all off, a comical illustration of Matt himself holding a Twitter bird icon has been used, telling the public he has a Twitter profile.

Tropikalny Ogrod

Section 2. Hand-Drawn Elements & Textured Headers

XHTML CSS Expert

Cochemer Stadtsoldaten

This header makes great use of stock images, textures, and shadows, all to produce a memorable compilation. The use of a large website logo only makes the website even more memorable, and the tag line beneath it makes it easy for new visitors to find what the website is about. The navigation is incredibly simple to use, with contact links, etc. being shown at the top of the header, and content navigation links being used beneath.

Sprocket House

Studio Racket

The use of grungy texture and hand-drawn elements in this header design makes the site feel very personal and inviting. The navigation is also hand-drawn, and is rather unusual using a layout similar to that of a spider diagram; although not a common technique, it is very easy to navigate around the website without too much thought and effort.

Belzebu de Saia

Odosketch

All For Design

After first loading this highly textured web design we are almost immediately hit with a burst of bright (and attractive) green. A slightly lighter and subtle green is used behind the parrot to take our eyes into the navigation menu, which has been placed above the majority of the textured background, for easier viewing. A large logo with an embedded tag line is used, which has also been placed above the majority of the textured background, making it easier to remember as an independent logo rather than part of the web design.

Brunosouza

JOBY

The Joby header uses a combination of large (and bold) small letters, small caps, and Sans Serif fonts to attract the visitors attention and let them know what the site is all about in a very memorable and exciting way. The use of a hand-drawn/painted illustration adds a great personal touch to the design.

Jay Hafling

Barclay Farms Estate

Section 3. Typography Headers

Projeto Trinta

This is quite possibly one of the most beautiful and energetic header designs in this compilation. The use of subtle gray colors and a strong, lime green with a combination of torn holes and light grunge textures make this an absolute pleasure to look at. As well as looking great, the navigation is super easy to use with a stylish white highlight effect when hovering over the links. The sponsor icons are also linked, making use of the empty space in a superb way for some advertising campaigns.

Diamond HTML

David Jonsson

North Temple

This minimalistic but great typography-based header design has it all. The large, colorful and photo-based typography header is eye-catching and is very easy to remember. After you’ve stopped staring at the lovely color scheme in the logo, you’ll probably read the tag line, explaining what the site is about, and whether or not it is something you want to carry on reading. If it is, you’re presented with some very simple but appealing text links to find your way around the site.

Trent Walton

The Urban Landscape Lab

Teleios Man

TUT Candy

TUT Candy was very close to being put in the next category, ‘Atmospheric and Bokeh Headers’, due to its starry and spacey background. It is, however, based around three-dimensional typography, securing it a place in this category. After admiring the gorgeous text effects and reading the attention-grabbing tag line, the links and search bar are very easy to locate and use at the very top of the header.

Section 4. Atmospheric and Bokeh Headers

Rareview

Rareview use subtle (but incredible) animated Flash in their header, so make sure you head on over to check out the live version – you will not be disappointed. The atmosphere the animation creates, especially if viewed on a large glossy monitor, makes you feel like you’re in a different world; it really is that powerful. The minimalistic black and white logo and navigation links make them very easy to locate and use, and make use of some great hover effects (again, see the live version).

Lisa Maya

72 Thinking:Outlets

Mycreativework

Section 5. Minimalistic & Simple Headers

CTL – The Business of Learning

The Croquis

This is easily the most elegant header in this showcase. The use of watercolor textures and the minimal use of color adds a very personal touch to the design. The thin black line at the top of the header helps release the potential of the fine logo and navigation typography.

Cloud King

XEDA Design

After looking over these fantastic examples of well designed headers, you should feel refreshed and ready to take on your next web design project, or even redesign your existing header – after all, sometimes only small tweaks are needed to release your design to its absolute full potential.