Category Archives: Menu & Navigation

Navigation menu in web design: a great showcase of navigation systems, dropdown lists, maps and tagging menus, tabs, javascript and css navigation solutions in websites at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Mega Drop-Down Menu from B&Q

Even if mega drop-down menu perform better than the regular ones (at least according to this Jackob Nielsen’s study), I still don’t love them.

Except for cases like this, when, huge panels makes me understand at a glance the whole website’s taxonomy, sparing me the time of browsing endlessly from a level to another and providing a more pleasant user experience.

Opptiko’s menu and boxes

We have a thing for Finnish webdesign and we sure love the global appeal of this super green website, even though we don’t master Uralic-related language: the letterpress effect has definitely made its way to our favourite text style for headers and buttons, the menu layout polished to the pixel with the pointing arrow inserting in the light gradient atop it’s brilliant and so is the complementary secondary menu box.

Bill Gates’ notes navigation: a metaphor

bill-gates-notes-website-menu

I really can’t remember why (serendipity, I’d suppose) but recently I’ve stumbled into the Gates’ notes, the website that spreads probably worldwide most famous mogul’s thoughts about the matters such as philanthropy, climats, development…

Apart from the fact that the whole thing is written in the third person, which really gives me the creeps, I’ve  found interesting the curved and tortuous menu that reflects the complex and multilayered site’s structure.

Despite a slight dislike due to the visual treatment (one for of all,  typography is really too small), I’ve found myself clicking on it several time, wondering how come an interface could work notwithstanding its lack of appeal: so I’ve realized that what I was really appreciating, was the metaphor it embodies; the nested graphics that appear/disappear when you click, make the menu exapanding and unravelling in parallel with your travel through Bill’s thoughts progresses, drawing kind of a map of your steps.

So what I really wanted to say is that if you find a good metaphor you can somehow visually express, it could turn out to be a really powerful trick to keep your audience hooked no matter if they like your style or not.

Gleam and sheen on Thoughtbot website menu

thoughtbot-sleek-tech-inspiring-navigation-menu

Though we’re not big fans of overtly tech webdesign and we prefer warmer, more organic solutions, we loved the cleanliness and the powerful, warm glow that this website’s menu radiates.

Another nice design snippet we found on Thoughbot’s website is the brownish, rounded contact us button which really stands out, partly for its effective color contrast and partly for its unusual position.

A not so stupid grid

stupid-3-columns-grid-inspirational

Stupid Studio is a creative motion design and online agency based in Denmark which is specialised in motion graphics and, contrary to its name, delivers very brilliant stuff.

This website is quite a living example of how a simple three colums grid, evenly repeated in each sections, can effectivly improve your website’s consistency, abating the navigation stress: in fact not having to mentally reassess the navigation and graphic structure on every single page speeds up user’s navigation and increase his/her satisfaction.

Big yellow tabbed navigation from Duplos.org

duplos-inspiring-tab-menu-webdesign

Yellow is a powerful, cheerful colour but rarely used in webdesign because, I suppose, of its inner lack of contrast. You can find it quite likely associated with black or, as in this case with cyan, and it’s often used in design-related websites.

This time, we want to show you this nice, huge yellow tabbed navigation, with the selected item enormously protruding.

A creative drop down menu from emPivot

empivot-inspiring-webdesign-dropdown-menu

Quite a classic but nonetheless we loved this fresh, neat drop down menu, designed in a lovely palette with a clear, simple approach.

This web design sample comes from emPivot‘s website:

emPivot.com is the first online network to bring together the wide range of user generated and premium video content related to the environment. As a result, emPivot is a powerful aggregator of green-related media content for anyone and everyone to access online.

Slightly rounded tabs navigation

weightshift-inspiring-tab-menu-webdesign

Here you are a classy, finely shaped tab menu from Weightshift, a small studio based in San Francisco.

Though we loved this web site on the whole (the typography is great and, generally, you can catch a meticulous attention behind every detail), we liked the most the quite vertically compressed menu (since the so-called web 2.0, we usually can spot only gargantuan tabs navigation) with small rounded corner, polished by graceful overlapping circles and subdued mouse over effects.

Clever fonts navigation by sliding glyphs

myfonts-font-slider-navigation

Our attention was grabbed by a clever fonts comparison system in MyFonts‘ website: using a little sliding widget in the left sidebar, you can browse through thousands items, comparing the A glyph of available typefaces. You can get a more detailed preview of your type by simply hovering over the letter with your mouse.

Fake breadcrumbs in Hootsuite Blog

hootsuite-blog-breadcrumbs-menu

Could you tell the difference between the breadcrumbs and the navigation? When both are displayed it’s quite obvious, but in other pages (look at here) it’s not.

Though it might turn out to be a nice graphic expedient, I think it could be risky to disguise one user interface pattern (navigation menu) as another. (breadcrumbs menu). Don’t you agree?

Light, minimal, simple HTML menu

inspiring-minimal-html-menu

Minimalist web design it’s one of our (many) recurrent thoughts when reviewing websites. It’s really tough to come to inventive, not bare-looking solutions when you strip a website of every graphics assests and you’re not allowed to play any of the usual webdesign tricks. So we really loved this simple HTML menu, a nested list actually, with only a red dot left to grab user’s attention and to mark main navigation categories.

A creative vertical menu by Ommwriter

ommwriter-creative-cirular-menu-mouseover

Ommwriter is

a simple text processor that firmly believes in making writing a pleasure once again, vindicating the close relationship between writer and paper. The more intimate the relation, the smoother the flow of inspiration.

We loved the simplicity of its vertical menu made with rounded items overlapping and the nice simple icons that are displayed on mouse over.

PS: Though Ommwriter is currently in beta (for Mac users, at least), it’s really worth trying: writing on computer we’ll be a whole new experience for everyone.

Subnormality subversive menu and pagination

subnormality-inspiring-website-menu-and-pagination

In the so-called normal web world a navigation menu is always supposed to precede pagination, but what normally rules in webdesign, doesn’t minimally affect Subnormality strip website.

Hope you’ll enjoy these comics with too many words and a subversive menu in it: have an inspirational reading!

A curious line-height typografic treatment from Hitotoki

hitotoki-googlemaps-mashup-typographical-treatment

According to the website’s About page, Hitotoki

is a Japanese noun comprised of two components: hito or “one” and toki or “time,” and is often translated as “a moment.” In common usage, it can be used to describe any brief, singular stretch of time (if we share a meal someday, you can call that a hitotoki).

To put it in an easy way, Hitotoki is a narrative project I’ve found via Konigi, that collects novels related, a way or another, to a specific location. While Konigi points out the use of a Google map mash-up as navigation system (hovering over a thumb make the map move and vice versa), I was instead fascinated by this websites’s typographic treatment.

In fact, using Hoefler text with a strict line-height space make home page titles slighlty overlapping in a haphazard, designless way that perfectly fits in the trembling, hand-drawn layout frame.

So if you’re looking for a fresh, organic typographic treatment for your website design, maybe you should really give a glance at Hitotoki.

A visually impacting menu from Life

life-visual-impact-menu

If you’re looking for a navigation menu that does have the power of making a strong, immediate impression on your users, you can use Life magazine‘s menu as a good starting point.

Menu’s buttons are displayed as big tabs framing a nice thumb (for sure at Life they’re not short on good photos, so finding a good one should’have been a problem), that is illustrative to the matching section’s overall essence. When you click on a tab, it kind of melts down joining a thin line that works as a divider between contents and navigation.

A little graphic treat: Life’s logo slighlty and very slowly changes color, covering a large spectral range.

Yahoo’s interactive menu

Yahoo's inspirational interactive menu

On my previous job, when I was working for a big web portal, we got used to look up to Yahoo’s interaction design as one of the most insightful example of dealing with users’ experience on a large scale audience.

When you’re not able to relate to a definite target (ok, I too hate this word, any suggestions for another one?) which rules are you supposed to follow when building up your website’s user experience? What language would you speak, when you’re not allowed to see who you’re talking at?

So apart from relying on cognitive science models (which by the way were quite spitefully greeted at the time), specific case histories, well-established web design principles, we scouted out interaction models by checking out what the Big Boys already did.

So I was enthralled and taken back to that time when, looking for some interesting stuff to showcase on Web & Patterns, I’ve found out Yahoo’s new navigation menu.

Basically it’s an evolution of the previous one: instead of having all the categories arranged to the left in a navigation list, you have your favourites online services and social (such as web mail, Facebook, Flickr) mixed up with some Yahoo’s categories (I suspect this being due to some marketing mandate).

When you hover with your mouse over the menu links a huge tab appears, previewing the matching content. So what originally was a navigation menu turns into a powerful tool to quickly scan your web life. Some tabs (e.g. Weather, Movie) are automatically filled in with local informations, according to the ZIP code you provided while creating your Yahoo’s account.

Last but not leat, as in the previous version, you can also customize your toolbar menu adding and deleting items in a quite intuitive way.

Obviously, it all works only if you’re logged in.

Mikey Burton’s drop down menu

mikey-burton-inspirational-menu.jpg

I was firstly drawn to Mikey Burton‘s portfolio, attracted by his beautiful illustrations and identity works. Then I’ve started admiring the unparalleled simplicity of his portfolio’s navigation menu: a simple list of gray links, with an open/close ajax effect, whose aim is just helping users to browse in the most efficient way.

This website’s menu certainly is not a scene stealer and it works well only if displayed with some strong graphic assets (otherwise it will look miserable, I presume), but the pros are:

  • easy to build and to use;
  • basically it’s html text so it is also light on code and kbs;
  • it keeps track of the visited items which are displayed as stroked links.

Oh joy’s floreal menu

ohjoy-vectorial-floreal-menu

Since I’m big for vectorial shapes I couldn’t help mentioning oh joy’s floreal menu. Flowers and herbs silhouettes are quite realistic drawn without any excessive flourish, keeping the website’s greenery imaginary far from beeing redundant or excessively ornamental.

For further inspirational suggestions, I recommend that you have a look at Oh Joy’s Shop and Blog: you can find more samples of beautiful patterns, identity case studies and a vast collection of notebooks stunningly decorated.

Stuff’s menu and breadcrumbs

Stuff's navigation menu

When you combine two differents web design patterns you can get either a mess or a really interesting new element: in this case, Stuff‘s menu gets a compact and solid appearence, having shifted the properties pertaining to breadcrumbs trail to the horizontal menu.

As you can see, home page’s rainbowy menu (at the top of the screenshot) introduces the color code that constitutes the basics of this website’s information architecture. When you’re in a main section (at the bottom of the screenshot), the menu splits up into two rows: the first one works as breadcrumbs/page title, the second one displays a list of available subsections.

For those who don’t already know it, Stuff is

New Zealand’s award winning news and information website, bringing together the vast resources of Fairfax New Zealand Ltd several hundred journalists and photographers around the country to provide a single online ‘publication’.

Which briefly means: a fresh news portal that provides informations in a kick-ass package.

I just made love the 2.0 way

i just made love

When we first saw it, our jaws fell to the floor. Freezed, we’ve been keeping on staring at the screen, mesmerized by what our doubtful eyes were seeing.

Then we burst out laughing.

Then we started worrying about how one could possibly categorize this crazy web 2.0 app.

The quirky idea IJML (that’s our short for I Just Made Love website) grounds on, is simply showing a world map of places where people just made love. So far, so nuts.

Then when it came to put this brave concept into graphics, we think a real genius among us had been hired: each single layout’s element is so grandly kinky, so filled with sexual innuendos, so weirdly conceived that the overall result, far from being horryfying, comes off fascinating (of course in a twisted way).

There’s a glossy logo (oh so 2006!) with two rabbits and obviously they’re doing it. There’s a chromatic code used rahter consistently: guys are blue and gals are pinky. Hanged on the page’s upper right corner there’s a lingerie language menu. And this could’ve been for us far enough.

Now comes the x-rated-part. A Google map (since we’re talking of a 2.0 app we can’t help having a Google map involved) with two kind of pins:

  • #1: the rabbit-shaped pin points out the total amount of sex in a given zone (useful in case of a trip to plan, isn’t it?). You might want have more information: so you can click it and you’ll get the map zoomed-in.
  • #2: the googl-ish pin flags where the sexual intercourse took place; the blue-and-pink pin stands for straight sex, while obviously the one in a single color means gay sex. You might also want more informations about what happened (you dirty snooper!): click it and will be displayed a baloon which gives you further details about this intercourse.
    Which love-positions were taken? Was it the first time? Did they have safe sex? Any comments about it? Such intriguing and intimate details are very nicely exposed in a funny, not grossy, iconic way: and, I have to say, the kamasutra icons are really something.

So, if you’re not entertained by this silly kind of websites as much as we are, or if you didn’t even giggle about it, the same we hope you’ll have the chance to hit IJML‘s sidebar button many, many times.