SneakyMedia Web Design Mag

Below is a collection of some of our favourite navigation menus

[divider]

A unique menu using custom illustration

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-sarahrh.png[/frame_center]
http://www.sarahhyland.com [fancy_link link="http://www.sarahhyland.com/"]Visit the site[/fancy_link]
[divider]

A simple menu which achieves a modern effect

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-cosmicsoda.png[/frame_center]
http://cosmicsoda.com [fancy_link link="http://cosmicsoda.com/"]Visit the site[/fancy_link]
[divider]

A well made vertical menu

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-garyknock.png[/frame_center]
http://www.garynock.com [fancy_link link="http://www.garynock.com/"]Visit the site[/fancy_link]
[divider]

A modern example with subtle lighting / shading

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-numedia.png[/frame_center]
http://www.nue-media.com [fancy_link link="http://www.nue-media.com/"]Visit the site[/fancy_link]
[divider]

A great example of hand-written fonts and description on hover

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-paiko.png[/frame_center]
http://paiko.de [fancy_link link="http://paiko.de/"]Visit the site[/fancy_link]
[divider]

Great use of illistrations and hover effects

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-carbonica.png[/frame_center]
http://www.carbonica.org [fancy_link link="http://www.carbonica.org/default.aspx"]Visit the site[/fancy_link]
[divider]

An unusual menu with images

[frame_center]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/webdesigninspiration-loodo1.png[/frame_center]
http://www.loodo.com [fancy_link link="http://www.loodo.com.br/"]Visit the site[/fancy_link]
[divider]

Navigation, a web designers chance to show off

Navigation is fast becoming the the key to a websites success (or indeed failure!). If content is king, then usability is surely queen. SmashingMagazine.com says:

The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites.

We at SneakyMedia Web Design think that designing the navigation for a new website is the most exciting part, as well as the most crucial. It offers the oppurtunity to get creative; not just visually, but also wrestling with the challenge of making the menu crawl-friendly and accessible.

So what are the trends?

[frame_left]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/3dWebDesign.jpg[/frame_left]

We have definately seen a trend for 3D navigation. This isn’t 3d like your favorite movie, but subtle colour and shading to give the effect of varying levels / heights.

This technique is highlighted well in Harry Bissett’s graphic design website shown on the left (visit his site HERE). He has used basic color and shading to give the impression that the navigation sits off the page; nice work Harry!

Another popular trend seems to be using text underneath the main anchor text of the navigation links to give more information about the page. For example, a link might say “About: find our more about us”. There are a few reason why this trend has come about. 1. This obviously maked a link more keyword rich for the search engines 2. It makes the navigation more user friendly, a browser knows exactly what a page is about without clicking. Any technique which improves SEO and usability is fine by us!

Similarly, many navigation menus feature icons and anchor text. This is for much the same reasons as using the extra text information, it’s a helpful indicator of the web page’s content.

[frame_right]http://www.sneakymedia.co.uk/wp-content/uploads/2011/04/shapedWebDesign.png[/frame_right]

Another modern trend is the use of unusual shapes and hand-written / hand-drawn shapes and text. You can see in Booma Web Design‘s page on the right how this technique can be utilised effectively.

One of the main reasons that this works is the sharo contrast between the smooth, straight edges a user is used to compared with the rough edges and un-certain outlines of hand made graphics. Standing out from the crowd is half the battle won!

.

Stay tuned for more web design updates!