7 tips for creating headers that will make you say, “WOW!”

But what will people who arrive on your home page see in those 50 ms? Most likely just the header. That's why the header is so important for your website's success, and why you need to make sure it's truly effective.

The header is the top part of a web page, and the first thing the users see without having to scroll down.

This means that the header plays a strategic role. Creating a header for your home page is important because it concisely tells your visitors who you are and what you offer. You should also create separate headers for internal pages, which may be smaller and briefer, but remain consistent with the home page header. This allows you to better welcome visitors who start their visit to your website on an internal page rather than from the home page.

Some of the clearest evidence about the importance of headers comes from studies on website usability by the Nielsen Norman Group.

According to these studies, when users arrive on a website, especially for the first time, they don't explore it very attentively or carefully; instead, they tend to quickly skim the page for hooks that grab their attention and convince them to spend more time on that site.

In general, readers skim web pages in the following ways:

With that in mind, we can conclude that a well-designed header is an advantage for:

As we mentioned, the header’s job is to sum up all the important information in just a few words, so that users can get an impression at a glance, and potentially decide to stay on the site.

In order to do this, headers generally include the following elements:

The header is one of the sections where you can best express your creativity, but as we mentioned earlier, it's also a crucial element of a website. So don't get ahead of yourself, and make sure you channel your creativity in ways that are unique but also effective.

Here are some useful tips for creating a memorable header.

What should your header’s dimensions be? There’s no definitive answer: this mostly depends on your site’s goals and your own stylistic preferences.

Common sense suggests that the header's height should not obscure the site’s contents. For more informational websites, a smaller header could be a good choice: for a portfolio website or an online store, however, larger headers may be more effective.

If you decide to use a big header, make sure it doesn't take up the entire browser window: it’s helpful for users to be able to glimpse what's under it, which incites them to scroll down and navigate deeper into the website.

As we were saying earlier, you could create a large header for the home page as well as similar, but smaller, variants for the internal pages.

Your logo is one of the most important elements for establishing your identity. People expect to find a logo in a website’s header, and more specifically, they expect to find it in the upper left.

According to another study by the Nielsen Norman Group, in fact, users are more likely to remember brands whose logos are positioned in the upper left than in the center or the right.

A beautiful image is a must for creating a good impression immediately. Choose your header image carefully: you might decide to use a photo or an illustration, or, if you want something even more eye-catching, a video or an animation. In any case, it should be something imaginative that immediately evokes positive feelings and tells your visitors something about you.

Here’s a tip: We all love stories, and we like to see people’s faces: choose photos with faces to spark greater engagement and interaction.

A good navigation menu is based on an effective tree structure outlining the site’s pages. Visitors should easily understand where everything is and how to immediately find the information they’re looking for.

Make sure the menu isn't overly crowded, and use clear labels: don’t try to be original here, standard names are more immediate and understandable.

If you'd like to emphasize your content, perhaps by highlighting images or videos, or if you're looking for a minimalist, modern look, you can replace the traditional navigation bar with a hamburger menu: that little button with three lines that displays the entire menu when clicked.

Another interesting solution is the sticky menu: here, the menu is “stuck” to the upper part of the browser window, so that it always remains visible even as users scroll down the page.

An attractive image is important but it’s not enough on its own: support it with short, compelling text that tells your website’s visitors what to expect or what to do.

In general, oversized text is a great way to emphasize a title and draw attention to the top of the screen before users start to read the other information present on the page.

You decided to create a website because you have a goal. Are you trying to offer a service, sell products, or gain subscribers? Regardless, your header is the perfect opportunity to ask your visitors to do what matters to you.

There’s no rule stating that your header’s CTA should always remain the same. You can test out variants of different CTAs to understand which works best: you can also update the header itself, to correspond to your schedule of special offers, for example.  

The header, like every other element of your website, should also work perfectly for users browsing on a tablet or smartphone. That means it should be responsive and able to adapt to any device.

As we all know, a good first impression goes a long way. A well-designed header is a decisive element for a successful website. It’s the first thing users see when they arrive on your home page, and it's very probably also what convinces them to stay, or to exit your page in favor of your competition.

So plan your website header carefully, both for your home page and your internal pages. And keep following us: next, we’ll discuss how to create an equally stunning and effective footer.