Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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.

share|improve this question
1  
possible duplicate of What interface mockup programs are available? –  Eliah Kagan Mar 20 at 23:55
add comment

5 Answers 5

up vote 31 down vote accepted

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.

share|improve this answer
2  
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 '10 at 14:21
8  
+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 '10 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 '10 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 '10 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 '10 at 18:59
show 2 more comments

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.

share|improve this answer
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 '10 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 '11 at 8:09
add comment

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

share|improve this answer
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 '10 at 14:29
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
Doesn't look like it's free as in freedom either. –  l0b0 Mar 30 '11 at 8:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.