Web design inspiration: 30 Tab-based website designs

It’s no secret that I love designing with tabs. tabs in web design just ‘work’ for me. They are structural, nearly always aligned, easy to navigate, and even easier to implement. So here goes another design inspiration post.

Below are some sites I have either worked on, been involved with, or simply come across during my visits on the world wide web. Don’t forget to subscribe to the RSS feed if you’d like to keep up-to-date, or digg this post if this list has inspired you or you liked it.

LogicWeb

Good, clean tabbing. contrasting colour scheme and blue – what else do I have to ask for?

Mozilla

The makers of the great Firefox know what they are doing – not just in terms of application design, but also web design. Using a gradient for the background, creates a nice offset. Definitely a great colour palette.

Authentic Jobs

I like the red v.s. cremes scheme. The inner drop shadow adds dimension to the tabs and somewhat shows realism. Good way to graphically

Australian College of Physical Education (ACPE)

Designed and developed by good friends at Glassonion, the design is easy on the eyes, has a low-intensive colour palette and is easy to navigate. Importantly, the site itself doesn’t use tabs, but using tabs for this ’selection tool’ makes it easy to fit information into a limited area and at the same time, still be nice to view.

Actionhead studios

Though not necessarily using ‘tabs’, this design is bright and energetic and still maintains noteworthy aspects of tabs in design, including breaking apart elements around the navigation, and offsetting selected tabs.

Channel 10 Australia

I like the shows on Channel 10, but the recent redesign has added some tabs to the interface. Mostly used in “tabular” form to ’sort’ through elements, once again, the gradient, or inner shadow (depending on how you see it), really helps to accentuate the feeling of depth.

Comiqs

Great new website that allows you to make your own comics online!! Awesome shading and a web 2 design scheme. Especially cool is the ‘interface tabs’ as seen above, ‘Photos, graphics and text’. tabs are also used in other sections of the website.

Commonwealth Bank

I don’t really like talking about banking websites but this one has it’s pros. I love the very contrasting yellow and gray scheme. The white on gray is easy to follow, and black on yellow for top-level navigation has the same affect. More importantly, the two levels of navigation really work well. For example, unless you’ve been living under the ‘web design rock’ for the last ten years, you’d know that you’re in the ‘Personal’ section, and so, clicking on ‘Accounts’ for example, should take you to the ‘Personal Accounts’ section of the Commonwealth Bank’s website. Yay!

Food Network

I like the tabs on the ‘#1 Cooking Site’ apparently? somewhat of a drop-shadow on the tabs gives a sense of ‘layers’. This site also uses another feature of tab design; Same, or almost-same colour text on a different background tab depending on active/inactive states. E.g. above ‘Recipes & Cooking’ is active, so the background of the tab is white. The tabs which are ‘inactive’ do not have the same, ‘pop-in-yo-face’ colour. Smart design.

FOWD: Future Of Web Design

One of a few similarly-designed websites by the same organisation (Carsonified) – nice scheme.

Gradient dropshadow curve

The online weblog of friend, Henry Tapia, gradient dropshadow curve utilizes a cool, new-age tab system. Including ‘onMouseOver’ tab effects and nice use of opacity to tie it all together.

Hidalgofoto.net

Interesting use of side-way tabs. I guess it all started off like this? Most ‘real-world’ tabs, such as those found on notebooks and the like, are usually vertical, not horizontal, and this one is a great example of vertical tabs on a website.

HP (Hewlett-Packard) Australia

I really like the way HP has worked this section of the website. As in the ACPE case above, when you click each section, there is a overlay which presents the user with more information on the topic – in this case ‘Home & Home Office’. Great use of dividers (simple black and white lines side-by-side), colour scheme (re-used through-out those particular sections on subsequent pages) and overall site design.

Iconbuffet

From the makers of really-sweet icons comes this incarnation. Using tabs for not only primary-level navigation, but also sorting through website content, offsets allow inactive sections to sit nicely in the background and overall helps the website to not be ‘busy’ whilst remaining functional.

Iconomix

Ahh, love the blue and green contrast – not to mention the cool block design. Great use of opacity, and outer shadow? to create a sense of lighting and convexity. Nicely done.

KFC Australia

Simple, clean tabs. Respects branding and colour guidelines set by client whilst choice of font allows for more tabs to fit from left-to-right.

Barloworld Bayside

A little Wiliam gem. This little beauty not only looks stunning, incorporating an amazing flash piece, but is another great example of vertically-based tabs in website design. The Sydney web design company got this one right! Props to RK!

Media Temple (mt)

This hosting-giant has a very dark, moody feel to their new design. Awesome use of shadow and light between active and inactive tabs. Great use of tabs as well on the

Merixstudio

Cool, squared-edges design. Kind of a change from the default rounded-rectangular tabs.

PizzaHut Australia

Another good example of sticking to design guidelines. Nice edging and rounding to create somewhat of a container to house the top-level navigation.

Sensis.com.au

Good example of what I like to call ‘tab-encapsulation’. Wrapping a whole section with a colour or style, based on which tab the user clicks on, creates a sense of direction and isolation. We know that everything in the green box above must belong to ‘Yellow’ and they do!

Virgin Blue

One of my favourite tab-based websites, whether part of the Sydney Web Design circuit or not. Great use of multi-level tabbing. I know that I’m in the business tab, not just because I see ‘Business Home’, but also because ‘Personal’, ‘Velocity Rewards’ and the slightly-off-screen ‘Holidays’ are a different, darker colour. Perfect solution for dealing with a lot of content that is split up into ‘categories’. Hat’s off to the design/dev team for getting it right.

Microsoft Windows

Not everyone’s favourite website, but I’m sad to report that the Redmond-based software giant got this one right. Great use of multi-level tab navigation. I can easily tell I’m looking at Products page, and all it takes is a little opacity and a little stroke. Simple yet effective!

Microsoft Windows Vista

Once again, Microsoft shows us a cool example of vertical-based tabbed nav. Easy to follow and easier to navigate. Usable and fast-loading. Well done.

Youtube

Ahh, our good friend, the Google-owned YouTube. They stuffed up by removing the ‘Home’ tab and replacing it with ‘Categories’. They soon realised the consquences of this were that not all users knew that clicking on the logo would take them back to the front-page; and before you could say ‘Ajax is my best friend because it let’s me code in JavaScript and XML AT THE SAME TIME!!!’ it was replaced. Old-school, easy tabs – but they work…

Zurich

Good example of sticking the ‘home’ tab on sub-pages of the website. The tab design on this site shows tabs a lot closer to each other, as apposed to YouTube, directly above. However, the closeness (no padding) results in a small effect. It makes everything seem like they fall under the same umbrella; in this case, ‘Financial Services’, yet still be separate entities.

Cheb.com.au

Well? of course I had to add this. What is a post on tabs used in web design without a little plug? I’m not going to comment heavily on this; I’ll let you guys be the judge – Although, I must say for version one of my blog design, they don’t do too badly. I decided not to use the ‘active’ colour ‘onMouseOver’ of the inactive links, but just a simple underline to guide the user to the link.

Good-old oldies (tabbed-designs we’ll miss)

Apple

Yahoo!

Amazon

So there we go, another design inspiration blog post. Hope the designs above have inspired you in some way or another. tabs are really cool to work with. Let me know if I’ve missed any other cool tab-based designs and more importantly, feel free to highlight your own creations. Please subscribe to our RSS feed for further updates and once again, please digg this post if you enjoyed it or it has helped you.