Balsamiq

MockGen: From Web Site to BMML in One Click

Hello Balsamiq friends! Today I have asked Tim Shnaider to write up a blog post introducing his new awesome Mockups extension. Enjoy! Peldi

Generate mock-ups from web pages.

Hi everyone, I’m Tim from xemware. We are a small ISV based in New Zealand. Our goal is to provide tools and services that make the software design process easier and quicker. We’ve got big plans, and we listen to you, so tell us what you'd like to see to make your lives easier.

Introducing MockGen

MockGen (www.mockgen.com) lets you quickly generate mockups from web pages. You choose how the web page is converted into a mockup by selecting a style sheet (we have four to choose from and power users can create their own with our help.)

It's designed to be a timer saver to get you working with mockups quickly using your own existing sites or others (solely for inspiration of course!).

You can generate mockups for many pages, and links are retained between the mockup controls.

Using MockGen is easy:

1. Sign up to MockGen
2. Go to the Generate page
3. Enter the starting URL e.g. http://www.facebook.com
4. Pick a style sheet that controls how the mockup is
   generated
5. Click Submit

The MockGen web service will retrieve the pages, convert them to mockups, and email them to you in a ZIP file.

So how do the mockups look? - the following example shows the differences between some of the style sheets, when used to render the very familiar Facebook login page.

'Complete' style sheet - An almost complete replica of the page - as a mock-up with individual controls!

'Standard' style sheet - simpler rendering, background images have been stripped.

'Simple' style sheet - all text is rendered black, and images are left as placeholders.

Time saver hint: use the Create Bookmarklet feature on the Generate page to create a bookmark that can be dragged to your bookmarks folder/toolbar. Then, when you're viewing a web page in your browser that you want to create a mock-up from, click the bookmark to pre-fill the MockGen Generate page form. Read this blog post for more info.

Try out MockGen for free.

You can generate an unlimited number of mockups using the ever so slighty restricted (limited to 600px high) style sheets. To generate entire pages subscribe to a plan or buy credits as required.

We'd love to get feedback and requests from you - follow @mockgen on twitter or stop by our support forum and drop us a note.

Happy Generating!
Tim @ xemware