Storyboard mode
I am sure we all use Balsamiq to design and demonstrate user flow. I would love to see a capability to manage and create a storyboard.
You would start by creating a new storyboard in which it displays a grid on the screen. You could right click a cell in the grid and pick "Start new Mockup" or "Import Mockup".
If you click “Start new Mockup”, Balsmaiq puts you into the “create mockup screen”, but when you save it goes back to the storyboard. Of course you can drag and drop to change order, and/or double click to open/edit.
Saving the storyboard just saves an XML file, but you can also export the storyboard to PNG and choose a scale.

You would start by creating a new storyboard in which it displays a grid on the screen. You could right click a cell in the grid and pick "Start new Mockup" or "Import Mockup".
If you click “Start new Mockup”, Balsmaiq puts you into the “create mockup screen”, but when you save it goes back to the storyboard. Of course you can drag and drop to change order, and/or double click to open/edit.
Saving the storyboard just saves an XML file, but you can also export the storyboard to PNG and choose a scale.

75
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 has this under consideration.
-
Inappropriate?Hi Michael, thanks for the idea. I have something similar planned for the feature. Could you maybe post a link to a bigger version of the image? It seems that GetSatisfaction shrinks images down and doesn't provide a link to the original size.
-
Inappropriate?Can you elaborate on your "something similar planned"? I would be interested in helping you define it.
-
Inappropriate?Hi Michael, I'm not ready to share my plans as they are not fully formed, but what I have in mind makes me pretty excited. Once I have something more detailed, I'll drop you an email - I'll probably want to assemble a small private "advisory board" for this topic.
-
I'd love to be on the "advisory board" as I've starting doing a lot of storyboarding lately. My workaround was importing a storyboard png file (squares for images with lines under them for text). -
Inappropriate?Today I gave a demo of Balsamiq desktop to my development team. One request came up was to provide an html export option:
This would produce an html file with the embedded png image inside of it. Even better would be able to export all as single html file. -
Can you tell me a bit more about the scenario? I fear that a simple HTML file won't suit anyone's particular needs, people will want the HTML to be styled, add their comments, add a way for viewers of that html to add comments, etc...in other words, they'll have to open the generated HTML in Dreamweaver anyways, so how much time would this be saving them? But maybe I'm missing the scenario entirely. -
Inappropriate?Peldi,
Great question.
It came from a desire to link the mockups together. The developer thinks it will be valuable and important to string mockups together in such a way that when you click somewhere on the mockup, it opens another mockup. We was hoping to then edit the HTML and hook-up the pages with link or image maps.
Example:
Say we were designing a wizard UI with many steps and alternate paths. It would be helpful to provide a single file format that can be distributed over the web with hyperlinks that piece the mockups together in order.
I can see its usefulness, but worry that if implemented as is, it could add too much complexity and dependence. Also it requires someone to edit the html files. So I am not sure he has the right idea.
But the goal is still the same as my story board mode idea. Which is why I posted it.
Idea:
Maybe you could create some kind of page/layer option in Balsmiq. It would be another page in your notebook.

You work on a single BMML file, but you can put whole UI mockups on different pages/layers. Maybe a presentation mode (my earlier request) would show the first page, and you could click somewhere to progress to the next mockup page/layer.
These are just some ideas, but I do think a lot of us need to mockup user flow, not just single UI screens.
I’m happy
-
I hadn't considered it, but that's a really clever way to hand-roll storyboarding, at least for now. A simple script could take a list of mockup filenames and output a series of simple HTML files which embed the PNGs and link from one to the next. I see that I am very late to this party, but if it's still not implemented (I haven't tried the prerelease) and you are interested in something like this Michael, (*and* you are using a Mac or Linux or the word "cygwin" doesn't scare you) then I can open source a script like that as I basically can't live without it for my current project. -
Inappropriate?Ok, glad to hear this is about storyboards again...I have some exciting plans for it, I'll definitely include you in the planning and development of them. Image Upload comes first though :)
-
Inappropriate?This is an important feature request for me too. We need some sort of mechanism for "presenting" a series of mockups in an interactive fashion. Ideally making a specific element clickable, and directing you to another mockup file would be great.
It probably all boils down to sorting out a good "project format" for managing collections of mockups on the desktop version of the tool.
Mind you, interconnecting mockups on a wiki like Confluence actually works quite well. Gives you the chance to annotate the mockups too.
I’m confident the peldi genius will come thru
-
Inappropriate?I look forward to seeing this functio0nality in Mockups if it is to come, however it does seem like a big thing to implement to me.. I used to use Axure RP, which allows a lot of this sort of functionality, albeit at an expense.. I just used trial of it, but it was quite good..
However I like Mockups for it's simplicity and sketchy graphics, I think they are better for initial stages to stop people visualising them as how the app will look and focus more on functionality. -
Inappropriate?Brian, you nailed it. Adding interactivity is a slippery slope, and the trickiest part IMHO is how to offer such powerful functionality without tainting the simplicity of the tool for every-day use. I have some ideas on how to do it. When I'm ready to discuss it (give me a month or two), I'll email everyone on this thread privately to see if you could help me with the design/alpha/beta, etc.
I hope you will want to!
I’m so excited and cannot wait to start working on this
-
Inappropriate?Once you have figured out a "collection" of mockups, I think the simple functionality of allowing a button or text item to "link" to another mockup in the collection would get me to 90% of what we need.
The concept of a presentation mode or output to HTML would be needed to allow people to click through. I'd be fine with straight HTML with no adornment as we could put it in a frame or add some header code somehow quickly. -
Inappropriate?Definitely love the idea of interactivity. It is one of the things I miss from Axure.
-
Inappropriate?Michael and others, Peldi posted a link on the balsamiq blog about a technique I developed for creating storyboards/demos from Mockups. I have complete directions and a 48 page storyboard demo on my blog, There are several posts as I refined this technique. Here they are in order:
http://eclecticguy.com/2008/11/06/ass...
http://eclecticguy.com/2008/11/07/upd...
http://eclecticguy.com/2008/11/10/upd...
And yesterday I summarized the entire thing along with a description of my learnings from the demo I developed using this technique:
http://eclecticguy.com/2008/11/12/shr...
You can check out the demo (and the application I am working on) at:
http://www.shrugh.com
One advantage of this technique is it only requires a Web browser to view - it can be distributed as files or served from a Web server.
I’m excited
-
Inappropriate?Please include me in the e-mails when you get to that point. Thanks, Steven
-
Inappropriate?any ideea how long aprox. will take the implementation of storyboard feature in balsamiq?
anybody working on some external solutions like this from Michael Hackney?
i am asking because i have some ideeas regarding an external editor for his workaround, but i don't want to waste my time if a better solution will be a generic one or another existing external one. The manual editing of html and css files is not very convenient for me. -
Hi Ramses, I still don't know. This is the one last big remaining feature for Mockups, and I want to take the time and do it right. I am going to ship 1.5 in the next few weeks, then deal with bug fixes if necessary, then focus on this. So it will be at least a couple of months before I have anything testable. I'd love to hear about your ideas if you're willing to share them! -
Inappropriate?Peldi,
Can you let us know how this might be implemented? If you see my post above, I think this would mostly satisfy what people are looking for:
http://getsatisfaction.com/balsamiq/t... -
Hi Michael, what I have in mind is pretty close to your proposal. I'll start a thread about the design as soon as 1.5 is out (I really want to get this out, it's been taking too long). -
Inappropriate?I could suggest looking at DENIM (http://dub.washington.edu/projects/de...) with it nice idea on different scaling levels
-
Inappropriate?I've been using Easy Prototype on Mac to post my mockups on the web. Then I use Protonotes to add some javascript to it so that people can add postit notes on the fly. Works great. I recommend implementing something close to this in Balsalmiq.
www.getiquality.com/prototype/admin
I’m excited
-
Pete, I can't seem to find a product called Easy Prototype on Mac. Is that what it's called? Can you please post a link to it? -
The link to Easy Prototype is http://www.extremeplanner.com/easypro.... It basically gives you the functionality to quickly link image files together and embed links within them. -
Inappropriate?Storyboarding and user flow diagrams are the main thing missing for me. In fact, I'm going to a competitor (gliffy) for this portion, which doesn't even really solve my problem, since I can't really link multiple documents into a story. I need to be able to send something to my developers that actually shows what happens, and for them not to need balsamiq (they are overseas and not internal). Right now I send them a set of png images which does not tell the story. I need a flow diagram, with the ability to label the links between mockups.
-
Hi Aliix, thanks for the feedback. We are working on this feature, first as part of the hosted version (weeks away from beta), then we'll port it to the Desktop version somehow. We want to take the time to get it right, so I hope you'll be pleased with the results when they're ready. -
Inappropriate?I have used the pptplex add-in to PowerPoint to create storyboards. Using this I can have each screen on a separate slide and use a custom background to stitch them together with the flow. Looks pretty smart when you can zoom in and out of the flow to each screen.
I’m excited
-
Forgot the link
http://www.officelabs.com/projects/pp... -
Inappropriate?The last reply on this thread is several months ago, though most comments from the Devs seem promising.
As the concept of 'Storyboarding' in some fashion is the only feature that is missing in Balsamiq (in my humble opinion), is it possible to get some feedback on when this might be forthcoming?
By the way, I'm defining 'Storyboarding' as the ability to somehow manage the already existing feature of linking between mockups. Not sure if that completely fits with OPs concept...
Thanks.
Update: Ok, looks like I'm a bit late with this, and the existing 'linking' feature seems to be the RESULT of this thread.
In that case, can anyone recommend a tool they've used to manage the myriad of different mockups necessary for a fully working mock-UI? Is Balsamiq planning on offering one? Should this be a new thread? -
Hello Jamie, Peldi here. I'm terribly behind on replying to GetSatisfaction threads, my apologies. Allright, storyboarding: I think what you mean by it is what others call "a free viewer", for which I have a FAQ here: http://www.balsamiq.com/products/mock...
- In the web app version, you'll just be able to send people to a link and they'll be able to click around your prototype.
- For other versions, the first thing I plan on doing is letting you export a mockup (and all the ones linked from it) as a multi-page, internally-linked PDF, which you could then send around.
- There's a couple of tools that might help you today. See Napkee and the Vi.to image map exporters here: http://www.balsamiq.com/products/mock...
I hope this helps! I realize this is an important feature, and we'll get to it, have no fear. :) -
Not quite what I meant Peldi, though thanks for the reply. Looking for a tool that will help me manage the hundreds of bmml files and links between them really. What I REALLY want is a flowchart that lets me rename links and files, but that's likely outside the scope of what Balsamiq is.
You see, with the ability to link between mockups and the more interactive a mockup is, the more hundreds of .bmml files there are. If I spend days creating a fully functional mockup for a client, but then they want a slight change, I have to remember every place I put a link to that page and change them all individually (just an example problem, but you get the idea).
Was looking for advice on a tool to track all of that, if anyone knew of one. (Visio is a bit 'dumb' for this purpose, though the idea is right). -
Inappropriate?I am using the Fogbugz version of Mockups and it tells me the linking is not available in that edition :( Hopefully this is a short term thing, the Fogbugz integration is fantastic.
I’m sad
-
Hi Jas, Images and Links are the last 2 remaining features that we need to bring into FogBugz. We're starting the work on images tonight, linking comes right after. -
Peldi, Can't wait! -
Inappropriate?Re: Links
This has allowed me to show an almost feature complete interactive storyboard ( > 50 screens) to my client - but with a couple of gotchas.
I note: that we can't link off menus.
Also we can't link off row selections in DataGrids (or link off cell selections within a selected row. IMHO - cell selection link overrides row selection link if cell selection link defined).
I also note that performance decreases significantly as number of screens increase. I think some internal caching of off-screen (but loaded) mockup screens is required. (I'd suggest some form of LRU cache).
Love the product btw. !!
I’m very thankful
-
Inappropriate?The internally linked PDF export would be a great way to send a "viewer" to clients for review for us desktop users. Is that option near completion?
I’m happy
1 person thinks
this is one of the best points
Loading Profile...








