I’m a web developer. I dabble in the design world, but it just isn’t my strengh. However, even a simple developer like myself notices design trends on occasion. I recently stumbled on a few notable trends. I was so intrigued that I thought I’d share.
Given my lack of inherent design talent, I often turn to sites that I like the look of for inspiration when working on a project. I’m currently in the process of putting together a topical social networking site (more on that later). That said, the obvious first place to look was to the behemoths of that industry in the US…Facebook and Twitter. As I began to really look at their designs for the first time, I was intrigued by the huge similarities between the sites. I then turned to LinkedIn, another “big player” in the social networking market. It, again, had many of the same features. So, here are a few of them…illustrated through some miniaturized screenshots:
Overview & Header
The first thing I noticed were the basic layout components. All three sites are roughly 980-1,000 pixels wide. In all three sites, you have a header section with the logo top-left, as is the standard in most web sites. Facebook and twitter both have a sign-in section on the right side of the header that are carbon-copies of one another. They feature the standard un/pw fields, as well as “Remember me” and “Forgot password” buttons in identical places, and a standard submit button. Linkedin chose to omit this for some unknown reason…requiring a user to click a “Sign In” link to get to a login form.
Following the header, all three sites have a main body section consisting of two columns. The first column is roughly 60% of the width of the site, while the second fill out the remaining 40%. All three sites utilize the left column for a “sales pitch” of sorts…a very short explanation of what the site is used for. They all use the right side for a “sign up” form. Interestingly, none of them feature a Captcha…so they apparently have other anti-spam features in place. Also, none of them have a password or email confirm box. Apparently, they trust their users to not make typing errors.
Finally, all three sites have a footer section with every link one could possibly need. Interestingly, all three have this footer section separated off and with a generic white background.
Authenticated User Landing Page
After signing in, all three services send you to a landing page with the most recent activity of your social network represented. Though the splash page above is technically the “home page” for these sites, this landing page acts as the “home page” as long as you’re signed in. Indeed, if you type the URL for one of the sites into your browser (e.g. – facebook.com) while logged in, this is where you will be directed to.
All three sites have a header section that features a logo, a menu, and a search box. This section never changes as long as you’re signed in to the site. Twitter and Facebook’s header sections feature a solid color background that stretches 100% of the screen width. The logos all link to this landing page, but all three sites opted to include another separate “Home” link that takes you here as well. All three sites feature a button to allow you to change your account settings or sign out. Twitter’s button features your username, Linkedin features your actual name, and Facebook simply has the word “account.” Interestingly, all three sites use a drop-down menu to present your options to you once if you click this button. The search box present in the header of each site is intriguing in that all three of them use a magnifying glass icon as the submit button. This icon has been showing up more and more over time, and apparently is becoming the norm. Twitter and Facebook have the search box pre-filled with the word “Search”, while Linkedin features a dropdown to choose what to search for. All three sites feature direct “messaging” features between users, and a link is included in the header. Finally, all three sites have a “Profile” button that takes you to your personal page.
The design of the body section of this page varies significantly between the three sites. Facebook uses a 3-column layout while Linkedin and Twitter use a 2-column. The extra column serves as a secondary menu for Facebook, containing many of the links that Linkedin placed in its top menu. Twitter’s menu is not centralized, but links are dispersed throughout the content itself. That said, there are still many similarities between the sites.
All three sites feature a prominent input box for quickly posting an update. Interestingly, Twitter is the only one of the three that does not pre-load the input box with some help text (“Share an update”). Facebook and Linkedin utilize a thought-bubble-style box with a small protrusion pointing toward another section of the page. Below this “update box” is a list of recent updates from other members of the social network that you are connected with. Each of these updates features a square photo of the individual/group ranging from 48 to 60px square. Each update is separated by a single pixel light grey line. Each update includes contextual buttons that appear when you mouse over the individual story. Twitter and Linkedin use tabular-style buttons to allow these updates to be filtered (though Twitter’s buttons also feature other things).Facebook and Twitter dynamically load more content if you scroll down to the bottom of the page. Linkedin offers a button to do the same, meaning they have the capability but do not want it to be automatic. Every textual link on Facebook and Linkedin is formatted with the generic blue link color and receives an underline when you mouse over it. Twitter opts for dark grey (#333) links that turn blue and are underlined if you mouse over them.
The right column on all three sites features a “widget” section. All three sites have a widget suggesting other users or pages to “connect with.” Facebook features a widget for its event feature, as well as a targeted ad or two. While I’m on ads…Linkedin has a single text ad at the very top of the main content section, as well as having ads before the footer. Twitter opted to move the footer to the right column since it auto-expands the content. Facebook did not, and it can get old trying to get to the footer since the content keeps bumping it down.
Part 2 will come at some point…in which I’ll look at the profile section, messaging, and the post-logout screen.