Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
A website is like a magazine where people search for information. The table of contents of a magazine is like the navigation of a website. Table of contents provides an overview of your magazine, while a navigation also shows on what your viewers should expect to see on your website. Both serves as pathways for your viewers on how they can read your mag or explore your website.
Whenever I think of what is the most important task a web designer could do, I always end up thinking that it should be the creation of good navigation. It must be well-designed in a user-friendly manner that the moment the viewer sees it, they instantly understand how it is used and what is it for. A navigation must also be creatively done, it is one of the elements you can find on a website where you can capture a viewer’s attention.
Primary navigation are the main menus or categories of a website. These are considered as the most important links that can be seen the moment your website loads. Most of the primary navigation consists of Home, About Us, Contact Us and other links depending on what kind of website you are creating.
Keep in mind that primary navigation should not have more than seven or eight links. Choose the most important links and put them as the main menus and the rest will be placed on the sub-menus.
Secondary navigation are the secondary links or sub-menus of a website. Usually, these are to be found from a drop down menu or a fly-out menu.
A drop down menu is when a user mouse over and click on a menu button, then sub-menus will be shown.
Sample Image of a Drop Down Menu
A flyout menu is when a user hovers onto a menu button, then sub-menus will appear. In this case, the user doesn’t have to click the button for the sub-menus to appear.
Sample Image of a Flyout Menu
It is important that you position your menus on a place where your viewers can easily see them.
Usually, horizontal navigation is put on top and under the header of your website. While a vertical navigation, this is commonly put on the left side of the website.
To add up on to this, always put your menus from left to right since most viewers start reading from the left.
Even you put your links from right to left, your viewers will still read them starting from left. Take the image below as an example. Even the links are put into a right to left position, viewers will still read them starting from the Contact Us, Blog, About Us and then Home.
The size of your menus must be noticeable, but not too large that they would occupy too much space. Adjust them where they can be seen easily by your visitors while maintaining a professional look.
When putting menu labels, make sure they are readable in size. Also, choose a font color that is in contrast with the color of your button. If the color of your button is light, use dark color for your menu label and vice versa.
Colors are one way to entice the visitors of your website. Use a color for your menus that is in contrast with the background color of your website. This way, you can capture the attention of your viewers and your buttons will stand out with the other elements of your website.
Take a look at this example. Even the buttons have the same color as the background, it still stands out for it has button-click effect and the text color is white.
Icons are great way to differentiate your buttons and they also inform users on what viewers could expect on that link. Also, hover effects is a good way to attract viewers’ attention. This also informs the visitor that they can click the button which looks different from the others. You can also put a button-click effect to inform your viewers on what button they clicked.
To give you more idea about this, I have here a good example of website navigation. The designer of PixelResort put icons on top of each menu label to represent the link. Also, it has a hover effect (glowing circle) and a button-click effect (arrow pointing on the link). In this case, the page is on the Blog link and the mouse pointer of the viewer is put on the Goodies link.
And my last tip for you…
Viewers tend to be impatient when searching for information, they want to seek what they are searching very quickly. Make sure that your navigation respond as quickly as possible to your viewers’ instincts.
In this article, I will highlight amazing horizontal and vertical navigations for your inspiration. First, let us take a look at horizontal navigation.
Horizontal navigation is the widely used navigation of web designers today. Usually, the navigation bar is placed right under the header.
Horizontal navigation is mostly used by web designers for it occupies less space, because it is placed at the top part of the website. Then, the rest of the spaces you can use for your content.
Our eyes first notice elements of the website that are placed on the center, that is why horizontal menus are more noticeable since they are placed on the top and center part of the website.
Viewers find horizontal navigation easier to use. Comparing it to vertical navigation, you still have to move your mouse pointer on the left part of the screen (or sometimes right) to click the menus. If the navigation is horizontally placed, you just have to move your pointer upward to click a menu button.
Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.
When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.
Horizontal navigation can only be used if the number of your menus is already fixed, because the size and design depends on the number of menus to be placed.
Here are some example of horizontal navigation for your inspiration:
Now let us go to vertical navigation.
Vertical navigation are usually placed on the left side of a website and the menus are placed from the top to bottom, like a ladder.
Vertical navigation allows you to group your menus and place sub-menus under each main category. Unlike in horizontal navigation, you still need to create a drop down menu for the sub-menus.
If you are trying to put more or remove menus in the future, you can use vertical navigation. It will be easier for you to add or remove menus without resizing each buttons.
Usually, menus in vertical navigation are placed on the left side of the website and this occupies a lot of space on the whole website template. Unlike when using horizontal navigation, you are just using the top part of your website.
For your buttons not to occupy too much space, you are limited to few characters when putting labels for your menu. If you will be putting many characters, tendency is the font size of your menu label would be small or you will occupy too much space on your template.
If you have several menus for your website, the tendency is that your viewers need to scroll down their to see the other menus placed at the bottom part.
Viewers expect that a website should always have a horizontal navigation, since it is mostly used by web designers. But nowadays, there are already websites that are using vertical navigation and are designed creatively to make it easier and noticeable for visitors.
To give you more idea about vertical navigations, take a look at these websites.
Here are some examples of websites with one-of-a-kind navigations.
What are your favorites among the selection? Comment out and feel free to share.
For high quality Photoshop navigation menu tutorials, click the link below.
Get The Only Freelancer crash course you will ever need to read!
33 Written Articles
An Information Technology graduate who loves learning new things and chocolates, too. She spends the whole day sitting in front of the computer, making herself updated with the things going on around her.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!