As most of you would probably remember, around mid-May of this year, Cheb 2.0 blogged about the upcoming design and functional changes to Facebook! – Well, I am pleased to report that we are getting very close! With just over a few days to go, and Facebook slowly begining to phase in the new changes, we now have a clearer picture of excactly what we are in for.

Let’s get cracking and check out the upcoming changes to the ‘book.

New Facebook Profile Page

The new Facebook Profile page is pretty wicked, if I do say so myself! Not only is the design still minimal, yet intriguing – but it is very functional and still has that touch of Facebook-y goodness to it which have kept Facebook in the same group as Apple and other leading sites which take a heavy focus on web design!

Check out our screenshot of the new profile page.

Facebook Profile Page

As you can see if you click on the screenshot to the left, there are quit a bit of functional differences between the current, or old(er) style profile page and the updated, shinier profile page.

Some of the most prominent changes include:

1. Complete re-design of web page as well as header and footer.

2. Tab-based system to access profile content such as Wall, Info, Photos and Boxes (which essentially are all the applications that are not displayed on the front page), and a “+” button so you can add a new tab from your applications (shown below).

Facebook info tab showing 'Add a new tab'

3. A bunch more interactivity with Facebook now allowing you to make a lot more changes ‘off’ your current page as opposed to going into your profile’s ‘Edit’ screen to do so. This includes such things as allowing you to edit ‘About me’ information, as well as ‘Networks’ off the profile page.

4. Status messages have now been given the space they deserved from the start, as well as the ability to ‘Add Photos’, ‘Add Video’, ‘Share Link’, ‘Write’ and more (again, based on applications installed) – See below for an animated GIF.

Facebook header preview (animated)

Facebook’s new friends page

The Friends page has been redesigned and re-formatted as well. The coolest gadget to be found on this page is the new ‘Friend Lists’ feature. Facebook says that you can now “easily organize your friends into convenient lists for messaging, invites, and more. You can create whatever kinds of lists you want; all lists are private”. It’s a pretty neat little feature that will make it a lot easier for you to manage a ‘distribution list’ of some sorts which will make your life easier on the long run if you message lots of your friends, for example. I can see this developing into a ‘Friends’, ‘Work Mates’, and ‘Annoying People’ type list! Here’s one I just created called “Test”.

Facebook's new friends list

Facebook’s new homepage

Facebook‘s new homepage (when a member logs in) is very much similar to the original, current design – however it is a lot more cleaner and functional in terms of physical separation of related content and sections. There is now a main right-side navigation which contains all the usual stuff like ‘Who poked you’, or ‘Upcoming Birthdays’, as well as any requests or user updates as well as status updates in general that flow through.

The main content area is simply a listing page showcasing in a Facebook v1.0 style gallery of upcoming uploaded photos and videos, as well as the usual array of friendly updates.

Overall, there are quite a few more cool additions such as Facebook now allowing you to decide how ‘The Wall’ is organised. In essence, you can decide if each new update/addition, such as you uploading four photos, are shown on one line, short, or full views classed as “Story Options”.

Click on the screenshot below for a bigger view.

Facebook's new homepage

So there you have it guys – in again with another exclusive review of the new changes to the new Facebook redesign. Hope you’ve enjoyed this post. I’m sure you’re going to love the changes that are in store for you as soon as the new profiles begin to roll-out sometime this week or next.

Till next time, subscribe to the RSS feed for updates on new posts. For an up close look yourself, login to the preview page here.

Edit: This article is linked to an article which has recently been posted. Read more about “Facebook redesign: The countdown begins“.

From somewhat of a smallish leak to a full-on development cycle to get it going; Facebook is currently in the process of redesigning the Facebook social network. Whilst it isn’t a full-on re-brand, per say – there will be elements such as the start page, the profile page and feed pages which will change!

Why is Facebook redesigning the site?

Whilst they aren’t necessarily redesigning the entire site; Facebook is changing important sections such as the ‘Profile’ in an attempt to clean up the clutter which is being produced by over 25,000 applications ranging from ‘blood sucking vampires’ to ‘am I hot or not’. We all know how annoying some applications can sometimes be, and in particularly how cluttered up they make our profile look.

Since its creation, Facebook has been a shining ‘beacon’ of “What to do” on a major portal/social network. They got the usability right, the site was easy to use and it even looked simple and clean – the direct opposite of Facebook’s biggest competitor; MySpace. So what happens when developers are allowed to build applications which get in the way of such as mantra of excellent web design? You re-design, of course!

Let’s take a look at some of the proposed changes and what you could stand to lose/gain from them. As always, you can click on the images for a larger-sized view.

The Feed and Wall Tabs

To start off with, as you can see, the proposed change to the main profile page (i.e. when you click on ‘Profile’) is to clear up all that clutter left by all your applications flowing down the left-side gutter of the page as well as in the content area as well.

If Facebook has their way, you will expect to see that sort of change on this page.

The changes to this page include:

1. The status message, e.g. “Cheb is now partying”, or in this case “Holly is at school” is shown directly under the profile photo and not directly under the name, as currently is.
2. There is now somewhat of a secondary menu/navigation which is tab-structured allowing you to jump to different ‘views’ of your/or someone else’s profile.
3. The new view allows you to directly post information such as a link or photo off the sub-section in the secondary nav.
4. The ‘Feed’ view, i.e. the current page – above, will combine both the current feed page as well as the wall. What that means is there is no current way to filter either or – and it also means that the normal view, or the ‘Feed’ view will show both; other people leaving wall posts for you and your updates at the same time.

Secondly, the view to the left shows what would happen when someone clicks on the ‘Wall’ tab.

As you can see, no major changes there except that you will be able to remove the ‘Wall’ tab at anytime but the ‘Feed’ tab has to stay put! This makes sense, considering the Feed tab will show both types of inputs – whilst, for good usability, having another tab for just that type of content, i.e. ‘Wall’ is a great idea and kudos to Facebook for setting it up that way.

The new publishing system

The publishing system will be the centralized spot to add a wall post, post a video or photo, as well as post a link to your feed/profile.

I believe that as a user adds new applications which present more ways to post content, such as ‘send a gift’ or anything of the sort, they should be added to the tabs which currently stand at ‘Wall Post’, ‘Video’ and ‘Post a Link’.

Overall, I think this is a great way to combine content into categorically-linked sections. I am not a huge fan of combining the wall posts with the feed, but the structure and navigation for getting to places as well as ‘publishing’ content is possibly second to none! Let’s just say that we can’t even begin to compare it to MySpace!

The applications view

Ahh, where would we be without our much-loved applications? Well, with a wall and notes, I guess! Anyway, the cool news is that there is no way applications are being eradicated or anything – quite the contrary! They will be given their own tab, or view if Facebook has any say in it! Let’s check out the proposed changes:

Hrrmmm! There’s quite a bit to contemplate on this view. Whilst being a working title, I don’t know what Facebook is thinking calling this page ‘Boxes’! I think it was some insider joke or something of the sort, because the first application in the main content area is ‘Family Tree’ with quite a bit of boxes! [Or was it a publicity stunt?!?] *conspiracy conspiracy*

I quite like the idea of zoning out the applications into their own section – after all, it really is those applications that started to clutter things everywhere on Facebook.

The name ‘Boxes’ has to go! No two buts about it. However, what would be cool is if Facebook allowed users to call this what they liked; for example, ‘My Appz’ or ‘My Stuff’ – however, you could see why this would be a problem when people start calling it ‘Fo Shizzle’ or ‘Crack Pipe’ – which absolutely make no sense whatsoever! [Yes, I can be weird at times!]

I think Facebook will eventually just call this ‘Applications’ or ‘My Applications’ – leaning towards the former.

Conclusion

So there you go guys – another design review/did you know style of post! Hope you liked the review and more importantly enjoyed seeing the changes that Facebook should be implementing very soon.

To have your say on the matter, feel free to send an email to profilespreview@facebook.com with the subject heading: ‘Feedback on the new Profile’ or join the group.

Drop us a comment and let the community know what you think; share this post with a friend and make sure to subscribe to the RSS feed if you haven’t yet for further updates.

It’s been a fun six months! What started as a small side project to share some of me knowledge and findings with the web world has become a forerunner in terms of an online web resource; for Australia and the world alike!

With 400-500 unique visitors daily, (granted, most like to lurk rather than contribute!), Cheb 2.0 has become an online pit stop for crucial web and Web 2 information, reviews, tutorials and more.

As promised, I have been working hard on a complete re-design of the blog which will eventually address a few usability changes as well as an overhaul of the commenting/contributing system.

click to maximise

As you can see; especially if you have bigger monitors!, the design flows a lot more, and is heavily focused on above the fold – making it easier to find more information as it comes to hand.

Please keep in mind that although we have moved 25 or so posts across – it is going to be a little while longer before everything is 100% perfect and the dust has settled. We will be adding continues functionality in the next week or two including: user-voting system, galleries, voting, competitions, and a lot more!

We simply ask that you be patient whilst everything is going and we will get to where we need to be!

I will update this post with any new information as it comes to hand – but feel free to take a look around and familiarize yourself with the new interface!

PS: We realize there are still a few CSS/style nags on some older browsers and we are working on making sure your viewing experience is by no means comprimsed! However, I hope that the great content Cheb 2.0 has become known for in the web design industry is what keeps you coming back in the first place – above all!

Finally, I would love to thank Mel Forrest, front-end coder/slicer extraordinaire whom I could not have sliced this redesign of the blog without. You rock Melz!! You guys have to keep an eye out for Slicetastic – coming soon! : )

Peace out,

Cheb.

Our good friends over at LinkedIn have re-designed their website! Over the last couple of years, what started out as an experiment in social connectivity became the world’s leading business-oriented professional networking site. Although LinkedIn has always had a clean, uncluttered design that speaks for itself, it was probably about time for a little ‘Web 2′ face lift – and the new design definitely delivers.

So what has LinkedIn changed?

Top-level navigation:

The 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 drop-down menu, which allows click-through for the parent pages. For example, clicking on ‘People’ above will take you to the ‘People’ main sub-page, while clicking on the arrow besides ‘People’ will allow you to jump to other subsequent pages belonging to the ‘People’ top-level menu. The navigation menu also follows through, throughout the site – something which is very important in information architecture and usability; and combined with the search bar in the same horizontal space, makes for a very-usable menu structure.

I think the top-level navigation is quite a big cleaner – with a lot more leaning towards a lot more whitespace – giving the website an open, dynamic feel.

Side-navigation & Widgets

The cool side of the new LinkedIn design includes changes to the way the user can interact with the website, and vice versa. The side navigation, which is clear, intuitive and flows throughout the website is dynamic – and more importantly allows the user to customise what menu options, i.e. ‘Groups’ or ‘Inbox’ they would like to me minimised or maximised, as they traverse the website. An example follows:

Finally, some cool social networking features. Firstly, as can be seen above, there is a new ‘What are you working on?’ feature. Relative to Facebook‘s status message(s), this handy little feature will broadcast your ‘status’ to yourconnections as a network update and will – as expected, appear as a new element on the profile page. Following in Facebook’s footsteps, LinkedIn let’s you control your status’ visibility and whether you want to see other peoples’ status in your network updates feed. And example follows:

Another new addition to the ranks on LinkedIn’s re-design are cool widgets (which LinkedIn will apparently be releasing more of!) that sit in the right-hand sidebar. They can be dragged-and-dropped into position and feature such information such as: Your profile snapshot (views, how many times you have appeared in search results, etc), as well as Q&A from the network, and finally jobs, and other links. Clicking on ‘edit’ as seen below, gives the user options that can be changed for that particular ‘widget’. For example, clicking ‘edit’ on the “Answers” widget, let’s you select what search answers category you would like – from a drop-down.

Let’s take a look at some other visual/functional comparisons.

The old LinkedIn contacts page:

The new LinkedIn contacts page:

The old LinkedIn (logged in) homepage:

The new LinkedIn (logged in) homepage:

So there you have it! The new LinkedIn homepage and review of a brand spankin’ new feature-set. Overall, I think the site is very usable, and more importantly, user-friendly. However, nothing is ever going to be 100% – and there are little quirks.

When JavaScript is disabled, as imagined, not many features are still usable. For example, the widgets are now gone, and you can’t even minimise/maximise your left-hand navigation! I mean hat’s off to LinkedIn for a great re-design, but I’m sure it would not have been hard to make a degradable-version of the website for when JavaScript is disabled or turned off (for whatever reason!). However, to LinkedIn’s defense, many important functions such as ‘Contacts’ page do have a ‘basic connection browser’ that whilst looking archaic, got the job done; which I thought was admirable!

There were also a few things that LinkedIn could work on to add that extra bit of professionalism to the site, and they include little things like making sure there aren’t too many different styles representing many of the same things; such as font/typeface choices on the interface – which seemed like ‘a bit of everything’. Adding onto that were very-minor things such as inconsistencies with buttons. Once again, all these things are very minor – and sometimes a consistent user experience comes second to the visual weighting and importance that colour and style bring to navigational/interface items.

A great design, from a great website!

So what do you think? Please leave any comments you may have – hate it? love it? Let the community know – and be sure to sign up to the RSS feed for more updates on when we post a new article.

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.