Stack OverflowTools for creating a user interface prototype
[+131] [42] Golovko
[2008-10-01 08:52:16]
[ gui user-interface gui-designer devtools ]

I need to create a prototype of a user interface. I'm googling, and find "Axure RP", but it is very expensive for our company.

Another way for creating a user interface prototype is tools like Qt Designer, but it doesn't provide some cool functions and sometimes demand a bit of programming skills.

Do you know a freeware tool for my task for someone without any programming skills?

I suppose its silly to ask this but you are targeting Windows right? If you're targeting Windows Vista, you might say that because you may want tools that can generate XAML. - Onorio Catenacci
Added a few tags to the list of tags just to help others to find the question and its answers. - Onorio Catenacci
Added gui-designer to the tags - think it's appropriate. Not so sure about devtools (he wants something that doesn't require programming skills) but didn't remove it. - Arkaaito
[+248] [2008-10-01 09:01:26] ceejayoz

Pad and paper

(7) When a sketch tells more than long answers ;-) - gizmo
(4) and how you test interact and some activity on paper? - Golovko
(30) You don't. If you're testing interactivity, you're out-of-scope of GUI protoyping. - gizmo
okay, but i'm want view prototype on screen, because some thing look cools on paper, but on screen it's very bad or hardly realise. - Golovko
(2) Yep, but the same problem occurs if you don't use the same language you'd use for the real implementation. So there's no benefit for doing it with another tool. - gizmo
Plus a scanner, plus some post-it notes on a whiteboard to move things around, plus a camera to take pictures of the whiteboard. Then, when you've got the basic layouts and details right, bring up your scans and/or photos and draw on top of them with Visio or somethng similar. - CMPalmer
(4) I've found, for myself, simple is better. Don't worry so much about the paint brush; worry about the art. - Mike Bethany
Too smart arse for my liking. Paper doesn't do interactions or behaviours unless of course you start going down the lines of origami. - WeNeedAnswers
@WeNeedAnswers As @gizmo said, once you're testing interactivity, you're not prototyping GUIs anymore. You're developing, and you might as well do it in the actual language you'll be using. - ceejayoz
@Cee may as well forego prototyping altogether then, hey HCI with pen and paper damn all those HCI experts know nothing. I know, will design my fighter cock pit for my new super duper fighter plane with pen and paper, that will work. All about the user experience, and you can not prototype that with pen and paper. - WeNeedAnswers
I Just came off a job designing interfaces for oil rig workers in the north sea, pen and paper my arse, you ever tried coming up with a design for use in the north sea where the riggers are working in gail forces and got super thick gloves on. Oh yeah pen and paper will get you far then. - WeNeedAnswers
That project on the oil rig, I came in half way, the previous team had come up with a lot of super clever swish animation in the style of apple iphone. Looked great. Until the oil guys came in and said what the heck is this. The designs were effective and looked and contained all the information required. But in the north sea, the screen style, and designs were ineffective pretty boy bullshit. - WeNeedAnswers
What about designing for accessibility, you think you can do that with pen and paper? Yeah thats right, a person coming back from a war, got stumps for fingers after they got blown off trying to de active a land mine, yeah pen and paper, that will do the trick. - WeNeedAnswers
(1) No psuedofunctional mockup app is going to address those issues, either. Fighter cockpits get actually built, or done with sophisticated VR, because they involve multi-billion dollar budgets. Whine all you like, but the vote on this answer currently stands at 121 to 7. - ceejayoz
[+119] [2008-10-01 11:04:57] Bryan Oakley

I like Balsamiq Mockups [1]. I like the fact that it uses a hand-drawn look. Too often you can get bogged down making a UI design look exactly like the real thing that you lose sight of the actual design process. With their design you can't make a mockup that looks like the real thing so you don't even try. I found that to be remarkably liberating.


This is cool. I am using this for my mockups. - Saif Khan
My company has never been happy with pencil/paper prototypes, so I'm going to try Balsamiq. Looks pretty cool. - Jess
This program is great - Ronnie Overby
Thanks! I start with pencil and paper but it sure would be nice to have something like Mockups... trying the demo now. Thanks for the info! - Mike Bethany
(7) The psychological effect having hand drawn controls is amazing. No more analysis paralysis! It's really given me direction for the current app I'm working on. - Alex
I like the output very much. However, locating the proper item is hard even without additional libraries - I guess that would get better if you need it daily. - peterchen
Wow, this will certainly come in handy. Thanks. - RectangleTangle
[+42] [2008-10-01 11:32:50] Vlad Gudim

For low-fidelity software UI prototypes paper, pen, pencil, some colour markers, post-it notes work the best.

  1. These materials are cheap and widely available.

  2. You can still make copies, scan or throw the prototypes away.

  3. Paper prototypes can be made or modified promptly, in front of the users no matter what work settings are (as opposed to high-tech options that need laptop, power supply etc).

  4. It is very flexible media and lets you express lots of information quickly. Specialised software limits you to whatever features are implemented, it will take you a while to become productive using it.

  5. Paper is well understood by users: they are going to be less distracted by the novelty or coolness-factor of whatever software or other high-tech approach you would use instead, meaning better concentration on the actual task at hand. Additionally, because of this familiarity with the tool users are going to be able to actively contribute themselves. The benefits of a tool that both you and your users can share cannot be overstated.

  6. Most people are not very good at sketching. Chances are your paper based prototype is going to look a bit messy, less polished and this is exactly how a prototype should be to make other people feel OK about their own inability to produce polished sketches or complex screenshots of finished UI. Feeling OK will encourage more active contribution and shift focus to interaction ideas and workflow, instead of perfecting presentation.

  7. Paper is perfect for low-fidelity prototyping. It is easy to control how much detail is expressed, level of detailisation is kept in line with the needs. Other tools will often add unnecessary detail and distract the discussion from the more important aspects of the UI or might even give users false hints and lead them to false assumptions.

  8. On many occasions you want to leave yourself lots of room for later manoeuvre and prevent users from "solutionising", after all being a UI designer more often than not you are better equipped to thoroughly design the UI details than other stakeholders. Using tools other than paper may lead to users insisting on using controls available within palette or familiar to them without explaining what the actual goal they are trying to achieve is. Sketching encourages users to explain their goals, talk their own sketches through.

  9. As opposed to low-fidelity paper prototypes, any high-fidelity prototyping is best done using the target implementation platform, since in order to convey the higher level of detail a fair amount of coding is usually needed and eventually (speaking of software where design in one form or another constitutes biggest part of the overall development effort involved) your high-fidelity prototype becomes the UI itself. With high fidelity prototyping you need to have an easy succession path from prototype to UI. To re-iterate: if you after a high fidelity UI prototype use the actual target development platform.

Other important tools that you might find useful are sketching and diagraming skills and techniques:

  • Learning to draw stick figures [1]

  • "Rich pictures"

  • Conceptual UI diagrams (i.e. defining main task objects, links, functions etc)


+1 ... I looked at a lot of the recommended tools and reverted back to good ole paper and pencil! - mattruma
Thanks for giving so many good reasons to paper-prototype. - Jonta
I tried your solution and I can say, this is REALLY efficient. Post-it notes on the paper, bussiness analyst can play with it together with developers. You can take snapshots using camera and/or photocopier. Works quickly even for compex UIs. And then someone just puts the results into Balsamiq Mockups. That's it. Complex UI discussed and communicated in 30 minutes :). Almost for free - Thetam
[+21] [2008-10-01 09:16:40] agnul

You could give Pencil [1] a try.


(1) If you're a Windows user, grab a newer version here:…. This version fixes some major bugs. - jonathanconway
I love it. Planing to make an .net or java based application to build stencils for it in a second from a bunch of images. - articlestack
I am also going to look for this one. - Rushino
[+15] [2008-10-01 12:53:33] skaffman

As semi-facetious as ceejayoz's answer was, it is worth considering. There is a simple technique know as "paper prototyping" [1] which involves interactive, hand-written UI mockups. You use bits of paper to represent UI controls, windows, data tables, etc, and you ask the "user" to interact with it. Each time they press a button or whatever, you ("the machine") silently adds or removes bits of paper to simulate what the UI would do.

It's really easy, and surprisingly effective. The crucial thing is to not say anything to the user as they're trying it out - if they have to ask you a question, then your UI needs work.


[+13] [2008-10-01 15:18:35] PabloG

I use InkScape [1]. It isn't an specific GUI prototype tool, but a versatile (and freeware) vector draw program. Big plus for me is that it works with SVG files that are easily parsed or modified, also allows to create a basic "widget", create clones of it, modify the base widget and apply the modifications to these clones.


(2) I love this tool :) For UI prototype as well as basic design (though I am not a designer) - rajesh pillai
(1) In one project, we actually used Inkscape for both prototyping and actual implementation. We simply put our own metadata in the object properties panel and compiled the SVG files into working UI definitions. That was fun and quite impressive. - bastibe
[+11] [2008-10-01 13:23:00] Fitzy

I would have to go with Balsamic Mockups [1]. Have just started using this and recommending it to friends/colleagues. Hand drawn look, so clients wont ask to change the font, or color.


[+10] [2008-10-01 15:30:00] Mihai Limbășan

The Pencil [1] Firefox extension is also a nice tool for UI prototyping.


duplicate answer.. - articlestack
[+9] [2008-10-01 09:56:06] Mackaaij

We use Mockup Screens [1] at work ("Quick and Easy Screen Prototypes"). It's easy to alter screens and the scetches make clear that this is only a design.

The mockups are then included in a Word document containing the spec.

Mockupscreens is not free but really not expensive, as the pricing page [2] shows.


(2) +1 for this answer. The new verions is great. - Jamo
[+7] [2010-09-13 22:05:59] Wernight

SketchFlow [1] is a user experience prototyping module implemented in Blend which is currently shipped only with Microsoft Expression Studio Ultimate Edition.


  • Rapid hand-draw prototyping (which can be polished)
  • Dynamic customizable transitions and animations
  • Commenting (good for meetings)
  • Export as MS Word report

Introduction videos:


[+6] [2008-10-01 08:55:22] OregonGhost

For UI prototyping, I still use Delphi and Visual Studio (Windows Forms or WPF), both available in a free version.

Edit: I overread your "no programming skills" condition. You won't need programming skills with these tools to design the prototype, but for anything fancy, you'll still need to write some code, be it some XAML for WPF or C#/Delphi code for the others.

You can, however, also try Microsoft Expression Blend [1], which will allow you to design WPF UIs with almost no programming skills. That one is not free though, unless you have an MSDN subscription.


[+6] [2009-09-11 00:20:12] Fred

I recommend ForeUI [1] for UI prototyping. It provides different UI themes to cover all fidelity requirements, and it can define the interaction and run simulation in browser (just like Axure but ForeUI cost much lesser).


[+5] [2008-10-01 09:09:41] MattW.

You could use Balsamiq Mockups, it made a good impression on me. I usually just use Interface Builder though.

[+5] [2008-10-01 12:26:51] Greg Whitfield

As well as the suggestions above, you may want to consider using Powerpoint. I've used it for mocking UI's, perticularly when you want to show some dynamic behaviour as a result of some action. With Powerpoint you can maintain that healthy level of abstraction from the real look of a UI, and just concentrate on its behaviour.

It's great for tasks where workflow is important, and you can also nicely annotate and add notes to particular bits of the UI that may be of particular note.

[+4] [2008-10-01 09:48:42] slashnick

I reccomend paper and pencil for some initial ideas. OmniGraffle [1] produces some nice wireframes and is fairly cheap however it's for Mac OS. Alternatively just use an image editor.


[+4] [2008-12-03 04:00:58] pdemarest

From time to time I use wxGlade [1].


[+4] [2008-12-04 08:37:17] Dan Dascalescu

Another tool is the freeware ExtJS GUI Designer [1]. It outputs JSON code for the ExtJS [2] JavaScript library and can be used to quickly put together forms (with all classic elements, plus date picker, color palette etc), panels (including tabs), grids, trees and layouts (accordion, card, column etc.).


[+4] [2009-12-10 21:11:30] Tiago Fernandez

Mockingbird [1] is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.


[+4] [2011-08-12 14:22:28] Feng Chen

If you need to create interactive prototype for your web application or website, check out App Sketcher [1]. It's not free but very reasonably priced.

App Sketcher allows you to use real web components (such as HTML elements, jQuery UI components etc.) in addition to images to quickly mock up the interface and define simple interactions (no coding involved). The prototype can then be run in browser with a single click. You can also export the optimized HTML/CSS/JavaScript code to share or host as wish.


[+3] [2008-12-03 03:31:00] Dan Dascalescu

DENIM [1] is free and it's aimed at sketching web page UIs. It runs on Windows, Unix and Mac OS X.


but no drag n drop feature :( SimpleDraw & Firefox Pencil is better instead. :) - articlestack
[+3] [2009-05-18 09:56:56] Cristian Pascu

For GUI prototypes that feel like coded prototypes, consider FlairBuilder [1]. Built on Adobe AIR and Flex, it provides a set of fully functional components with which you can create highly realistic simulation of software UI. No coding is needed, but the result are quite similar.

Soon, it will support more advanced conditional logic for behaviors, that is, different actions for user input events based on the current state of the components on page. Give it a try online at [2]

Cheers, Cristian


[+3] [2009-07-21 14:14:10] ShayneM

The top 3 (low-cost) low-fidelity products here are Balsamiq, FlairBuilder and iPlotz. Each has strengths and weaknesses. Balsamiq is easy and expanding fast as its internals have been made pubic by the author as well as becoming popular due to the author being very open and responsive to his users. iPlotz has the better Project Management facilities, althoguht less powerful UI control/attributes. Flairbuilder is a bit more advanced (but still dead easy) as it ALSO produces functioning (well interactive) prototypes as it uses native controls. Its can do both high and low fidelity. Its a very personal choice - we use all 3, depending on which developers like which products :-). Try them all and find out.

[+3] [2009-09-11 00:31:03] Yassir

Microsoft Paint !

[+3] [2010-03-07 03:21:59] Jason Clarke

Storyboard [1] allows direct import from photoshop, WYSIWYG development, scripting, and animation support. It is great for making a prototype and then moving direct to product.


[+3] [2010-06-09 17:48:46] epotter

Microsoft has a tool called SketchFlow [1]. It is especially nice if you are going to be developing a XAML application, as it can output some shell XAML from the prototype.


[+3] [2011-02-11 16:01:26] Ben Dilts

LucidChart [1] works pretty well for simple mockups. The cool feature there is that they let you put on hotspots that you can click on to open and close "states", like dialog boxes. That way you can put together a really quick demo of how your app/website will feel when a user is looking at it, including the major moving parts and multiple pages. It's pretty slick.


This one is not free for UI elements - Curro
[+3] [2011-10-28 12:54:21] A. Murray

I've only started using Inkscape [1] for diagramming but I can already see the potential for a variety of use cases, UI design being one of these.

  • It's open source
  • It's cross platform
  • It's easy to use (after a little adjustment)
  • It has a massive user community

If you can use one program to cover multiple bases you're going to do each of those things with greater efficiency and quality as you get used to how to use it.

I also found a slide deck on getting started in UI design with Inkscape [2].

The tools provided by Inkscape are low-level enough to not be restricted to one type of drawing. It also has great align and distribute functionality which will come in really handy for interface design. Plus it uses the SVG format which renders inside browsers and is stored in XML!


[+2] [2008-10-01 12:33:41] Onorio Catenacci

This tool [1] may be something that would help you. It's free regardless.


[+2] [2008-10-01 15:49:50] Kent Brewster

Agreeing with the paper-and-pencil suggestions; Post-It notes are your friend. Those with a bit more programming knowledge should not miss Bill Scott's ProtoScript, here:

Bill even provides a handy bookmarklet so you can start prototyping on top of existing pages, right there inside your browser.

[+1] [2008-12-03 23:46:32] Dan Dascalescu

I haven't used Adobe Fireworks [1] yet but it seems powerful and capable of creating sleek-looking websites and application interfaces. Can export CSS. Here is a feature list [2]. $300.


[+1] [2010-07-21 00:59:41] Calvin.Allen

Designer Vista [1].


[+1] [2011-07-26 11:50:17] Alex

I've used Microsoft Excel for quick screen mock up work. Just highlight your boxes, use borders, set background colors, and type text. All that I really needed most of the time, and if your screen data is in a grid then you're almost there with a clean sheet.

[+1] [2011-09-06 13:10:47] M.Radwan -MVP

You can use Dev Magic Fake to simulate the UI but of course it will need little development in the UI, for more information about Dev Magic Fake see the following link:



[+1] [2012-08-20 12:00:48] Pieter de Wit

Firstly, a good tool will pay itself back!

The prototype tool depends on the level you want the prototype to have and is related to what you want to test.

Very early in the design process you will probably use pen and paper to draw quick wireframes to discuss the structure, the placing and size of objects.

If you want to test usability aspects early in the design process, it is wise to use paper prototypes to simulate interacting with the design.

I can imagine you already own an adobe license to draw your interface. If you have Fireworks, I would recommend this tool as it enables you to create different states, reoccurring elements and clickable elements in your design. It is then very easy to change these elements in one place, without having to replace it everywhere. Easy click-through prototypes can be realized and exported to a web page.

Up until this level, no coding is needed.

If you want to test more advanced interactions, you will need to code this. You can use Flash or HTML/CSS/Javascript for this.

[0] [2008-10-01 08:59:50] Omar Kooheji

I just created a UI prototype in C# using visual studio.

I've also done it using photoshop/Paint.Net.

I've seen some really cool video that unfortunately I can't find right now that mocked a whole UI using bit of paper that were added/removed/moved about/ unfolded on a base piece of paper.

[0] [2008-12-03 03:33:47] OscarRyz

Our business analyst uses MS VISIO, and it seems to work well for him.

[0] [2008-12-29 23:49:24] Igor

I have tried most of above mentioned tools, and for years now I'm using my own to create prototypes in minutes or even real-time in a meeting :-)

You can check it out at:

[0] [2009-06-27 06:42:45] Jeff Swensen

Creately [1]

It is unfortunately still in private beta but worth checking out.


[0] [2009-12-02 14:37:15] user222966 Allows linking with use cases and can deliver something that looks like a running website without having to program.

[0] [2010-08-17 08:53:36] saknet

Expression Blend Sketch flow

Its one of the powerful tool for UI prototyping. Its from microsoft and got many distinguishable features.

[0] [2010-11-01 20:13:30] Shyju

User your white board,Markers / Notebook & Pencils.

iRise is a wonderful tool to create prototypes.We can create datadriven(in memory) prototype with it.Download the 30 day trial from here

[0] [2011-05-10 15:18:59] Not Me

Sketch Lab [1]. It is a web app for this purpose.

Disclosure: I am the developer.