20+ Beautiful Website Headers and Why They Work So Well

20+ Beautiful Website Headers and Why They Work So Well

Website headers are a central part in designing a website. They play a key role in grabbing the users’ attention and establishing a connection with the website’s visitors. 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: Gutenberg pattern, F-pattern or Z-pattern.

Image Source: https://vanseodesign.com

The 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:

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:

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.

Mesmerize features have been created to observe these rules and help you create a great website header design.

What to integrate in 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 into the header:

  • It might be a CTA, that triggers a certain response from the website visitors, in exchange to your message.

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.

  • It might be a brand image, that 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.

  • It might be featuring a product, that you want to showcase (e.g. best deal).

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 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.

  • It might be featuring the newest/best article, in case you are running a blog or a news site.

In case you are a blogger, or you’re running a media site, maybe it’s a good option to include the best article into the header of the front page. It will surely catch the readers’ attention and motivate them to discover more. Or else, the newest article will do fine. In this latter case, you reassure the readers that they’ll be in the know, if they continue reading articles clearly organized by their recency.

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.

What Inspires Your Website Header?

In the same vein of 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.

  • 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.

  • 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.

  • Pain

Why on earth would you want to inspire pain in the readers, especially from the header? Well, 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. That solution is yours!

  • 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.

Image Source: https://www.freewebheaders.com/cool-funny-headers/funny-headers/

  • Familiarity

Connecting the users’ situation with a similar situation presented in the header creates a certain degree of familiarity. Users get more readily in the shoes of the actors performing in a header video/image and are more inclined to explore the rest of the website.

Case Studies for What the Changes in the Headers Imply for the Website

Case Study 1 [MINDERS]

It’s a rule that web designers include menus in the website header.  However, the bravest ones might consider removing the menu from the header, and test to see the change in conversions. This was the case of a child minding site that has been analysed.

With a menu in the header, the website owner provided information and extra tips, giving people the freedom to navigate within the website. The conversion rate was of 9.2%.

By removing the menu in the header, the website owner restricted the options people had to navigate within the website, and above that, focused their attention on the CTA. They had the only option to Sign up. The conversion rate went from 9.2% to 17.6%.

Case Study 2 [SEPHORA.COM]

A major trend in web design is that of including image sliders, or carousels, in the website header.

However, according to some tests, sliders are not such a great idea for designing a website header. Older studies have found that only the first slide got some action from the users (1% clicked on the slide), whereas other slides were not clicked at all.

Maybe it would be a god idea to limit the number of slides to just a few, and work to make these few slides appealing to the end users:

Image Source: https://vwo.com/blog/image-slider-alternatives/

Case Study 3 [DIAMONDCANDLES.COM]

A hamburger menu in the header is usually a good option for mobile navigation. Some tests performed for different variations of the hamburger menu showed that the addition of the term “Menu”/the use of a blatant color could significantly increase the conversion rates:

This menu variant…

… showed an increase in the rate of conversion of about 5%.

Maybe it’s time to reduce the header or eliminate it?

These case studies should invite you to think of designing your website your own way, regardless of what’s in trend now. Maybe a well-designed header will work fine, or else you might not need a header at all. Have you taken this possibility into account?

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 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.

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, etc.).

CTA-focused header

In the Blue Apron website, different recipes presentations are succeeding one to another in a video, all inviting you to “Get Started” in a very suggestive way.

Mayo Clinic encourages users to sustain the organization, not before giving away some information about who they are and what is the cause they support.

Wordstream blog comes with a header that invites users’ to sign up for the news. Some text accompanies the CTA button, and explains what the subscription implies.

Crazyegg invited users to “Make their websites better. Instantly”, as if talking to them in person, and inspiring a sense of urgency somehow.

Brand-focused header

This is a beautiful example of a website with 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.

The official site of Paris has a header inspiring love to travel there and explore the city’s tourist attractions.

Content-focused header

This Premier League website header includes news people are more than interested to find out, with a simple click. The menu only facilitates navigation towards more information available on the website.

Lifewire suggestively list some guides categories, that users might find useful. There is a concentration of content within the 4 main categories well represented by visual symbols. The impression the header conveys is that of useful, helpful articles which have to be discovered when clicking on any of the links.

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.

Another example of video background-focused header is that of Flex, directly related to the creation of website headers. They feature a video having the role to concentrate users’ attention on the message placed onto the header.

Product-focused header

This header for the Gruntstyle.com website features a product you can “Shop Now”. It attaches to it emotion, both by connecting with the users’ values, and by appealing to their inclination to donate.

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

Apart from a photo of Alex, users can see the beginning of a story in this header: “Five years and counting on the road…” incites curiosity and tells a lot about what can be found inside.

Gary Sheng includes a photo of himself in the header, thus focusing on his own personality and trying to instill trust in the readers, as to what they’ll find when scrolling down the page.

Another example of personal branding-focused header is for Pascal Vangermert. In addition to the photo of himself, he adds a short description and some personal details.

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. So, be careful when choosing a header for your website, consider the website’s particularities and don’t forget: ask yourself if the website ever needs a header at all?

Please share with us the experience you had with header design and let’s see your viewpoints regarding this web design part.