Native, FOSS GUI prototyping tools?

software-recommendation programming alternative design

13,103

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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.

View more solutions

13,103

Oli

Hi, I'm Oli and I'm a "full-stack" web-dev-op. Eurgh. I'm also allergic to jargon BS. I spend most of my professional time writing Django websites and webapps for SMEs. I write a lot of Python outside of Django sites too. I administer various Linux servers for various tasks. I contribute to the open source projects that I use when I can. I'm a full-time Linux user and that has lead to helping other people live the dream. I am an official Ubuntu Member and I earnt my ♦ on SE's own Ask Ubuntu in 2011's moderator election. That's probably where I spend most of my unpaid time. I also run thepcspy.com which has been my place to write for the last decade or so. If you need to contact me for extended help, you can do so via my website, just remember that I have bills so if I feel your request is above and beyond normal duty, I might ask for remuneration for one-on-one support. For more social contact, you can usually find me (or just my computer) lurking in the Ask Ubuntu General Chat Room and on Freenode in #ubuntu and #ubuntu-uk under the handle Oli or Oli``.

Updated on September 17, 2022

Comments

Oli almost 2 years

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:

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.
Oli almost 14 years

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).
Michael Gundlach almost 14 years

+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.
Oli almost 14 years

+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 almost 14 years

+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!
Benjamin Pollack almost 14 years

Thanks for the link corrections; I fixed them in my own post to go there, rather than the Firefox add-on site.
Oli almost 14 years

@Marco interesting! If I had an icon for it in Applications, I'd be much less likely to forget all about it. I actually had a look at Pencil waaaay back when it first came out but because it was nested in Firefox, never really used it.
Don Faulkner almost 14 years

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.
user372705 over 13 years

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
belacqua over 13 years

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).
Rich about 13 years

At a guess, perhaps it runs as a Firefox plugin because in the long run the developers envisage it running against data stored online (similar to the way that Balsamiq can be used within Jira and other issue trackers)?
l0b0 about 13 years

Doesn't look like it's free as in freedom either.