Navigation is probably the most important usability aspect of your website, so first and foremost it has to be intuitive and easy to use. But that doesn’t mean that there’s no scope for creativity; in fact, there’s a surprising amount of leeway for the look of navigational elements. As long as they’re obvious in placement and simple to use, you’ll find that there’s plenty of room to play around. Just take a look at these examples.
Small Changes Can Make a Big Impact
Even subtle additions can make a navigation system stand out from the crowd.
1. Leading Art
Leading Art’s website has at its base a fairly traditional drop-down list of links. But the integration with the background image gives off a more delicate and unique impression.
Julia Khusainova's design portfolio displays icons that have to be scrolled over for text to pop up. This could have been a problem if there were any more icons to go through, but with just a handful, it adds interest without being annoying.
Ferocious Quarterly added dimensionality and styling to the typography to give the navigation a fresh look.
4. Ashes & Milk
Ashes & Milk integrates the links into the design as a whole for a subtly seamless approach.
You Can Hide Navigation, or You Can Feature It
Some sites break from the norm by making the navigation unobtrusive, and allowing other elements on the page to really shine. Others go in the opposite direction, and let the navigation swallow up the page entirely.
Stephen Vernon Clarke's photography portfolio shows the power of the first type of treatment; the photos rightly take center stage, and the navigation is neatly reduced to a single shape symbols for links.
Another example can be seen in the Ommegang, a NY brewery, website where the primary navigation is hidden, allowing the secondary navigation to take over the page.
The secondary approach can also be seen in Heart Shaped Work's homepage, which relies entirely on bold, simple navigational elements and some very basic rollover effects to draw the user in.
8. Chris Wang
Chris Wang's portfolio shows a less extreme example, with icons that break up the text.
Scroll Through a Site
An interesting style that has been reworked a few times is the scrolling navigation, where the entire website functions as one long page.
9. Soleil Noir
Soleil Noir has incredible visuals and keeps you entertained with fun animations. However, it takes some time to load and one might argue that the navigation is too vague. The arrow and filled-in dot show the viewer where they are on the page, but there are no titles to explain where they are in the content. The site functions as a very sleek and appealing advertisement, but it wouldn’t be ideal for anything more complex.
10. We Are Manic
A more fleshed-out example of this navigational style can be found at We Are Manic. The same basic concept is clarified by displaying titles on the slide bar, as well as shortcut links on top of the page. The site might be less visually arresting, but it works well for the level of information that needs to be conveyed.
11. These Are Things
These Are Things has a great site that leaves the primary navigation alone, but makes the most out of secondary elements.
12. Rosso Carmilla
Rosso Carmilla's site takes the scrolling horizontally, instead of vertically.
Slideshows Add Interactivity
Another great way to add creativity to your site navigation is to utilize full-screen slideshows. Using either stock photos or your own portfolio pieces, you can offer a simple but still dramatic effect.
13. Gigantic Squid
Take for example Gigantic Squid’s site. The photos are not only impressive, but they also allow the user to immediately experience the company’s work.
14. Blind Barber
Playing off of this concept, Blind Barber highlights three sections of their site with a beautiful full-screen slider.
15. Skull Candy
Skull Candy expands upon this slide-show style by merging it with parallax scrolling. On the right hand side of the site, the user is offered thumbnails of the site’s “pages,” which they can either click on to navigate, or just scroll to the perspective pages.