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.

A Logo for Human Rights


The Human Rights Logo Challenge is a global contest whose aim is

to create a human rights logo “by people for people”, thus making a contribution towards the global spread and implementation of human rights with the support of a large public.

The contributions and their provenance are nicely displayed on a Google map.
You can submit your logo proposal until July 31st, 2011.

Wired Mind navigation


An interesting example of concept map showing the relationships among Wired Magazine contents.

In other words:

The Wired mind is a visualisation tool that provides another way to browse the content on Wired.co.uk. It’s been created in partnership with Microsoft’s Internet Explorer 9 browser to show off some of the great things you can do with a really fast standards-based browser. You can explore the Wired Mind by searching for tags, or by seeing the most popular tags on a particular date.

Even though it’s optimised for IE9, it works on other browsers (but very slowly) as well.

How to organize your header’s links


According to the Gestalt psychology’s Law of proximity, things that are near to each other either physycally (in this case visually) or chronologically, are likely to be perceived as related.
So, if your header accomodates different kinds of link (e.g: some for the website navigations and some for the user’s account management) it’s a good and simple UX practice organizing them unequivocally in separated layout areas.
In this case, on the left website’s navigation and on the opposite site the e-commerce cart tools.

PS This post was just a lame excuse to show covertly some cute puppies.

A scrolling background working as breadcrumb trail


We’ve already showcased a few examples of one-page website design but what makes this one memorable is the little rectangular hole “cut” in the upper left corner, exposing the scrolling background and working as breadcrumb trail:
when you click on the menu, the page scrolls vertically and when it stops, the title section can be seen through this tiny window .

Coolhunting: two navigation tricks


I was casually browsing on Coolhunting when I noticed two simple navigation features I really liked.

A collapse and expanding option: huge headlines and/or long summaries are a steady trend in nowadays websites (or is this all simply a plot to force us into buying bigger screen?) so it’s good having a feature that let you skim easily through the page by collapsing unrequired data.

A nicely shaped tag cloud: nothing really unusual, just a simple list of tags, neatly disposed into “little bricks”. Instead of the usual more-for-the-SEO-than-the-user heap of links, this tag cloud really offers an alternative to the main navigation.