Tabs
1st edition — by Patrick McNeil — Jul. 25, 2006
The Design Element
Tabs are a basic tool in terms of web design. Which ultimately means that
just about anything and everything has been done to them. There is of course
an infinite amount of samples to fill this category so I attempted to focus
on the more interesting implementations. As always the goal here is to flex
those creative muscles a bit and hopefully encourage some new ideas.
Vertical Tabs
Rotating the traditional tab and putting it vertically is an interesting idea.
In the two more "normal" samples, it seems that the vertical nature
serves to avoid cluttering up the header with less important tabs. The obvious
odd ball here is the
Invisible CRM
site. Their usage of vertical tabs becomes the concept for the whole site and
creates a structure which feels very unique. They have managed to do something
you don't see everyday, the primary navigation is physically linked to the
actual content.
Traditional Tabs
I use the description traditional very loosely here. Generally I mean tabs
with the typical rounded top corners which also in some ways feel like a more
literal or physical tab.
These samples are of course far from simple or boring despite my traditional
label. Many of them are absolutely stunning and show how something so simple
and perhaps overlooked can become a beautiful design element bonding the page
together. I am particularly fond of the
Tesla Motors
tabs. They merge perfectly with the style of the site and clearly identify
where you are. Not
to mention the fact that the shiny effect used on them fits in with the
subject matter - a shiny beautiful car.
I could talk at
length about nearly all of these tab styles. They have been beautifully executed
and I can't help but feel challenged to not wimp out the next time I need tabs.
Stylized Tabs
Here is where the fun begins. These tabs are extremely gorgeous and help create
a polished look, this attention to detail has really pushed these sites.
Sarajoypond.com
is a terrific example. The tabs maintain the concept of major navigational
sections, and carry the visual weight needed to establish a primary navigation
element. This combined with some elegant stylization unifies the design of
the site.
I think
the
sarajoypond.com
style stands in interesting contrast to the
eyepunch.com
tabs. The eyepunch.com tabs are not nearly as important in terms of navigating the
site, they simple provide access to some alternate content. As such, their
lesser visual weight keeps them from disturbing the visual continuity of the
site. If they had been emphasized any more they would have become to much of
the focus of the design.
<<Load samples into frame
Return to Article
Links
Many of these links offer simple less stylized tabs.
These links get you past the technical hurdles and let you move onto the
design of the tabs.
Exploding
Boy CSS tab menus (great free designs)
More Exploding Boy CSS tabs
CSS mini tabs at SimpleBits
Tab rollovers at SimpleBits
CSS Based tab menu tutorial
Simple CSS Tabs
Tabtastic (CSS/JS based tabs)
Rollover Tabs Tutorial
