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.

Leading Art


2. Julia Khusainova

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.

Julia Khusainova


3. Ferocious Quarterly

Ferocious Quarterly added dimensionality and styling to the typography to give the navigation a fresh look.

Ferocious Quarterly


4. Ashes & Milk

Ashes & Milk integrates the links into the design as a whole for a subtly seamless approach.

Ashes & Milk


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.


5. Stephen Vernon Clarke

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.

Stephen Vernon Clarke


6. Ommegang

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.



7. Heart Shaped Work

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.

Heart Shaped Work


8. Chris Wang

Chris Wang's portfolio shows a less extreme example, with icons that break up the text.

Chris Wang


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.

Soleil Noir


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.

We Are Manic


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.

These Are Things


12. Rosso Carmilla

Rosso Carmilla's site takes the scrolling horizontally, instead of vertically.

Rosso Carmilla


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.

Gigantic Squid


14. Blind Barber

Playing off of this concept, Blind Barber highlights three sections of their site with a beautiful full-screen slider.

Blind Barber


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.

Skull Candy


Guest Writer Bio

Luke Clum is an avid outdoorsman, designer and web developer from Seattle. Talk with him on Twitter @lukeclum.