An interesting question: shaping your website menu as a navigation tree makes your website’s navigation clearer and more understandable?
An interesting question: shaping your website menu as a navigation tree makes your website’s navigation clearer and more understandable?
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.
A beautiful home page made only by infographics, that work as well as navigation system.
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.
A slightly embossed alphabetical menu lets you browse this website displaying tons of free fonts to download.
Pagination and main navigation links are both displayed on a beveled toolbar, duplicated at the bottom page: I think it’s really clever how Eico’s design have unified in one place back/next button, category, year, name of the project and link back to the portfolio’s home page.
A nice example of minimalist cascading menu from Kemado Records, an indipendent American record label based in New York City.
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.
Here you are a nice design snip I’ve found on Guinness website: a sleek black tab menu with many filter options clearly organized into two rows.
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.
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.
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.
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.
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.
When you click on the huge button on the top of Why Every One Loves Tumblr page, you’ll see a big check list menu appearing with four differente choices.
This is a peculiar way to navigate between section that I’ve seen only here but I think that may possibly turn out useful in many other situations.
A nice idea for Clearleft, a web agency specialized in user centered design: a web site menu made of numbered cards that makes a not so subtle suggestions to methods applied in Information Architecture.
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.
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?
Using different colours may lead to clashing, disorienting graphic outcomes. But I think this is not the case and we quite appreciated A S Hospitality expanding 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 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.
Artel is a Russian design bureau with a great logos and identities portfolio and a really nice navigation system.
We loved the tab menu because of the rounded cut just above the logo and the way the single tab displays a punch card, once you click on it.
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!
According to the website’s About page, Hitotoki
is a Japanese noun comprised of two components:or “one” and 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.
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.
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.
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:
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.
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.
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:
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.