A Showcase of Websites with Unusual Navigation

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.

A Showcase of Websites with Unusual Navigation

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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

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

 

8. El Monstruo

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - Island Creek Oyster Bar
This restaurant uses a minimalistic design to let visitors easily navigate around the page.

 

16. Yodabaz

instantShift - 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

instantShift - 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

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

 

19. V Dezign Studio

instantShift - 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

instantShift - 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

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

 

22. My Own Corks

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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é

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

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

 

44. Andy Rutledge

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

instantShift - 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

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

 

50. Six ThreeNine

instantShift - 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.

Like it? Share it.

5 Comments

  1. Hey Claire..
    Brilliant showcase, thanks for sharing!!
    Liked the Action Film & Colors of marketing most

  2. Great collection of unusual navigation. Thanks for sharing.

  3. this is creative!

  4. #43 shouldn’t be on this list IMO. Anyone with a basic knowledge of html can make that in 5mins…

  5. Wow #38 looks amazing!

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>