The principle of the golden section in the design of sites
A key indicator of the quality of web design is how natural and easy it is perceived by users. When creating a visual site design, it is important to illustrate…

Continue reading →

What can you learn in Japanese website designs?
Back in 2014, we published an interesting selection of designs of Japanese anime sites. Surely you can guess that the works there are presented quite specific and original. They are…

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 →

4 Tips for creating one-page websites
Single-page websites are becoming popular and fashionable now - there is no doubt about it, although they are not suitable for every subject or organization. However, if done correctly, your…

...

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.

WHAT IS A HEDER SITE?
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.

WHAT DOES YOU ENTER THE SITE?
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.);

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.

MENU “HAMBURGER”
Popular design solution that hides the basic links to sections for the corresponding button. In the blog, we have already considered this chip in the article about the hamburger menu and its alternatives.

This button today is often a full-fledged element in the site header, and many users already know that the main menu is hidden behind it. This approach frees up space, making the layout minimalist and light, as well as saving more space to other objects. In addition, it allows you to create a harmonious interface for various types of devices.

Here is a variant of the “compact” menu in the header of the site, containing many links and supporting a simple overall style of the template. Besides it, there are two areas in the header: on the left, the brand and brief information about the project are highlighted in red; in the right zone there are social network icons and a search icon. The central part remains free, adding lightness and balance to the entire layout.

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

And although this decision still raises active debate, it is still used as site header navigation. His opponents point out that this block may confuse inexperienced Internet users of newbies. That is why it is desirable to make a decision on the implementation of the “hamburger” button only after researching the target audience.

Improving the registration form on the site (4 useful tips)
On the Internet, the registration procedure occurs to us as often as the authorization form on the sites. You have to do the following: in all kinds of web services…

...

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…

...

Typography for web
There are many books and articles on typography, but only some of them reveal the choice and combination of fonts. Due to the emerging opportunities and prospects for free use…

...