Recently at Institutional Web Support Services (IWSS), I have been assigned to re-design the old Environmental Health and Safety (EHS) Website.  After my first interview with staff about EHS, it was clear that the new site would be simple and seen mostly as an informative, content heavy one.  It does not and should not need flashy rotating images, a marque, or large slick buttons.  Seemed like it was going to be a breeze, but that was not actually the case.

Unlike any other site I have designed, the EHS site’s secondary navigation would go 4 levels deep with numerous links at each level.  My design theory was to keep the artwork modern, clean, and as conservative as I could make it.  This design philosophy would help keep the site professional, administrative, and content-oriented (almost “utility-site” like).  With this in mind, I had to try to come up with a clean method of communicating “where you are” while navigating the site.  This lead me to do some research.

After some searches, I found a lot of blog posts on Smashing Magazine.  Below are a few good ones…

http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/

http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

http://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/

While most of them were too “designy” and did not directly impact my current problem, it was nice to see such a great collection.  Sadly, I knew mine wouldn’t look like any of these.  My navigation was multiple levels deep, not 1, and I was going for more of a bare-bones style.  Also, most developers, designers, and usability experts would tell you not to go more than 2 levels deep in the first place.  What was I going to do?

Luckily I had some experience with a new design for ISU’s new search utility site.  By default this site design was similar to the new EHS, and already had a basic navigation.  This navigation uses thin rules below each link, with a bold type and small black arrow to indicate an “active” link.  Modern, simple, and organized.  Below is a small sample of my new search navigation…

Since this design would soon be a huge influence on future ISU pages (mostly utility sites), it only made sense to use this as a reference on the EHS site.  My result is posted below…

The only difference here is an additional color (red), two background colors (white and grey), and tabbed/indented boxes to communicate a clear hierarchy.  Also, an opening is created with the rules to connect the active link with the content that would be on the right side of this left navigation.  Below are multiple levels of the entire site…  just remember that these are in middle stages of design.

This site actually turned out to be a great work experience.  I was forced to understand navigation, usability, and how they influence design philosophy.  A few more tweaks and I am on my way to implement my design.