Balsamiq Blog

Introducing “Mockups To Go”

by Peldi Guilizzoni. January 17th, 2009 under Mockups, Release Announcements — 14 Comments

I am extremely happy to announce today the immediate availability of “Mockups To Go” (www.mockupstogo.net), a user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.

The idea for the community server came from Michael Bourque, and he describes it better than I ever could:

Michael writes: “It would be great to one day have a website devoted to sharing designs created by people (like you) using Balsamiq Mockups. It would be similar to UI Patterns, except you could download each user submitted mockup bmml file. Each design would have a threaded discussion for people to openly share ideas and collaborate on design. Perhaps it could be powered by the Confluence wiki.

This would be a community powered site, and would exploit the power of Balsamiq Mockups, but most importantly would promote reuse and awareness of good design.”

Four months later, MockupsToGo.Net is exactly it, except that it’s powered by the incredibly easy to use blog-via-email system called Posterous.

Here’s how it works:

Downloading and Using Components

1. After installing today’s new build, you will find a new item in the help menu:
   
2. Selecting the menu simply opens a new browser window to MockupsToGo.Net, where you can then browse or search for a particular component.
3. Once you find what you need, simply download the BMML file and open it in Mockups for Desktop. Then you can simply “Select All”, Copy, and Paste it into your mockup. If you are using a plugin version of Mockups (or the web demo version) you can import the BMML via the Import feature instead (Importing won’t erase your current mockup, it will simply add to it).

You may also subscribe to the site’s RSS feed to keep track of new components as they get added over time. I have also set it up so that new posts are announced on my @balsamiq Twitter account.

Givng Back: Uploading your Own Components to Mockups To Go

Thanks to the magic of Posterous, it couldn’t be simpler. To upload a new component to the site, you just send an email. Here’s a sample one:

Things to notice:

• the email must be sent to post@mockupstogo.posterous.com
• the subject of the email contains the name of the component / design pattern
• the body of the email contains your name and a brief description of your contribution (these are both optional, but encouraged)
• there are 2 attachments, one is the BMML file and the other is the exported PNG of it

That’s it! Once you send it I will get an email, and approve it with one click! If you don’t see it live on the site within a reasonable amount of time, send me an email and we’ll figure it out.

Thank Yous

I have already mentioned that this was Michael Bourque’s idea and not mine, but what I also wanted to share with you is that Michael really took the time to make me understand the value of it (it took me a while but now I’m a total convert). Not only, he contributed a number of useful controls already, and pushed me to make the site as simple as possible to contribute to (thus our choice of Posterous, I had gone with a custom wiki site at first). So thank you so much Michael, this really is “your feature”.

There are another 2 people I want to thank: Michael Rawlings and Theresa Neil. They both helped me refine the site and contributed to it in the last few weeks, and again pushed me to make it as simple and usable as possible. You can see some of Michael’s contributions on the site already, and Theresa has lots to add but has been busy finishing up her new book with Bill Scott (yes, these are the guys behind looksgoodworkswell.com).

Thanks so much guys, and a thank you in advance to all of those who will be contributing to Mockups To Go!

Also in today’s update

I spent a couple of days this week working with Eugene Mirotrin and S. Dharmarajan debugging 64-bit-linux saving and opening issues. The latest Mockups for Desktop build fixes most of these issues, but it might take a little longer to really nail it all down. Still, this takes care of most of it so I recommend upgrading if you’re having similar issues.

To Download the latest build:

• Mockups for Desktop: here
• Mockups for Confluence: here
• Mockups for JIRA: here
• Mockups for XWiki: here
• Web Demo: here

Onward!

— 14 Comments

14 Responses to “Introducing “Mockups To Go””

1. Peldi Guilizzoni Says:
   January 17th, 2009 at 3:39 pm

   FYI, this post was picked up on Hacker News: http://news.ycombinator.com/item?id=438638

2. Karsten Silz Says:
   January 17th, 2009 at 4:06 pm

   Hello!

   This sounds great! But you know that eventually, you have to do the upload to / download from the portal right in Balsamiq, don’t you?

   [Peldi: Heh...baby steps, baby steps... ]

3. Communauté Balsamiq Mockup | Linearis, le blog Says:
   January 18th, 2009 at 12:31 am

   [...] application de création rapide de prototypes d’interface, Peldi Guilizzoni annonce sur son blog la création d’un site communautaire pour partager les patterns ou éléments [...]

4. Matt Kocaj Says:
   January 18th, 2009 at 2:48 am

   freakin awesome!

5. erwin blom Says:
   January 18th, 2009 at 5:11 am

   Wow! Cool! Hoping for iPhone stuff

6. Adam Says:
   January 19th, 2009 at 8:05 am

   Looks great Peldi. I’ll crawl through my files and find some designs to post.

7. primeminister Says:
   February 10th, 2009 at 2:26 am

   Hi, Is it possible to add it to the library? Otherwise I have to search for my downloads and then use it. Would be great to add it to the default or other library in mockup app.
   Cheers and thnx again!

8. Dew Drop - February 11, 2009 | Alvin Ashcraft's Morning Dew Says:
   February 11th, 2009 at 6:48 am

   [...] Introducing "Mockups To Go" (Peldi Guilizzoni) [...]

9. Balsamiq Mockup on AIR at Springsteam - Next Generation Java Development | Spring . Flex/AIR . 3D Says:
   February 25th, 2009 at 10:38 am

   [...] Mockups To Go is an exchange platform for mockup components. At the moment it allows to exchange the project files from the desktop release. Although, it would be nice to have an uploader and downloader that can be used inside the desktop application to get components into the catalog. Instead you have to copy and paste the components between open files instead. Further details can be found in the blog post for introducing Mockups To Go. [...]

10. Chad Crowell Says:
    April 20th, 2009 at 9:16 am

    Can these custom controls be imported and available within the BM window without re-importing each time?

11. shawn Says:
    July 28th, 2009 at 11:29 pm

    I agree. It would be so much easier if we could add these controls to the BM window for easy future user.

12. Srinivasan Says:
    August 22nd, 2009 at 9:07 am

    +1 for adding the downloaded controls to BM window instead of having to reimport/copy-paste every time.

13. Cameron B Says:
    September 2nd, 2009 at 10:42 pm

    I’d also like new controls to be accessible through the main BM interface to avoid re-loading and copy-paste. Obviously the current implementation required no additional effort from Balasamiq Studios and was the no-brainer way to do it, but it lacks elegance and surely a properly integrated way to use custom controls would be best for everyone involved. And obviously there is much support from the userbase to add this capability so hopefully someone within Balasamiq is working on this

    [Peldi: Hi Cameron, yes it's one of our top-requested features and we have pretty exciting plans for it. Let us "finish" what we're working on and we'll get to that right after, give us a few more weeks]

14. simon butler Says:
    February 6th, 2010 at 12:24 pm

    any news on this feature peldi? i also would like to be able to add these new widgets to the catalog and not have to cut and paste the bmml files

    [Peldi: Hi Simon. This feature is on my mind these days. I plan on sharing our ideas about it in a week or two, stay tuned here and on Twitter! I want to start development of it in 2-3 weeks]

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website