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.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Callum Chapman
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very nice headers! Somewhat artistic style and unique! i love em! I tried to do that on my site, but ended up with a 3D cartoon mix mash frenzy! LOL
your works sweet dude, like “cold Summer” :) you a flash developer/ designer then ?
Hey, great You like it. I’m a web and graphic designer primarily but I do like the freedom and possibilities in Flash. So I have clients that want something different, and I can provide that unique touch and feel. Still working on some projects, when they come out I’m sure YOu’ll see them in web galleries :)
If you like cold summer, than you might love my characters and web comics at DESIGNERSCOUCH : http://bit.ly/7a6yRG
Great Collection! Thanks.
Nice Round up. Bookmarked!
Very inspiring. Retweeted! Thanks for sharing.
cheers
De très beaux headers :)
damn…this is nice..
Whow, great list!
Nice to see some foreign designs as well.
nice post :P
Its amazing the amount of websites with larger headers nowadays. This is a great little run down of some great examples.
i like this one also:
http://www.dagmarapater.com/
Are you serious?
^lol
no…
Wow… Just.. Wow. :P
HAHAHAH LOLL, bad promotion, very negative style of promotion dude. :(
http://thedesignsuperhero.com/
http://www.cssjockey.com/
http://www.webdesignerdepot.com
These also have some good headers :) ..
Hey Sid, Thank you for mentioning CSSJockey. I appreciate your support.
Very nice inspirations!
This very cool http://diamondhtml.com/
Loved that one also, very nice!
Yeap, very nice and clean professional style!
simply awesome! Love those designs really
This one is nice too – http://www.asvalia.pl/english/
dam thats hot
Hey
Nice list. They seem to be greatly skewed thowards design studios, design blogs, and personal portfolio sites though, as I find these inspiration lists generally are.
I know that designers may have more freedom and be more creative in designing their own sites. But I would prefer to see examples of great design on clients sites, (ie. regular business and services sites). This in my opinion would be more useful, as it demonstrates great design adapted to the real world.
What does everyone else think?
Absolutely agree, sites like the CTL example are of more interest as I think it’s a strong design for a real world business, there’s something very incestuous about lists of great web designs being full of web design companies.
This is a comment for the editor, Jeff, not the author — and please don’t take offense! I completely agree with Danny. I am literally struggling with the design of a header right now, but this post didn’t help me at all — and that’s something to think about.
As Danny mentioned, seldom do I get to design sites like those pictured above for my clients. More importantly, however, they are all a rehash of the exact same IA — Main Focus: Show off your design skills and highlight your porfolio, with a navigation structure such as: Home/About/Portfolio/Resume/Contact or something like that. Basically, the IA is very simple, and is reflected in the design. For a site of any complexity, these designs stop being very useful.
I ask humbly that you don’t go too far down this road. There are thousands of CSS Galleries/Smashing Mag/WDL for these kinds of posts. Retain your niche — which is to provide useful information for actual design and development. Or if you do posts like this, please ask the question: What specific information can someone get out of this post?
Thanks for your time!
I completely understand where you’re coming from. Maybe this month I should do a round-up of company websites that aren’t designers, developers, agencies etc?
Hey guys. Totally understand. And that’s why we only rarely post round-ups on Nettuts+…probably far less than our competitors.
@Callum – Sounds great. :)
I think your right…
Its great to see articles like this in this website,
….well its been a while ,
most of the time its more on development
@ Callum – Yes that sounds like a great idea. I would find a round-up like that very useful.
Most clients aren’t cool with “wasting” header space, all I hear from them is fold,fold,fold :P I have a site I am working on the now and I asked for the features to have numbers set against them for what sells the version 7 of the site.
I got back 1 – 18 are all prominent we need them all above the fold and then sent me content that would have made the BBC freak!!
a dynamic panel with a novel per slide. lol :P its never easy…
realy, very beautiful designs
best one : http://nettuts.s3.cdn.plus.org/557_headers/images/33_awesomeheader.jpg
thanks
Great collection here. But can’t seem to understand what makes the header of “Blog What? Design” so special. The character is from istock which is widely used after all. :)
You’re right! Iv’e seen it in headers before.
Nice list but, to my opinion, The Croquis is a bit too much inspirated from Big Cartel design…
Great post!!!!
well done!!
My favorite is ‘Meomi’. I love how it pulls you into an environment rather than another ‘flat’, document-like website (which of course there’s nothing wrong with either).
Great list…they ALL have something inspirational to offer!
Refreshing to see great website designs
great roundups
Nice Collection.
Thanks
First one is amazing!
I love Meomi and BAD Health. Nice selection. < Inspired ;)
JOBY.in is great………
Just updated this site, Scott Jackson did a marvelous job with the illustrations.
http://safedrivingacademy.net
They are awesome !
Thanks !
Cool !
Check out some more awesome website headers http://box.mepholio.com/collections/15/recent
awesome, really like joby.in
Thanks a lot for this wonderful inspiration. I like that you divided the headers into different categories, that gives me a lot of new ideas for my own designs :-)
In that Bienenstich Band one, do I see Comic Sans? :P
beautiful collection
Oh my… Love it! I think I may need to rethink my own header now… Thank you for sharing.
Kiss, Ana
Awesome inspiration, amazing header designs, I think I like David Jonsson’s the best. Thanks for sharing!
Thank you so much mate!
woah! Thanks for featuring me guys! Never expected to get featured on a site I regularly visit and have a Plus membership at :)
My pleasure :)
I’m always interested to see a portfolio of great website designs, as they are an invaluable research tool for creating stunning designs of your own. As per usual there are some fantastic ideas here that really set the standard.
Looking through the example there are clearly those that follow the web 2.0 formula, with bold headings, lots of drop shadow usage, gradients on text and lighting effects. Of these ‘Rareview’ and ‘Diamond HTML’ are particularly stunning, especially with the Photoshop bubble effect on the latter.
I also like the more cartoon style demonstrated by ‘Matt Hamm’ and ‘Bienenstich Band’, with their clear use of Illustrator to create fantastic artwork. Combining these two powerful tools can generate some stunning effects as shown here. I look forward to seeing similar articles in the near future.
great collection!
http://digitalmash.com/
VERY NICE!!! THANKS!!
Nice list!
very very nice coollections.
Head muy buenos!!!
is this smashing magazine>
How did you miss http://www.thepixel.com :)
A lot of headers have been posted on http://hot4headers.com/ which launched back in October.
A good site for website footers is http://footerfetish.com/
Cool dude!
Praline En Schachtel is really cool, I attempted this with my new site, but I think I need to sit with it for a longer time to get it on the mark.
Still it will do for now, a lot of nice designs in this post. Thanks for sharing.
Nice Collection!