.navigation menus

Website navigation is the most important part of any website. Your site can be wonderfully designed, but if users can’t navigate it or grow frustrated with the structure, your site will loose it’s credibility.

Since every website has a navigation menu it takes some extra attention to design to make a menu stand out while maintaining it’s functionality. Effective menu design has to compliment the purpose and style of the website. If you are designing a very minimal and modern website, consider designing an equally minimal/modern menu to compliment the site’s style. There is a lot of weight resting on the effectiveness and style of the menu, so making it as unique, intuitive and stylish as possible can help the success of the site.

I’ve come across a fair number of interesting menus so here are a few of my favorites. I find it a nice source of inspiration to look at other menus and start backwards, building the site up from there.

Tutorials: 

1. PixelDigest
PixelDigest Navigation

2. Phonuts
Sleek White Menu | Phonuts

3. Effective Web Design
Nice Tab Navigation | Effective Web Design

Examples: 

1. Sohtanaka
Sohtanaka
2. Design Jobs on the Wall
Design Jobs on the Wall
3. Stucel
Stucel

.css-tricks

In the Summer of 2009, I was hired to redesign a Distance Learning website. Wanting to challenge myself, I decided not to grab template and modify the CSS style sheet. Instead, I opted to build the site from scratch starting with a Photoshop MockUp. It was a pretty daunting task considering it was my first time designing and developing a site of this magnitude. Luckily, I found a ton of websites, blogs and tutorials that helped me through the process.

One of the best online tutorials I found was on CSS Tricks from a web developer named Chris Coyier. The tutorials are very easy to understand, very thorough and Chris doesn’t skip any steps so you won’t look up and wonder how he just up and…finished the design. The tutorial is broken into three parts and can be downloaded from the CSS Tricks website (links below).

Part 1
Converting a Photoshop Mockup (1 of 3)
Part 2
Converting a Photoshop Mockup (2 of 3)

Part 3
Converting a Photoshop Mockup (3 of 3)