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.
Suggest a Tutorial or Article
to My Ink Blog
by Email
Twitter
Flickr
Digg
Stumble Upon
September 17th, 2008 at 9:22 am
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 17th, 2008 at 3:07 pm
Great post! Bern is definetly my favorite
Daniel’s last post was… Creating A Glossy Navigation Bar
September 17th, 2008 at 3:42 pm
Wow, great job. I really like Wire&Twine web design!!!!
Dainis Graveris’s last post was… 50 Awesome And Creative Business Cards
September 17th, 2008 at 4:49 pm
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 17th, 2008 at 9:49 pm
Great collection, always have and most likely will prefer tabbed navigation for a standard website layout.
September 18th, 2008 at 3:56 am
lol. shit box.:D.this are really useful list.
NaldzGraphics’s last post was… NaldzGraphics in Social Media Sites: A Circle of Friends
September 18th, 2008 at 11:05 am
lol @ shitbox… Great list!
Mel Ndiweni’s last post was… Using Humour Effectively in Design
September 18th, 2008 at 11:24 am
Great collection of inspiration
Max | Design Shard’s last post was… Poll: Cast your vote : What interests you most in design?
September 18th, 2008 at 2:42 pm
Half of these aren’t tabs… buy a dictionary.
September 18th, 2008 at 2:59 pm
wow nice article
September 18th, 2008 at 7:09 pm
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 19th, 2008 at 11:09 am
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 23rd, 2008 at 1:49 pm
Tons of thanxs for this great little article !!
Sanjay´s last post was… State of the web 2008
September 26th, 2008 at 8:07 am
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ỉ ?