Home > Uncategorized > Navigation Designs

Navigation Designs

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

Iceberg in Showcase Of Well-Designed Tabbed Navigation

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks (thanks, Allen).

So, with all of that in mind, take a look at these 50 excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

You may want to take a look at the following related posts:

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Good Tab Based Navigation

ExpressionEngine
This tab set is beautifully styled. It uses a bevel to seperate tabs, large buttons, and clean typography with icons.

Expressionengine in Showcase Of Well-Designed Tabbed Navigation

Astratos
Another tab navigation that is clean because of rounded corners and use of a gradient to style.

Astratos in Showcase Of Well-Designed Tabbed Navigation

WorldCat
Rounded corners and clean separation.

Worldcat in Showcase Of Well-Designed Tabbed Navigation

Veer
These tabs have beautiful styling. Notice the use of different colors and a drop shadow for separation purposes.

Veer in Showcase Of Well-Designed Tabbed Navigation

365 Days of Astronomy
Use of different colors and a drop shadow to separate the tabs not in use.

365days in Showcase Of Well-Designed Tabbed Navigation

Wire & Twine
This is some excellent texture use with a clean layout.

Wiretwine in Showcase Of Well-Designed Tabbed Navigation

Komodo
A good example of tabs used in a module.

Komodo in Showcase Of Well-Designed Tabbed Navigation

Inkd
Good styling and usable because of size and separation.

Inkd in Showcase Of Well-Designed Tabbed Navigation

Jepco Storage
This button set uses dark colors to fade out the tabs not in use, and a great border on the buttons.

Jepco in Showcase Of Well-Designed Tabbed Navigation

Kinder-Aktuell
Good gradient use and separation.

Kinder in Showcase Of Well-Designed Tabbed Navigation

FidesVita
Tabs used with a sub navigation.

Fidesvita in Showcase Of Well-Designed Tabbed Navigation

Apple Movie Trailers
Excellent styling and a strong example of a vertical tab layout.

Movietrailers in Showcase Of Well-Designed Tabbed Navigation

PBwiki
Simple yet clean tabs.

Pbwiki in Showcase Of Well-Designed Tabbed Navigation

Fancast
Another vertical tab set up, this time used in a slider instead of content navigation.

Fancast in Showcase Of Well-Designed Tabbed Navigation

College Park Church
Nicely styled tabs with good colors and a sub navigation.

Collegepark in Showcase Of Well-Designed Tabbed Navigation

One Button Mouse
Excellently designed buttons in a simple tab layout with good icons as a visual support.

Onebutton in Showcase Of Well-Designed Tabbed Navigation

Mint
Tabs used in a very content heavy module

Mint in Showcase Of Well-Designed Tabbed Navigation

District Solutions
Vertical tabs are used very rarely. But they can look good!

Vert in Showcase Of Well-Designed Tabbed Navigation

23andMe
Good coloring and use of a border to differentiate the tabs from the body background.

23andme in Showcase Of Well-Designed Tabbed Navigation

Tumblon
Very clean tabs with a border.

Tumblon in Showcase Of Well-Designed Tabbed Navigation

STUDIO7DESIGNS
This tab styling uses a gradient for a cool fading appearance, and a sub navigation is included.

Studio7 in Showcase Of Well-Designed Tabbed Navigation

WWD
A simple yet usable tab system with a sub navigation.

Wwd in Showcase Of Well-Designed Tabbed Navigation

Ministry of Sound
On this tab system, a gradient is used to add depth to the selected button.

Ministry in Showcase Of Well-Designed Tabbed Navigation

Disambiguity
Use of rounded corners and a strong color difference to separate the tabs not in use.

Disambiguity in Showcase Of Well-Designed Tabbed Navigation

Fontcase
A clean tab layout in a very nice design.

Fontcase in Showcase Of Well-Designed Tabbed Navigation

Mixx
This tab system uses a different size, color, and styling to bring out the button selected.

Mixx in Showcase Of Well-Designed Tabbed Navigation

Concentric Studio
A very simple and usable tab navigation.

Concentric in Showcase Of Well-Designed Tabbed Navigation

Domestika
A vertical tab layout with coloring.

Domestika in Showcase Of Well-Designed Tabbed Navigation

crowdSPRING
A simple tab system. This one uses a large size as well as a different color to make the selected button pop.

Crowdspring in Showcase Of Well-Designed Tabbed Navigation

Ready Made
A well-styled tabbed navigation.

Readymade in Showcase Of Well-Designed Tabbed Navigation

The Mindset Game
Another very simple and easy tab navigation that works perfectly.

Themindset in Showcase Of Well-Designed Tabbed Navigation

nclud
A little bit different tab setup that only styles the selected button.

Nclud in Showcase Of Well-Designed Tabbed Navigation

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

Invoicemachine in Showcase Of Well-Designed Tabbed Navigation

FreeAgent
A good example of the background of the container flowing with the button.

Freeagent in Showcase Of Well-Designed Tabbed Navigation

Web Notes
This is very organized, and it appears to tab down instead of up like most.

Webnotes in Showcase Of Well-Designed Tabbed Navigation

Magpie
Doesn’t get much more simple than this, but still a good example.

Magpie in Showcase Of Well-Designed Tabbed Navigation

Two December
Nice styling that works perfectly with the rest of the layout.

Twodecember in Showcase Of Well-Designed Tabbed Navigation

Lanbruck’s
Another very beautiful tab layout, notice the slight hover effect that can be seen on the second tab over.

Lanbrucks in Showcase Of Well-Designed Tabbed Navigation

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Littlelines in Showcase Of Well-Designed Tabbed Navigation

Thuiven
A very nice color harmony and contrast between the selected tab and the others.

Thuiven in Showcase Of Well-Designed Tabbed Navigation

Headscape
Another button that uses a gradient to fade out, creating an awesome appearance.

Headscape in Showcase Of Well-Designed Tabbed Navigation

Space Collective
Very simple but functional at the same time.

Spacecollective in Showcase Of Well-Designed Tabbed Navigation

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

Jobsonthewall in Showcase Of Well-Designed Tabbed Navigation

Designsensory
Very basic styling with strong colors and a sub navigation.

Designsensory in Showcase Of Well-Designed Tabbed Navigation

Ad Fed
Here is another smooth and visually appealing tab navigation set.

Adfed in Showcase Of Well-Designed Tabbed Navigation

OS Communications
Basic color-based styles with a pointer to show the selected tab.

Os in Showcase Of Well-Designed Tabbed Navigation

Hoefler and Frere – Jones
Use of slanted sides instead of rounded corners makes this tab-based navigation interesting and unique.

Hoefler in Showcase Of Well-Designed Tabbed Navigation

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Trackmypeople in Showcase Of Well-Designed Tabbed Navigation

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

Revolution in Showcase Of Well-Designed Tabbed Navigation

City of Grace
A good example of tabs that work nice colors into a usable layout.

Cityofgrace in Showcase Of Well-Designed Tabbed Navigation

About these ads
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: