August 18, 2009

Facebook Connect mockup for Balsamiq

I don’t pitch products much, but I feel like I need to on this one.1 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 piece, 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's drawing tools. 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. Another thing Balsamiq provides is the ability to export your designs. So, you can now use this too – just use Balsamiq's import feature to place the XML below into your mockup.

facebookconnectbalsamiq.xml

Here’s the mockup you get:



  1. Author's note: After I published this post, I sent a thank you note to Balsamiq, the company that made this great wireframing tool. They were kind enough to give me a free license - thanks Balsamiq!