There’s nothing fallacious with going the traditional route on the subject of web site header design. Knowledge means that the normal format with the emblem on the left and the navigation on the fitting is and at all times can be an efficient approach to go.
That mentioned, there are methods to take care of this long-standing and successful components whereas placing a contemporary spin on it. Whereas WordPress may not offer you the instruments to do a lot in the best way of customizing your header, BeTheme’s Header Builder does:
If you happen to’re curious to see what sort of web site header traits can be in style within the coming yr (and which of them you’ll be able to simply create utilizing the BeTheme Builder), preserve studying.
5 web site header design traits to experiment with in 2023
As internet design applied sciences give us extra management over how web sites look, we’re going to see a extra numerous array of design traits. In 2023, right here is how these traits will remodel web site header design:
1. The multi-level header
Each web site header should embody two parts: the emblem and the navigation. As web sites have grown to offer extra data and carry out extra complicated duties, although, customers would vastly profit from different components being included within the header.
By affixing further sections to the header, you’ll be able to present guests with a very powerful data and motion buttons on the very prime of the web site.
These further ranges can create area for issues like:
- Main call-to-action button (like “Ebook Now”)
- Search bar
- eCommerce procuring cart and account login icons
- Web site notifications and promotional messages
- And extra
You can too use the multi-level header design so as to add secondary navigations. As an example, BeThemeStore2’s web site header has 4 ranges — considered one of which is a dismissable notification bar on the prime of the web page:
The primary navigation seems beneath the emblem the place customers count on it to be. They’ll search by way of completely different system classes to slender down their search from right here.
The secondary navigation, however, seems above the emblem part. It accommodates pages concerning the firm. Whereas these kinds of hyperlinks are sometimes positioned within the footer, the multi-level header design permits them to look on the prime with out overcrowding.
One other approach to make the multi-level design work for twin navigations is to do as Hole does:
When constructing an internet site for an organization that has sister manufacturers, use additional header ranges so as to add hyperlinks to these web sites. This fashion, you’ll be able to create a very omnichannel procuring expertise and customers received’t must stumble throughout the connection between the manufacturers solely as soon as they’ve scrolled to the footer.
2. The mega menu header
Lately, many designers have used the footer as overflow for navigational hyperlinks. It’s an efficient approach to save area within the header, which is nice if you wish to preserve a minimal design all through every web page. Nevertheless, it’s not at all times the best strategy, particularly as internet pages get longer and longer on each desktop and cellular.
A method of coping with that is to create a multi-level header and to put the secondary hyperlinks exterior of the principle navigation. Another choice is to create a mega menu.
Mega menus was in style, although they often ended up being clunky and tough to make use of — particularly as smartphones turned an more and more in style approach to entry the web. Mega menu design has gotten significantly better immediately and we’re going to see them make a giant comeback in 2023.
Information websites, retailers, and enterprises with dozens of pages that must be entrance and heart will make use of this design development. City Outfitters is one such web site at present utilizing a mega menu design:
Trendy mega menu headers can be cleaner and higher organized than their predecessors. What’s extra, they’ll be extra visually pleasing to take a look at with promotional graphics included inside them.
BeFurnitureStore is one other web site that demonstrates the way to pull off this header design development:
It’s as much as you to find out how a lot data to incorporate within the mega menu. Simply watch out about what number of clicks you ask your guests to make. Typically, the mega menu ought to go not more than two or three ranges deep.
3. The left-aligned header
Web customers’ eyes are naturally drawn to the top-left space of an internet site (or proper on web sites printed utilizing right-to-left languages like Arabic or Hebrew). This is the reason the emblem is often positioned within the nook. Not solely does it strengthen model recognition, but it surely makes navigating again “Dwelling” an intuitive activity for all customers.
Whereas the horizontal header on the prime of the web page is the frequent approach we see the emblem and navigation offered, we are able to additionally flip the header on its facet and make it vertical. As long as we’ve got the emblem within the prime nook, our guests’ eyes will naturally pivot round it to search out the navigation.
Whereas this format normally doesn’t work for bigger web sites, it’s a inventive and distinctive approach to design the header on smaller web sites — like for native eating places, occasion corporations, providers suppliers, and so forth.
For instance, right here’s how the left-aligned header design appears on the BeEvent7 web site:
The great factor concerning the left-aligned header and navigation is that it’s at all times current. This fashion, it received’t matter how lengthy the web page will get. Guests received’t must scroll by way of your content material so as to re-engage with the header at any level.
This can come in useful with a portfolio web site like Dylan Perlot’s:
One factor to bear in mind with this header format is that it’s not inherently responsive. So it’s going to must be transformed right into a hamburger menu for smaller screens.
4. The minimal content material header
This development is one other approach in which you’ll be able to design the header for smaller web sites. Reasonably than depart each a part of it on full show, the minimal content material header will tuck the navigation (and secondary components just like the search bar) away beneath a hamburger menu icon.
As increasingly more folks spend time shopping the online from their telephones, their familiarity with the hamburger icon has grown. In flip, this navigation icon can now be used on bigger screens with out creating usability issues.
Usually, the minimal content material header is offered with only a brand within the left nook and a hamburger icon in the fitting. When the icon is clicked, the navigation seems as a dismissible sidebar. You’ll be able to see an instance of this on the BePortfolio2 website:
One other approach to deal with that is by turning the menu right into a fullscreen pop-up as Kellogg’s does:
If you happen to evaluate the BePortfolio and Kellogg’s examples, you’ll get a good suggestion of which to make use of for the kind of web site you’re constructing.
For smaller web sites, a much less intrusive sidebar menu header would look good. Nevertheless, in case your customers have to spend extra time within the navigation (like if it’s a mega menu), then a fullscreen pop-up that hides the principle web site UI can be finest.
5. The clear background header
The web site header is its personal part. Nevertheless, simply as completely different sections on our internet pages don’t want clearly outlined borders to ensure that guests to acknowledge the place one begins and one other ends, the header doesn’t want them both.
One thing we’ll see extra of subsequent yr can be clear header design. This can give web sites a extra open really feel because the header blends into the remainder of the content material.
The one factor to watch out of when eradicating the strong background from the header is shade — be it a strong shade background, picture, or video. To ensure that the web site header components to be straightforward to find and use, they must be seen always, so shade distinction is vital.
One approach to keep away from any distinction points is to make the header strong when the customer scrolls. You’ll be able to see how this works on the BeVR web site:
One other web site that makes use of this clear header scrolling impact is e-Cash:
Whereas this transparent-to-solid impact works, you’ll be able to at all times select a header font shade that stands out towards your background. You’ll have essentially the most luck with this when your internet web page background is identical shade all through.
Make a robust impression with web site header design
Whereas WordPress themes are indispensable internet design instruments, till not too long ago there have been limitations on how a lot of an internet site they permit us to customise. However that’s all altering with the BeTheme Header & Mega Menu Builder.
One factor to bear in mind is that simply because you’ve the power to completely customise the web site header design, that doesn’t imply it is best to break all the principles. If you happen to have a look at these 2023 traits, you’ll see that good web site header design rules persist.
In order you experiment with header customization, discover a good steadiness. Flex your inventive muscle mass as you add extra data to the header and make it extra visually participating, however always remember the final construction that customers have come to know and recognize.
