Custom Web Design Techniques for Unusual Navigation

Page navigation is arguably the most important aspect to any properly constructed website. How easily your visitors can travel from page-to-page will affect the overall emotion and user interface of your website.
Great web designers always keep a surprise around every corner, and navigation menus can feature this big time. From fullpage to corner links I’ve shared a few great examples of unusual website navigation. Hopefully these ideas can incite a barrage of creativity within yourself and any future projects.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Some Fancy Animations

Back when Adobe (Macromedia) Flash ruled the web it wasn’t uncommon to see strange navigation animations. But these fell to the wayside as HTML/XHTML standards started to develop in the latter 2000s. Since then we’ve seen dramatically increasing support for HTML5 and CSS3 effects, as well as full browser support for JavaScript and more importantly jQuery.
The guys over at jQuery have made custom web animation child’s play. Anybody who understands the basics of scripting can model a great website around the jQuery library and come out with resoundingly positive feedback. Below I’ve included a screen capture of Cooper Design, which offers a brilliant surprise for their navigation.

As you click throughout the top links you’ll be sent flying horizontally about the page through jQuery effect. Alternatively this will open up a sub-menu with categories based upon your heading page. As you choose between these you’ll notice page effects scrolling vertically, too!
Their site is a puzzle board of animations providing an amazing demonstration of the power in web design today. Alternatively you can scroll vertically as normal and transition between pages left/right by clicking on the columns side-by-side.
Another site Janette D. Council boasts a unique navigation which rearranges her portfolio items based on query data. Upon default you’ll be viewing all projects, but you may target print, logo, and illustration work individually.

Additionally her images and site information all open into the same page. This means if you’re running full JavaScript support you never need to reload your browser! Granted further inspection of her code shows there are no alternative pages for Google to crawl. This isn’t totally a bad thing, since all of the page information is strictly held within one file!

Full Page Takeover

When you think of unusual page navigation these next examples must take home the trophy. heartshapedwork is apparently a full portfolio running via WordPress. Upon entering their home page you’ll notice large horizontal bars cascading down the page. These all display great hover effects and lead to external articles and portfolio shots.

You’ll notice each bar has the project title in bold lettering with subtext containing the type of work developed. This includes websites, illustrations, mobile, and more. Their portfolio is exhaustive and actually pretty fun to flip through.
Another great example is the Work Life Balance Center site. The center was founded in 1991 and has seen a few updates to their website in that time. Currently running on Flash, their entire navigation functions by magnifying the currently focused navigation object.

So as you browse through you’ll notice large bars focusing on individual pages and sub-pages with links included. These links don’t go anywhere in particular, just drag you through the Flash layout. Interestingly this effect was seen earlier on Cooper’s website, all constructed with jQuery.
Grip Limited is possibly another epitome of fullscreen page navigation. Upon loading the site you’ll notice bars unfolding to display new information and page links. You’re able to click through the headers atop each bar to collapse the content and display more screen room.

Perhaps not the best use of navigation, although it is absolutely unique. At the very top there’s a bar titled Open Menu which drops even more links in front of your face. These include core company pages and case study links.

Obscure Designs

When you really start to examine the web many portfolios stand out as just plain arcane. Yuna Kim has a personal portfolio which truly takes on a life of its own. She has built the entire navigation through jQuery and CSS positioning.
For each portfolio item she has denoted a symbol to represent the project work. Square for digital work, Triangle for branding and Circle for print. As you scroll down you’ll notice each project link is a colorful shape marking her work.

Additionally her heading navigation drops down as you move throughout top links. The three options hello, Tweets, and contacts will display different content based on where you are. To be more specific, tweets and contacts will drop the same information: her latest update on Twitter along with e-mail and phone contact. hello will offer a brief introduction to Yuna Kim and her website. Pretty cool stuff!
Big Kid is a blog running WordPress which displays individual blocks of content. You can check out their site for yourself to see what I mean. The navigation isn’t all to uncommon, although quite unusual for a blog layout. Much of all the posts are portfolio updates which you can sort through.

What I really like is the individuality implied with their layout. It’s almost the most unique usage of block patterns I’ve ever seen on the web. From a user experience perspective it’s very easy to scroll through everything and sort project work based on personal interests. It’s also a very light website, quick to load in many of the browsers I tried (including Internet Explorer and Safari for Windows).

Site Gallery

Since there are so many weird and unusual navigation styles to cover, I’ve put together a small gallery of my personal favorites. These websites feature strange styles which I’ve never run into anywhere else on the web.
The popularity of awkward website design has risen dramatically in the past few years. Strange and unusual page layouts coupled with consideration for proper user interface have spurred some great projects. If you know of similar designs please offer your ideas in the discussion section below.

Amore

Amore boasts one colorful background. Quick to load, the page navigation is actually featured directly at the bottom-center alignment. As you move from each block the area expands to include informational text about the page. All their information opens in a lightbox window, saving the trouble of reloading each page view.

Organic Grid

Michael McDonald is the creator of Organic Grid, all built over Flash. The application takes a while to load on slower connections but I think you’ll really appreciate his style of design. Each navigation area appears as a horizontal bar which brings you to a full-page portfolio display. There is a lot of work to feature here and the enhanced visuals appeal brilliantly to UX design.

TinyTeam

What I like most about TinyTeam is their creativity in building the site. There are no extra graphics or flashy illustrations, and their solid blue backdrop is wonderful to limit distractions. Another site built over Flash which demonstrates just how unique a page menu can be. Clicking on the center box will open a new set of options for browsing their company portfolio.

LoveBento

At first appearance LoveBento is not easy on the eyes. There is a lot of content to consume and no direct navigation. Along the top right you’ll find drop-down panels, but the real items are located along the left side. Beneath the company logo you’ll find a unique display of images used to represent link hovers. Additionally there are numbered links at the bottom right for maneuvering between pages.

Lucuma

Here we’ve found another prosperous usage of horizontal scrolling. Their effects are built under the jQuery library. Lucuma also has links underneath their core content area offering XHTML and CSS validation. When designing portfolios for the web here they really mean business!

Andreas Smetana

Andreas Photography showcase truly brings the word unusual to the forefront. Once the page is fully loaded you’ll be given a notification explaining how to traverse their thumbnails gallery. By using either your mouse scroll wheel or arrow keys you can maneuver between the many categories of photographs. In the bottom-left hand corner is another small set of menu links which open on the side of whatever page you’re at. Pretty neat!

cypher13 Design Studio

Here we come to another design studio with a corresponding portfolio set in a black-and-white theme. The layout is built with HTML/CSS and uses jQuery animation effects to transition between portfolio items. The great thing here is how elegant each motion becomes. You feel gracefully offered a guide as you browse through their portfolio. It’s possible to sort items based on client and category, or take advantage of their search bar which displays results in real-time.

Studio Output

Studio Output brings a new feature into their portfolio display. The home page boasts a beautiful collage of project images which can be clicked to bring up more information in a lightbox effect. They offer lots and lots of example images and even display related projects when possible. Here I’ve clipped a piece from their portfolio of some Spongebob artwork and graphics.

Duane King

The portfolio of Duane King is another excellent example of keyboard support. Once loaded on the home page you may scroll between segments left and right with your arrow keys. You may click on a project to expand the image and display a bit more information. This is also another example where portfolio items don’t load onto a new page, really taking advantage of the jQuery library and featured plugins.

Sideshow Press

What I really like about Sideshow Press is their use of a hash mark(#) between pages. This indicates to search engines that all new content is not loaded onto a new page, but dynamically controlled through JavaScript. In this case we’re looking at a Flash application, but this is why the technique works so well. The page navigation offers some colorful animation effects on hover state. Each page transition displays a sliding effect as well, highly unique and composed perfectly.

Conclusion

I hope you’ve enjoyed these examples of unusual navigation techniques and that they’ve inspired you to create your own unique experiments.
If you know of any crazy navigation menus that we missed, leave a comment with a link below so we can check it out!