How To Design A More Effective Website Header
Customer-Centricity | Industry Savvy

How To Design A More Effective Website Header

on / by Sabina Idler

The header of a website is likely to be the first thing people will look at when they visit your site. There are no rules how a header should look like, and basically there are no limits to your creativity when it comes to designing your header. Just make sure you exploit its full potential.

There are plenty of articles out there, listing examples of beautiful header designs. When looking for inspiration, these articles got you covered. But why is one header design better than another? What elements make a header truly effective and why?

Here are three design aspects to consider when designing your own website header. Depending on the nature and the purpose of your site, they might or might not work, but they do give you an idea of the great potential your website header bears. Let’s take a look at these aspects and how some websites use them very effectively.

1. Keep it simple

The first aspect that strikes me as important is the well-known idea of keeping it simple. Your header is probably the first thing people will see when coming to your site. By keeping it simple, you can make sure you don’t ask too much from your visitors. Just like any new place we go to, we like to quickly find our way and not feel overwhelmed by too many impressions we cannot yet relate to. A simple header allows people to grasp the essence of your site in a blink and helps them to not get lost.


A clear header can be very useful to guide your visitor’s attention. For example, Sailthru use their header to communicate their central business idea. The header is very minimalistic, but the single visual element and the big letters draw immediate attention, guiding your focus to the smaller paragraph below. There is almost no way for visitors to avoid reading their message.


Discovered by leinehed.

A simple header can convey trust. For example, Wood&Faulk use very few elements in their header, focussing on their logo with two brief slogans. This sacrifice of visual elements or other content puts the company on a pedestal. Only their name and a two lines of text are needed to create an identity and convince the visitor of their high quality products.


Discovered by ogiogi.

Your header can also carry a message about your company and introduce your business. NTT Securty show a very personal, hand drawing of their logo, surrounded by different icons that relate to their clients’ data. This visual element is a great way to communicate a message. For those, who want to know more, there is a brief text, explaining their business idea.

2. Add some art

While some websites profit from a minimalistic header design, others can handle a lot more. I called this aspect adding some art. Sure, people should still be able to find their way around your website easily, but your header might be just the place to step out of the ordinary for a moment and offer more than plain information. Let’s see how artistic header designs can benefit your website.


Discovered by nielsvantilborg.

Obviously, an artistic and remarkable design draws attention. On the Web this is very important in order to give people a reason to enter the site and take a further look around. For example the site 3D Polystyren works with a very nice 3D illustration of their name to create a sort playground for a bunch of little figures who either stand around the letters, on top of them, or try to climb them. The illustration itself doesn’t carry a specific message, but makes you curious to see what else the site has to offer, doesn’t it?


Discovered by usabilla.

Also, beautiful and artistic designs appeal to us. We like to look at pretty things and usually we also have a positive attitude towards people, who make pretty things. The same applies for your website. For example, Webdesignser Depot have a very creative and beautifully illustrated website header. I remember when I first saw their site, I already had a positive feeling about the blog. Their header design made me like them even before I had read any of their content.


Discovered by kovah.

You can also use your header design to demonstrate your skills. Quazar Web Design have a very beautiful website. They use many small animations and a very detailed and appealing design that conveys a high degree of professionalism.

3. Make it interactive

New Web technologies offer a wide range of great interaction for your website. Through interactions, your visitors are no longer passive consumers, but they become active users. This not only offers them a richer experience on your site, it also allows you to connect with your users and build a relationship with them.


Discovered by nielsvantilborg.

Interactive elements can be very engaging for your website visitors. For example Açoriano Oriental use a parralel scrolling effect on their site, letting the airplane fly through the clouds while you scroll down the page. The header becomes an integrated part of the website and invites the visitors to enter the site in a very engaging way.


Discovered by femath.

An interactive header can be fun for your visitors. Surprise them with a funny effect like Get Cirulis does. The letters fly apart when you scroll down the page. Not exactly what you expect, but it certainly adds character to the site.


Discovered by usabilla.

Interactive elements can make your website more personal and of course also your header as starting point for your site visitors. For example, Lytro invite their visitors to try the lytro effect themselves by changing the focus of their header image. This informal link inviting you to “play with the picture” and the carefully chosen image with very likable people feel like you get a personal introduction to the service.


There are many ways to go about your header design. All of which will lead to different effects, or the same effects but in different ways. You can keep it simple and guide your visitors attention, make a statement, or convey trust. You can also add some artistic elements and attract attention, appeal to people, and look professional. Or you include some interactive elements to make your header more engaging, fun, and personal.

Makes sure you consider the nature and purpose of your site before you decide on how you want to go about your own header design.

Free Ebook Download: Interaction Design

| | |
Article by

Sabina Idler

Sabina was technical writer & UXer @Usabilla for 5 years before she started her own UX research and consultancy firm; UXkids. With UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for children. You can connect with Sabina on Linkedin or follow her on Twitter.

Share your thoughts

  • Another great post as always Sabrina. I do have a question that really has nothing to do with Website Headers. I was wondering your thoughts or advice on where to host infographics on a website? We are currently releasing Cloud App infographics and have one living on a page on the site and the other on a blog post. Would you recommend they all live on a separate page and simply link to them when we mention them in our site? I put the latest one on our blog section… I’d appreciate any advice. Thanks!

    • Hi Rocio,

      Well, I think you should definitely link to them whenever you mention them. With two graphics I guess it’s fine if they are placed on different pages on your site. However, if you intent to add even more, you might want to consider creating an own category for them so people can find them all on one spot. If necessary you can also place them on your site twice. Once where they fit content wise, and once together with all other graphs. Just make sure you place them where your visitors will look for the specific information that they carry. :)

  • Very detail tips thanks for sharing

  • Great collection of hints and tips, I think it all works as long as you keep want your target audience might expect to see or read in mind, if not you could run the risk of them not connecting with what you are trying to say.

  • Oh man that effect was AWESOME. or at least, I really like sites that incorporate elements that mirror their brand or message.

  • Tom

    Hi Sabina,

    great tips, thank you! :-) I also think that animated headers are a good option. You can create these with

  • Thanks again for the really informative post also thanks to the commentator who posted the the link for a5 animator.

    thank you

  • Nice article about Website headers…………

  • I was looking for a good clean design header ideas. found this interesting post. Thanks for sharing.

  • Great tips, This is what it takes to design an awesome header. Thanks for sharing it.

  • Headers play a major role in your website designing. A user must be able to distinguish between the content and the header. So the heading should be bold and legible. Making it interactive is the best you can do. Tips mentioned here are really superb. Thank you..!! :)

  • These headers are very inspirational. I found simple art header with their interactive desk very amazing. I would probably use these headers as part of a mood board in thinking of designs. Thanks for the great article.


  • Great..!! Headers play a major role in the popularity of a website. They should be catchy and self explanatory. These tips are very useful and effective. Keep writing. Thank you for this. :)

  • Thanks, great tips!
    But seeing examples I realize that I need also to be familiar with PS and creative enough :)

  • Great tips for designing a header and lots of different ways that it can be achieved and yet still be professional. Thanks for sharing the sites as they are excellent resources.

  • I agree that the website header should be interactive and catchy enough to grab the attention of visitors at first sight.

  • Great tips for website header. I think website header is most important part of any website which draw the attention of the user.

  • Martin Horník

    “The illustration itself doesn’t carry a specific message, but makes you curious to see what else the site has to offer, doesn’t it?”

    Actually the illustration is not only the name of the service but also the illustration of their product. The company specializes in 3D cutting of polystyrene.

Pin It on Pinterest