One of the most important parts of web design is the navigation bar. A good navigational system on the website is essential to direct visitors to what they need. People like to be able to find what they want quickly and easily.

Conventional website design usually displays a navigation bar in the left hand side of the page or at the top of the page. Designers usually use plain text, as to make it clearly visible and not to distract too much from the main site. It can be risky to change around the navigation as you don’t want to confuse visitors and lose out on potential customers and sales.

However, the novelty of a different navigational system could lead to a lower bounce rate and more time spent on your site. As long as your bear in mind functionality and usability into your design and think about what visitors to your site will want then it can work.

Check out some of the examples below of unusual navigation. Which ones do you think work?

1. We Are Eli

We Are Eli is an image processing company based in Denmark. Their images are showcased on their landing pageand by scrolling through you can change where the text navigation is displayed.

2. Etch Apps

Although this site for an app design agency has a standard navigation bar at the top, clicking each picture in the main web layout will take you to a different part of the site.

3. AndreasAskleiberg

Photographer Andreasuses many different unusual elements in the design of his web page to make it unique. The navigation bar is placed in the middle of the page and clicking on it will turn the relevant black and white image into color.

4. Minimal Monkey

You can always rely on a developer’s portfolio site to produce some clever navigation. Hovering over a particular column will darken the others,making it easier to focus on what is being displayed.

5. Diesel Black Gold

High fashion is about standing out and the navigation on this page by Diesel is definitely unusual. The text frames the models face.

6. Hommard

Men’sfashion site Hommard gives visitors the option of using the navigation on the side of the page or using the images to go to the corresponding item of clothing.

7. Carolina Herrera

For this event, unusual navigation was used to keep the event feel fresh and current.

8. El Monstruo

ING Bank and Unicef teamed together to create the site. As the video on the landing page is the focus, the navigation bar is placed at the bottom of the screen so not to distract from the main content.

9. Silktricky

This digital agency uses bright colors and a creative layout to inject some personality into their website. The navigation makes it easy to scroll through their campaigns and previous work.

10. Carbon Studio

This may look simplistic at first but this design by creative agency Carbon Studio is anything but. Dropping an icon in the middle circle will take you to the relevant page.

11. Jacqui Co

The design of this site is like a treasure map, and is fun to navigate. You can either use your keyboard or mouse to navigate around, and look at the process creating the perfect cake.

12. RVLT

This quirky fashion company’s layout and navigation changes every time you refresh the page. It keeps the design and products fresh which appeals to their target market.

13. Olivier Staub

Olivier’s site is designed to showcase his work, which is why the navigation is kept minimal. The navigation placed in the middle of the page is easy to see but does not distract from the stunning background.

14. Acko

This portfolio gives the impression of being in 3D, and as you navigate around the page some very cool effects appear. A truly creative design by Steven Wittens.

15. Island Creek Oyster Bar

This restaurant uses a minimalistic design to let visitors easily navigate around the page.

16. Yodabaz

In web design, navigation is often a small part of the design. But this designer’s portfolio puts it right it the fore front, creating a 3D effect.

17. Oz Consignments

Using a woman’s closet as the basis of this design, visitors can navigate through the page by clicking on photo frames displayed on the ‘wall’.

18. Modernline

This bathroom and kitchen design company use a sleek navigational system to reflect the products that they are promoting.

19. V Dezign Studio

This portfolio site uses the right hand of the screen as navigation which is not commonly seen. Portfolios are designed to help someone stand out from the competition and using this tactic definitely helps.

20. colored Lines

colored lines take inspiration from their name to help in their web design. Using the right hand side of the screen for navigation is a risk but pays off here.

21. Blind Alterations

An interesting layout will immediately capture the visitors attention and the images continually change to keep them interested.

22. My Own Corks

This is a new site so there are not many layers to the design yet but it certainly makes an impression. Using different colors allows the navigational elements to be seen easily.

23. Action Film

This film company gives visitors an easy way of watching their previous work. It is easy to scroll through the site and play any video.

24. colors of Marketing

This creative wheel design takes visitors to the page they want by dragging the icon into the middle. Whilst browsing other pages the wheel is placed at the top as not to distract from the other content.

25. Form Follows Function

Form Follows Function is designed to show you examples of creative interactive work, which is why the landing page is also interactive. Slide the bar to go to a certain page.

26. Cedric Vella

A minimalistic, single page design from this Malta-based video grapher. Clicking on one of the options displayed centrally will take you further down the page so you don’t have to scroll all the way through.

27. Macro Grafiks

This stock photography site uses a different navigational path to direct visitors to their collection. The call to action is displayed prominently while other navigational elements are placed at the bottom of the page.

28. Geeza

A sleek look from this design agency gives visitors a glimpse of the work they can provide you. The navigation bar is placed on the right side of the screen adding to the minimalist feel to the site.

29. Duirwaigh

This creative husband and wife team use a large circus-themed banner to create a stunning landing page. This means the navigational bar is placed lower down the page as not to distract.

30. Darvan

This custom tool maker agency were bound to create something unusual for their website. Drag your mouse to the right to see different columns appear.

31. Avant Gand

This minimalistic design puts the focus solely on navigation. Click on the text to either be taken to the photographers portfolio or to their studio.

32. Guillermo Lasso

A campaign site for an Ecuadorian politician uses a large photographic background as the main focus of his site. Navigation is placed at the bottom of the screen in colorful bars.

33. Ralph Van Rentergem

A cute site up set by a web designer to celebrate the birth of his son, Ralph. A single page design, the navigation is placed randomly.

34. Adrian Le Bas

Clicking on the power button will take you through to this graphic designer’s portfolio. The minimalist design is key in making visitors want to find out more about him.

35. Divups

As the landing page is so long on this site, the navigation displayed on the right allows you to skip to different sections. Numbered for convenience.

36. Lena Sanz

This photographer’s portfolio showcases her skills by allowing you to move through sections of the site easily. Clicking on a different column will highlight a particular photo.

37. CilantraCafé

This café chain shies away from the usual corporate coffee chain philosophy and this is reflected in its design. Navigational circles are placed randomly, but it still makes it easy to find what you need.

38. White PandaMedia

Another design agency on the list, White Panda Media focuses on navigation to its social media profiles. To look through their previous work, you have to click at the top of the screen.

39. Deda

Creating an infographic for her resume, this web and graphic designer places her navigational bar on the right hand screen. This keeps the focus on her main page.

40. Streamline

Navigation is curved around the main text on this page. Hovering over one of the squares will change the text yellow, highlighting it.

41. Pieoneers

This app agency faces strong competition in their market which is why they have tried to make their landing page so unique. Floating around the main design on the page are their main services.

42. Sara White

Sara has chosen a unique layout to display her previous work. Hovering over one of the squares will highlight her work, displaying it in color.

43. Kyle Standing

Another unique approach for this designer’s portfolio. Daniele only uses hyperlinks to let visitors navigate around her site.

44. Andy Rutledge

Andy mainly uses a single page design for his portfolio. But to showcase his previous work links are placed to it above his head.

45. Blink Print

This printing company let you easily navigate round their site by using large, bold text to display the navigation bar prominently.

46. Cocoon Studio

Cocoon studio uses an excellent navigation system to showcase their photography work. The navigation makes it easy to find the different types of photography they produce.

47. Auckland Triennial

A massive arrow does help to navigate visitors around this site! Using a single page design, the only way is down.

48. Feyt

Fashion site, Feyt, showcases many of its products prominently on its landing page. This draws their visitors attention to products straight away and easily navigate around.

49. Sagmeisterwalsh

Giving a glimpse into life in this agency, Sagmeisterwatch displays its navigation on the ‘floor’ of the office.

50. Six ThreeNine

Using a diagonal navigation bar is definitely unusual but it works well in this site for a gym. Hovering over a bar will add some color to this grey page.