Best practices for website header design

Web development

Website Header Design in 2021

There is no second chance to impress in web design. The first thing the user sees on the site is the header.

What is a header?

A header is a web page element that sits above the content area. The header contains links to essential categories, sections, search bar, logo, contacts.It helps the user navigate the site.

The header isn’t only a visual element of the site and a tool that helps increase conversions on your site.

In this article, we'll tell you all about header design: what should be in it, what is best not to add, and how you can create one.

Why is the header so important?

Commercial sites and other web resources aim to attract the attention of visitors. Arouse interest in the content part and induce a person to take a targeted action such as a purchase, order, or a call.

There is a famous AIDA formula for building the structure of websites and landing pages: (A) attention - (I) interest - (D) desire - (A) action.

Heder is the first stage that is responsible for capturing the attention of the visitors. Let's take a look at how a new user sees the site. Numerous studies have developed three models for perceiving content on a page:

Gutenberg diagram

According to the Gutenberg diagram, the visitor reads the information in a zigzag pattern. He starts his exploration of the web page from the top left corner of the site header. Then he moves his gaze from left to right to the right point of the page. From the right point, the moment's look descends diagonally to the bottom point and ends their acquaintance by viewing the site footer from left to right. It turns out a Z-shape.

Based on this information, the user's first impressions are formed when viewing the site header. If the story does not find a visitor’s response, he will close the page in 90%.

Z-pattern

A model called the Z-pattern is similar to the Gutenberg diagram. The visitor views the page in a zigzag pattern. But there are more than one such zigzags. Such a perception model is often found on resources with a block structure of the content part.

F-pattern

The F-pattern is another model for learning about the information on a page. The user reads the content from left to right, starting from the header of the site. Then the gaze moves vertically down one notch. Then he reads the information horizontally. Accordingly, if the first 2 blocks did not interest the user, he will not read further.

With any content consumption model, the user begins acquaintance with the site from the header. Your task is to catch the visitor's eye and show the preliminary information in 3-4 seconds.

It is why the site header is so important. However, you need to understand that the header on the main page and the internal pages should be different. For example, on the main page, use a header with the full set of elements. Use the abbreviated version on the inner pages. It is enough to display the logo, menu, phone.

What can a header include?

Depending on the size and specifics of the website, the header may include the following elements:

Basic header elements

Company`s logo

It is an essential element of brand identity. The logo must be visible. The optimal place is the left corner. The logo should not occupy more than 20-25% of the header area. Typically, the logo is a link to the home page.

Company information

The visitor has certain expectations when going to the site. He must understand that he has got to the right resource. The data is located next to the logo. This field is suitable for a unique selling proposition. Large online stores use the "Catalog" button. So the user understands that he can place an order on the site.

Phone number

It is placed on the right or center. It is the location for the main phone number of the sales department. For other numbers, there is a Contacts page. For online stores, this should be the toll-free hotline number.

In the mobile version, you need to use a dialing link, not just a picture with numbers.

Cart (personal account, wish list)

These elements must be in the header of the online store. The main thing is that they organically fit into the design and do not overload the cap.

Additional header elements

Opening hours

It is the information you need to know when to expect feedback from a consultant or salesperson. If you have a 24/7 schedule, it is worth reporting in the header because this is a serious competitive advantage.

Company address

Useful information if your clients mostly come to your office or warehouse. If you have multiple addresses, add a "How to find us" or "Our addresses" link, which leads to the contacts and maps page.

Back call

The callback order button should be located next to the phone number. The need for this element depends on the habits of the target audience of your online store.

Search bar

The search bar provides easy navigation for the user. This element is a must-have for online stores. If you don't have a search bar in 2021, you probably lose most of your buyers.

Slogans and quotes

It is permissible to add a short phrase related to the company's activities to the header. If the section is not useful for visitors, you don't need to place it in the title.

You don't have to use all elements in your header. Some of them aren’t recommended in modern web design.

For example, links to social networks in the header serve as a distraction and take visitors away from the site. Email in the header is a target for spam mailings.

The main rule of the header is not to overload with information. A large number of elements scatters the attention of users.

Before designing your website header, check with your marketers. It is a serious decision!

Requirements for website header design

There are several basic principles for building a header to grab the attention of users in 2021.

  1. Contacts and identity elements (logo, slogan, phone number) should be in a conspicuous place. Do not use images to display the name of the contact information.

Contacts must be clickable. A click to Contacts should make a call or open an email client in the mobile version.

It is not only user friendly, but also facilitates indexing by search robots. First of all, search engines read the site’s regional binding from the contacts in the header.

  1. The header shouldn't contain a lot of graphic elements and animations. The page should load in 3 seconds - the delay annoys visitors. It is better to use HTML and CSS features to optimize page weight.

  2. Don't use the same H1 headings on all pages of your site. So you make it difficult for search engines to raise the resource in the SERP. Create unique meta tags relevant to the content of the page.

  3. The menu should be in the form of text. Any options with flash animation and graphics should be discarded. You should be able to make changes yourself without the help of developers and designers.

  4. The header plays an important role but is the main content on the site. Therefore, for news or information portals, an acceptable header height is 100-200 pixels. Corporate resources, Landing Page and business card sites can have a header height of 300-500 pixels.

  5. Use corporate colors for your header design. Remember that the B2B segment should choose muted tones: gray-blue, gray, white, and other colors.

For a B2C niche header, use vibrant colors and themed images.

  1. All header elements must be highly readable. The user should be able to view essential information in a few seconds.

The font size of the body text should be 16px. For background text, field captions, and images, use a couple of smaller sizes: 13px or 14px.

Best practices for header web design

Personal brand header

Whether you are building a website for a personal brand, influencer, or celebrity, then users should immediately recognize the identity. Personality is a brand, so the header should reflect that.

The easiest way to build trust with your visitors is to post a happy, smiling photograph of the person in your site’s header.

This technique helps to position the user towards the person. Create a sense of old acquaintances.

When developing a website header for branding a person, it is advisable to use photos, a logo, a name.

Corporate site header

A corporate website will not make a splash. Therefore, the best strategy is to minimize the headline to bring the content area higher. Or don't use a header at all because (let's be honest) your logo is not something that should convince a potential client, buyer, partner.

When designing a web page for business branding, consider keeping your header minimal and straightforward. Include only your logo and contacts without cluttering up space with unnecessary, pretentious taglines.

Ensure that the header is 100% fulfilling its functions and instantly informs the visitor about the purpose of the corporate site.

Product website header

For branding products, events, programs, and services think about a logo that conveys the key message. A concise statement of benefits helps visitors instantly know if they are in the right place.

When developing a header for selling tickets for an event (concert, party), try to convey its atmosphere emotionally.

Consider including photos, a product logo, a short description, and a concise, informative subheading.

 

You can leave the request on the site and Sannacode designers will help you.

  • Web development

    How to create a website like Netflix?

  • Our approach

    How to Keep your Customers' Data Secure?