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.
Components of Good Website Navigation:
1. Primary Navigation
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.
2. Secondary Navigation
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
3. Position of Menus
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.
4. Size of Buttons and Menu Label
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.
5. Color of Menu Buttons
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.
6. Icons and Effects
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…
7. The less click, the better.
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.
1. It occupies less space
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.
2. More noticeable
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.
3. Easier to use
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.
4. Viewers are already used to it
Since it is the mostly used navigation, viewers always expect that all websites have this type of navigation.
1. Limited space for your menus
When using horizontal navigation, you are limited on the width space of your website and this still depends on the layout of your website.
2. Can only be used if number of menus are already known
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:
5. Sarah Hyland
9. Red Velvet Art (Horizontal Navigation)
11. Design Nut
13. Mac Rabbit
14. Getraenke Kukral
15. Noizi Kidz
18. Max and Lous
21. Jiri Tvrdek
23. Duarte Pires
24. CSS Beauty
25. Manndible Cafe
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.
1. It allows grouping of menus
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.
2. It is easier to add or remove 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.
1. It occupies a lot of space
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.
2. Limited characters for your menu label
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.
3. Scrolling down is needed for websites with many menu buttons
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.
4. Viewers are not used to it
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.
8. Red Velvet Art (Vertical Navigation)
9. Extra Tasty
11. Cambrian House
12. Cassys Design
13. Diego La Torre
14. Brown Blog Films
15. Wards Exchange
16. AJ Miles
18. Adventure Here
21. Utah Travel
22. Notorious Design
23. This is Leaf
Other Examples of Navigations
Here are some examples of websites with one-of-a-kind navigations.
2. Good Man
4. Steven Holl
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.