Website header design (header)
As you know, there is no second chance to make a first impression. In the field of digital design, this truth is supported by high competition and a wide variety of available solutions. Moreover, it is quite obvious that when creating the first impression, some parts of the web page are more important than the rest, for example, the header for the site (site header). Today we consider all the nuances that relate to this term:
What it is and what elements it includes.
Why is a header important to you?
Design and implementation options.
The note is a translation of the article from uxplanet, many thanks to the authors for it.
What is a site header?
In the classic layout, the header block is at the very top. It is his people who see him first of all when they get to your project. Being, in a sense, an invitation, it contains basic information about the product and the niche the site is associated with – it is important that users can understand what is being discussed within a few seconds.
The heading design of the site has a wide field for creative solutions, but at the same time it should be catchy, concise and useful. Key navigation elements are located here.
Comics Shop Website
Comics Shop Website
The screenshot shows the home page of the comics online store: on 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 header of the site?
This block may 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 network profiles;
contacts (phone, email, etc.);
switching languages with a multilingual interface;
product links: downloading the demo version, address in the AppStore, etc.
Not all of these items must be used. Make sure that the header design for the site is not overloaded with unnecessary information that prevents visitors from focusing on the main aspects.
The following are examples of the placement of such elements:
Bjorn Website (interior design studio project)
At the top of the layout is a fixed (attached) header of the site on the page, which allows it to remain constantly visible during scrolling. On the left, it contains the brand logo, and on the right, the links “Products”, “Studio”, “News” + the “Shop” icon. A central blank area visually separates the two blocks.
Event Agency Website
Event Agency Website
Here the site header uses a different approach: the logo and brand are in the center, and the left and right sides have two links each, allowing users to quickly jump to the desired sections.
Why is header important for a site?
There are several reasons for this. Firstly, when people visit one or another web resource (especially for the first time), they do not examine the entire page thoroughly and in detail, but quickly glance over it in search of something that will attract attention and convince you to linger. Various experiments have shown the presence of typical patterns of eye movement of users. Three main options are mentioned:
The first scheme is typical for pages with a uniform presentation of information and a weak visual hierarchy. Four active zones are highlighted in it, two of which are associated with the site header area.
Another pattern of eye movement is Z-shaped and typical of pages with visual separation of content blocks. Here, the reader’s eyes go from the upper left corner to the same right one, looking at this header first.
Quite often, users demonstrate the following approach:
At first, the gaze moves horizontally, usually along the upper part – the first strip of the F-shaped model.
Then the visitor’s gaze drops below and the page is again “scanned” horizontally, but a shorter area is covered 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 continuous strip on the heat map of the eye movement. In other cases, the gaze moves faster. This is the last element to create the stem of the letter F.
All three options show that viewing begins in the upper horizontal area. Thus, the site header on the pages of the web project plays two roles simultaneously: the user is given the opportunity to quickly find key information, and the developer has the chance to correctly present it. That is why the header block is so important for UI / UX designers, content specialists and product promoters.
As stated in an article by Bogdan Sandu, “the site should attract attention immediately, otherwise it will become just a big failure.”
Despite all the important comments from the article, it should be noted that not every web resource needs this element.