Prototyping/Wire-Framing Websites With Balsamiq
Thanks to Stephan H. Wissel I learnt of Balsamiq via his site yesterday. It's one of those pieces of software you probably don't realise you need until you see it. Certainly, I didn't. Then, within minutes of seeing it, I was reaching for my wallet and am now a licensed user.
In brief it allows you quickly mock-up a website/application/whatever. Examples. This is useful on so many levels.
For starters it will definitely help working with customers to understand what they're after before I start, rather than iterating towards it after I've "finished".
Outside of work it will help me with personal projects, such as the planned re-hash of this site. Nothing major. Just moving, adding and dropping some elements from the layout to help it adapt to what it grows in to (the recent articles section needs to go!). Here's the mockup I have so far.
Looks a lot like it does now, but this is where I plan to take a "helicopter view" and start working on it.
As well as exporting PNGs like the one above you can save/export the BMML files (XML) which describe the mockup. Here's the file for the above layout. There are lots of BMML files available for inspiration.
If your client had the software you could send them the file, have them add annotations and return it for further tweaks. Although this will be easier soon when they release an online version.
Using With Flex
You can even export the layout to Flex code and import straight in to Flex Builder. Although at first glance this is like saying you can write and export HTML from Word. You can but it's very messy. The Flex generation seems to just use absolutely-positioned canvases for everything. You'd probably spend longer tidying it up than creating from scratch!
Balsamiq does indeed rock and I especially like it because it has been helping more and more developers see the value in prototyping solutions before they start slinging code. It's kind of a passion for me (http://interfacematters.com/2007/05/low-down-on-low-fidelity-prototyping.html).
Cheers!
Jake,
I have been using it for the past 6 months and it is great.
I normally do this with Corel and export to a jpg. Having the ability to add the comments is nice though.
Corel!?
I used to do it with Fireworks. Only now do I realise how cumbersome that was.
I use Fireworks for some image editing, but I like Corel better for layouts and image creation. I've been using Corel longer and am just a little more familiar with it.
I remember having a copy of Corel Xara when it was one of the first 32bit apps out (IIRC) as Win95 was just released. Seems so long ago now. 14 years. Damn.
Looking at buying a laptop with 64bit Windows on it as we speak...
We use Balsamiq at work as our mockup tool of choice, it's great for getting functionality agreement with the client without getting caught up in final layout, colours or design.
Check out Napkee as well, it can take BMML files and makes HTML/Flex prototypes out of them. Almost a companion product, but written by someone else.
http://www.napkee.com/
We use Balsamiq with Jira - its great to tie it into the project it self and there you can have the user accept it.
http://www.atlassian.com/software/jira/
Why donĀ“t we have this in Domino ?
I did a prototype with Balsamiq and it can be integrated into an XPages application easily. Talk to Peldi about licencing and ask me how to code it. And http://www.napkee.com/ seems to be nice. A XPages generator doesn't seem too difficult either.
:-) stw