Design Focus on Social Networking Website Layouts

by Jake Rocheleau

on May 31, 2013

in design

Ever since the early days of MySpace there have been social networking websites getting online with each passing year. The whole world is taken in this craze of social networking, tweeting, blogging, and lots of other similar tech-based activities. I have found that many social networks are utilizing common interaction techniques within their designs.

facebook social networking website homepage

I want to share just a few examples of my insights towards building a usable social network. This means designing a captivating landing page with easy instructions and rules for the users. Profile pages are also a big point in the design critique. You want to make your network as easy to use as possible. This is obviously much simpler said than done, but I am sure all observant designers will pick up quickly and follow suit with their own ideas.

VK

The VK social network has gained a lot of notoriety since the beginning of 2013. The site was originally hosted on a .ru TLD since the network is based over in Russia. However, since relaunching and redesigning the website, we can now see it has a brand new domain name with a lot of extra features.

vk russian social networking website homepage design

My biggest reassurance with VK is their natural Facebook-style design. Now that VK has taken all the good parts and organized a simpler layout, I feel it works a whole lot better. You may not be rushing to sign up for a new profile but the design is a really great aspect of the whole website. All the simple headings, buttons, input fields, and other key areas on the page have been styled in an older Facebook-era fashion.

The reason this works so well is because many people are already familiar with the interface. Homepage feeds and sidebar URL links are all too common within other networks, too. VK has taken these common interface trends and adopted them into their own layout. It provides a flawless example of creativity within a medium of relatability to the user.

N4G

The social gaming news network N4G has not been online for more than a few years. This is a social news website very much like Digg in its heyday. Members can submit gaming articles which are then promoted based on other user’s recommendations. The most popular news will surface onto the front page and drive a stream of traffic onto the website.

What I like in particular is the profile design for each user. Their system ranks members based on points for how active they are, how often they submit news, vote on news, and post comments. All of these points will display on your profile page which is the best location for keeping track of your account. I also like how N4G has adopted the Twitter-style header design image.

n4g social news gaming website layout design

You just upload a specific BG photo and the backend will handle the rest. It lines up perfectly with your account stats and username. Even the sidebar profile menu looks very similar to classic Digg by using a colored-background selected state. If you have never heard of N4G might I recommend signing up for an account, just to see how you feel about the interface features.

Dribbble

Most designers will already know about Dribbble which is a private invite-only design network. I love their homepage and default shots listing because of the subtle box shadow effects. Dribbble’s entire purpose is to showcase the latest design submissions from the userbase. This means shots can be uploaded and shared with anybody around the world.

dribbble design social media interface layout

The design is clean, easy to use, and makes a point of sticking to colors which blend almost perfectly. The pink and dark grey color scheme is a manifest of the pink Dribbble basketball logo icon. Also the dropdown menus from each navigation link provide quick access to the most important pages. This is a great design with some typical common sense notions for user interfaces.

Plurk

One final social networking website is called Plurk and it is not so famous among western audiences. There are still plenty of users from all around the world, yet it provides a strange timeline-style updating system which has drawn in a close-knit dedicated memberbase. Plurks may be shared text, images, videos, or any other form of Internet multimedia.

plurk social networking website layout timeline

The homepage design is reminiscent of an older Twitter layout. You can get the raw feed of the latest user updates made public. Or you can search for the hottest plurk updates over the past day or week. I think all of these basic frontpage user experience effects provide a standard for notional web design. The minimalism of interface elements also makes registration and customization a breeze.

Closing

It is not everyday that somebody is looking to build their own social network. There are plenty of open source CMS solutions, but to maintain the userbase will take a lot of time and effort. Not everybody has this energy to contribute. But I hope this article may shed a bit of insight towards what makes good social networking design. If you have similar thoughts or links to other networks feel free to share with us in the post discussion area below.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+