Facebook Redesigned: An In-Depth Analysis Of Independent Designs

What I like most here is the clear structure of data in the timeline. Everything is organized clearly and there are even sidebar links to switch between recent posts and popular posts.

But some of the sidebar elements do come off as slightly confusing. For example, a green button with a single plus sign right beside a “follow” button. One uses just a symbol, the other just text. This feels incongruent with the design style and other profile info.

Streamlined Profile Page

Timeline posts can be sorted by “recent” or “popular” based on your preference. This is big for usability, especially in the wake of Twitter’s backlash against the recently-mandated algorithm change.

Also many of the buttons display larger with extra padding and bigger typography. Since Facebook is meant to be interactive it only makes sense to increase visibility of items like buttons and hyperlinks.

haris jusovic facebook redesign

Overall this concept feels compact and lighter in bloat. It would be nice to see Facebook place more of a focus on interactive elements and maybe increase their font sizes, too.

The design is striking but can be off-putting to some users. It relies on multiple page columns to organize the user’s profile links, along with a timeline view of recent posts. All the colors and elements stay true to Facebook’s design styles. It certainly feels like a Facebook timeline page.

In this design he places more focus on simplicity by highlighting the page owner with a more prominent header photo and profile pic.

Multi-Column Timeline

Facebook’s homepage is the initial timeline view that users see when first visiting the website. It includes recent posts from friends, a chat list, games, ads, and other relevant info like upcoming birthdays.

Larger websites like Facebook deal with much more data and a userbase that wants easy access to that data. In the homepage redesign by MagicVoltage you’ll find one consistent feature: lots of content crammed into one page layout.

alejandro osorio facebook redesign

This profile page redesign comes from Haris Jusovic, a designer from the Balkan region of Europe.

Veering towards a vertically columnal layout is Alejandro Osorio’s redesign. This layout represents the profile timeline view that Facebook users see when they visit a user’s profile page.

Content-Dense Redesign

But in defense of this design it handles densely-packed content very well. There’s plenty of whitespace between elements and it runs a four-column design brilliantly.

The busy-ness of this layout is what makes it both great and potentially controversial. Having all this content on one page makes it super easy to navigate – once you actually learn where everything is located. And the top-left icon links are just vague enough to dissuade anyone from interacting with them.

magic voltage facebook redesign

This so-called Facebook 2.0 redesign created by Marcelo Silva is really a sight to behold. His demo layout displays an updated homepage with a timeline

There’s a lot to learn by studying the work of other designers. This is true of both professional projects and spec designs for existing websites. Large sites like Facebook serve a very particular user experience with some good elements, and other not-so-good elements. In this post, I’d like to examine different Facebook redesigns to analyze interface concepts that could improve the current user experience.

Voluminous Navigation

I’ve pulled a handful of custom FB redesigns from Dribbble users, each with specific enhancements and updated UI elements. Take these ideas into consideration for how they look, how they might function, and how they could impact usability if implemented live on Facebook.


How to Play the Hidden Chess Game on FB Messenger

To get started, open up a chat conversation with any friend, preferably one who plays Chess of course. You can do this on desktop or on your iOS or Android app.

You can choose to pick your own color (@fbchess play white) or assign your opponent a color as well. Here’s what chess on Messenger looks like.

Here’s the full list of how to make certain moves on the chessboard, how to resign, offer a draw, claim a draw, undo your last move (well, the option is available but I tried this, and the Undo didn’t work for me), show current position, show stats between players or take the game to another conversation.

Type @fbchess play to start a game. You might be be automatically assigned a color.

Did you know that you can play Chess on Facebook? Well, on Facebook Messenger to be exact. It is a hidden command that can be triggered with @fbchess but be warned it is a very tedious way to play an online chess game (but who knows? You might be a fan).

(Reddit)

You will notice the numbers and letters on the side of the chessboard. Yes, that’s how you are going to "move" those chess pieces across the board. No clicking or dragging here. This is old school algebraic notation chess play.

Like I said, it’s tedious. Wait until you see the instructions, which you can pull up by typing the command @fbchess help.