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.
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.
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.
High fashion is about standing out and the navigation on this page by Diesel is definitely unusual. The text frames the models face.
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.
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.
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.
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.
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.
This restaurant uses a minimalistic design to let visitors easily navigate around the page.
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’.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Navigation is curved around the main text on this page. Hovering over one of the squares will change the text yellow, highlighting it.
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.
A massive arrow does help to navigate visitors around this site! Using a single page design, the only way is down.
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.
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.