Free (or low-cost) tools to create GUI mockups?

Question

Up until now I have been drawing out my mockups on paper with pencil, it works for the most part, but i was wondering if there were professional tools to do this? say for team projects, how are GUI mock up ideas passed around, surely not my neanderthal method of paper and pencil? focusing on desktop applications, I would like some advice. I have also used some of the IDE designers, the most useful and intuitive one I've used thus far is Nokias Qt Designer, because it integrates so well with Qt's MVC pattern and the ability to add slots/signal relationships in the design.

Is there a tool much like Qt Designer but more generalized (and isolated) for just mocking up some UI ideas?

Answer 1

There is a pretty exhaustive list of both commercial and non commercial tools here: http://c2.com/cgi/wiki?GuiPrototypingTools

QT designer is indeed the "closest" IDE for creating mock-ups, but specialized tools are

1. much faster, since they are built for this exact purpose
2. don't require programming knowledge so can be used by analysts and other non-developers
3. usually come with "black&white" or "hand-drawn" skin to avoid getting bogged-down into endless discussions about colors, fonts, etc
4. allowing you to annotate your mock-ups, either to provoke discussion or to use those annotations for specification

(Just to be straight here, I'm the author of such tool - http://MockupScreens.com)

Answer 2

Lucid Chart has a google chrome app and has a free version, but I do not recall its limitations. I do recall specifically that it has some UI layout libraries, although I do not know how extensive they are.

Answer 3

I've used "pencil" plugin for firefox before - quick and easy to just to draw things.

It really epends what you want to do: you can get tools that will go as far as letting you mockup GUIs (e.g. when you push a button it will take you to a different that you have mocked up) - haven't used them myself so I can't comment on whether they are worthwhile.

Answer 4

I've always been a fan of Balsamiq, though it may not qualify as low cost...

Answer 5

Take a look at WireframeSketcher wireframing tool. It works in any Eclipse IDE and there is also a standalone version.

Answer 6

I used Fireworks, Lumzy, Justinmind and Maqetta for mockup.

Fireworks is a great tool for any kind of design job unless you need professional vector or photoshop editing. You can easily find mockup libraries and create links, connect pages, even add states on the components. However, you can not achieve advanced gui component behaviors such as datagrid, accordion etc. Learning takes little bit time but it is worth.

Lumzy was great in the beginning. I could so easily create interactive mockups with very rich gui library. You can even add your team mates into the lumzy project and work together on the same mockup through your web browser. The best part is it is totally free. However, I started to get strange errors once the number of mockup files increased. In the end, I was not even able to save my project. So, it is probably the best free tool for simple mockups but not a complete solution.

Justinmind is an expensive tool. It is very professional and detailed. You can have the feeling that you are designing the actual product with it. However, it sometimes might be too much for simple things. I was advised to create the whole accordion component by myself just to add one more slice into it. After spending a few hours, I gave up since it does not make sense at all to waste that much time on a mockup element.

If you wanna continue over your mockup to actual design then you can give a try to Maqetta. It is free and enable you easily place html/javascript elements in many layouts including ipad and iphone. However, it requires far more effort than simple mockup process as you can guess.

I think there is still need for a complete mockup solution, which will be cheap/very easy to use/rich of gui elements/extendable and allow you continue your actual design on that mockup.