Web design inspiration: 30 Tab-based website designs

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

1-logicweb.jpg

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

Mozilla

tabs-moz

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

tabs-authenticJobs

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)

tabs-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

tabs-actionhead

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

tabs-channel10

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

tabs-comiqs.com

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

tabs-commbank

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

tabs-foodNetwork

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

tabs-FOWD

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

Gradient dropshadow curve

tabs-henrytapia

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

tabs-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

tabs-hp

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

tabs-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

tabs-iconomix-com

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

tabs-kfc-com

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

tabs-barloWorld

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)

tabs-(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

tabs-merixstudio.com

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

PizzaHut Australia

tabs-pizzahut-au

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

tabs-sensisau

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

tabs-virginblue

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

tabs-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

tabs-windowsVista

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

tabs-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

tabs-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

tabs-cheb

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

tabs-appleOLD

Yahoo!

tabs-yahooOLD

Amazon

tabs-AmazonOLD

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.

Comments

1 Charlie

28/01/2008

Wow Cheb.. Amazing post. Love the selection of tab-based design. Thanks again!

2 nizar

28/01/2008

tabs are easy to make, fast for loading, and good for SEO (instead of using images).. great article again cheb :P

3 Mohamed

28/01/2008

hi man u have done a great work here I hope u remember me Iam MLAw :)

4 web designer

28/01/2008

These are some awesome works. I love these tab based designs.

5 Justine

28/01/2008

Great article Cheb. You’ve taken some time to get this right, and boy are they great examples.. Thanks for your efforts..
JG

6 Cheb

29/01/2008

Hey guys,
thanks for your nice comments..

@Mohamed – Thanks mate.. Of course I remember you! Good old days. How are you tracking these days?

7 Taryn East

01/02/2008

cool, nice cselection to show the variety of forms a simple, effective design component.
I love the vertical efects from Hidalgofoto.net and Barloworld Bayside, and yes, even the Vista site.
That visual grouping on sensis.com is fantastic too!
You’re right on the gradient effects – all those that have it seem to have just a bit more depth and seem to “feel right”… less blocky, more natural.

Your article has concentrated on the positives here – which is great. I think you can learn a lot more from what people did right, than the few things that could be improved. Still, I figured I’d point out the things that jarred a little for me, and see if others shared the view. There’s actually only two things I could say.

I really liked the way the colours group on the food network site, but the fact that there’s a big orange bar between the tab and the content kind of separates them from one another. A connected tab really pops out at you as “This page belongs to this section/tab” (eg the economix and HP sites and many others above). A few of the other examples have this as well. Perhaps there are good reasons for separating these – what do you tihnk?

The only other would be about Gradient dropshadow curve – the background is really pretty, but I find myself straining to read the text written over it. The busyness of the background confuses the text and it takes longer to figure out what it says – granted only a few extra milliseconds… but it makes me think. IMO that can’t be a Good Thing, but again – maybe there’s a rationale.

Anyway – that’s about all – these are some great examples of the web’s finest ;)

[...] changes, as can be seen are quite substantial. Old-school tabs (which were nonetheless very usable), have been replaced with a ‘a la Facebook‘ style [...]

9 hank

04/04/2008

Hey Cheb, thanks for linking my site! My tabs aren’t the real deal in terms of a familiar tab interface but then again, the site’s not aimed at you regular Amazon.com audience.

And hey! 4 of my designs made your list! I’m flattered… Woot!

[...] can make or break a site! Good navigation gives the user a clear, direct and rapid path to where they are trying to get to. Ultimately, [...]

11 Anonymous

31/05/2008

This site is really nice, http://www.logicweb.com/

First on the list

i think you have missed out award wining web design: http://www.miraclestudios.in

13 Cheb

13/06/2008

I don’t really think MStudio is tab-based; but still is a nice website…

14 Blog Design

10/09/2008

Great list of some of the most awesome design and I have to say they can be a great source of insipiration. Very nice post.

15 Zion

12/09/2008

I really like how Logicweb (www.logicweb.com) is a web host provider, but with a different unique look to it. Its not common in the hosting industry to have this style of site.

Food Network site is also very clean, vibrant. Good stuff :)

16 Anna

10/12/2008

Yay, this page was exactly what I was looking for; needed inspiration for my next project.

But, tabs aside: what a lovely comment form and display you have here :)

17 Cheb

10/12/2008

Oh Thank you Anna.. Very kind of you to say so.. Thanks for visiting :)

18 shankarmitra

29/01/2009

Great designs insire us all. Finding the best designing firm is not easy. Avoid mediocracy and connect to http://www.360studiored.com. Dazzle your mind with wonderful web templates and unique ad concepts here.

Nice array of navigation to get ideas from. Great job compiling some of better aspects of web design all together in one place.

20 Cr8tive

23/02/2009

great….very nice websites….real inspirations

21 Flyer

09/05/2009

Very fine tabs. Thx!

22 Plastikkarten

16/07/2009

tabs are very usefull, especcially in this cases. we use them too.

23 Flyer drucken

22/07/2009

Thx for very good inspirations!!
Greatings from Germany.

24 sudhir sahni

08/09/2009

very well design………really , and a lots of. really a very nice design.

25 liam

12/09/2009

ugh, tabs. designed for multiple views of a single piece of content (scope change, details vs outlook, visual vs textual) not site navigation

[...] 30 tab-cased website designs at cheb.com.au [...]

27 Buttons

20/10/2009

THX for this great link ressources :-)

Good collection of Designs design. Really a very nice design.

very nice design.

30 srisoftwarez

25/11/2009

All the collections are awesome. Really very cool. Thanks for this.

31 fLyEr

29/11/2009

really cool! thx and greetings from good old germany!

THX for this great link ressources

33 Polly

10/01/2010

Well done! Very helpful. Thanks for this :)

34 egypt web design

17/01/2010

amazing design collection, I really like it

great web designs.

these are awesome designs mate.

37 Flyer

01/02/2010

Very fine … thx

Awesome designs to learn from mate.

Add a comment...

Please fill in your details below to post a comment/reply.

,