10 Examples Of Unusual Navigation

Posted by on Aug 25, 2013 in Useful Resources | 0 comments

I still remember the first time I came across a truly unique way of navigating a website. It was about ten years ago, and the page was for a small firm that dealt with web and graphic design. I had been hoping to hire them for my new blog, and it was the navigation page that sealed the deal for me.

Rather than actual buttons, there were a series of stars on the backdrop of a sky. Nothing else was on the page, but the largest stars (that were in actual star shape and in metallic black and blue) were actual buttons to take you to the chosen page. None of them had writing, but when you hovered over it the star would rapidly spin and the sky background would dissolve enough that you could see a large text banner beneath. This banner stated the page the star linked to.

This really impressed me. I had never seen anything so creatively done in a web design before, and since the name of the firm matched up with the design motif, it was even more incredible to me. That design has long since influenced me in how I look at layouts to this day.

While that particular site is no longer up, here are ten other examples of unusual navigation on websites.

1. Stephen Vernon Clarke

Stephen Vernon Clarke

This portfolio for Stephen Vernon Clarke, a photographer and film maker, has an awesome overall design. The main page is just a single photo of himself. When you click on an arrow at the side it begins to scroll through a slideshow that features some of his photography work. In the top right hand corner is a small circle icons. When you hover over them they say things like Blog, Films, About, ect.

2. Small Stone Recordings

Small Stone Recordings

US based record label Small Stone Recordings stuck with a theme that represented what they did for their navigation section. It shows an old fashioned car stereo. Different knobs go to different pages, such as information on their bands, tours press and contact information.

3. Yuna Kim

Yuna Kim

I love this site. It uses simple geometric shapes in flat colors to make up both the design and the navigation. Hovering over each one takes you to a portfolio page, which is related to the column it has been placed in. Then there are a small shape headers at the top, which drop down text menus.

4. Racket

Racket

Racket changes their layout all the time, so there is a chance you might see a different page by the time you read this than I am now. However, every time they change their layout it has a cool navigation format, even if it never stays consistent. Right now, everything is set on a single page that you scroll down. So there are no linked places for you to go to. As you move down the page you will find a contact form for quotes and questions, below that a slideshow that you control with side arrows to see former work, and below that is a collection of people they have worked for, and their social media profiles.

5. 75B

75B

This website is broken down into four sections that each take up a strip going down the page. These are for commissions, works, shop and about 75B. The final has a page for each of the staff members, showing a photo of them standing. Everything else is a glorified portfolio, but really well done. The whole website scrolls, so you only need the one page. Until you click on an icon and it takes you to its dedicated section, with a small version of the navigation options in the header.

6. Corporate Risk Watch

Corporate Risk Watch

Corporate risk mitigation…that might just be the most boring collection of words ever put together. The website for this company that specializes in it actualy manages to sell it, however. The site design is very dry, and the navigation is quite interesting alone. You have sections in the header, but hovering over them creates a highlighted menu with further options.

7. JKRowling.com

JKRowling.com

Author and creator of the Harry Potter franchise JK Rowling is an immediately recognizable name. For years she had provided rather interesting website designs and navigation, such as her old site that was both interactive and animated. Her newest site is even better. You can navigate the timeline using arrows, and filter out by project. So you have About JK, The Casual Vacancy and Harry Potter. Additional buttons give you news and events, works and a separate about page. Or use a slideshow, or the small links at the bottom of the page.

8. Tap Tap Tap

Tap Tap Tap

I go to this local sushi place that I love. They have a single page menu, and I swear it is exactly like this website design. Which makes sense, as that seems to be the look the creators were going for. It makes navigation interesting. Plus it gives me a craving for unagi and Philadelphia roll.

9. Agency Ten

Agency Ten

The homepage here is super simple with a photo and little more, other than the social media buttons at the corner. But when you click to view their milestones you are given a lot more. You get to view it all as a timeline that goes by year, with expanding pages when you click on any section. Very cool, and there is a slick overall look I enjoy.

10. Death & Hell

Death & Hell

Definitely not safe for work, this is the most disturbing site on the list. Enough that I am hesitant about including it. But this horror fiction website is probably possessing the most creative and truly bizarre navigation system I have ever seen. To the point where it is actually random, and you won’t know where it is you’re heading. The descriptions are certainly no help. Quick warning: this site is not for the faint of heart. However, it is a great example of just how strange you can get while still maintaining a working layout.

Have some examples of weird or cool navigation designs for websites? Let us know in the comments.

By Annie Wallace

Annie Wallace is the editor behind TekSocial, stay-at-home mom, writer and cat lover. She is also the editor in chief of TekSocial video channel.

Leave a Reply

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>

Experience ThemeMask

View a mask:

Get the masks now!


Theme runs on
Elegantthemes Chameleon