There’s nothing fallacious with going the traditional route in the case of web site header design. Information means that the standard structure with the emblem on the left and the navigation on the precise is and at all times can be an efficient technique to go.
That mentioned, there are methods to take care of this long-standing and successful formulation whereas placing a contemporary spin on it. Whereas WordPress won’t offer you the instruments to do a lot in the best way of customizing your header, BeTheme’s Header Builder does:
When you’re curious to see what sort of web site header developments can be in style within the coming yr (and which of them you may simply create utilizing the BeTheme Builder), maintain studying.
5 web site header design developments 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 various array of design developments. In 2023, right here is how these developments will rework web site header design:
1. The multi-level header
Each web site header should embrace two parts: the emblem and the navigation. As web sites have grown to offer extra info and carry out extra advanced duties, although, customers would vastly profit from different parts being included within the header.
By affixing extra sections to the header, you may present guests with crucial info and motion buttons on the very prime of the web site.
These extra ranges can create area for issues like:
- Major call-to-action button (like “Ebook Now”)
- Search bar
- eCommerce buying cart and account login icons
- Web site notifications and promotional messages
- And extra
It’s also possible to use the multi-level header design so as to add secondary navigations. As an example, BeThemeStore2’s web site header has 4 ranges — one in every of which is a dismissable notification bar on the prime of the web page:
The principle navigation seems beneath the emblem the place customers anticipate it to be. They’ll search by way of completely different gadget classes to slim down their search from right here.
The secondary navigation, then again, seems above the emblem part. It comprises pages concerning the firm. Whereas these kind of hyperlinks are sometimes positioned within the footer, the multi-level header design allows them to look on the prime with out overcrowding.
One other technique to make the multi-level design work for twin navigations is to do as Hole does:
When constructing an internet site for a corporation that has sister manufacturers, use further header ranges so as to add hyperlinks to these web sites. This fashion, you may create a really omnichannel buying expertise and customers gained’t need to 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 technique to save area within the header, which is nice if you wish to keep a minimal design all through every web page. Nevertheless, it’s not at all times the perfect method, particularly as internet pages get longer and longer on each desktop and cell.
A technique of coping with that is to create a multi-level header and to position the secondary hyperlinks outdoors of the principle navigation. Another choice is to create a mega menu.
Mega menus was once 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 technique to entry the web. Mega menu design has gotten significantly better at present and we’re going to see them make an enormous comeback in 2023.
Information websites, retailers, and enterprises with dozens of pages that have to be entrance and heart will make use of this design pattern. City Outfitters is one such web site at the moment utilizing a mega menu design:
Fashionable mega menu headers can be cleaner and higher organized than their predecessors. What’s extra, they’ll be extra visually pleasing to have a look at with promotional graphics included inside them.
BeFurnitureStore is one other web site that demonstrates tips on how to pull off this header design pattern:
It’s as much as you to find out how a lot info 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 revealed utilizing right-to-left languages like Arabic or Hebrew). For this reason the emblem is often positioned within the nook. Not solely does it strengthen model recognition, however it makes navigating again “Dwelling” an intuitive process for all customers.
Whereas the horizontal header on the prime of the web page is the widespread method we see the emblem and navigation offered, we will additionally flip the header on its facet and make it vertical. As long as we have now the emblem within the prime nook, our guests’ eyes will naturally pivot round it to search out the navigation.
Whereas this structure normally doesn’t work for bigger web sites, it’s a artistic and distinctive technique to design the header on smaller web sites — like for native eating places, occasion corporations, companies suppliers, and so forth.
For instance, right here’s how the left-aligned header design appears to be like on the BeEvent7 web site:
The good factor concerning the left-aligned header and navigation is that it’s at all times current. This fashion, it gained’t matter how lengthy the web page will get. Guests gained’t need to scroll by way of your content material in an effort 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 structure is that it’s not inherently responsive. So it can have to be transformed right into a hamburger menu for smaller screens.
4. The minimal content material header
This pattern is one other method in which you’ll be able to design the header for smaller web sites. Relatively than depart each a part of it on full show, the minimal content material header will tuck the navigation (and secondary parts just like the search bar) away below a hamburger menu icon.
As increasingly 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.
Sometimes, the minimal content material header is offered with only a brand within the left nook and a hamburger icon in the precise. 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 technique to deal with that is by turning the menu right into a fullscreen pop-up as Kellogg’s does:
When you 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 could 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 parts to be simple to find and use, they have to be seen always, so shade distinction is vital.
One technique 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 may 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 similar shade all through.
Make a powerful impression with web site header design
Whereas WordPress themes are indispensable internet design instruments, till lately 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 will have the flexibility to totally customise the web site header design, that doesn’t imply you must break all the principles. When you take a look at these 2023 developments, you’ll see that good web site header design ideas persist.
In order you experiment with header customization, discover a good steadiness. Flex your artistic muscle mass as you add extra info to the header and make it extra visually partaking, however always remember the overall construction that customers have come to know and respect.