Get rid of guesswork in design
Creativity breathes life into successful sites. However, creative ideas and solutions often resemble guessing - a dangerous business, I tell you. So what can designers do to convince the customer,…

Continue reading →

Web design where to start - how to become a web designer yourself and start a successful career
Want to learn how to become a web designer yourself? Or maybe you already have several of your designs, and you would like to bring your skills to a new…

Continue reading →

In defense of "Eye Candy"
In the society of designers, it is often possible to hear that true professionals build their work on the strict conformity of design to the brand's corporate style or simply…

Continue reading →

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

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 a first impression, some parts of a web page are more important than others, for example, the header for a site (site header). Today we consider all the nuances that relate to this term:

What is it and what elements include.
Why is the header important to you?
Design and implementation options.
The note is a translation of an article with uxplanet, many thanks to the authors for it.

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

The design of the site has a wide field for creative solutions, but at the same time it should be catchy, concise and useful. Here are the key elements of navigation.

The screenshot shows the homepage of the online comic book store: on top of the website header you will find the logo, main menu, as well as the basket and search icons.

This block may include various objects:

brand features: logo, name, brand name, slogan, talisman, photo of the company or its manager, etc .;
information about the product or service being represented;
links to important content items (menus and navigation);
links to social network profiles;
contacts (telephone, e-mail, etc.);
language switching with multilingual interface;
search block;
subscription field;
product links: download demo version, address in AppStore, etc.
Not necessarily all of the above points should be used. Make sure that the header design for the site is not overloaded with unnecessary information, which prevents visitors from focusing on the main aspects.

The following are examples of the placement of such elements:

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 the scrolling process. On the left, it contains the brand logo, and on the right – the links “Products”, “Studio”, “News” + the “Store” icon. The central empty area visually separates these two blocks.

Here, the site header uses a different approach: the logo and the brand are in the center, and the left and right sides each have two links that allow users to quickly navigate to the sections they need.

This is due to several reasons. First, when people visit a particular web resource (especially for the first time), they do not look at the whole page carefully and in detail, but quickly run over it with their eyes, looking for something that will attract attention and convince them to stay. 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. It has four active zones, two of which are associated with the site header area.

Another eye movement pattern is Z-shaped and typical for pages with a visual separation of blocks of content. Here, the reader’s eyes go from the upper left to the same right, looking through this header in the first place.

Quite often, users demonstrate the following approach:

At first, the gaze moves horizontally, as a rule, on the upper part – the first strip of the F-shaped model.
Then the visitor’s gaze falls 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 scheme.
Finally, the look 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 line on the thermal map of eye movement. In other cases, the gaze moves faster. This is the last element that creates the stem of the letter F.
All three options show that viewing begins in the upper horizontal area. Thus, the site header on the web project pages plays two roles simultaneously: the user is given the opportunity to quickly find key information, and the developer has a 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 the article by Bogdan Sandu, “the site should attract the eye immediately, otherwise it will be just a big failure.”

The ideal form of authorization - how to do it is not necessary (errors and tips)
Recently, we posted a number of useful tips on creating effective registration forms on the site, and today we want to talk about the authorization / login unit. Recently, a…


Design in the browser for beginners
Read it! It will be quite enough to begin. Make your first, most likely clumsy site. Go back and read again. Correct errors. Repeat. No, you probably do not want…


10 trends and trends logos
Last year's post about trends in logos 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…


How to make a footer site footer: design options, why you need it, tips
Developers often overlook the fact that the footer for the site (translated from English footer / basement) is one of its basic elements. It can give more complete information about…