The Smashing Editorial

About The Author

The Smashing Editorial The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Freebie: Facebook Fan Page GUI PSD

Today we are glad to release a yet another freebie: a Facebook Fan Page GUI PSD, designed by Hike and released for Smashing Magazine and its readers. The PSD will speed up the process of creating previews, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. All layers are vectorized, allowing you to scale up the GUI without loss...

Today we are glad to release a yet another freebie: a Facebook Fan Page GUI PSD, designed by Hike and released for Smashing Magazine and its readers. The PSD will speed up the process of creating previews, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. All layers are vectorized, allowing you to scale up the GUI without loss of quality. The mock-up is 100% pixel-accurate, it has 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab), all layers labeled and grouped. Smart guides are included. The PSD is compatible with Adobe Photoshop CS3+.

With every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. The main idea behind this PSD was to provide all designers and agencies with a useful tool that will improvs their daily workflow when it comes to preparing Facebook-related previews for their clients or internal presentations. As usual, the goodie is absolutely free to use in private and commercial projects.

Download the PSD for free!

You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

Screenshot

Features

  • 100% pixel-accurate
  • 4 viewing modes (default wall, wireframe wall, default tab, wireframe tab)
  • Fully vectorized
  • Limitless scaling
  • All layers labeled
  • Smartly grouped
  • Completely editable
  • Includes smart guides
  • CS3+ compatible
  • Always up to date

Previews

tab_wireframe
Tab wireframe (large preview)

wall_default
Default wall (large preview)

wall_wireframe
Wall wireframe (large preview)

layerpalette
Layer Pallett (large preview)

Behind the Design

As always, here are some insights from the designer:

"From our own experience we knew how time consuming it could be to have to recreate or prepare a decent Facebook template that allows you to implement custom tab graphics, profile banners etc. It’s a real pain and waste of time and it only takes away your focus from the actual artwork. At Hike we once decided to invest multiple days into creating a complete Photoshop template that would allow us to create design previews on the fly.

What sets this PSD apart from similar files is the fact that with every update Facebook performs to its fan page design, Hike reproduces it 24 hours later and updates its download link with the latest version. As listed under Features above, we actually reproduced each and every pixel of Facebook’s fan page UI. The PSD includes 4 viewing modes for the most common design tasks and it’s fully vectorized. Thanks to smart grouping and clever labeling, everybody will easily get along in our PSD. If you have suggestions for improving the file or feel like something is still missing, feel free to post it on our Fan Page wall and we will respond. Follow @HikeSocialApps for updates!"

Thank you, guys! We appreciate your work and your good intentions.


More Articles on

Upcoming Web Design and Development Conferences in 2011-12

by Louis Lazaris

We spend a lot of time learning and thinking about the designs we see online, yet what we miss quite often are practical insights into the design process and workflow of our colleagues. This is why conferences are great for our industry. We meet people who think very much like we do and most probably struggle with similar problems; and perhaps they've found a solution which can inspire others....

Read more

How To Become A Web Design Expert

by Paul Boag

Have you ever wanted to take a client by the collar, shake them around vigorously and demand that they take you seriously because you are the expert? If so, you are not alone. Whether you consider yourself an expert and want recognition or are looking to one day become one, you need to step back and ask why being perceived in that way is important. Many of us desire to be seen as...

Read more

How To Build A Better Web Application For Your Business

by Paul Boag

Are you fed up with hearing about yet another Silicon Valley Web application built with fairy dust and funded by magic pixies? If so, this post is for you. Most of us will never get to work on a Web application that is funded by venture capital and for which the business aims are a secondary consideration. For us, developing a Web application is about meeting a particular business...

Read more