The daily Narrative

FREE Facebook Fan Page GUI PSD for Designers

July 11, 2011
written by Alex

Did you ever feel frustrated by a client asking you to throw together a quick Fan Page mock-up containing the awesome tab graphic you had just designed for him? You were just about to leave the office but the client is begging you to deliver that Fan Page mock-up before you quit, only so he can act cool in front of his non-creative partners the next morning while they are grabbing a bagel?

If your answer is “Yes”, then you probably belong to the group of people who have spent a great amount of time searching Google for terms such as “Fan Page psd”, “Fan Page gui”, “Fan Page interface”, “Facebook psd”… to, yeah, no avail. Breath deeply! We have got something for you. What? YOUR answer is “No”? Well, doesn’t matter… you will like our freebie anyway ;)

From our own experience we know what a pain it can be to not have a functional Fan Page template at hand. It’s actually hard to believe that creatives still have to take screenshots on Facebook and waste valuable time removing their friends’ drinking photos from the right hand sidebar. Replacing the profile banner with an updated, larger image makes it even worse. Having to rearrange the left sidebar widgets can be very time consuming… at least if you care about pixel-perfect positioning.

The few Fan Page GUI templates that are available online are either outdated (Facebook is steadily performing minor updates to its interface), badly layered/named, or not pixel-accurate. Sounds like it’s time for an update, huh?

FREE Facebook Fan Page GUI

Hike is happy to announce an end of the drought. Starting today, we will be offering you a super clean Facebook Fan Page GUI PSD. Yes, that’s right! A fully layered, nicely ordered, completely vector based*, up-to-date, pixel-perfect, time saving, free to use, rocket launching graphical user interface of Facebook’s like pages.

What makes this PSD so special?

Just about everything! We have spent countless hours reproducing literally each and every element of the most current version of the Facebook Fan Page interface. The entire layout is vector based*, allowing you to scale it up by 10,000% and it will still look crisp. On top of that the PSD does not only include the default view (Wall), but also the default Custom Tab view. I bet you did not know that the entire interface is in fact 27px wider when a Custom Tab is active!? Don’t worry, we got this like Kobe Bryant!

To put the icing on the cake, we have included a wireframe view for both, the Wall and the Custom Tab. That allows your client, colleagues or whoever to even faster grasp the output of your creative work since the surrounding elements are less annoying.

Stop buggin’ me! Where do I get the PSD?

Ok, before we hand out the freebie, please be aware of the following:

  • You will find any and all future updates to the GUI in this article, so you better bookmark this page.
  • We do not offer technical support for this file. If you do not know what to do with or do not know how to use Photoshop, that’s not our fault.
  • The file is free for use (see license terms below). However, please do not offer it anywhere on the internet claiming to be the producer.

License: This file may ONLY be used for mocking up Facebook Fan Pages. No, it can’t be used in a theme to sell or go in ads for your tab app. It is a tool for designers, that is it.

Version Updates

  • 2011/08/29: Right sidebar now shows “People You May Know”, Wall Options, Like This, City/Country link and more.
  • 2011/09/06: Minor update to overall layer structure. Added additional guides and viewport.
  • 2011/09/21: Major update to the header, several pixel adjustments, view shares and more.
  • 2012/03/06: New Fan Page GUI for Timeline is available here

Have fun!

* The icons Facebook uses throughout their website are rasterized in the PSD. We will likely change that in one of the future versions.