- February 26th, 2008
- 164 Comments
Navigation is the most significant element in web design. Since web-layouts don’t 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 shouldn’t mess around with it.
That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. However, it doesn’t mean that they need to be boring. One year ago we’ve presented modern approaches of navigation design1. Let’s take a look at what’s different now, which trends one can observe and what ideas you can develop further in your projects.
This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they’ve been taken. We’ve missed something? Definitely! Let us know in the comments!
1. Trend toward “speaking” block navigation
The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. However, often it’s quite hard to communicate the content of a site section within one or two single keywords, particularly if horizontal navigation is in use. That’s why often navigation options aren’t simply listed one after each other using some appropriate keyword (“silent” navigation); instead, designers attempt to concretely explain which options are available and what the visitor should expect from site sections once clicking on corresponding links.
In fact, over the last months we’ve observed a strong trend toward exactly this navigation scheme; and since designers try to initiate a more effective dialogue with visitors we prefer to call it “speaking” navigation — contrary to “silent” navigation based upon the listing of keywords.
To make the perception of information easier, the navigation is often structured by using blocks of the same height and width; large icons are used quite often, but in most cases the decision whether they are appropriate or not depends on the content of the site and the overall layout. “Soft” hover-effects often support the navigation design by making the browsing more pleasant.
This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well.
2. Mac-style still popular?
One can discuss if the Mac-style is the survivor of the Web 2.0 design attack or it becomes a standalone design element used independently from glossy colorful buttons with 3D-effects. Or maybe it’s just a temporary trends toward grunge style13 — nobody knows, really.
In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. What’s interesting is that the style is used not only on Apple-related sites, but also on web-sites which aren’t directly related to Mac. Particularly when it comes to design of software products traditional Mac-style is often imitated. Reason: it is visually appealing and looks cool.
A navigation bar doesn’t need to look exactly like a typical Mac-style-navigation. Variations are also possible.
“Green” version of the traditional Mac-style menu
Since navigation bars can’t exist alone and need to be supported by the overall design, colorful one-page-sites with happy talk and overused stock photos designers are being replaced with more decent, serious and calm layouts. And that’s a good thing. However, when using the Mac-style please keep in mind that it shouldn’t be used for the sake of it but has to fit to the overall design.
3. Visually appealing icons are used more often
To communicate navigation options in a more effective way, designers often make use of appealing icons. In such cases it’s important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and isn’t too small. Attractive icons are, of course, always preferred to the boring ones.
Icons can also be hidden into the links; this effect should be used sparingly.
Icons can be placed on the left-hand side…
…and on the right-hand side in the sidebar.
4. Vertical tabs
Although traditional desktop-applications almost never make use of vertical tabs, in the office vertical tabs are used at least as often as horizontal ones. In fact, designers often try it out; and the results can be quite interesting.
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. And, of course, the text is harder to read.
Tabs on the right-hand side.
5. Handwriting in use.
6. Experimental solutions
Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.
DesignForFun44 uses icons to help visitors to filter the content they’re looking for. Depending on the clicked icon the background of corresponding links changes. However, the selection of icons may be not the best one as it’s unclear hat icons stand for. Fortunately, title attribute is in use.
Playground Blues49 tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.
Steven Holl51 is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.
inBloom67 has a menu with animation. The beetle doesn’t care what option you choose, it crawls its long path through the navigation tree anyway. This is an example of how animation can be unobtrusive.
Carbonstudio.co.uk73 delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.
- 1 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
- 2 http://www.evaneckard.com/
- 3 http://www.30elm.com/
- 4 http://freelanceswitch.com/
- 5 http://www.okb.es/
- 6 http://pixelresort.com/
- 7 http://www.digitalartifex.com/
- 8 http://www.panic.com/candybar/
- 9 http://lonnroth.info/
- 10 http://www.rakacreative.com/
- 11 http://www.intereactive.net/
- 12 http://worshipleaderinsights.com/
- 13 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
- 14 http://www.apple.com/finalcutstudio/
- 15 http://www.tenbytwenty.com/
- 16 http://www.tenforce.eu/blog/
- 17 http://www.newspond.com/
- 18 http://www.joyent.com/
- 19 http://www.ttthings.com/
- 20 http://qrayg.com/learn/
- 21 http://lonnroth.info/
- 22 http://www.cssbeauty.com
- 23 http://www.macrabbit.com
- 24 http://thediscountbox.co.uk/
- 25 http://tastyplanner.com/
- 26 http://www.webinventif.fr/barre-de-navigation-fixe-depliable-et-transparente/
- 27 http://nitram-nunca.com/
- 28 http://wp-themes.designdisease.com/
- 29 http://blog.fluxiom.com/
- 30 http://rawnet.com/
- 31 http://www.volume5.co.uk/showcase.html
- 32 http://dizidesigns.co.uk/
- 33 http://www.compacto-design.com/
- 34 http://www.prague-guide.fr/
- 35 http://miss.ivytan.net/
- 36 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
- 37 http://satsu.co.uk/
- 38 http://www.sarahhyland.com/
- 39 http://www.squawkdesign.com/
- 40 http://www2.elansnowboards.com/
- 41 http://ohiosadd.org/
- 42 http://oink.elrellano.com/
- 43 http://www.cassysdesign.ro/
- 44 http://designforfun.com/portfolio.php
- 45 http://designforfun.com/portfolio.php
- 46 http://designforfun.com/portfolio.php
- 47 http://done.jbunti.com/
- 48 http://done.jbunti.com/
- 49 http://www.playgroundblues.com/
- 50 http://www.playgroundblues.com/
- 51 http://www.stevenholl.com/
- 52 http://www.stevenholl.com/
- 53 http://www.polkdesign.net
- 54 http://www.polkdesign.net
- 55 http://www.hopkingdesign.com/
- 56 http://www.hopkingdesign.com/
- 57 http://www.adipintilie.eu/
- 58 http://www.adipintilie.eu/
- 59 http://www.gol.com.pl/
- 60 http://www.gol.com.pl/
- 61 http://www.wards-exchange.co.uk/
- 62 http://www.wards-exchange.co.uk/
- 63 http://www.kriesi.at/
- 64 http://www.kriesi.at/
- 65 http://folietto.at
- 66 http://folietto.at
- 67 http://www.inbloomproductions.com
- 68 http://www.inbloomproductions.com
- 69 http://www.cobahair.co.uk
- 70 http://www.cobahair.co.uk
- 71 http://www.hellocolor.com
- 72 http://www.hellocolor.com
- 73 http://www.carbonstudio.co.uk/
- 74 http://www.carbonstudio.co.uk/
- 75 http://www.maxandlous.com/
- 76 http://www.maxandlous.com/
- 77 http://www.letters-numbers.com/
- 78 http://www.letters-numbers.com/
- 79 http://www.nickad.com/
- 80 http://www.nickad.com/
- 81 http://www.nike.com/jumpman23/xx3/
- 82 http://www.nike.com/jumpman23/xx3/