When we first visit any website, the way it looks and the way we perceive it matters a great deal. The statistics show that it takes users less than fifteen seconds to decide whether to stay on the resource or leave it. Consequently, website owners are short on time to catch the attention of users. Sounds pretty scary, right?
In this regard, all the details and each UI UX design element of the site should be thoroughly analyzed and worked out to attract customers and stand out from competitors.
Among the first things that the users and customers see when they open the website is an element called “header”. In this article, we’ll study the essence of this aspect and how to make it fascinating as well as unforgettable. Let’s start by outlining the definition.
What is a website header
The header is an upper part of the website page that contains logos, links to important categories, sections, search bars, contact information, etc. In other words, things that are truly vital for convenient navigation. That makes the header one of the most important tools for increasing conversion on the website.
The main goal of the header is to provide visitors with basic information about the company – its name, brand, and goods or products offered (the website menu).
The website header design has a lot of room for creative solutions and can be made in many different ways. However, the thing that unites them is that it should be catchy, concise, and useful.
So far, we know what the term “header” stands for. But what makes it so important?
What is the purpose of the header
The aim of any company is to be noticed by customers. And this is one of the main functions of the header – to catch attention. Due to the fact that the header is the first thing that is seen by the users, it plays a huge role in improving the interaction between the company and the visitor. It serves as somewhat of a greeting, something that forms the first impression. Moreover, the header has a strong influence on SEO, as the most crucial links and elements are placed here.
Furthermore, the header provides users with an opportunity to study the brand while entering the website (they discover what the company does, what goods or services it provides, and so on).
Consequently, if the impression from the header for the website is pleasant and if it seems trustworthy, then the chances of attracting more customers are much higher.
There’s also one crucial issue to be mentioned. Sometimes, people without any technical background may get puzzled when they see the terms “head” and “header”, perceiving them as synonyms. To avoid possible misunderstandings, let’s work them out.
What is the difference between header and head
Once again, the header stands for the block of information at the top of the website, representing the company’s brand, features, and so on. It’s a visual design element assisting in the interaction between the visitor and the website.
The term “head”, in its turn, denotes the information invisible for visitors that is located in the HTML page code. It is a kind of a box for all the main document elements such as technical data elements (links, styles, scripts, etc.) and meta tags – HTML tags which are used to store information important to browsers and search engines (they use these tags to get the information on the website, keywords, and so on). In other words, the head contains computer-readable information about the website (or a page).
Having revealed the definition and importance of the header, along with the differences between the two terms, now it’s time to study the header in a deeper way. And we’d like to start with the header design principles.
What are header design principles
We already know that the website header is a key element when it comes to catching the attention of visitors and customers. Let’s take a look at how new users see the website.
Multiple studies revealed that there are three patterns of perceiving content on a page.
01 The Z-shaped pattern
Regarding this pattern, the user sequentially looks through the page according to the points shown (from one to four). The first three points get the most attention, while the fourth one is hardly looked through. This pattern is suitable for minimalist simple designs with several key elements (logo, CTA, etc.).
02 The Gutenberg pattern
This pattern is similar to the Z-shaped one. The user also looks through the page in a zigzag, but here the number of zigzags is higher. Such a perception model can be frequently found on resources with a block structure of the content.
03 The F-shaped pattern
Here you can see that the most interesting (red) zones make a letter F. Yellow color denotes a medium level of focus, and a blue one stands for the lowest level. This pattern is more convenient for websites with a lot of content, such as a news feed or anything similar.
As you can see, with any perception pattern, users get acquainted with the website starting with a header. That means that a page that fails to catch the eye of the users within a few seconds will have all the chances to lose them as customers. Since fierce competition is a given, you may not have a second chance to create a good impression.
Now it’s time to see what information and elements should each header include in order to improve the user’s perception of the page.
What should a header contain
Within a few seconds, the header should deliver key information to the visitors, help them navigate the platform, and, in general, make a delightful impression.
It should be concise, clear, creative, and convenient. It shouldn’t be overloaded with information, since today such factors as functionality and speed are more important for users. That’s why the following elements should be included in the header:
- Brand symbols
Name, logo, motto, corporate colors, etc. are essential to be displayed as they represent the company personality, and help the users to identify the website.
- Contact information
This element is important not only to website visitors but also to search engines, as they scan the company location information from the contacts provided in the header. Most frequently, contact information is represented in the form of a telephone number or email (and/or physical/legal address).
- Navigation menu
The main functionality of the header is the website navigation, thanks to which users can find everything they need.
- Shopping cart
When it comes to online stores, such an element as a shopping cart will make the process of purchasing smooth and convenient. Since it is located in the header, customers will have an opportunity to quickly check items in their carts.
- Search bar
This element makes it easier for users to find the information they need by simply entering keywords. It can have a form of a list of pages or it may be divided by topics.
This section is primarily made for existing users to get access to their accounts and manage them.
- Social media links
Today almost every company has its account on popular social media networks to promote and advertise its products and services. With the links provided in the header, businesses get a chance to get more followers (consequently, potential customers) and therefore increase sales.
Having an opportunity to switch languages is critical, especially when it comes to international operations as such an element as multilingualism will attract customers from all over the world.
This list of elements is not exhaustive or obligatory but advisable. Pretty much everything depends on the website specifics, aims, and other factors that you should take into account.
Having reviewed the elements to be included in the header, let’s move on to the practices for the website header design.
What are the main practices for the website header design
To create a truly attractive and functional header, you should be guided by the following practices:
- Use clear, readable fonts
The font matters a lot. You need to choose the font that will represent your company’s identity and uniqueness. But here you should not forget about one important aspect – readability. The fonts you use shouldn’t cause problems with it as if users fail to get the information straight away, they’ll probably leave the website. And we don’t want that to happen, right?
- Keep a consistent design
Everything in the header (from the logo to colors) should reflect the brand’s concept and personality. That means that the header should be consistent with the whole website design (e.g. not to be too bright or too big). It should be perceived as a part of the website, not a separate unit.
- Include a clear call to action
A call-to-action button in the header increases the chances that visitors will take any action, for instance, contact the sales department, order samples, or search for a local branch of the company. Such CTAs should be accompanied by a block of catchy (however, informative) text that will motivate users to click on them.
- Add illustration or animation
Fascinating illustrations or animations added to the header will not only bring some aesthetic pleasure to the website visitors but may also act as a tool for strengthening the company’s identity. Such elements may display the main concept of the website or its main activity. Therefore, they make the user experience memorable.
- Be concise and forward-looking
Users don’t want to and will not spend much time reading long texts. The text used in the headers should be informative yet concise and laconic. It should answer the questions of the users before they even have them and inspire them to take action – notice various CTAs, special offers, etc.
- Use warm colors
It’s said that compared to bright or cold colors, warm ones are much better for grabbing attention. You can use them for a standard header design or as a secret weapon to highlight the most important or interesting content.
- Emphasize the most significant elements
Depending on the website concept, you should decide what actions you expect from the user. For instance, if it’s a store you should make sure that the button “Cart” or its icon are included and that they are noticeable in the header.
- Choose a layout that showcases the logo
Being the first thing to be noticed when visiting the website, the header should always include the company’s logo. That’s why to look natural, the layout (style) of the header should be consistent with the logo.
- Use design elements that express the company’s personality
Echoing the website’s mood, you can use some design elements to underline or highlight it. The elements can be in the form of videos, different effects that will get users to the mood or attitude that will be the most suitable while interacting with the website.
We’ve already studied the essence of a header, its main elements, and practices, and now we get down to the types of headers that may be used to improve the website and its work.
There’s hardly a single way to succeed or just one marvelous recipe for cooking pasta. The same happens with headers. So, here are the types of headers after studying which you’ll have a chance to choose the one that suits you best.
The types of website headers
01 Fixed header
The main aim of this header is to increase the convenience of users while visiting the website. The navigation doesn’t disappear while scrolling pages, since the header is always in the foreground.
02 Hidden navigation (hamburger menu)
This type is represented by three horizontal lines that hide the menu. It looks like a hamburger and saves space on the page, thus creating a minimalistic and stylish version of the header.
03 Mobile header
Today online companies should have an adapted mobile version of their websites. That means that the website design in general along with the content should be adjusted to smaller sizes of gadgets. Here we should not forget about website headers which should fulfill their functions of attracting and engaging users (regardless of the gadgets used).
04 Shrinking header
This type is characterized by the feature that when the user scrolls down, the header along with its content shrinks. It may be useful when you need more space on the screen to display the rest of the content.
05 Headers with a message
Such headers serve several purposes. The first one is about making the website unique (there are no websites that place the same texts there). The second aim is to inspire users as you can add a motivational quotation. The third goal is to simply welcome visitors thus making a good impression on them.
06 CTA-focused header
When users first visit the website, they begin to look for some clues on what to do next and where to find the information of their interest. Here, placing CTA buttons (like “Buy now”, “Try for free”, or “Subscribe”) will be of much help, thus guiding and directing user actions.
07 Content-focused header
This type of header is more suitable for websites that are primarily focused on information provision (blogs, newspapers, and magazines). In the case of applying such a header, websites offer their users an opportunity to go to the information block they are interested in.
08 Video background-focused header
Today images and illustrations are not the only options that may be used in the design. The opportunity of adding some videos to the header is popular as well. Websites may use videos to display the main concept of the company, show its goals and values, and so on. And the main advantage of this type is that especially nowadays, there are a lot of people who’d prefer watching to reading.
09 Header focused on personal branding
This type of header is mainly used in personal blogs or websites of celebrities. Such websites are marked by an image of this particular person on the main page and a pretty minimalistic design. The header here may contain such sections as “Photos”, “Videos”, “Biography”, i.e. the blocks of information users will be probably fascinated by.
Having discovered types of headers, you can easily pick the one that will fit the website concept and meet your expectations.
However, it’s not the end of our journey and now we’re heading towards the examples of headers to look at this issue from a practical perspective.
Top 10 header examples
Here are our top 10 picks for your website header ideas. Enjoy!
The header of Amazon provides both existing and potential customers with everything they need. Among the useful features, you can find the company’s logo, the opportunity to change languages, a search bar where the products of interest may be found, the Cart icon, and so on. The pop-up CTA button “Sign in” immediately catches the attention and encourages visitors to take this action. Moreover, this header has an easy-readable font, and it’s fully consistent with the overall design.
The HBO header is made in a minimalistic way and is focused on the content provided. It’s somehow divided into two parts. In the left part, you can see the logo with the names of the sections (genres) which makes the process of navigation quite easy and convenient. In the right part, users are provided with the buttons calling to sign in or to purchase an extended version. By the way, the CTA button “Get HBO Max” differs from the rest by the color, making it prominent and noticeable.
The website design concept of the Rolex is an amazing brand reflection since nothing extra can be found here. The header of this website doesn’t differ from the main page at all and does it so naturally and thus discreetly. Even if there are still people who have never heard of this brand (which is unlikely), the video provided there immediately tells the website’s purpose and concept. To save space for the product displaying, the hamburger menu applied is probably the best solution here.
04 Gordon Ramsay
When entering the Gordon Ramsay website, everyone understands its purpose right away. In the header with hidden navigation, you can find various categories about this famous chef (depending on the information visitors are interested in), from his biography and a block of restaurants of his own (after clicking on which you immediately appear on the page where you can book the table) to links to various social networks. Also, the banner with the news about opening the new place accompanied by the CTA button “Book now”, is a great marketing tool.
When users first come to the Apple website, they instantly see the latest product image with its slogan “Blast past fast” and brief terms of purchasing it. Furthermore, users are offered two CTAs – to learn more about the item or to buy it (perhaps, because after getting more information no one can resist purchasing). The fixed header is made in a consistent minimalistic manner. It provides customers with the names of the product categories, thus simplifying the searching process and navigation.
The website of Huggies is made in the most adorable way possible. It welcomes both new parents and babies born, and in its fixed header, the website offers various blocks that may be of help (not only the store of diapers, what an amazing surprise!). And that makes customers feel that the company really cares and wants to help. After pressing the CTA button “We got you, baby”, users appear on the page with just amazing videos that both entertain and cause an extremely warm feeling. They definitely know how to steal hearts.
07 The New York Times
One of the brightest examples of the content-focused header can be observed on the New York Times website. In the middle of the header, there’s the newspaper’s name represented in its unique manner. The shrinking header provides readers with the topics of news through which they may easily navigate. The CTAs for subscribing and logging in are also placed here and are set up in another color to make them noticeable.
A huge header applied in the Netflix website plays several roles at one time. An image displays the main purpose of the website. A concise text in advantage answers main questions that the visitor may have: What does the website provide? – Unlimited movies, TV shows, and more. Where can I watch them? – Anywhere. When can I cancel the subscription? – Anytime. The only thing that is left – to enter the email address and press the “Get Started” button.
The design of the world-known brand Pandora supports its main concept of elegance and simplicity. A fixed header with hidden navigation includes product categories that, in their turn, are divided into subcategories, which is pretty useful when customers know precisely what they are looking for. Moreover, at the top of the header, some crucial information (about shipping, returns, etc.) can be found.
10 Granny’s Secret
An outstandingly designed website, Granny’s Secret, provides users with an interactive header where they can choose where to go next – to the block of the information with their history, their store, or the section with secret recipes.
The header also offers a hamburger menu where users can find contact information, languages, links to social networks, and so on.
As you can see, every company is unique as well as its website. The website design should reflect your brand’s identity along with its goals and concepts. Therefore, it’s up to you to decide which type of header (its style and size) is the best one for you.
On a final note
The process of creating websites is tough, however, crucial, especially when we talk about website design. You may face difficulties at every step of this long journey, and here we are, offering various tips and working out different issues that may be challenging.
In this article, we did our best to explain the essence of such a phenomenon as a header, its importance, and how to make it in the most efficient way possible. We also provided the best website header examples to get inspired and take some action to improve your own header.
We hope that the scope of the information provided was enough for you. However, in case of any questions or queries, our team of professionals is at your full disposal. Just contact us to check it.