Everything about the header (site header): purpose, design and engineering

As you know, there is no second chance to make a first impression. In digital design, this truth is reinforced by high competition and the wide variety of solutions available. Moreover, it is quite obvious that when creating a first impression, some parts of a web page are more important than others, for example, a header for a site (site header). Today we will consider all the nuances that relate to this term:

This note is a translation of an article from uxplanet, many thanks to the authors for it.

What is a website header?

In a classic layout, the header block is at the very top. It is his people who see first of all when they get to your project. In a sense, an invitation, it contains basic information about the product and the niche with which the site is associated – it is important that users can understand what is at stake in a few seconds.

The website header design has a lot of room for creative solutions, but it should be catchy, concise and useful. This is where the key navigation elements are located.

Comics Shop Website

The screenshot shows the home page of an online comic store: at the top in the header of the site you will find the logo, the main menu, as well as the basket and search icons.

What is included in the site header?

This block can include various objects:

• brand features: logo, name, brand name, slogan, mascot, photo of the company or its leader, etc .;
• information about the presented product or service;
• links to important content elements (menus and navigation);
• links to social media profiles;
• contacts (phone, email, etc.);
• switching languages ​​with a multilingual interface;
• search block;
• subscription field;
• links to the product: download the demo version, address in the AppStore, etc.

Not all of the above items must be used. Make sure that your website header design is not overloaded with unnecessary information that prevents visitors from focusing on the main aspects.

Below are examples of the placement of such elements:

Bjorn Website (interior design studio project)

At the top of the layout is a fixed (pinned) site header on the page, which allows it to remain constantly visible as you scroll. On the left it contains the brand logo, and on the right – the links “Products”, “Studio”, “News” + the icon “Shop”. A central blank area visually separates the two blocks.

Event Agency Website

Here, the site header takes a different approach: the logo and brand are in the center, while the left and right sides have two links each, allowing users to quickly jump to the desired sections.

Why is a website header important?

There are several reasons for this. First, when people visit this or that web resource (especially for the first time), they do not examine the entire page carefully and in detail, but quickly scan it with a glance, in search of something that will attract attention and convince to stay. Various experiments have shown the presence of typical patterns of user eye movement. Three main options are mentioned:

• the Gutenberg model;
• Z-shaped;
• F-shaped.

Gutenberg model

The first scheme is typical for pages with a uniform presentation of information and weak visual hierarchy. It has four active zones, two of which are associated with the site header area.

Z-model

Another eye movement pattern is Z-shaped and is typical of pages with visual separation of blocks of content. Here, the reader s eyes go from the top left corner to the same right, looking at the given header first.

F-model

Quite often, users demonstrate the following approach:

• At first, the gaze moves horizontally, as a rule, along the upper part – the first strip of the F-shaped model.
• Then the visitor s gaze drops down, and the page is “scanned” horizontally again, but it covers a shorter area than in the first movement. This is an additional element of the F-circuit.
• Finally, the gaze moves to the left side of the screen, which is viewed vertically. Sometimes this process is rather slow and systematic, which looks like a solid bar on the heat map of eye movement. In other cases, the gaze moves faster. This is the final element that creates the stem of the F.

All three show that the preview starts in the upper horizontal area. Thus, the site header on the pages of a web project simultaneously plays two roles: the user is given the opportunity to quickly find key information, and the developer has a chance to correctly present it. This is why the header block is so important for UI / UX designers, content specialists and product promoters.

As stated in the article by Bogdan Sandu, “the site must attract the eye at once, otherwise it will become just a big failure.”

Despite all the important remarks from the article, it should be noted that not every web resource needs this element. In many creative designs, the site header and its functions are linked to other areas of the layout.

Website header design

Readability and visual hierarchy

This point plays an important role, so you need a careful approach to choosing the font for the header and the color of its background. The user should notice and perceive all information as quickly and effortlessly as possible.

Daily Bugle magazine

In the concept of the current news template, you will see a menu in the header of the site with two active links to publication categories, a link to the live broadcast and a search field. The logo is centered, as in one of the examples above.

The big landscape

It uses the popular 2017 web design trend with a broken abstract grid, and the header for the site successfully complements it: the left side is visually longer, consists of a logo and three links; the right one is shorter, with search and subscription elements.

It should be remembered that in the process of moving the user around the page, the site header can behave differently:

• some developers use a sticky (fixed) block that is always visible and active;
• others just hide it;
• there is also an option when the header does not disappear completely, but shrinks in a certain way when scrolling the page, leaving only basic important information available.

Hamburger menu

A popular design solution that hides basic links to sections behind a corresponding button. In the blog, we have already discussed this feature in the article on the hamburger menu and its alternatives.

Today this button is often a full-fledged element in the header of a site, and many users are already aware that the main menu is hidden behind it. This approach frees up space by making the layout minimalist and lightweight, while also saving more space for other objects. In addition, it allows you to create a harmonious interface for different types of devices.

Shown here is a variant of a “compact” menu in the header of a site that contains many links and maintains a simple overall template style. In addition to it, there are two areas in the header: the brand and brief information about the project are highlighted in red on the left; the right area contains social media icons and a search icon. The center section remains free, adding lightness and balance to the entire layout.

There is a lot of empty space in the structure of the page on the left, and the logo and company name are in the upper corner, where the eye movement begins. Further in the header design is the hamburger menu icon and links to the main sections. This option allows you to hide a lot of links and organize a good visual hierarchy.

Although this solution is still highly controversial, it is still used as the navigation header of the site. Opponents point out that this block can confuse inexperienced Internet beginners. That is why it is advisable to make a decision on the introduction of “hamburger” buttons only after researching the target audience.

Fixed (sticky) site header

The current usability and usability approach is useful for projects with a lot of content on web pages. It offers users navigation access anywhere on the screen. If interested, see codes with examples of implementations.

Here the layout has a fixed block at the very top, not hiding when scrolling. It contains a title, a magnifying glass icon for searching, and a hamburger button.

Here s another example of getting creative with an effective header design. At the first login, only its minimalistic implementation with icons of social networks and search is visible (no menu, etc.). But in the process of scrolling, a fixed bar with a traditional set of elements is formed.

Dual menu

Navigation in the site header can consist of two different menus. In modern WordPress templates, this is a standard move.

On the gif below you will see a “sticky” header consisting of two “lines”:

• At the top are links to social networks, search, shopping cart and menu button; in the center is the logo.
• The second line focuses on the main sections of the project: product catalog, location of points of sale, news and offers, services and contacts.

The header hierarchy makes all elements clear and easy to read, providing a reliable user experience.

Total

The site header is a strategically important area in layout design. Of course, each specific case requires its own approach and (possibly) user research, but the basic nuances discussed above should always be taken into account.

If you have anything to add on an article from personal work experience, write below – it s interesting to read. Which header implementation option did you like best?