CX Insights

How To Design A More Effective Website Header

6 min read

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.

Clarity

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.

Trust


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.

Meaning


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.

Attention


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?

Appeal


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.

Professionalism


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.

Engagement


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.

Fun

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.

Personality


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.

Conclusion

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




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.