designerZen » content http://www.designerzen.com design and creative works of zenon olenski Mon, 22 Mar 2010 11:58:17 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Day 008 : Site Wide Navigation http://www.designerzen.com/2009/day-008-site-wide-navigation/ http://www.designerzen.com/2009/day-008-site-wide-navigation/#comments Fri, 15 May 2009 17:37:44 +0000 designerzen http://www.designerzen.com/?p=231 As this site holds a large amount of data, some more relevant to the casual browser than others, it is very important to offer a straight-forward and simple primary menu system to navigate between the important data sections. It is tradition at this point to draw a spider diagram to show the entry point of the user and how they look for information from one section to the next. In this semantic age however, where most of this website is derived from tags, it is the grouping of similar data that the user must swim through that determines how useful the site is. As the majority of content is portfolio work, this has to be prominent and easy to reach,  but not overwhelming with it’s content. To help focus the user I have decided on a few visual styles that I am applying cross site to pin extra significance to links.

Firstly, I have a primary navigation system that is constantly highly visible – even on first glance – this is important as these are the main category links that have to be obvious as to their function. These sections are Portfolio, Articles, News, Contact and About : More information can be reached by first visiting these links.

Secondly, there is a sub-navigation system to reach popular content, new content and recently changed content, located well away from the primary navigation bar. Once on the site for a few seconds, having scrolled the content, this relevant related system of links takes you to places that you may find interesting as a result of similarity to what you have read. This is also used to filter the portfolio page down to relevant sub-categories.

Thirdly is the tertiary quick links section – hidden in the background and in post footers. By using highly muted colours the links fade into the background but light brightly if mouse overed. In this way, the navigation does not distract the user away from content, but does offer a very useful shorthand for broswing fast.

3 types of navigation in one site – but only one is truly prominent. Hopefully this will simplify the complexity of navigating directly to where you want to be :D

]]> http://www.designerzen.com/2009/day-008-site-wide-navigation/feed/ 0