I want to mockup a GUI system so that I can figure out how best to represent what I need. Normally, I would design a GUI in something like glade and then write a quick mockup in Python which implements only the GUI logic (ie, making menus/sub windows etc appear) and not business logic.

Are there any tools which automate this?

I mean, I can use glade or Visual Studio or whatever to draw a GUI and then write some code to glue things together, but I wonder if there is some tool which would minimize (or eliminate) having to write code, so that I can get input for potential GUI designs from non-programmers too.

Ideally, it would let you do things like draw non-standard widgets and perhaps define simple behaviours to them (eg, draggable, or clickable or whatever).

Thanks :-P


HTA. HyperText Application. Works well for me. Does everything that HTML does. And can be scripted with WSH languages (predom. JScript and VBScript)

+54  A: 

If you have some blank sheets of paper handy, you're halfway there. Just grab some markers, pens, pencils, or crayons and you're ready to rock :)

Check out Paper Prototyping... It's as simple as it sounds, though. You basically sketch out the form and walk through it with the users to determine how they expect it to behave and that sort of thing.

The benefit of it is that -- unlike with using Visual Studio or something to make a mock form -- users/management don't confuse the looks of the interface with the design being "done". The risk you run with really nice looking and realistic mock-ups is that it gives the impression that all you have left is to add a little bit of code here or there and it'll be ready.

Also, doing it on paper helps keep things flexible. If the user wants a dramatic change, you just pull out another sheet of paper -- instead of having to design the GUI in a program again.

Just a thought.

Kevin Fairchild
Paper prototyping is more or less what I've been doing for this project so far. Now I'd like a way to do this on a computer without writing code. Theres no risk of the mockup being a finished product since the only people who will ever see the mockup are the people creating the mockups.
Really sound solution for early prototyping. Lets you get into the heart of it with little overhead and you can try all kionds of ideas etc.
I think what I might actually do for this particular project is get some transparent plastic sheets and whiteboard markers and then draw a mockup in layers.
+1 for saying "Paper Prototyping"
+1  A: 

I have found Serena Prototype Composer to be a great tool for project specifications in general. It includes a GUI mock up system as well.

Geoffrey Chetwood
This looks nice, will have to give it a try later on! Thanks!
+38  A: 

I've found this really cool and useful.

Corey Maass
I love this program. They gave me a free license since I work for a non profit company! Awesome software.
Ronnie Overby
+7  A: 

You don't say what environment you're doing this in - that makes a big difference. If it's corporate one of any kind then personally I think there's a lot to be said for not mocking up in anything that really looks like it could be the final product. Use paper, or Excel, or even Powerpoint to design your screens and discuss with the user.

Why? Because most users, and we're particularly talking non IT Managers here, have no idea that the logic behind an application will take far longer to design, implement and test than the screens. The common perception is that once you have the screens done then you've practically written the project. I've personally seen a colleague majorly screwed by an idiotic but influential manager who put about they were lazy and useless because 'they practically finished my application weeks ago but he's been sitting around on his arse doing nothing ever since'.

By no means applies in all cases, but does more often than you'd think.

Balsamiq uses "sketchy" graphics to convey that it is just a mockup
This used to be referred to as the "powerpoint compiler effect". A manager would see a powerpoint prototype on Friday and not understand that it could not be turned into a working application by Monday.
I don't have this problem with this specific project because the only people who will ever see the mockups are the people creating them in the first place and therefore would (presumably hah) know that they really are only mockups.
+1 for bringing this up
+1  A: 

I think you should reconsider using an IDE like Visual Studio for this purpose, especially if that's the tool that will actually be used to develop the software. Laying out controls with the designer is as easy as anything else out there, and the amount of code necessary to make an app with forms popping up and everything is very small.

I've worked on a few projects where the UI elements were mocked up in Visio and other similar applications. The layouts were always somewhat helpful in terms of understanding what the program was supposed to do, but invariably they included things that couldn't be done practically in a Windows form, or they didn't properly account for screen space limitations or resizing issues or things like that.

My problem with this is that this project will have a load of custom widgets/drawing and to mock this up using a normal GUI builder would require a load of code to get a mockup of all the custom widgets. I was hoping that a mockup tool would exist which could handle this somehow.
You can mock up each custom widget as an actual usercontrol, but if they're all owner-drawn (as opposed to just clusters of buttons and checkboxes and so on) then there's no value to my Visual Studio suggestion.
BTW, I use Paint for this sort of thing, or else nothing. If I'm creating an owner-drawn control, it's invariably for something so weird or non-standard that I have no idea what it's going to end up looking like anyway.
I guess one solution would be to draw up quick mockup user drawn widgets and then place them as static images.. at leas that way they're ebing represented while the rest of the mockup works as normal.
Dan, that's a good idea, although you still need something to mock them up with (I really don't recommend using Paint).
+1  A: 

Found this a while back when I was investigating a similar requirement.

It's step up from paper prototyping using powerpoint as the tool of choice.

+2  A: 

Omnigraffle is a great prototyping tool if you're prepared to spend a bit. It's helped speed up our specification process so much by being able to go back to a client quickly.

One especially nice feature is the ability to create clickable PDFs that give users a chance to see navigable interfaces without any code having to be written

+1  A: 

One thing I found very helpful in building prototypes in the past was to capture screen shots and paste them into a Word document. Then, when we would review them, I would show the Word document on the projector for the team to see. This kept a clear separation for them that these were just screen shots, and nothing had yet been developed. It avoided the "Powerpoint Compiler Effect" as they could clearly see we were looking at a Word document.

+1  A: 

I've always found it easiest to use a Whiteboard. Pencil and paper works too, but a whiteboard is way easier to erase when you want to move things around. Doing that on paper is such a PITA it tends to discourage experimentation.

+5  A: 

This year in July Eric Burke wrote a in-depth blog article about GUI prototying. Overall he favored Balsamiq Mockups, but he also mentioned


You might want to look into WPF(here and here) with XAML (here and here) and Expression Blend, which are designed to let non-coders build interfaces in conchord with the coders writing the backend.

Essentially, WPF GUI class structures (or, in fact any class structures) can be represented by a particular form of xml markup (Xaml). Design tools such as Expression Blend drag-and-drop design control, letting designers place the available componants and link thier behaviour together, giving previews in real time. The design is then saved as Xaml code automatically. The WPF application then reads this Xaml to build the GUI. This seperates the design side (constructing the GUI) from the implementaiton of the buisness logic to some degree.

It's certainly aimed more at development rather than prototyping, but you might find that it could suit your needs, allowing the prototyping to take place with minimal coding.

You could also reap benefits in that the same system could be employed to move fowrad into proper development, and to help selperate buisness logic and UI design.

Check it out.

Why the downvote, out of interest?

Since no one else has mentioned it, I've seen iRise used to a fair degree of success in doing screen mockups. I haven't used the tool personally but given the audience doing the mockups in my experience it is a tool friendly to non-programmer types.

Regards, Chris


Fireworks has all the tools you need:

  • hotspots
  • UI components
  • master pages
  • shared layers
  • 9-slicing
  • export to html

There is a good tutorial on the developer center about creating mockups.

Kristof Neirynck
How well does this work to mockup non-web GUI's?

I'm a big fan of doing this in HTML. No, really.

Take those Paper Prototypes you've got and scan them in. Take that stack of jpegs and build an HTML file for each one. Define an image map (yes, all 1998-style) for each image that hyperlinks that "button" to the correct page.

(The old Netscape / mozilla / seamonkey / nVu composer had a fantastic image map creation widget. I'm pretty sure Dreamweaver has something along those lines too.)

With essentially no code, you can "electrify" your Pencil & Paper prototypes, while still keeping the fluid nature of paper. And at this point you can go into photoshop and freehand any improvements.

+1  A: 

You might want to take a look at WireframeSketcher:

It's an Eclipse plug-in that helps you quickly create screen mockups, wireframes and UI UI prototypes. It's still in early stages. This means that you have I good chance to influence its future direction.

Peter Severin
+1  A: 

A small addition to the top answer:

How about Aiptek's MyNote? Instead of just using just paper to draw on, you can access the stuff as SVG's that you can then manipulate further... i.e. color in, or easily display on your webpages etc. In Ireland, it's on offer in Aldi for €70, albeit rebranded my Medion. See . . . also works on linux as a simple input device. (Files are saved to SD card, or internal storage accessible via USB.

Tim Kersten
+1  A: 

We use whiteboards/whitewalls for quick screen/design mockups and then a digital camera to share it on the wiki. Probably the quickest way to get things rolling.

Otherwise, I would recommend getting a TabletPC or a Wacom Tablet to draw it any application. I used Denim ( which is an excellent tool for mockups.

If you have Visio then you can download the stencils for wireframing. and from yahoo


QT Designer

+4  A: 

Mockupscreens is a great tool for this sort of thing


You may want to check this GUI mockup / prototype design software.

+2  A: 

There is another tool, completely free and very promising, built on the Gecko engine (read: Mozilla): Pencil.


You can try ForeUI, which allow you to create high-level wireframes or more "real" mockup with native OS style.

+1  A: 

Try Gliffy

That looks good. Pity its not free, but I'll check it out anyway.

Take a look at Mockery, which was just released and is available for download at It produces mockups that can easily be as detailed as those produced by Visual Studio, but without any coding. It's actually a good complement to some of the other mockup tools on the market as it provides a lot of the polish and details that are important in UI design. It also provides a "Paper Prototype" theme for the "it's not done yet" look.

Note: I developed Mockery.

Joel Anair

I'm surprised no one has mentioned Inkscape. it's free.

Good Time Tribe