the lintel

In general, the lintel is a common element in web pages that, when used properly, becomes an identifying element of the site, giving it its own style that distinguishes and identifies it.

Lintel is understood as an area of ​​the web interface located at the top of it (hence its name), with a width generally equal to that of the page and variable height, in which the logo of the website or of the company that owns it, generally accompanied by a text identifying it and other design elements such as photographs (simple or forming a montage), login forms (entry of access codes to the system), advertising banners, etc.

The main missions of the lintel in the interface are:

  • Identify the website where the user is located, through its logo and name, the company that owns it or the brand it represents.
  • Give the site its own personality, defining its own style that expresses its nature and identity, generally based on the corporate colors of the company or brand.
  • Identify each of the pages belonging to the website, since the lintel is usually common to all of them, thereby creating a common reference element.
  • Create a visual separation between the upper edge of the interface and its central content, making viewing and reading more comfortable.

The reason why the lintel is located in the upper area of ​​the interface and the logo on the left side is due to considerations of visual hierarchy. In Western culture we are used to reading from top to bottom and from left to right, so the top left of a page is the first to which the user directs the view, so by placing the logo there we make sure that is the first graphic element that the viewer observes.

See also  What is a Webmaster

The lintel is not an obligatory element in a web interface, although it is present in most of them, being an area of ​​the interface that is recognized and accepted by users, who always expect to find it on a web page. So much so that his absence comes to surprise and mislead a large number of them.

The most common shape of the lintel is rectangular, although it is also possible to find lintels with curved, flat and shadowed paths, in a single color or polychromatic, isolated or blended with other parts of the interface (usually with a left side menu).

Its color or colors must be adequate so that the logo stands out clearly against its background. Colors are usually used that contrast sufficiently with the logo so that it can be seen clearly. In the case of using a background image, it will always be necessary to check that the main content of the lintel is displayed correctly on it, being able to resort to creating a gradient in the image that attenuates its content in the areas on which texts or logos go.

Although it is normal for the lintel to cover the entire width of the page, it may happen that it only occupies a part of it, generally the left, where it is usually placed in a common vertical band with a navigation menu.

There are cases in which the header has the same color as the background of the page, creating a less pronounced separation of zones, which can give rise to the logo and other elements of the header seeming to float on the interface. This effect can create fresh and original visual sensations, but it can also be negative, creating instability and imbalance in the upper part of the interface.

See also  sass

It is also possible to find pages in which the lintel does not exist at all, generally on home pages that serve as a presentation of the site and that present a special design, different from the rest of the pages that make it up, or on pages with avant-garde design, that try to flee from the classic patterns, many of them built with Flash technology. In these cases, the logo can be located in any area of ​​the interface, generally in the lower left part of it.

Loading Facebook Comments ...
Loading Disqus Comments ...