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.
Cooper Design Studio
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.
Janette D. Council Portfolio Design
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.
Heart Shaped Work Portfolio
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.
Work Life Balance Center Nav Menu
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.
Grip Limited
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.
Yuna Kim portfolio pieces
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.
BIG KID Navigation portfolio
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!
Custom Web Design Techniques for Unusual Navigation Custom Web Design Techniques for Unusual Navigation Reviewed by BloggerSri on 11:03 PM Rating: 5

19 comments:

Anonymous said...

Custom website design company makes the best representation of brand, company, or business, and comes with the added advantage that the website can be molded to include the latest technologies and functionalities such as newsletters and blogs, banners, shopping carts, video testimonials, Facebook, Twitter, Google +1 and other social media arms.


Web Designers Bangalore

InnomaxMediaLLP said...

Great web design techniques information for the people who love to read. Surely it will interest many to read.
Web Designer

Guaranteed SEO India said...

I just flattered on your blog as it has great content about web design techniques.


web development company from india

web design company said...

Customizing the conversion pages to simplify the conversion process and make them more user friendly help in enhancing the conversion percentage greatly.Website Developer Bangalore

Anonymous said...

All webmaster new features are helping us to give better to our clients.
SEO Company Bangalore | SEO Service Bangalore

Anonymous said...

All webmaster new features are helping us to give better to our clients.
SEO Company Bangalore | SEO Service Bangalore

Zinavo Tech said...

A custom website design must have proper routing as it makes it easier for the browser to utilize it. Emphasize on having a consistent web design for the right look and feel.Web Design Services

Bangaloreweb guru said...

A good website design is very important for any business. It is advised to not design heavy sites. Now a days website design growth is extreme level but how effective that website.
Website Development Companies in Bangalore | Website Designing Companies in Bangalore

SEO and Digital said...

Open source CMS is extremely cost effective. And with access to the code, Ecommerce website offers to customise the open source CMS to ensure website looks and functions in line.


Web Designing Companies Bangalore | Website Designing Company Bangalore

Rahul said...

Nice looking sites.helpful for me.

friendship day quotes
Happy new year 2017 wishes
Happy Birthday Quotes
Merry christmas
karma quotes
Awesome Whatsapp Status

Asif Ali said...

origin of halloween
halloween costumes

Unknown said...

http://w3designing.blogspot.fr/2011/06/custom-web-design-techniques-for.html

Unknown said...

Web Design Bangalore To learn the basics of programming, I’d recommend taking an online course. There are tons of great programs to choose from out there..

Unknown said...


Have Lovely and Beautiful Salwar Suit And Many More…
We Have Some For You In Your Budget For more…
Plz visit:- Designer Suit

Unknown said...


Have Lovely and Beautiful Salwar Suit And Many More…
We Have Some For You In Your Budget For more…
Plz visit:- Designer Suit

Unknown said...

You can buy from our large and diverse collection of salwar kameez, party wear suits, Bollywood collection, cotton Kurtis, Anarkali suits, Bollywood saree and many other products.....
We Have Some For You In Your Budget For more…
Plz visit:- Salwar Kameez

Akshar Fashion said...

Silk is the shiniest of all fabrics and widely used in making traditional Indian sarees, which are breathtakingly stunning and first sight love of every woman! You can very conveniently find a wide variety of attractive designer sarees belonging to various price ranges that are friendly to your pockets. So, go on to place your online order now!
Please visit Silk Sarees

Zara Porter said...

You may think that creating content has nothing great about it as it’s very easy to do so. But, do you know that there is so much content that doesn’t seem to achieve the desired targets? The reason behind this is not spending enough time on planning, and not being able to identify the right kind of content that can be effective. You could take help from certain resources to aid you in creating the right kind of content.
Best Digital Marketing Company in Bangalore | SEO Agency in Bangalore

Anonymous said...
This comment has been removed by the author.
Powered by Blogger.