Trends in Website Navigation - with examples

Build your website -> Website Navigation

When you design your website navigation system, simple, intuitive and conventional solutions are usually the best option. However, it does not mean that they need to be boring. Since web-layouts do not have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers should not mess around with it.

Navigation design is what makes websites in the world today so effective. Intuitive, and more importantly user centered navigation is what makes some sites so popular. Content is easy to reach without a lot of time searching mindlessly.

Let's talk about some trends and examples of some websites:

1. Block navigation
As I have said on another page, the most significant task a navigation menu has to fulfill is to unambiguously and clearly guide the visitors through the different sections of the website. Designers usually attempt to concretely explain which options are available and what the visitor should expect from site sections once clicking on corresponding links. Each element on the navigation bar has keywords and phrases "attached" with it. Some call it Talking Navigation.

Examples - horizontal navigation
http://www.evaneckard.com
http://www.freelanceswitch.com
http://pixelresort.com

Examples - vertical navigation
http://www.intereactive.net
http://worshipleaderinsights.com


2. Visually appealing icons
To communicate navigation options in a more effective way, designers often make use of appealing icons. In such cases it is important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and is not too small.

Examples - horizontal navigation
http://www.macrabbit.com
http://nitram-nunca.com

Examples - vertical navigation
http://blog.fluxiom.com
http://rawnet.com


3. Vertical navigation menu
Before using vertical tabs you should make sure that it is possible within your layout and you actually have enough area to cover all navigation options on every single page.

Examples
http://dizidesigns.co.uk
http://www.prague-guide.fr


4. Handwritten navigation
Hand-drawing style in modern web-design not only holds for design layouts but also holds for its specific elements - navigation.

Examples - horizontal navigation
http://ohiosadd.org

Examples - vertical navigation
http://oink.elrellano.com


5. Unique navigation
Some designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you do not put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users cannot make sense out of it.

Examples - horizontal navigation
http://designforfun.com/portfolio.php

Examples - vertical navigation
http://done.jbunti.com
http://www.cobahair.co.uk


6. Mac-style navigation
A number of web-sites integrated Mac-styled-navigation in their web-sites. What is interesting is that the style is used not only on Apple-related sites, but also on web-sites which are not directly related to Mac.

Examples
http://www.apple.com/finalcutstudio
http://www.ttthings.com
http://qrayg.com/learn