Every digital designer out there made a collective groan when Facebook announced Timeline was coming to brand pages. Brand Managers everywhere began scrambling together what it is they want to do with their brand on Facebook in terms of strategy and suddenly designer hours nearly doubled overnight in an effort to get everything ready for the March 30th launch date. As the Senior Design Manager at Affinitive, I’m here to give you a quick and dirty breakdown of the basic elements of Timeline that will require some design. So don’t be skerred, embrace the change!

Let’s begin with the changes that will be happening. Here’s a breakdown of all the new elements to Timeline and their dimensions, I go into further detail for each so keep reading!:

-Cover Photo (851 x 315 pixels)
-Profile Photo (180 x 180 pixels)
-App icon boxes (111 x 74 pixels)
-Apps (810 pixels wide)

Now on to the details for each…

COVER PHOTO

851 x 315 pixels

Ah yes, the cover photo. This is the bread and butter of the new Facebook Timeline in terms of design. This is the first thing a user will see when they come to your brand page so it has to pop. Unfortunately for us designers, Facebook decided to overlap the profile photo on the cover timeline so not only does that mean more options for creativity, but is also means you HAVE to consider it when creating your cover photo.

Luckily for you, I’ve made a a PSD that you can download here with rulers marking where the profile photo will be. Don’t have photoshop? Download the JPG here and thank me later.

Before you get all design happy, please note that Facebook does NOT allow cover photos that include:

- Price or purchase info, such as “40% off” or “Download it at our website”

- Contact info such as a website, email, address, or any other info that should go in your Page’s “About” section

- References to Facebook features or actions such as “Like Us” or “Share” or an arrow pointing from the cover photo to any of these features (but feel free to have an arrow point to your profile photo if you feel so inclined)

- Calls to action such as “Get it now” or “Tell your friends”

- False or misleading info that infringes on 3rd party intellectual property

Now that you know the how and the don’t, here is my quick advice on strategy for your cover. Use this space as an opportunity to capture the essence of your brand. That could mean a cool product photo, a behind the scenes shot of where the magic happens, (not that kind of magic, get your mind out of the gutters people) highlight user generate content, or use it to show off a new product. Of course you want it to be really cool looking, just try to remember that it should reflect your brand strategy, not just be a random, albeit cool design.

PROFILE PHOTO

180 x 180 pixels

Your profile photo should be at least 180 x 180 px, but be warned that it will be reduced to 125 x 125 on your timeline and will even shrink down to 35 x 35 on the newsfeed, so when designing your profile photo, keep in mind that small details will get lost and text will be unreadable if there’s too much of it. My advice? Keep it simple, clean and recognizable.

If, however, you saw the Captain Morgan timeline cover photo and was like “Dude that’s so rad! They integrated both the cover and the profile photos!” BE WARNED: It will take you several attempts to get everything lined up. Since you have to submit the photo at 180 x 180 and it shrinks to 125 x 125, be prepared to adjust your profile photo a few pixels here or there in photoshop to really get things to line up just the way you want them to. Oh, and if you do end up going this route and it does take you a few tries to get it right, don’t forget to go back into your profile photos and delete the old ones.

CUSTOM APPS

810 pixels wide

Praise be! Apps are no longer at the narrow 520px width and have been gloriously expanded to 810px wide. I won’t be getting into custom app design here because you probably shouldn’t be designing these yourself and instead hiring us to design and build them for you.

APP BOXES

111 x 74 pixels

Each of your custom apps will now have a box on your Timeline directing users to the app. You’ll be able to control the look of these icon boxes as long as they are for custom apps – for non custom apps (like YouTube or photos), you’re stuck with what the Facebook gods give you (and whatever you uploaded last). I’d suggest keeping these box designs consistent with eachother rather than their app designs, it’ll look cleaner on your Timeline.