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.

It’s not exactly today’s news, but I felt compelled to at least discuss this. Internet giant, PayPal, son of another Internet giant, eBay, recently decided to re-do their logo and homepage – and boy, were they wrong!

So what do you do when you are a billion-dollar corporation with more money lying around than you know what to do with? Re-brand, of course.

To kick things off, let’s see how the lovely folks at PayPal decided to (in my opinion, of course) ‘kill’ their logo.

Okay; So I have to admit – the original logo wasn’t highly intricate nor advanced for that matter – but it was certainly one thing; Iconic and memorable – both important characteristics of a logotype! The minus-offset-tracking and kerning as well as bold, yet gentle stroke around the letters coupled with sharp-accentuated cornering really made the whole package come together.

So what do we have now? Well, let’s break it down visually:

How to make the new Paypal logo in 3 easy steps!

1. Type ‘PayPal’ in black-coloured Verdana, bold-italic, size 54.1px font and smooth anti-aliasing.

2. Turn faux-bold setting on, set the base-line shift and change tracking settings as below.

3. Colour in ‘Pay’ and ‘Pal’ in the hex codes specified below (or if you really want to get technical [and web-safe]; #003366 and #336699, respectively).

And there ya have it.. We’re done..

There have been some changes made recently to the front page of PayPal that apparently show a more-rounded lettering style logo. That shouldn’t be a problem. Add a stroke to the logo (of the same colour for ‘pay’ and ‘pal’ and make sure round cap/join is on (pen tool), add a “trademark” symbol and we’re done once more.

This should now be your masterpiece; The new PayPal logo.

Sure, looks ‘Web 2.0′, but not everything needs a face-lift and Paypal could have certainly given the previous, white-encrusted logo a little face-lift without changing it drastically.

I mean, here’s one case – What happens to a web designer who has (the very popular, mind you) background colour of #003366 or #336699 on their website? The visitors will either see “Pay” or “Pal”, depending on whether the webmaster has used any of those colours as their background.

So it’s not a huge deal, but with the stroke, it didn’t matter what background the logo was placed on – it would still work. Did designers think of that first?

Anyway, just something to think about I guess. I don’t really mind the logo; especially with its rounded-edges – I just don’t think it’s very much ‘innovation’ over something that wasn’t really as broken as they obviously thought over at eBay headquarters.

So what do you think? Subscribe to our RSS feed to read more articles like this, or help us get the word out by digging this post; below.