Navigation is arguably one of the most prominent and important aspect of any web design. It allows for a clear navigation and a way for visitors to explore deep into a website’s archives. The purpose of a navigation is to construct a concise and easy way for visitors to find their way around.
The use of tabs in web navigation has not only become very popular in recent years, but is a logical and intuitive way of representing where a user is on a website, where they have been, and where they can go.
This post is a showcase of creative and original uses of tabbed web navigation, topped off with some helpful tutorials for making your own tabs. Enjoy!
Jump around:
Creative Tabbed Navigations
Tutorials
Creative Tabbed Navigations
-
Cloth Moth – A great navigation with unique size, placement, and typography.
-
Jobs On The Wall – A great tabbed nav that sticks to the theme of the site, is easy to use, and looks great!
-
College Park Church – Sleek, simple, and does a fantastic job of highlighting the current tab.
-
Studio 7 Designs – This nav offers a unique sub-navigation that integrates beautifully with the central tabs.
-
WWD – Bold, simple, and prominent, this navigation defines “easy.”
-
The Albion Group – The Albion Group has a very fun and unique tabbed navigation with bright colors and abstract individual tabs.
-
Bern Unlimited – A perfect combination of grunge and smooth design.
-
Fancast – A great horizontal tabbed navigation for a selection of videos.
-
The Resume Girl – This nav really pushes for the “hand-made” look while also sticking to the ease of use that must come with all tabs.
-
The Brown Corporation – Stands out, yet blends in, to create the perfect effect. Plus, I like the name of the product.
-
Veer – A great use of color to create distinction between each individual tab.
-
Moy Toy – Moy Toy uses bold colors and bold shapes to make the navigation stand out on the website.
-
Wite And Twine – A great use of 3D tabs to really make the website “pop.”
-
Revolution Driving Tuition – A legible, themed navigation that truly works with the site’s design.
-
Singularity Concepts – Bright colors and a unique typeface really make this website’s navigation stand out from the crowd.
-
Viget – A clever approach to “digging” the tabs into the ground.
-
Vimeo – Big, bold, simple, beautiful.
-
Worship Leader Insights – This navigation goes back to the basics with smooth tabs and legible typography.
-
Point Of Entry – Finally, a vertical tabbed navigation that really makes this web site stand out from the rest.
-
Dragon Interactive – Dragon Interactive makes good use of large tabs and some beautiful hover effects.
-
Evan Eckard – Even the simple use of color can create a unique and intuitive tabbed navigation.
-
Studio 3k – Studio 3k takes advantage of color and positioning to make their tabbed nav bar easy to use.
Did I miss a resource? Comment and let me know! I hope you all enjoyed this post and have drawn some creative ideas for your own tabbed navigation.
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
September 17, 2008
Gotta love that shitbox…. ;) ;)
Some great examples Thanks Brian, now for redesigning styletime nav! ;) ;)
styletime’s last post was… Do you REALLY value your work?
September 17, 2008
Great post! Bern is definetly my favorite :)
Daniel’s last post was… Creating A Glossy Navigation Bar
September 17, 2008
Wow, great job. I really like Wire&Twine web design!!!!
Dainis Graveris’s last post was… 50 Awesome And Creative Business Cards
September 17, 2008
Great list! I’ve always been a fan of tabbed navigation, and some of these grungy designs are awesome.
Tom Ross’s last post was… 50 Beautiful Polaroid Shots
September 17, 2008
Great collection, always have and most likely will prefer tabbed navigation for a standard website layout.
September 18, 2008
lol. shit box.:D.this are really useful list.
NaldzGraphics’s last post was… NaldzGraphics in Social Media Sites: A Circle of Friends
September 18, 2008
lol @ shitbox… Great list!
Mel Ndiweni’s last post was… Using Humour Effectively in Design
September 18, 2008
Great collection of inspiration
Max | Design Shard’s last post was… Poll: Cast your vote : What interests you most in design?
September 18, 2008
Half of these aren’t tabs… buy a dictionary.
September 18, 2008
wow nice article
September 18, 2008
Thanks everyone for the comments – much appreciated!
@Dan:
tab
1. A projection, flap, or short strip attached to an object to facilitate opening, handling, or identification.
All of the above indicate handling and identification – even opening if you are abstract in thinking. Hope that clears up my viewpoint :)
Brian’s last post was… How To Master Photoshop In Just One Week Pt. 3
September 19, 2008
Really nice collection Brian. Loved the “Wire And Twine” navigation a lot, and found the “Fancast” one very interesting. Some great ideas and inspirations here. Thanks.
September 23, 2008
Tons of thanxs for this great little article !!
Sanjay´s last post was… State of the web 2008
September 26, 2008
Thanks you very much! I like it
Danh ba web 2.0´s last post was… Giao diện website hiện nay và 10 năm về trước thay đổi như thế nào nhỉ ?