views:

13877

answers:

36

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?

+3  A: 

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, 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.

OregonGhost
A: 

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.

Omar Kooheji
+115  A: 
ceejayoz
When a sketch tells more than long answers ;-)
gizmo
and how you test interact and some activity on paper?
Golovko
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
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
I've found, for myself, simple is better. Don't worry so much about the paint brush; worry about the art.
Mike Bethany
+3  A: 

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

MattW.
+7  A: 

You could give Pencil a try.

agnul
+3  A: 

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

slashnick
+7  A: 

We use Mockup Screens 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 shows.

Mackaaij
+1 for this answer. The new verions is great.
Jamo
+57  A: 

I like Balsamiq Mockups. 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.

Bryan Oakley
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
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
+23  A: 

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

  • "Rich pictures"

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

Totophil
+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
+2  A: 

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.

Greg Whitfield
A: 

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

Onorio Catenacci
+10  A: 

As semi-facetious as ceejayoz's answer was, it is worth considering. There is a simple technique know as "paper prototyping" 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.

skaffman
+9  A: 

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

Fitzy
+3  A: 
PabloG
I love this tool :)For UI prototype as well as basic design (though I am not a designer)
rajesh pillai
+7  A: 

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

Mihai Limbășan
+1  A: 

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:

http://protoscript.com/

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

Kent Brewster
+1  A: 

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

dandv
A: 

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

OscarRyz
A: 

From time to time I use wxGlade.

pdemarest
+1  A: 

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

dandv
yep. I used this as well. http://www.adobe.com/devnet/fireworks/articles/gallery_mockup.html
Saif Khan
and this http://www.adobe.com/devnet/fireworks/articles/mockups.html
Saif Khan
A: 

Another tool is the freeware ExtJS GUI Designer. It outputs JSON code for the ExtJS 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.).

dandv
A: 

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: http://MockupScreens.com

A: 

For GUI prototypes that feel like coded prototypes, consider FlairBuilder. 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 www.flairbuilder.com/demo

Cheers, Cristian

A: 

Creately

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

Sugerman
+1  A: 

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.

ShayneM
+3  A: 

I recommend ForeUI 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).

A: 

Microsoft Paint !

Yassir
A: 

www.axure.com Allows linking with use cases and can deliver something that looks like a running website without having to program.

+2  A: 

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

Tiago Fernandez
+1  A: 

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

Jason Clarke
+1  A: 

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

epotter
A: 

Designer Vista.

Zerofiz
A: 

Expression Blend Sketch flow

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

saknet
+1  A: 

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

Features:

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

Introduction videos:

Wernight
+1  A: 

Check out balsamiq

pshomov