Facebook Connect Mock-Up For Balsamiq

Aug 18, 2009 by admin    4 Comments    Posted under: Tech

I don’t pitch products much, but I feel like I need to on this one. A Carsonified post from Ryan Carson clued me into a great tool for designers and developers who like to sketch up simple wireframes before diving into a project. Balsamiq Markups is the best tool (even better than pencil and paper) I’ve seen that lets me do this.

So, for this project’s user management, I’m going to use Facebook Connect. I wanted to sketch up a few of the pages and the Facebook Connect interactions, so I used Balsamiq. Here are the results:

Thinking I might need that Facebook Connect window mockup again, I exported it to XML using the built-in export feature. You can use it too–just use the import feature to place it into your site. All the objects are locked when you drop them on the stage, but can be easily unlocked and modified to fit your particular site, if necessary.

Here’s the mockup you get:

And here’s the code: facebook_connect_balsamiq.xml

Tags: homepage, homepost

4 Comments + Add Comment

• 
  Peldi Guilizzoni August 19, 2009 at 1:30 am

  Hi there, awesome mockup and thanks for sharing it! Perhaps you’ll want to share it on our community site as well? We have a few other Facebook-related mockups on it already: http://mockupstogo.net/tag/facebook

  Thanks again!
• 
  admin August 19, 2009 at 5:10 am

  Great resource! I didn’t know such a site exisited yet… Balsamiq gold
• 
  Jourdan August 19, 2009 at 8:50 am

  Nice resource! Where do you find the time to do all this?
• 
  Efraim August 20, 2009 at 5:36 pm

  Awesome stuff! You should put it on Mockups To Go .net.
  I love Balsamiq!

  Have you seen this yet?
  http://www.MockupMagnets.com
  I use them almost daily!

  -E