logo

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.

codestoremockup

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!

Comments

  1. 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!

  2. Jake,

    I have been using it for the past 6 months and it is great.

  3. I normally do this with Corel and export to a jpg. Having the ability to add the comments is nice though.

    • avatar
    • Jake Howlett
    • Fri 11 Sep 2009 10:39 AM

    Corel!?

    I used to do it with Fireworks. Only now do I realise how cumbersome that was.

  4. 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.

    • avatar
    • Jake Howlett
    • Fri 11 Sep 2009 11:53 AM

    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...

    • avatar
    • Marcin
    • Sun 13 Sep 2009 12:36 AM

    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/

    • avatar
    • Palmi
    • Sun 13 Sep 2009 04:45 AM

    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 ?

  5. 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

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 11 Sep 2009

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content