Facebook Timeline…(download a design template here!)

By Posted in - Graphic Design & Social Media on March 13th, 2012 0 Comments

Timeline is coming to Facebook. The official change is March 30. As we understand it, at that point Timeline will be the format option that you will find on Facebook. So while we understand the urge to complain, we figure it is time to embrace and ultimately have found much to celebrate about this new layout. If you want to dive into it (and we definitely recommend that you do if you are a business taking advantage of social media marketing), you’ll find all you need to know in this in depth video tutorial offered by the Facebook team.

When you first encounter the Timeline layout, it may be more than you want to take in. For most of us, Facebook is an escape, an opportunity to very passively socialize. And so that first encounter with the new layout is going to require the brain to turn on and readjust. That is kind of annoying. But for marketing teams and designer/developer types there are features, which we believe will be a benefit to both social and business users. We’ve been encouraging clients to take advantage of this more robust layout and have had a few busy days creating cover images, fitting profile pics into the new dimensions, and strategizing about which four “button boxes” (as we’ve been calling them) should sit on the top row. I’ll hand this post over to Micah now and let him describe his experience and process for designing within the Timeline layout and then will return with some perspective on developing custom pages and setting it all up.

Thanks, Mary…

When I was first tasked with designing for the new timeline layout, I immediately started looking for layout templates. Alas, I found none, so I decided to just make my own and share it with you all. Keep in mind that Facebook is always changing. They’re making minor adjustments almost daily that aren’t nearly as jarring as the new timeline introduction. Case in point: After laying everything out as pixel-perfectly as I could, I decided to check my work against screenshots of a couple of Facebook pages other than the one I was working with. For some reason, my cover photo pixel height was off by six pixels compared to one screenshot and off my twelve pixels (!) compared to another. This template is as accurate as I could possibly make it, but it’s certainly not perfect.

I know a lot of people like to complain about timeline, but personally, I think it’s a design and development marvel. The new layout lends itself to a little more creativity too, I think. Having the fairly large space of the cover photo area on each page open to literally anything I can think up is pretty nice. At first, I was annoyed by the way Facebook decided to handle the “recently tagged photo” section. But merging those four photo boxes with the left hand navigation of the previous layout iteration was a smart move. Now, those boxes can be customized to be actual links to interior “content” pages in your Facebook profile.

Download the template PSD I created in CS5 here and use it however you want. Please feel free to fill out the form below and let me know what you think. Thanks!

Thank you, Micah!

With the template Micah created, the process for developing a Facebook look is very similar to the process for creating a website. We take that visual map and work with the page settings in Facebook to recreate the look. Custom pages are not new to Facebook and the proces for creating them is the same. However, we do have wider dimension to play with and are no longer confined to that center panel.

Once you have custom pages in place and the page is set to the timeline layout, we can take advantage of the features that the new timeline layout allows. We are really fond of the ‘pinning’ and ‘starring’ options. ‘Pinning’ a post moves it to the top of your page of posts, and that post will remain at the top until you ‘unpin’ or at the end of seven days. The point here is to give businesses an opportunity to have a highlighted weekly announcement. ‘Starring’ a post will expand its width (a double-wide post!) giving it greater prominence on the page.

So there is lots to play with here. Lots to learn and more growing alongside the Facebook team. We’re having fun with it and look forward to seeing how the timeline will impact this online community.

We’d love to hear your thoughts!

Comments are closed.