Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Free Full Layered Facebook GUI PSD Kit

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks1 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! Link

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.

Screenshot2

Features Link

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-Request6
Facebook App Authorization Request (large view)7

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

Features10
Features (large view)1511

Features12
Features (large view)13

Features14
Features (large view)1511

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

You may want to take a look at the following related posts:

Footnotes Link

  1. 1 http://surgeworks.com
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/uploader/images/facebook-gui-psd-kit/full_preview.png
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/uploader/images/facebook-gui-psd-kit/full_preview.png
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2010/07/facebook-gui-psd-kit.zip
  5. 5 http://surgeworks.com/blog/design/facebook-gui-free-psd-resource
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Authorization-Request.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Authorization-Request.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Template.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2010/07/Facebook-App-Template.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom02.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom02.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom03.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2010/07/zoom01.png
  16. 16 https://www.smashingmagazine.com/2010/07/designing-a-facebook-fan-page-showcases-tutorials-resources/
  17. 17 https://www.smashingmagazine.com/2009/09/how-to-integrate-facebook-with-wordpress/
  18. 18 https://www.smashingmagazine.com/2012/01/facebook-twitter-google-wordpress/

↑ Back to top Tweet itShare on Facebook

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. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    guitarguru102

    July 23, 2010 6:45 am

    That’s pretty awesome! Does it come with free updates? :-P

    -1
  2. 2

    This is great – really useful for anyone creating Facebook Applications!

    0
  3. 4

    Adrian Demian

    July 23, 2010 6:14 am

    useful stuff… thx for the effort :)

    2
  4. 5

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

    2
  5. 6

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

    1
  6. 7

    amazing! Thanks a lot!

    1
  7. 8

    Mimojito (aka Efren)

    July 23, 2010 6:42 am

    Excellent! I can now throw out all my PSDs ;)

    -2
  8. 9

    Sudarshan Gurung

    July 23, 2010 6:46 am

    Great stuff. Thanks.

    1
  9. 10

    Awesome! This is one of the reasons I visit smashingmagazine each and every day… :)

    -2
  10. 11

    wow just when need them ! thnx a lot

    -2
  11. 12

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

    1
  12. 17

    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
  13. 18

    It would be really great if there were a Fireworks version too!

    -4
  14. 20

    Tomislav Bilic

    July 23, 2010 7:58 am

    Woohoo… Congratulations Ney & Renato for being featured on Smashing Magazine. :)

    0
  15. 21

    Just what I needed! Thanks for the post – Hope to see updates since Facebook makes changes to their UI quite often! :D

    0
  16. 22

    Thanks!

    -1
  17. 23

    Gerd Wippich

    July 23, 2010 8:01 am

    Cool stuff. Thanx a lot!

    0
  18. 24

    great! thx!

    0
  19. 25

    Morris Clay

    July 23, 2010 8:38 am

    Thanks, for the great job! Really useful :)

    0
  20. 26

    FeryKloucek

    July 23, 2010 9:10 am

    Thanks for great and very useful package! Super..as usual on smashing magazine :)

    0
  21. 27

    As well-done and useful as this is, Facebook iterates their design fairly often. Granted, the changes are often small and un-noticeable to the average Facebook user, I think this is great for doing comping more general situations. Thanks for sharing it either way.

    0
  22. 28

    Charles Wedsbery

    July 23, 2010 9:29 am

    This ‘kit’ is a copyright violation of Facebook’s look-and-feel.

    Using it could open you up to getting sued.

    It doesn’t matter if it’s released as Creative Commons.

    -2
    • 29

      Renato Carvalho

      July 23, 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
    • 30

      Only if you go and use this kit to make your own artwork/website not related to Facebook…

      Using this to help layout wireframes is pure gold. If you didn’t already screengrab/mimic a site that you needed to incorporate into your webpage, you’re doing something wrong.

      0
    • 31

      You sir, are an idiot.

      0
  23. 32

    Marcus Derencius

    July 23, 2010 9:34 am

    That’s really cool and well done. Congrats for the people involved. :)

    0
  24. 33

    Most clutch site.

    0
  25. 34

    iammichaeljames

    July 23, 2010 9:59 am

    This is a great!

    0
  26. 35

    this is insane!

    0
  27. 36

    Cool Man!.. It’s a good idea and useful for all of us

    0
  28. 37

    Great
    Thankyou for sharing it ;)

    0
  29. 38

    Very cool download. In the middle of creating a custom facebook tab so this is much needed.

    Though with all the fantastic freebies and inexpensive stock images available now, I’m finding myself in need of an excellent Digital Asset Manager (DAM) for Mac.

    Anyone have any ideas?

    0
  30. 39

    Matthew Mueller

    July 23, 2010 12:56 pm

    Awesome! Thanks a lot!

    0
  31. 40

    I feel like I’m STEALING by downloading this.

    0
  32. 41

    Amazing! Right in line for my current project. Awesome how you guys always come along with the right tools just as I need them.

    0
  33. 42

    Denver Poria

    July 23, 2010 2:51 pm

    This is great! Thanks for sharing.

    0
  34. 43

    THANK YOU SO MUCH! This is exactly what I need today. Just remember the new width spec for apps is 540 pixels. It’s wider in the GUI.

    0
    • 44

      its going to be 520px for profile tabs, apps will remain 760px. So all good! Thanks for an awesome resource guys

      0
  35. 45

    Gene Ronquillo

    July 23, 2010 3:21 pm

    This is definitely great! Thank you! Cheers!

    0
  36. 46

    Very helpful, thanks for sharing. ;D

    0
  37. 47

    It is very useful for all designer. They can understand that how facebook UI has made in photoshop. Thanks very much for sharing.

    0
  38. 48

    Surajit Kayal

    July 23, 2010 9:00 pm

    Really amazing helpful ! thanx

    0
  39. 49

    Great! I had to make an entire page mock-up for a client a month ago. WHERE WAS THIS THEN!?
    ;)

    0
  40. 50

    I’m not that much FB fan so first thing that came to mind was fear of people abusing this… let’s hope it won’t happen then

    0
  41. 51

    Huw Rowlands

    July 24, 2010 12:12 am

    Wow! This will come in very handy for my future FBML and maybe websites! Thanks.

    0
  42. 52

    Bratu Sebastian

    July 24, 2010 2:11 am

    This helps a lot, I too want to create my first facebook app to promote my tutorials. Thanks a lot!

    0
  43. 53

    I could of used this a few months ago. Well at least I have it for when the one client comes calling with something else to do. Thanks much.

    0
    • 54

      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
  44. 55

    gravitywarrior

    July 24, 2010 2:39 am

    Thanks 4 sharing man!!! really very helpful!!! ♥

    0
  45. 56

    Thank you. It’ll help fb apps development

    0
  46. 57

    It’s AMAZING kit..but..sad it just onother workshiping for facebook, facebook sucks.it won’t last long :)

    -1
  47. 58

    Thank you!!

    0
  48. 59

    Really amazing stuff and helpful too….. thanks a ton….. :)

    0
  49. 60

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

    -1
  50. 62

    Thanks,

    0
  51. 63

    thanxx for sharing!!!

    0
  52. 64

    OMG, been looking for something like this for a LONG time. Awesome, truly awesome. Can’t wait to download it to my collection at work.

    0
  53. 65

    Wonderful … It’s really huge collection…

    0
  54. 66

    Dareen Alhiyari

    July 25, 2010 1:58 am

    Thanks!

    0
  55. 67

    A very resource full article! Thanks for compiling the tips and tricks. I have some already implemented…thanks for the rest.

    0
  56. 68

    @MANON:

    “Though with all the fantastic freebies and inexpensive stock images available now, I’m finding myself in need of an excellent Digital Asset Manager (DAM) for Mac.”

    Try Aperture – it’s a pro photo catalog/editor etc., but I find it invaluable for just having a sepaarte library with all my “collected images”, symbols etc.

    0
  57. 69

    sarfraz raza

    July 25, 2010 4:20 am

    What a great collection, I’m definitely bookmarking these for future ideas. They all have a ‘professional’ feel to them too.

    0
  58. 70

    Nice, but too bad facebook changes their interface every 3 months or so.

    0
  59. 71

    Thanks. Now i’ll be developing FB app soon.

    0
  60. 72

    Great Stuff……
    Thanks a lot……..

    0
  61. 73

    you guys have always been a valuable resource for me and this Facebook template is no exception – thanks a lot

    0
  62. 74

    Thanks guys. Very very usefull!!! Great job as always.

    0
  63. 75

    That’s great! Shame it’s out of date already though. Anyone know if it will be actively kept updated?

    0
  64. 76

    This is a crazy Barão’s work.

    0
  65. 77

    Danish Refai

    July 26, 2010 9:58 pm

    Thank ! Great work !

    0
  66. 78

    Nice!
    Thanks!

    0
  67. 79

    Awesome
    Great collection.

    0
  68. 80

    Let’s phish!

    0
  69. 81

    Renato Carvalho

    July 27, 2010 2:21 am

    Philip, could you please specify what is out of date?

    Maybe if you help letting us know what is out of date we could help to keep up to date. But without contributing is not going to help ;) Cheers

    0
  70. 82

    Anton Hilman

    July 27, 2010 3:47 am

    waw… awesome! thx for share bro

    0
  71. 83

    Awesome, I just wrote a blog article on the best UI resources for us designers, linked it up! contenttocommerce.com/fuel/ui-round-up/

    0
  72. 84

    Thanks a lot guys, this is the bomb! ;)

    0
  73. 85

    Thanks for the GUI… Some of the elements in it are really helpful

    0
  74. 86

    Pieter Brink

    July 29, 2010 8:57 am

    As always – Brilliant !!!!!
    Thank you so much for this!

    0
  75. 87

    wow what a great work :D

    0
  76. 88

    thanks!

    0
  77. 89

    Nice and Helpful thanks :)

    0
  78. 90

    Its Very Nice. Its very Useful for Facebook Designers and Developers.

    0
  79. 91

    faisalmalik1989

    August 11, 2010 8:26 pm

    Great PSD. Hope no one using it for phishing. LOL…

    0
  80. 92

    Woot, this is a great reference for creating a social networking site.
    Thanks for sharing :>

    0
  81. 93

    Tomasz Haracz

    August 15, 2010 4:39 pm

    Great, very useful recently used ff GUI on my portfolio
    Now got to try this :D

    0
  82. 94

    Dumisani Luthango

    August 25, 2010 5:13 am

    I’m loving the idea but I’m not sure how to use this. can someone please explain to me?

    0
  83. 95

    Usefull if you want to do “pishing website” …

    0
  84. 96

    Great resource, but I find it rather odd that there isn’t a “Like” button in any of the files. Seems like that may be a good addition for the next round of revisions. Again, cheers!

    0
  85. 97

    Leonardo Oliveira

    September 29, 2010 12:44 pm

    God bless you guys!! That’s great.

    0
  86. 98

    Thank you so much … good job man !!

    0
  87. 99

    this is great!thanks!

    0
  88. 100

    Great. But is it up to date?

    THX-M-

    0
  89. 101

    really sad that there is no hover buttons and user interactions styles

    0
  90. 102

    Sorry guys im new here:
    why is it good to have all that stuff in psd layers, when all that thing i already have in facebook?!? Sorry i didnt get it.

    0
  91. 103

    Martin Pottjewijd

    March 7, 2011 1:39 am

    Great work thanks!!!

    0
  92. 104

    Thanks,it’s great.

    0
  93. 105

    thanks ppl! too bad i didn’t stumble upon it earlier, would have spared me much work

    0
  94. 106

    Just I open with PS, but, seems I didnt have a font , anybody has the name of the font the template need?
    Thnks in advance

    0
  95. 107

    Thank you very much…this will save time for the really important thing, the user experience design =D

    Love you SM!

    0
  96. 108

    Thanks! this will really help me on my iPhone designs that require facebook posts modals.
    TY!

    0
  97. 109

    Hi
    This is great.
    Thanks

    0
  98. 110

    Oliver Bob Lagumen

    August 4, 2011 1:02 am

    Nice work, may I know what fonts are used here in this psd files? Its missing in my PC. Thanks.

    OBL

    0
  99. 111

    Hi This is great.
    Thanks

    0
  100. 112

    Thanks!!!

    0
  101. 113

    GR8 man … !! Thanks a lot brow ….

    0
  102. 114

    Isuru Ranawaka

    October 9, 2011 6:01 am

    Thanks a lot, It is a great help.

    0
  103. 115

    Great! Thanks for sharing.

    3
  104. 116

    Rasha Nour ELDin

    February 20, 2012 2:02 pm

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

    2

↑ Back to top