Balsamiq Blog

Help us design the "Components" feature

The ability to create components and re-use them across different mockups is one of our most highly requested features.

Some people call this “master templates”, others call it “reusable widgets”. We’re going to call it “Components“.

It all started with Michale Bourque’s request a year ago…we wrote two FAQ answers about it showing a workaround to achieve part of it using images, but those approaches don’t quite cut it.

We are finally ready to tackle this problem head-on, and we’d like to ask for your help.

We created a public myBalsamiq project containing our ideas for a possible implementation of the features that we think will collectively solve all the different use-cases related to reusing objects.

If you could take a few minutes to look around and give us feedback on it (by leaving comments under each mockup), we’d appreciate it.

We also included a draft of an implementation roadmap, with releases along the way. That’s the mockup I would start from.

Here’s the link to the project: https://our.mybalsamiq.com/project/143

Send it to your UX-savvy friends!

We are eager to get started on the implementation, so if you have some feedback, don’t be shy!

Incidentally, this will also help us test myBalsamiq, so if you hit any snags in the process of reviewing and commenting on the mockups above, let us know!

Together we can make this very important feature as good as it can be. We hope you’ll want to pitch in with your ideas!

Onward!

Peldi for the Balsamiq team

— 13 Comments

13 Responses to “Help us design the "Components" feature”

1. Eric Malamisura Says:
   February 26th, 2010 at 8:02 am

   Peldi,

   Went to that link, after clicking two images I get timeout exceptions. It no longer appears to be working, to much traffic maybe?

   Eric

   [Peldi: hmm, that's not good. It all seems to work well from over here. Where are you located? Can you try again please? Anyone else having the same issue?]

2. Nouman Saleem Says:
   February 26th, 2010 at 8:25 am

   Hey Peldi,

   The interface looks great, you should take a look at this:

   http://www.zurb.com/article/304/behind-the-scenes-building-the-new-visual

   which they have a demo of here:

   https://zurb.notableapp.com/website-feedback/10696/Applecom-Public-Post/screenshot

   I think something like this may be important, sure a summary is great, but to outline specific items on your mockup should be a key element(if possible).

3. Adam Wride Says:
   February 26th, 2010 at 8:36 am

   Peldi – FWIW, I get this when I go to the mockup: http://drp.ly/uaKck

   [Peldi: that's because you're logged in as a registered user for another account. We need to fix that, but for now can you try another browser or logging out?]

4. Adam Wride Says:
   February 26th, 2010 at 9:33 am

   Peldi – yea, using a different browser (no session) worked great.

5. Wireframes Magazine » Help Design Balsamiq’s “Components” Feature Says:
   February 26th, 2010 at 9:54 am

   [...] of Balsamiq is opening up the floor to a design discussion around how the upcoming “components” feature might work. Reusing objects or items [...]

6. Hu Says:
   February 26th, 2010 at 4:03 pm

   Sorry…. but I cannot see anything but a loading graphic that says “MyBalsamiq”. I am on Windows 7, FF3.5.8, Google Chrome, Safari, and IE 8 (the loading graphic doesn’t even show up on in IE8)). I am running the debugging version of FP 10.

   [Peldi: hmmm, can you send me a screenshot of what you're seeing please? peldi@balsamiq.com]

7. Andi Says:
   February 27th, 2010 at 12:56 am

   Well, I’ve the same problem as Hu. I don’t see any content.
   Mac OSX 10.6.2 with Opera or Safari. Screenshot is on the way.

8. Ed Says:
   March 1st, 2010 at 6:24 pm

   Same here, constantly displays “myBalsamiq” progress bar at 100% and proceeds no further. Running Win7 x64 and tried on both FF 3.6 (with Adblock Plus) and Chrome 5.dev_latest (no extensions installed). Cookies & JavaScript enabled but still no joy.

   [Peldi: we're looking into this right now, thanks for reporting it!]

9. David Says:
   March 2nd, 2010 at 11:42 am

   Please consider adding live data grids and Ajax state transitions. Thank you for all the great work you are doing!

10. Andy Says:
    March 17th, 2010 at 6:18 am

    I see the comments down the RHS of the screen, not grpahic on the left. I have IE8, Win7 and Adobe Reader 10

11. Dave Perkins Says:
    May 6th, 2010 at 2:44 pm

    I have a comment about how I would like to use this feature and also a potential issue that would keep me from using it.

    I would like to use this feature to display an accordian on all of my pages. This accordian would contain links to other pages. The user uses this accordian to navigate around the site via its linking capabilities. By doing this, I can do some usability testing of my site while it is still in the design phase.

    I want this feature because during the design cycle, adding and remove pages is rather common and for a large site, very tedious if I have to visit every page to make the same changes.

    ISSUE: For this to work however, I would need the ability to have the accordian show a different selected entity on each page.

    NOTE: I cannot see the graphic on the left either.

    [Peldi: Thanks Dave. We're definitely going to support your use-case, it's the most important one! ]

12. Brian Johnson Says:
    May 23rd, 2010 at 7:21 pm

    This is a great feature and I need it as soon as possible.

    First, the background. I plan to generate code from the BMML file and need to provide my end users a predefined set of controls for designing mockups that are linked to my code generation metadata repository. My use case is for business people with nothing more than Office document experience to design their own forms.

    Second, the semantics. What is a component? My definition is: A collection of fine grain objects. While a BMML file certainly is a component of fine grain objects, the objects are fixed to the image feature and the embedded control objects. To me a BMML file is the result or output of using design components not a design component itself. I can manage to copy BMML files and parse them on my own, what I need is to provide my own semantics and controls without modifying the embedded controls.

    The implementation: In my opion, this feature would best be implemented by allowing subclassing of the embedded controls into my own library that I can choose to organize however I need to. Visually turning off the embedded controls, installing my own control library, and relabeling the organizing buttons Big, Common… to me is a more reliable way to provide components and allow for integration with external systems at the same time.

    Alternative: As long as I could choose to not display a particular embedded control, I could cross reference the embedded control in a BMML file to my id number this feature would satisfy my most pressing need.

    Thanks for your consideration.

13. Merlinox Says:
    July 14th, 2010 at 9:59 am

    Sorry but if you in Import simply add a select (import bmml/ link bmml) e in bmml add a new syntax to “include” bmml. No?

Leave a Reply