Facebook Connect Mock-Up For Balsamiq

Aug 18, 2009 by     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:

Balsamiq Desktop

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:

Facebook Connect for Balsamiq

And here’s the code: facebook_connect_balsamiq.xml

4 Comments + Add Comment

  • 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!

  • Great resource! I didn’t know such a site exisited yet… Balsamiq gold :)

  • Nice resource! Where do you find the time to do all this?

  • 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

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">