Generally with movie titles the sequel to a good movie is often rather shocking. How often have you seen a movie get rave reviews and then when number two arrives it just falls flat on its face? I would say quite often.

Fortunately this usually is not the case with websites, often a new website means a cleaner design with better user functionality and more features. It usually harnesses new web tech and loads quicker. Just take a look at the redesign of Mint.com to know what I mean.

Unfortunately this has not been the case with Facebook '2.0'... In this post I am going to analyze why the new design is not so pleasing to the eye.

Before I start, I think it is worth stating that OBOX is a huge Facebook fan. It is one of our 5 permanent tabs in Firefox and it is something we use to network with friends & clients and promote our web work etc. Half the reason this post is being posted is because I feel that our favourite site has been man handled instead of caressed.

Old Facebook

So let us first look at the old version. One of the best parts about Facebook was that it took one look at Web 2.0 design trends and kicked them in the face. There were no round corners, no shadows and no glossy surfaces. Just clean cut design with great spacing between elements. It stuck with the old but looked like the new.

In many ways the old Facebook didn't need any touching at all. Out of all the new design elements in the Facebook, the only one I like and feel should have been implemented in the old version was a tabbed wall. If it was up to me I would have left the rest alone.

The New Facebook

We want to know what happened to the person who designed the original Facebook. Where has that person gone? Based on my analysis Facebook 2.0 suffers from the following:

1. Web 2.0 trends - Round corners, shadows (usually not a bad thing)
   
2. Inconsistency (the main focus of this dissection)
3. Poor white space management
4. Poor balance
5. Sloppiness

Web 2.0 Trends and Inconsistency

Lets start with Web 2.0 trends and their inconsistent implementation. If you visit the home page and look at the header you will notice subtle round corners. Venture to the right side of the page and there is a side bar, containing current community activity, which also has round corners. One of the biggest Web 2.0 design trends is the use of round corners, if done properly it looks lovely. But if we look carefully at the ones on the home page you will notice two very different versions of rounded edges, their radius is not the same.

We will now visit the profile page. Once an awesome combination of great spacing and neat edges. Not so now, the header has round edges but your info box is still contained in a square. My first question is why is the info even contained and secondly why is it not rounded like the side bar on the home page. Further analysis unveils something which is not seen anywhere else on the site.... shadows, though subtle, I feel they have an unnecessary presence.

Poor whitespace management

The width of the new site is 960px but most pages can't fill the space. The content in Application / Plugin pages are 640px wide, Adverts are 160px but they are aligned to the far right of the page, this leaves a gap in between the two of 120px... that is enough space to park an A380. I am going to hazard a guess and say that they are leaving this space open for bigger adverts but for now is looks horrible.

Poor balance

It is always 'nice' to achieve a good balance in design, it can be the most basic of elements which weights a site correctly but when it works you will have a lot of freedom to be creative elsewhere without standing back and asking yourself 'what is wrong here'. Well take a look at this.

I really hope that the runway in between these two columns is used for something...

Sloppiness

It is the minor details that can make or break a great website design. Some bold fonts there, 1 extra pixel here, 1px less there. I can just imagine the guys at WooThemes analysing their perfect grid based designs until they themselves turn into pixels. It seems that the refiners at Facebook are still human though, just as an example, the home page is 2px out on the right hand side.

It doesn't stop there, the headers on the wall are not consistent either, and while we are on the subject of the wall... is it just me or does it look like a complete mess of font sizes and icons. I think that the padding (top and bottom) for each item on the wall is 5px too little.

Conclusion

I am predicting that this post will generate a lot of hate mail, maybe I'll get kicked off Facebook... who knows.

There was nothing wrong with the previous design, it could have been refined more and would have maybe lasted another 5 years before looking old. What I am predicting is that the new design is in preparation for a barrage of advertising. Hopefully I am very wrong because by doing so I think that Facebook will alienate some of its users and may even go in the direction of MySpace, which is now beyond saving. Let us hope that this is not the case. The new design can still be a success, hopefully Mr. Z is onto it already.

For now though 'The New Facebook' has elements which have either been rushed or designers have been too lazy to fix the details.'The New Facebook' looks like a really old one...

Update: Almost exactly one year later Facebook has decided to remove the rounded corners designs. This is what they say:

Since we introduced rounded corners to Facebook, their consistent use has been spotty at best. The corner radii vary, and it sometimes feels arbitrary which corners are rounded and which are not. Additionally, they add an extra layer of complexity to the code (note: IE, please add support for border-radius).

As part of the effort to simplify our visual style, the design team recently decided to go back to our square corner roots. In doing so, we hope to champion cleanliness and the razor cut look that Facebook is known for.

Don't say I didn't tell you so.