Navigation is among the most important parts of a web site.
It supplies a high-level overview of what guests will discover there (which additionally occurs to be good for search engine optimization). It helps guests orient themselves to allow them to get across the web site rapidly. Plus, it permits them to take fast motion like visiting their cart or looking out the location.
As an online designer, it’s a must to be sure that the web site navigation is designed in order that guests can get probably the most from it.
At the moment, we’re going to have a look at 5 issues to remember while you’re designing web site navigation. We’ll embrace examples from BeTheme so you possibly can see what these greatest practices seem like.
Learn how to Design Nice Web site Navigation (With Examples)
It’s simple to take the web site navigation as a right. As long as it seems on the prime of the location, comprises the hyperlinks to your most vital pages, and is uncluttered, that’s all you should fear about as a designer. Proper?
As a result of navigation has such an vital job to play, it needs to be designed with care. Right here’s what you should know:
Tip #1: Make the Emblem Outstanding
The emblem is basically the digital face of an organization. Not solely does it signify them on their web site, but it surely additionally represents them on different platforms — social media, on-line boards, e-mail signatures, and so forth.
Due to this, the emblem performs an important position in constructing model recognition, belief, and loyalty.
To maximise the brand-building powers of the emblem, it must be accurately positioned, sized, and spaced within the header of the web site. Listed below are some common guidelines to observe:
1. Hyperlink: Hyperlink the emblem to the Residence web page.
2. Placement: Place it within the top-left nook at any time when attainable (in accordance with analysis from NNG). If you wish to place it within the middle, be sure that there’s a Residence hyperlink within the top-left nook.
The BeBaker 3 pre-built web site makes use of this different brand placement:
3. Dimension: Dimension it so that each element is simple to see and skim. The best sizes are 250px x 100px for rectangular logos and 160px x 160px for sq. ones, although all of it will depend on how a lot room you wish to give your navigation hyperlinks to breathe.
As an example, the BeDentist 4 brand is 166px x 60px:
Making the emblem any greater than that with out growing the font dimension of the header would create an excessive amount of house across the navigation. So, it’s a little bit of a sport of stability. If you happen to go along with an even bigger brand, be sure that it doesn’t create a lot house that your hyperlinks drown in it.
Tip #2: Make the Header Sticky
Web sites usually have so much to share with guests. In order to not overwhelm them with content material that reads like pages from a ebook or journal, we design them in sections and with plentiful white house in between.
As such, internet pages can develop fairly lengthy.
That’s not the issue, although. As long as the knowledge shared is related, guests will gladly comb via it. The problem is the hassle required to scroll again to the highest once they’re finished — particularly in the event that they’re viewing the location on a smartphone.
The sticky header presents an answer to this drawback. It doesn’t simply follow the highest of the web page, both. Watch how the title on the BePizza 5 one-page web site transforms:
Because the customer scrolls down the web page, the uniquely designed navigation bar shrinks up. Though it’s a lot smaller, it’s nonetheless usable.
In its place, you need to use sticky left-aligned navigation because the Cottage 2 pre-built web site does:
The emblem continues to be in a great spot, the navigation hyperlinks stay seen always, and it doesn’t take away an excessive amount of house from the principle content material.
Tip #3: Spotlight the Present Web page the Customer Is On
Even in case you’re designing a smaller web site, it’s at all times useful to let guests know what web page they’re .
The highest of the web page might present clues as to the place they’re, however a visual marker within the navigation would provide a faster reference level. And the extra rapidly they determine the place they’re, the quicker they’ll go to unexplored areas of the location.
There are a number of methods to spotlight a customer’s location within the navigation. It will depend on what your branding and design fashion requires.
With BeTheme, you’ve got loads of choices. As an example, you possibly can see right here within the Be E book 3 navigation that the textual content shade adjustments from black to blue for the present web page:
One other means so as to add a delicate spotlight to the navigation can be to position a coloured line beneath the present web page.
The Nursing Residence pre-built web site, however, makes use of a extra outstanding spotlight fashion:
For a web site focused at older customers, putting a block of shade across the present web page hyperlinks makes a number of sense because it’ll be inconceivable to overlook.
Tip #4: Solely Use Recognizable Icons
Iconography could be a helpful aspect in internet design. Normally, we pair it with textual content labels to visually talk or clarify what the actual level is about. Nevertheless, we are able to additionally use icons as standalone parts rather than textual content labels.
Designers should watch out when utilizing standalone icons within the navigation, although. There are solely a pair dozen icons which are universally recognizable — most of which don’t have any place within the navigation.
Those you can place up there can roughly be discovered within the BeDietShop pre-built web site:
There are 4 navigation icons right here:
- Consumer profile for account settings
- Coronary heart for likes or favorites
- Buying bag for the cart/bag web page
- Magnifying glass for search
There are another icons you employ within the navigation, however they are usually on extra specialised websites (like ecommerce and worldwide).
Icons can present an amazing navigational shortcut. Simply watch out which of them you employ. If the bulk, if not all, of your guests, know what they’re, it might make your navigation more durable to make use of.
Tip #5: Set up Mega Menus, So They’re Simple to Peruse
Bigger web sites, normally, can take a while to arrange. The web site navigation must mirror this cautious system of group, too.
The mega menu has lengthy been the navigation design used on web sites with greater than a dozen hyperlinks and quite a few ranges of pages. And it’s efficient, simply as long as it’s well-organized.
To arrange a mega menu, you need to use design ways just like those you’d use to arrange your internet pages:
- Bolded headers
- Columns for associated pages
- Pictures to spotlight vital pages
You may see a few of these ways used within the Betheme Retailer mega menu:
The headers and columns make it simpler for guests to scan via the varied classes and pages obtainable.
If a mega menu feels too cumbersome to your web site, that’s okay. Web sites with hundreds of pages could be troublesome to maintain organized, even with a mega menu construction.
In its place, you possibly can design a extra conventional single-level navigation after which flip the search web page right into a navigational device via using filters and sorting as BeClothingstore does:
This sort of web site “navigation” can scale back the overwhelm or nervousness individuals really feel when too many choices are displayed without delay.
Make Navigation Work for Your Guests with BeTheme
With out web site navigation, guests would have a number of work to search out pathways to the opposite info and conversion factors in your web site. That stated, placing a row of navigation hyperlinks on the prime (or on the aspect) of your web site isn’t sufficient.
Take time to design your navigation in order that it improves the invention of your content material and hurries up customer motion round your web site.
The simplest technique to get great-looking and extremely usable navigation up and working is to begin with considered one of BeTheme’s pre-built websites. Not solely are they constructed utilizing the very best practices talked about above, however they’re additionally customizable, so you possibly can mix-and-match kinds and make them completely your individual!
It is a sponsored submit on behalf of BeTheme