44

As part of my job as a web developer, I spend an amount of time doing UI prototypes to show the client. It's a pain in the behind but sometimes it has to be done.

I've seen Shuttleworth (and the design team) pump out images like this:

Balsamiq Mockups example

That's made by something called Balsamiq Mockups... Something that balances on top of Adobe Air (yack!) and costs $79.

I've tried it but it kept falling over. I think it had something to do with Air not the app itself. My point is if I'm paying out for something, I want it to be native.

Improve this question
0

5 Answers 5

Reset to default
34

For reasons I don't begin to understand, its authors have written it as a Firefox plugin, but Pencil is a great FOSS prototyping tool. Like Balsamiq Mockups, it comes with a massive number of prefabricated components that allow you to quickly throw together a demo screen. Also like Balsamiq, you can have multiple pages in a sketch, and link between them, allowing your programmers and designers to "click" certain buttons, and get a feel for what should happen when that occurs.

Unlike Balsamiq, its default mock widget set looks like real widgets, which I get concerned causes programmers to slavishly imitate the mockup they see on screen. Thankfully, a sketch widget template has been distributed with Pencil for awhile now. Also unlike Balsamiq—and hopefully not surprising for a Firefox add-on—Pencil exports its sketches to HTML, not Flash/Flex.

I know Pencil looks weird because it's a Firefox extension, but it actually works very well, and is easy-to-use. I am not ideologically attached to FOSS and don't mind spending $80 for great software, so I'll be honest and say that I use Balsamiq over Pencil. I find Balsamiq's general workflow and ease-of-use superior to Pencil. But Pencil's still a great tool. If you're looking for a FOSS prototyper, I think you'd have a hard time doing better. Launch Firefox and go check it out.

Improve this answer
7
  • 3
    Their website is pencil.evolus.vn and that has the 1.2 version on that comes with sketch and web libraries. Very impressive stuff even if it does sit on top of Firefox (which I have running 24/7 anyway).
    – Oli ♦
    Aug 9, 2010 at 14:21
  • 9
    +1 Also it appears that standalone packages are available: pencil.evolus.vn/en-US/Downloads/Application.aspx so even if you don't run Firefox you can still use it.
    – Marco Ceppi
    Aug 9, 2010 at 14:26
  • Thanks for the link corrections; I fixed them in my own post to go there, rather than the Firefox add-on site.
    – Benjamin Pollack
    Aug 9, 2010 at 15:47
  • 2
    Been playing with pencil just a bit. I like it a lot! It's worth noting that you should go get the add-on from the main web site, and not from the mozilla add-ons site, since their version is several revisions old.
    – Don Faulkner
    Aug 9, 2010 at 18:37
  • 4
    There is a debian package for stand alone version of Pencil (runs outside Firefox) available on the project’s google code site: code.google.com/p/evoluspencil
    – kounryusui
    Oct 23, 2010 at 18:59
15

Personally I like doing web-ui prototyping in Inkscape (vector graphic drawing program), it is fairly simple to use and you can reuse most of the mockup when you are going to make the final product.

Improve this answer
2
  • 2
    +1 Doesn't help me but might others. I tend to hand the design work off to designers (I'm more UX and backend development) and I'm quite incompetent with Inkscape still.
    – Oli ♦
    Aug 9, 2010 at 14:28
  • 1
    Here's a relevant video made by Máirín Duffy for a Fedora "FUDcon" -- Creating UI mockups in Inkscape . It's a 50 minute talk (and not streaming, you'll have to download it).
    – belacqua
    Feb 5, 2011 at 8:09
10

Try Glade Interface Designer, a GTK/Gnome interface designer, usually used for real applications, but could equally be used for prototypes.

Improve this answer
1
  • 1
    +1 I can see its potential but it's a bit hardcore and desktop-centric for my needs. Still, somebody reading this might find it useful. Thanks for your answer!
    – Oli ♦
    Aug 9, 2010 at 14:29
5

I also recommend use of Inkscape for mockups. You can get a few stock widgets from www.openclipart.org (someone should upload more!).

Where I find it very handy is for marking up an existing UI... Take a screenshot of the app, insert into Inkscape and put it on a locked layer, then do your drawing on a layer on top of that to show whatever changes you need to show.

Improve this answer
0

I've used Mockingbird before for a very small project. http://gomockingbird.com It's a web-based client that allows collaboration. It apparently is going to leave beta and stop being free in a few days though.

Improve this answer
1
  • 1
    Doesn't look like it's free as in freedom either.
    – l0b0
    Mar 30, 2011 at 8:20

Not the answer you're looking for? Browse other questions tagged .