Boundary hinting tool / AJAX Storyboard feature
What wonderful software. These ideas may be up already - sorry for not reading the entire list before posting. I'd like to see two features added:
1) A tool placed under markup that is visually identical to the fieldset tool, but that the default state is to have a transparent fill and the color selector and opacity slider controlling the border and text. The idea is to easily provide faint hinting about the structural boundaries for regions on a page such as wrapper divs and sidepanel divs.
The workaround is to send these behind a white box with partial opacity, but this is tedious and hard to manage updating when there are many layers to restack.
2. Picking up on the link to mockup concept to make a playable storyboard, I could see a 'fastlink' idea. From one mockup's menu or content link, a feature to 'create fastlink' is to name the proposed linked mockup (called 'newlink'). On clicking 'make fastlink', the following sequence happens:
- The current mockup is updated with a link to the newlink.bmml and saved.
- The current mockup is then save-as newlink.bmml.
- Newlink.bmml is then updates to undo the link created above so there isn't a circular reference - instead the link is updated to be 'active' or treated as unlinked.
- The UI is left with Newlink.bmml open for editing to do same-as-except revisions to the
copy of the page that would result from following the link. While in Balsamiq this appears to load a new page, when executed in HTML this gives a storyboard simulation of an AJAX update of the current page.
Great stuff guys!!!!!
1) A tool placed under markup that is visually identical to the fieldset tool, but that the default state is to have a transparent fill and the color selector and opacity slider controlling the border and text. The idea is to easily provide faint hinting about the structural boundaries for regions on a page such as wrapper divs and sidepanel divs.
The workaround is to send these behind a white box with partial opacity, but this is tedious and hard to manage updating when there are many layers to restack.
2. Picking up on the link to mockup concept to make a playable storyboard, I could see a 'fastlink' idea. From one mockup's menu or content link, a feature to 'create fastlink' is to name the proposed linked mockup (called 'newlink'). On clicking 'make fastlink', the following sequence happens:
- The current mockup is updated with a link to the newlink.bmml and saved.
- The current mockup is then save-as newlink.bmml.
- Newlink.bmml is then updates to undo the link created above so there isn't a circular reference - instead the link is updated to be 'active' or treated as unlinked.
- The UI is left with Newlink.bmml open for editing to do same-as-except revisions to the
copy of the page that would result from following the link. While in Balsamiq this appears to load a new page, when executed in HTML this gives a storyboard simulation of an AJAX update of the current page.
Great stuff guys!!!!!
2
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company implemented this idea.
-
Inappropriate?+1 for a "boundary" control. I'd like to see a rectangle with a dashed border line in medium grey or a partially (50%?) transparent black.
I’m pleased that someone had already suggested this idea
-
Inappropriate?Hello Duke and Jenni, sorry for not replying earlier. I really like the "boundaries hint" markup control idea, but I'm having trouble visualizing it. Do you have any screenshots you could show me about it?
As for the "fast link" idea, I like that too. Not easy to implement, but I'll add it to the TODO, thanks so much for the suggestion!
I’m thankful
-
Inappropriate?Here is an image from a wireframe I did in Visio, before I found Mockups, that shows you an example of "boundary hints". In the upper area, each thumbnail and associated text must fit within a defined area but this area is not actually marked by a line in the final UI. In the lower area, the text must respect certain margin widths, but the space it should be placed in will not be marked by a "real" line in the UI.
I’m hopeful
-
Inappropriate?Thanks Jenni!
Here's another example on a real site http://www.joomla.org/index.php?tp=1 (compare with http://www.joomla.org/index.php ) The idea for template design is to make sure the layout is true to the pixels reserved for a feature. I'm not suggesting that you must include the div titles and classes, but it's even nicer if they could be globally toggled to display hints and titles, display hint borders without titles, or no hints. The UI is nearly identical to dragging out a text box except the border is a faint dashed line.
It would also be beneficial if these snapped to 10 pixel increments to match blueprintCSS, grid960 and similar standard container dimensioning.
Note that the hint for adjacent objects should snap and overlap (just like slices in Photoshop.) or be separated by a 10px gutter if using blueprint or similar The hint marks the margin edge, not the padding edge where the border sits.
I’m hopeful
-
Inappropriate?I'm not as concerned about snapping - if it's implemented I'd want to be able to turn it on and off, because sometimes I'm not using a standard grid. I also don't personally require hint titles, though having them wouldn't be a problem.
For my needs, just having a control that is almost identical to the Rectangle control except with no interior fill (i.e., treat as always "100% transparent) and control of the border colour would suffice.
A real solid "nice to have" would be to select border line type, with options for solid, dotted, and dashed as well
-
I think we'll go with the border style idea for the existing Canvas control. Added to the TODO! -
Awesome! I look forward to seeing it implemented! -
Inappropriate?Hi there! So I had an hour or so to spare tonight and decide to pick this low-hanging fruit.

What do you think?
Take it for a spin on the pre-release version! http://www.balsamiq.com/products/mock...
I’m happy
1 person thinks
this is one of the best points
-
Low hanging fruit tastes really good. Very fresh. The no border selector (now) seems easier to select than before. Dotted looks great. Just for the rectangle, right? -
:) Yes, just for the Rectangle control. -
Inappropriate?This is so great Peldi! I really like the "curved corner" option as well.
My only remaining request would be the ability to change the border colour so I could ensure a contrast no matter what colour background I put it over. (i.e., I could change the border to white if it was over a black background). It's also useful for making these "boundary regions" less conspicuous than other lines in the UI (i.e., by setting the colour to a mid-range grey) or to visually differentiate separate boundaries from each other (i.e., header region in blue, footer in red)
I’m excited and pleased
-
FWIW, colored borders would just be one more thing... -
Inappropriate?Dotted border is cool. It starts to break down when the rectangle is smaller than 20 pixels but looks good otherwise.
I am like Jenni: changing the color of the border is as important as having dotted lines for me. Thanks,
I’m thankful
-
Inappropriate?Ok, I added support for border control as well. It's all already live! http://www.balsamiq.com/blog/2009/12/...
I’m happy
Loading Profile...







