What program should I use to mock up GUIs?

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

I've found this really cool and useful.

http://www.balsamiq.com/products/mockups

Answer 5

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.

Answer 6

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.

Answer 7

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

http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

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

Answer 8

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

Answer 9

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.

Answer 10

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.

Answer 11

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

• Pencil & Paper
• Napkin Look & Feel

Answer 12

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.

Answer 13

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

Answer 14

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.

Answer 15

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.

Answer 16

You might want to take a look at WireframeSketcher:

http://wireframesketcher.com

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.

Answer 17

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 http://www.aldi.ie/ie/html/offers/58_7593.htm . . . also works on linux as a simple input device. (Files are saved to SD card, or internal storage accessible via USB.

Answer 18

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 (http://dub.washington.edu:2007/denim/) which is an excellent tool for mockups.

If you have Visio then you can download the stencils for wireframing. http://nickfinck.com/stencils/ and from yahoo http://developer.yahoo.com/ypatterns/wireframes/

Answer 19

QT Designer

Answer 20

Mockupscreens is a great tool for this sort of thing

Answer 21

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

http://www.designervista.com

Answer 22

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

Answer 23

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

Answer 24

Try Gliffy

Answer 25

Take a look at Mockery, which was just released and is available for download at http://getmockery.com. 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.

Answer 26

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