Free Full Layered Facebook GUI PSD Kit

Advertisement

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks and released for Smashing Magazine and its readers. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem.

Download the set for free!

The theme is released under Creative Commons. You can use it 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 kit as you wish.

Screenshot

Features

The PSD set consists of 3 PSD files:

  • Facebook-GUI.psd contains all Facebook UI elements;
  • Facebook-App-Authorization-Request.psd and Facebook-App-Template.psd contain the basic structure for Facebook applications design.

Facebook-App-Authorization-Request
Facebook App Authorization Request (large view)

Facebook-App-Template
Facebook App Template (large view)

Features
Features (large view)

Features
Features (large view)

Features
Features (large view)

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

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.

  1. 101

    Great! Thanks for sharing.

    +2
  2. 102

    Rasha Nour ELDin

    February 20th, 2012 2:02 pm

    How i can find a wireframe for facebook to work on balsamiq?

    +1
  3. 103

    Me. Designing lots of Facebook applications for clients at the moment

    0
  4. 104

    Very Good Job =)
    Thanks a lot

    +1

  1. 1

    Adrian Demian

    July 23rd, 2010 6:14 am

    useful stuff… thx for the effort :)

    +2
  2. 2

    uau thanks for the great kit :) especially now with facebook fan pages and client applications, good for concepts! :)

    +2
  3. 3

    It’s worse than that – now you’re going to get grammar nazis shouting “could have” at you too. Hopefully they’ll at least be so ashamed of their pedantry that they’ll write in the third person…

    +2
  4. 4

    You, sir, are a dick.

    +2
  5. 5

    Great! Thanks for sharing.

    +2
  6. 6

    amazing! Thanks a lot!

    +1
  7. 7

    Great!
    I’ve been looking for this long time ago.
    Thank you very much, it looks awesome.

    +1
  8. 8

    Sudarshan Gurung

    July 23rd, 2010 6:46 am

    Great stuff. Thanks.

    +1
  9. 9

    Nice! The examples contain several typos though – I’m assuming I can edit those out?

    +1
  10. 10

    lol I can’t believe the timing of this.

    I just spent 4 days doing just this to make a FB themed Powerpoint for the office Town Hall/year in review brief. Did it all in PS from scratch..used a few screen captures, mimic the fonts and everything, creating profile pages for each division etc etc.

    I’m just amazed this came out 2 days after the meeting was held.

    Ah well, it’s still a great download so thanks :)

    +1
  11. 11

    Renato Carvalho

    July 23rd, 2010 9:56 am

    Dear Charles, the only goal here is to help developers to mockup, design and develop applications http://developers.facebook.com for Facebook quickly and professionally. With that, we can have a real idea of what the application is going to look like.

    I’m one of the designers who worked on this project. If there’s any problem with that, please someone from Facebook let us know. So, one more time, what we wanted is to make an application design/development easier and following the Facebook UI standards.

    +1
  12. 12

    Rasha Nour ELDin

    February 20th, 2012 2:02 pm

    How i can find a wireframe for facebook to work on balsamiq?

    +1
  13. 13

    Very Good Job =)
    Thanks a lot

    +1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top