Advertisement
Web Roundups

Inspiration: 35 Wonderful Website Headers

by

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.

Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Design & Illustration
    Interviews
    Interview With Graphic Artist and Illustrator Marcelo SchultzIlovejazzpreview
    Marcelo Schultz is a graphic designer and illustrator that specializes in typography, and is well known for an illustrative style that emulates the look of 3D. I recently had some time to chat with Marcelo. During our discussion, we talked about several topics ranging from social media to illustrative techniques. Let's take a look!Read More…
  • Design & Illustration
    Interviews
    Interview With Saad Moosajee0963 saad moosajee preview400x277
    I recently had some time to chat with Saad Moosajee, a self-taught digital artist that has collaborated with brands such as Dell, HTC, Electronic Arts, and Nike. Saad also serves as a Creative Head for the Slashthree Collective. Saad is an old friend of Tuts+ and was first featured on the site back in 2009, when he was only 15 years old. In this interview we discussed several topics ranging from how his work has matured over the years, how he has challenged himself to improve, as well as why he chose to attend design school. Let's take a look!Read More…
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…