15+ Beautiful Website Headers and Why They Work So Well [UPDATE 2021]

What’s the first thing a user sees on your website?

Exactly, the header.

If that’s not appealing enough, if it doesn’t bring clarity, your users might just go away, and maybe never come back.

We don’t want that, do we?

Website headers are a central part of designing a website. They play a key role in grabbing the users’ attention and establishing a connection with the website’s visitors.

This is why, in the following lines, we’ll tackle some header design principles you should be aware of when designing a website header.

Header Design Principles to Follow

Research studies have found that the users’ eyes move on a webpage by following one of the 3 patterns:

  • The Gutenberg pattern

Image Source: https://vanseodesign.comThe Gutenberg pattern can be applied to text-heavy content. It suggests the readers’ eyes sweep across and down the page in a series of horizontal movements.

Example:

  • The Z-shaped pattern

Image Source: https://vanseodesign.com

The Z-pattern defines the path the users’ eyes follow when scanning a page, a path that takes the shape of a Z letter. It is recommended for the design of landing pages, that readers quickly scan.

Example:

  • The F-shaped pattern

 

Image Source: https://vanseodesign.com

This pattern describes the most commonly used style of reading blocks of content in the online medium. Users quickly scan a webpage, and their eyes follow an F-pattern.

Example:

 

Without going into further details about these patterns, we’d like to strengthen that for any of these models, the upper horizontal line is where the visitors begin scanning a page.

 

What to integrate into a website header?

These patterns show why a web designer must carefully decide what users should see first. The header should serve as a hook that will catch their attention and invite them to explore the rest of the page.

There’s no chance to make a second impression. So, you should think twice about what to include in the header:

  • Strong hero image

A hero image is a very large banner image that is shown above the fold on a webpage. It is included in the header section and is the first thing the users see when arriving on a website. Hero images also have the purpose of attracting visitors’ attention to the unique selling point (USP) of the business. A best-case practice states that using faces of real people in the hero images can help visitors relate better to the brand. Communication gets more humane and personal.website hero image using people faces

Source: Drift.com

  • Unique selling point (USP)

The USP is a phrase that explains the reason a business exists. It should reveal what the business does, why, and for whom. It should also emphasize unique features and benefits, that make the brand stand out among its competitors. A strong USP is vital in conveying the right message to the website visitors, and, ultimately, in converting them into customers. MIRO unique selling point

Source: miro.com

  • Brand name

The brand name gets people accustomed to the site identity or reinforces the image people have of your business identity.

The image should reflect your brand personality and ensure your brand voice is consistent throughout the whole website. It should be easily recognizable even if cut out from the website header. And when placed into the website header, it should play a key role in establishing a personal connection with every user.Brand name in website header

Source: carolinaherrera.com

 

  • Product video

Because it only takes 50 milliseconds for users to form an opinion about a website, it means that you should have the most important messages in the header. This is why many businesses don’t wait for their users to scroll down and get to the features of their product/service, but they’re using the power of video to convey their message better. Also, let’s not forget that 78% of people watch online videos every week, and 55% view online videos every day.

Wistia video in the header website section

Source: wistia.com

  • Call to action (CTA)

A CTA is a message (usually on a button), that triggers a certain response from the website visitors. The Call-to-action should be clearly defined and easy to understand by the website visitors. Naturally, a CTA placed in the header, right where visitors start their journey into the website, increases the chances to get the wanted action from the respective users.

CTA in the website header

Source: creatopy.com

 

 

  • Product featuring 

In case you run an eCommerce store, you will want to emphasize the quality and convenience of a certain product, and the best way to do it is to include that product in the header. The users’ attention will be driven towards that best deal, and they will be prone to step into the buying process.

Source: amazon.com

In any of the above cases, the general rule of thumb is: keep it simple, keep it clear, make the header engaging! Research shows that “the average difference in how users treat info above vs. below the fold is 84%.” So, it is best to focus your efforts on reducing those numbers as much as possible. And you’ll do it best if you’ve set yourself some goals as to what you want to transmit.

Large websites, like www.youtube.com, limit the space dedicated to the header to only a small amount. This is done on purpose, as the intention is to let the users’ attention be directed to something of more importance, like products, or services, or videos (e.g. YouTube).

Sometimes you don’t even need a header, or if you do, you need just a small one.

It all depends on the website’s particularities. Think about it and give your website the personality it needs, no matter what the web design trends are “telling” you now and then.

What Does Your Website Header Inspire?

Besides transmitting certain messages, you can also consider instilling certain emotions in the readers. Depending on the purpose you give to the header, it may inspire in the readers one of the following:

  • Curiosity

For certain websites, it would be suitable to set up a header that inspires curiosity in the readers. They will want to find out more, they will long for more, they will rush into exploring the rest of the story.

It’s how I feel about this header from Canva. They make a huge promise right there: “Design anything”. And you’re invited to test this. Can you resist?

Canva header design

  • Action

In some cases, it’s better to stir action directly from the header. With a call-to-action, you can invite users to click on a button, or perform some other interaction with the website, right off the bat. In the case of Planable, their USP is directly connected to the CTA below. also, if you’re not quite ready to buy, there’s an option to schedule a demo as well.

Planable CTAs in the header

  • Trust

It might be useful to start by inspiring trust in your visitors. You want them to take some action later on, and for doing that, they have to feel fully confident that they make the right decision.

Let’s see how Salesforce does it. They state that they are the world’s largest CRM. Okay, you might say that 99% of the companies out there aren’t the first in their field. And you’d be right. But, if you read below, there’s definitely something that you can use. There’s a case study that shows how efficient the product is. You can leverage such a case study yourself.
Salesforce inspiring trust from the website header

  • Pain

Why on earth would you want to inspire pain in the readers, especially from the header? Well, many companies have their marketing based on the FUD principle (Fear, Uncertainty, Doubt). At an early stage of the conversion process, fear/pain will trigger the decision to immediately apply a solution and make that pain fade out.

This can be an approach for cybersecurity services, physical security services, but also in healthcare or pension funds.

Such an approach can be leveraged in campaigns that want to make people aware that you need to vaccinate against COVID, or to wear a seatbelt.

  • Laughter

Maybe you want to emotionally connect with the visitors, from the very beginning. And there’s no better way to do this than make them laugh. And laugh loud. A sense of complicity is being formed and you’ll have your users stand by your side, while they’re exploring the website.

  • Familiarity

Connecting the users’ situation with a similar situation presented in the header can create a certain degree of familiarity.

 

Types of Headers for Different Types of Websites

Depending on the website specificities, a header will fit better the overall design than another. Accordingly, you should have a clear idea of what type of header will best suit your own website (be it eCommerce, blog, portfolio, online newspaper, etc.).

  • CTA-focused header

In the case of Blue Apron, the website header uses a large video, instead of a large hero image. It transmits a sense of coziness, familiarity, appetite.

Next, we have a CTA that invites the user to take action to benefit from the same cozy and yummy experience.

 

The CrazyEgg website comes with a header that invites users to take their product for a live demonstration. Their product is just a perfect fit for such real-time demonstrations. And it proves instantly the benefits of the product. Their are also using a visual cue, pointing out to the CTA: the hand of the man in the balloon is directing the eye towards the button.

Crazyegg CTA in the website header

 

  • Brand-focused header

This is a beautiful example of a website with a header focusing on brand identity and branding elements. It includes the logo, a replication of the brand logo colors in the upper part, as well as their slogan.

 

  • Content-focused header

This is very suitable for blogs, and magazines, which promote articles and stories.

But, I also found some exceptions.

Patagonia is not promoting their shop on the homepage, but, they push stories that show their commitment to making a change in the world. This current story, featured in the website’s header, is about slavery and activism.

Patagonia website header

In the case of Ikea, the left-hand side of the screen prompts visitors to one of the online stores, while the other half prompts users to read the story of Ikea.

Ikea grid design

 

 

  • Video background-focused header

BUKWILD integrated 3 different videos in the website header. Each of the videos can be played by placing the mouse over the corresponding section. What’s interesting in this is the creative way they use videos as parts of a bigger “picture”, one that represents their brand.

 

Bukwild header video-focused

  • Product-focused header

In the case of Cropp, an online fashion store, the latest collections are being featured in the header.Cropp products shown in the header

Threadless.com puts wall-art in a context and features a CMYK Squad. The header also includes a clear CTA, for all those who feel they belong in a way to that scenario presented in the header by the “squad”.

  • Personal branding-focused header

In the case of the travel blog Alex in Wanderland, in the website header, apart from a photo of Alex, users can see the beginning of a story in this header: “Five years and counting on the road…”. This is an invitation for the readers to want to explore more stories.

To wrap up…

Headers greatly contribute to a website’s success or failure. Technically speaking, this upper part is naturally the first thing on the website that people interact with.

+ posts