Best Practices for Website Header Design - shustermuder1970

Everyone knows: in that respect is not a second chance to prepar the first imprint. In the sphere of digital products, this eternal truth works in terms of high competition and astounding diversity. None doubt, approximately zones of the web page or mobile screen are particularly important and effective in that look. Today we are going to talk over same of them in deeper focus: the heading of the website.

In the issue of UI/UX glossary devoted to the web project terms, we have already provided a brief overview of what is a header. Nowadays let's look a bit closer at the topic and discuss what are the functions of a header and recommendations for its project. In summation, we will appearance a bunch of web design concepts applying different approaches to header design.

What is a header?

In the web page layout, a header is the upper (top) part of the webpage. It is definitely a strategic part of the page as the area which the great unwashe see before scrolling the page in the firstly seconds of institution to the website. Being somehow a sign of invitation, the header should allow the core information about the digital product so that users could scan information technology in split seconds. From a design position, a header is also the area making the broad field for constructive design solutions which should follow attention-getting, succinct, and useful. Headers are often referred to atomic number 3 «Site Menus» and positioned as a key element of navigation in the website layout.

The presented concept shows the home page for the online bookshop selling comics. The top horizontal sphere aka header presents the logo inscription showing the name of the website and the core seafaring around: golf links to the catalog of items, fresh and special offers, blog, action figures, an icon of the shopping cart typical e-commerce websites and the icon of search.

What can a header include?

Headers can let in a variety of meaningful layout elements, for example:

• first elements of brand identity: logo, brand name lettering, motto or company statement, corporate mascot, photograph presenting the company or its leader, corporate colors, etc.
• copy block place setting the theme of the product operating room service presented
• links to basic categories of website content
• links to the most important mixer networks
• basic impinging information (number, electronic mail etc.)
• switcher of the languages in case of multi-articulator interface
• search field
• subscription field
• golf links to interaction with the product such A trial version, downloading from the AppStore etc.

It doesn't mean that all the mentioned elements should be included in one WWW page lintel: in this case, the risk is high that the cope section would equal overloaded with selective information. The more objects draw i the user's attention, the harder it is to center the vital ones. Happening the basis of invention tasks, designers, sometimes together with selling specialists, decide on the strategically important options and pick them ahead from the list or add the others.

Let's have a look at a few examples to see which of the mentioned elements designers placed in the header for detail websites.

This is the site of an interior decoration studio. The upper part of the pageboy presents the sticky cope which girdle in the zone of ocular perception all the time in the process of scrolling. It is divided into ii blocks: the left part features the trade name logo while the right part presents the interactive area with links to several entropy blocks look-alike «Product», «Studio» and «Press» and call-to-action button «Shop» marked out with a shape. The exchange part of the header uses negative space for the optic interval of these two blocks.

Here is another sample of the web page with a bit different near to the header design. This time the composition is built around the marrow featuring the logotype and brand name. Left and right sides are balanced around it with two golf links each allowing users to scan quickly and move to the information blocks they are interested in.

Why is the header important?

There are several issues why the coping is a vital element of many websites.

The first thing to consider is oculus-scanning models which show how users interact with a webpage in the first seconds. This significant domain of user research is massively supported past Nielsen Norman Group and provides designers and useableness specialists with a better understanding of substance abuser behavior and interactions.

In abbreviated, when people visit the website, especially the first time, they do not explore everything on the page with kid gloves and in detail: they scan it to find a hook that would catch their attention and convert them to expend about time on the web site. Different experiments collecting data along user eye-tracking have shown that there are some typical models along which visitors usually scan the website. In the clause about 3 design layouts, the author Steven Bradley mentions the following common models: Gutenberg Plot, Z-Pattern, And F-Pattern. Let's retard what are the schemes provided for them in the inquiry.

Z-Pattern is quite typical for web pages with the consistent presentation of information and wan visible hierarchy. American Samoa can be seen from the scheme we found in Steven Bradley's research, IT marks out four open zones — and two of them move back across the typical header area.

Zig-zag version is exemplary for pages with visually divided content blocks. Again, the reader's eyes cristal left to right start from the upper left over corner and soul-stirring across all the page to the upper right corner scanning the information in that first zone of fundamental interaction.

One more exemplar is the F-design conferred in the explorations away Nielsen Norman Grouping and exhibit that users much demonstrate the followers flow of fundamental interaction:

• Users first learn in a swimming movement, usually crossways the high part of the self-complacent area. This initial element forms the F's top bar.
• Next, users move down the page a bit so read across in a second base horizontal movement that typically covers a shorter area than the previous movement. This additional factor forms the F's lower bar.
• Finally, users scan the content's left go with in a erect movement. Sometimes this is a fairly obtuse and systematic scan that appears as a solid banding on an eye-tracking heatmap. Other times users act up quicker, creating a spottier heatmap. This last element forms the F's root word.

All the mentioned models show that whichever of them a detail user follows, the scanning process leave start in the meridian horizontal area of the webpage. Using it for screening the core entropy and branding is a strategy supporting some sides: readers run down the of import data promptly while the web site gets the chance to retain them if it's presented properly. That is the basic reason why head innovation is an essential offspring for UI/UX designers too as smug and promotion specialists.

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an world-shattering point that should be unbroken in mind: «People gauge the quality of a website in impartial a few seconds and a arcsecond impression is something absent on the Internet. In conclusion, a internet site essential be eye-catching else, it would be nothing more than than a medium-large failure».

Another thing to consider is that the header tin become a great help in presenting the essential information to the user quickly and providing a positive user experience via clear navigation. However, that doesn't ungenerous that all website needs a header. There are many creative solutions providing designs applying typical head functionality in other zones of the layout. Every guinea pig of website design needs analysis and research of the butt audience for the product operating room service.

Design practices

Readability and visual pecking order

The tasty of typefaces for headers and the background signal color should get low highly rigorous research and testing as the aspect of legibility in the heading plays a live role. The exploiter has to be able to scan and comprehend this basic information Eastern Samoa fast as possible without any sort out of additional effort. Otherwise, you peril providing a not-easy interface.

The design concept for a news web site presented above features the header including the form of address of the web site as a central element of the composition, two active links to canonic categories of publications, a connexion to live mode, and search field of view marked with a magnifier ikon.

Here is another internet site whose layout is built on the broken grid, so the header corresponds to this approach path. The near part of the header is visually longer and consists of four elements: the logo and the links to three data blocks, while the right part with is shorter and includes only cardinal layout elements: look for and call-to-action button market out with the shape and slanted for the in high spirits level of contrast.

I more thing to remember is that there are different ways for a header to transform in the process of scrolling the page bolt down. About websites utilization a fixed heading, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites that do not fully hide the header only shrink information technology in size in the physical process of scrolling, which means that they hide secondary information and leave single the core elements of the layout active and available during all the process of interaction.

Hamburger menu

Another design solution that is quite an touristed in the perspective of header functionality is hiding basic golf links of information categories behind the hamburger button. It is known as so as its form consisting of horizontal lines looks look-alike a typical pelf-meat-simoleons hamburger.

This clitoris is usually placed in the header and nowadays it is a typical component of fundamental interaction. Most users who visit and use websites on the regular basis screw that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus liberal the space qualification the port more minimalistic and full of air as well as salvage the place for other important layout elements. This design technique also provides additive benefits for responsive and adaptive invention hiding seafaring elements and making the user interface look harmonic on distinguishable devices.

The presented vane design concept shows the version of the hamburger menu. As the menu of the internet site contains many positions, the designer uses this technique by placing the ground beef push in the area of first interaction — top left box. It allows creating the head support the general minimalistic way of the website. The horizontal area of the header is pronged into two zones: the left zona presents stigmatization and a short introduction of the website colored in red and safekeeping visual consistency with the sensory system functioning of the headline and call-to-action element of the page; the right zone features icons of social networks and search icon. The central part of the header is left empty which adds some air and balance to its design and works As a negative place separating two different functional blocks.

This design concept presents the web site with an seminal structure of the page, departure the wide floodlighted margin in the socialistic part of the page, with the brand name and logo in the top left part which is the first point of scanning. The strange theatrical role presents an interactive geographical zone and has its own header makeup: hamburger button to the left and four inwardness links of transition to the right. As this lesson of fundamental interaction shows, the hamburger menu allows the designer to get up numerous paper blocks of information and provide an operative optical hierarchy.

Although hamburger menus still belong to highly disputable issues of modern web and app design, they are still widely used as cope elements. The arguments against the hamburger menu are based on the fact that this design factor can be disorienting for people who do not utilisation websites regularly and behind fix misled by the sign which features a high level of abstraction. Thusly the determination just about applying the hamburger button should be made subsequently user research and definition of the target audience's abilities and needs.

Fixed (Sticky) header

Steamy headers acquaint another trend able to hike up usability is practical in effect. Actually, IT enables to bring home the bacon users with navigation area available at any point of interaction, which can represent accommodating in terms of content-heavy pages with extended scrolling.

The presented blueprint construct of a website has a geostationary coping that doesn't cover piece the Page is scrolled. However, it follows minimalism principles featuring brand public figure lettering as a center of the composition, magnifier icon marker search functionality, and hamburger button concealing golf links to navigation areas.

Here is one more design construct featuring a fictive coming to the head innovation. The initial view of the home page includes the extremely minimalistic header: it shows only interpersonal icons and the research. However, scrolling down users find the sticky header with quite a traditional set of seafaring items: the first factor to see along the big top left part is the hamburger button concealing the extended menu, and so the stigmatisation sign followed away the links to air info blocks. The composition is finished with the search arranged in the exceed-right divide of the page in wholly the process of interaction with the page and supporting the opinion of consistency.

Double fare

Double menu in the header can present two layers of navigation. We have shown the example of such legerdemain in one of the modern case studies for a bakery website.

Atomic number 3 you can see, the website also uses a sticky header which consists of two levels of navigation. The upper computer menu shows the links to ethnic networks, the logo, search, shopping cart, and hamburger button hiding the extended menu. The second crease of piloting gives an instant connection to the nub interaction areas: products catalogue, locations for the power point-of-sales, news and special offers, information about the service, and contact lens section. Ocular and typographic pecking order makes all the elements clear and easy scanned providing self-colored ground for a positive user experience.

The bottom run along is kidney-shaped here: the lintel of whatsoever website is the strategically vital zone of interaction for some website. Each primary case requires its possess approach which will be informative and usable for the specific poin hearing. User research can provide a good basis for the design solutions which can follow quite long-standing forms of coping organization or require a altogether new view.

Recommended reading

Here is a bunch of links to the articles and design collections that could ply further interesting explorations of the topic:

3 Plan Layouts: Gutenberg Diagram, Z-Traffic pattern, And F-Normal
F-Shaped Pattern For Reading WWW Satisfied
Sticky Header Usableness: Making Menus Set forth of a Great User Experience
30 Interesting Examples Of Headers In WWW Design
Headerlove: curated collection of headers design

This article was originally publicised at tubikstudio.com

---

Near the Author: Marina Yalanska is a mental object managing director and writer for Tubik Studio apartment, tech/purpose researcher

Source: https://blog.icons8.com/articles/best-practices-for-website-header-design/

Posted by: shustermuder1970.blogspot.com

Share this post