Which prototyping tools? [closed]

Question

This links heavily into the following question:

• What are some great web-based prototyping tools?

However I didn't want to limit the suggestions to "Web Based" tools, I have found and used the following tools for prototyping, wireframing and mockups in the past with some success:

• Balsamiq
• SketchFlow (part of Expression Blend)

I am also aware that some designers choose to use graphics applications such as Photoshop and Illustrator for the task.

This is a Community Wiki question so post away with your thoughts, try and keep it to one package per answer so that we can build up an idea of how the community feels about these tools.

Answer 1

It's important for me to keep my prototyping in at least two threads, and three if I am trying to understand detailed interactions with animation.

Thread 1: Flow, function, form, and data

• Starting on paper (actually usually a whiteboard design session with others). Focus on screen flow, then major functions and potential layouts of particularly important screens. Try for at least two different ideas.
• Next level of fidelity in Balsamiq. Add functional details, tune the layout, add concrete, meaningful sample data to the screen (in the context of a demonstrable scenario).
• Create a workflow prototype by stringing together a step by step, single path scenario with screens and specific expected interactions to move to the next screen. I tend to use powerpoint, putting all the screen mockups in sequence. This prototype lets you get early feedback with real users by pluralistic walk-throughs, which are very effective for refining concepts, workflows, functional requirements, terminology, etc.
• Iterate early, often, and quickly.

Thread 2: Visual program and style

• Using some of the key mockups from thread 1, visualize them (as comps) in pixel-level detail using Photoshop or some other similar mechanism. Explore color, proportion, visual metaphors, typography, etc. Generate at least 3 ideas.
• Get feedback on these independently of the workflow prototypes. Use preference-testing, AB testing, critiques, charettes, etc.
• Iterate and refine.

Thread 3: Detailed interaction and animation

• Focusing on a single, detailed interaction or animation sequence hack together a functional prototype in whatever tools work best for you: HTML/CSS/JS, Flash, lower-level programming languages, UI component frameworks/libraries, etc. At least two alternative interactions.
• Run a small number of short usability tests including timing data collection. Do comparative tests. Count keystrokes/mouseclicks/gestures.
• Iterate and refine.

In summary, build specific kinds of prototypes for specific purposes... to answer specific questions. No one type works for all situations. Keep the aesthetic concerns out of the workflow/function feedback loop. Use appropriate, effective methods for the different types of questions. "Don't cross the streams."

I've found that almost all the fundamental design improvements come from thread 1 and thread 2, but thread 3 is necessary if you are going beyond the standard controls or your domain is new/complex/specific (e.g. gestural interactions, multi-dimensional model manipulation, custom controls for a fancy new OS, optimizing human performance in some dimension).

Answer 2

Pencil is a good tool for creating UI mockups. It is available as a Firefox addon or a standalone application.

It has an advantage over some of the other tools mentioned because it if free and open source.

Answer 3

I've read a very interesting article some time ago that was called "To sketch or not to sketch" - you should have a look: sketch question Whenever creativity is needed you should not limit your thoughts with tools you use. My personal choice for later cleanups is a tool close to the area I'm handling with. For HTML/CSS I usually start with simple layouts and increase the detail step by step. The same might prove useful for other areas as well. Prototyping from low to higher detail. So I don't have a particular tool to recommend... it depends.

So I don't have a particular tool to recommend... it depends.

Answer 4

I personally use Balsamiq for the first few revisions, and then go straight to an HTML prototype using a CSS framework like Blueprint.

Answer 5

Interesting that Adobe Fireworks has gotten little love on this site.

Among other things, I've enjoyed

1. Building in different states
2. Master pages
3. HTML objects, like links and icons, can be given markup that will export (internal & external links, metadata, all that goodness)
4. Exports standards-compliant, CSS-based layouts with actual stylesheets
5. Native Illustrator and Photoshop integration for logos, etc.

I like Balsamiq for pitching an IA to a client, then Fireworks for a navigable prototype once a designer has collaborated. The work done in Fireworks exports easily enough to HTML and CSS which translate easily enough into either a full static site or as template pages / themes for a dynamic site.

Answer 6

I'm going to say just paper is the best prototype tool. Yes, it's obvious, but it is better than starting electronic.

• Paper tells the client that this is an idea, one of many possible.
• Paper doesn't let the client get caught up in fonts or colors or shapes or images. There's a reason that balsamiq chose sketch style wireframes.
• Revisions are fast
• It's easy to get their actual handwriting on it and it is doesn't intimidate them from drawing on it.
• You can scan it or fax it if you need it to go electronic.

I'm a huge fan of html functional prototypes after, but paper lowers the barrier to brainstorming and quick hallway ui tests.

It's easy to walk someone through a paper sketch:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

If you don't start with sketches and get some user validation, you're jumping the gun and it only gets more expensive to undo and iterate later on.

Answer 7

I prefer doing Web UI mockups in HTML / CSS.

1. Functional prototyping is a much better solution because users get an actual experience rather than a non-dimensional (looking at you Photoshop) experience.

2. Functional prototypes are not throwaway work.

3. It's much faster to iterate over a functional prototype in during a feedback loop

Answer 8

I use Axure.

Although quite expensive (almost $600 per license) it provides amazing flexibility and allows you to customize almost everything.

Being able to use your own controls (or mockups thereof), masters, etc. is imperative when creating an application rather than a web site.

Answer 9

Paper and HTML is the best.

Fast sketches on paper. Then build the real thing in HTML. StaticMaticlink text is great for prototyping.

In the past I used Axure, but wireframing is a waste of time.

Answer 10

I'd also put in a vote for Axure. Our office uses its collaborative tools to split responsibilities between our IAs and Graphic designers.

While it's no Omnigraffle, the wireframing options are more than adequate. The software has great masters functionality, so we can ratchet up the fidelity of a prototype pretty quickly.

And like Dan said, it's completely customizable and makes professional specification docs.

r.

Answer 11

Adobe InDesign. It may look strange a bit but there are features that I like:

• Adobe-style interface. If you've worked with Photoshop or some other Adobe products, it would be very easy to switch to InDesign
• powerful tools to work with typography, tables, styles, grids and so on
• in fact you can create not only a wireframe but a graphic design too
• you can export wireframes as clickable PDFs

Answer 12

I second Daniel Bleisteiner's motion: "It depends."

For 90% of projects, consider my vote for paper. Justification for paper abounds on this thread, so I won't re-iterate.

Design is never the same among projects, and certainly not among clients. (I speak of design in the vaguest sense, i.e. design, development, prototyping, wireframing -- let's be honest, they're all gradually merging with each other.)

So, for the other 10% of projects, the protoyping tool will depend on the project. If it requires long-distance collaboration, Axure may be best. If it requires working with a client's internal team who use primarily Adobe, Fireworks may be best. There are many tools. Unfortunately, by definition, tools cannot adapt as quickly as the problems they are built to solve; hence, many of these products seem very similar, but not quite identical, to each other. And it is up to us to do evaluate which is best for the job.

Additional thought: the iPad is starting to help blur the lines between in-person client collaboration vs. in-person client watch-you-over-the-shoulder. Omnigraffle, SketchBook, TouchDraw, Draft, and other iPad apps are paving the way for an improved collaboration experience. (I speak of improvement as working towards the ultimate goal of having a client feel just as comfortable drawing on an iPad as they do on paper, the advantage of which being that the client could be using a functional protoype instead of a static page. That ultimate goal is just my opinion.)

Answer 13

I follow these steps...

1. Prototyping. I use Balsamiq Mockups because it's easy. The whole point of prototyping is to figure out the basic layout of things. This is the stage where you're making drastic changes. Fortunately Balsamiq doesn't pretend to be anything it's not and remains extremely easy to use. It's faster for me to use Balsamiq than it is to draw it. And it comes with the benefit of being able to drag elements across the screen rather than erasing and redrawing them.

2. Finalize the design. I use Photoshop and sometimes a little Illustrator for this so I can get the graphics perfected before writing any code whatsoever.

It's more difficult to make drastic changes to your design in Photoshop as we tend to get carried away with pixel-perfection. And it's more difficult still once it's in your application. So this is the reason for my progression, and why I start with the easiest tool possible... Balsamiq.

Answer 14

I agree with some of amswers above but I would like to add some extra information and tip. I almost start every project with the whiteboard, pens in different colors and also some post-it. The easiest way to communicate ideas and to get fast feedback. Depending of the kind of project I then try to sketch the main flow charts with a program called yEd. It's a simple way for me to structure the ideas. If I have a mac nearby I would choose OmniGraffle (an outstanding program for more than flow chart).

I keep on doing prototypes in Balsamiq, Sketch flow and Illustrator to get different kind of low-fi and hi-fi prototypes.

Regarding this information, I found it suitable to have a rich toolbox to choose from. It's important for me to be able to take different approaches depending on the type of project.

Answer 15

I'm a sketchpad/pencil-first and Balsamiq-second kinda of guy. Afterwards, Photoshop to flesh out the details until there's enough to jump into HTML and CSS.

Answer 16

My wife's interactive agency has had success with:

http://www.mockflow.com/

Quick to get started and a reasonable amount of built-in controls and screens for prototypes and wireframes.

Answer 17

Balsamiq. It's good also fot desktop based software, and it's very easy to learn.

Answer 18

Also worth checking out gomockingbird which is just coming out of beta

Answer 19

Sometimes i using this tool http://www.hotgloo.com/

Answer 20

Since your question was specifically about prototyping, I am assuming you are doing whatever steps you deem necessary ahead of prototyping such as sketching, etc.

If your product will be delivered via the Web, create your prototypes using the Web (HTML, CSS, JS). In the end it's faster, cheaper and more accurate than anything else you might use. I've found that tools like Axure are fine for simple things, but then require a steep learning curve to do anything moderately complex. At that point, you are spending time learning a proprietary tool when you could be learning Web standards which will be more beneficial to you in the long term.

If you're concerned about a client thinking it's "done", you can leave out the styling until the end, however I have found that the more "real" your prototype, the more easily it is evaluated.

Answer 21

Axure is a great wireframing/prototyping/specification tool. It allows you to focus on what you're creating and makes things such as annotations, notes, interactions, very easy to specify.

The plus is that when you specify interactions, when you generate prototypes from your wireframes, those interactions translate to real working widgets. (Axure generates HTML prototypes)

You can also take a screen design (in JPEG for example) import the image, activate areas of the image using the "image map" tool and you then effectively have a higher fidelity prototype!

Axure also allow you to create actions based on variables (you can set or read them). There's also the concept of getting a widget to generate an event, you can have another widget listen to the event and then that widget can respond in some way.

I can go on and on... The down side is the cost ~$550, but the time savings is totally worth it. Their customer support, via email, is great; they usually get back to me within a couple hours...sometimes immediately.

Answer 22

It really depends on what the project is.

If the website you're prototyping is going to be just a few pages with static content, using a graphics editor like Photoshop or Fireworks will probably be fine. The advice to keep design elements out of prototyping "at all costs" may not be appropriate here.

However, at the other end of the spectrum where you're building a large application with many use cases, I would recommend something more like Jim Jarrett's answer. I would add that large scale apps are (or at least should be) an iterative process: you'll prototype for phase I and then prototype again for a phase II release, etc. Each of these phases of prototyping may require different levels of detail. You may end up wanting to work from the current phase's build/prototype, or it may be time to go back to first principles and start from scratch.

Answer 23

I found Mockingbird ok for simple wireframes. It wont have me leaving omnigraffle anytime soon but it is pretty good for a web-based tool: http://gomockingbird.com/

Answer 24

The question mentions the need for a prototyping tool but not how realistic your prototype needs to be. For a sketchy, wireframe type of prototype I agree with most comments here that pen/paper, Balsamiq or even Visio are good tools. However, when you require a more realistic looking prototype these will not do and then I would suggest looking at the likes of Axure or Adobe Fireworks/Catalyst (iRise is way over priced) and even though it does have its issues I would go for Axure.

Answer 25

I use Pencil as well, although it has some downsides:

• no Table Data Handling: If you want to wireframe a table, you're lost.
• no WordWrap in Text boxes. When trying to place some lorem ipsum, I have to make the wrapping myself. That sucks.

however, I like this tool very much.

Answer 26

Take a look at App Sketcher (currently at release candidate) to see if it fits your need. It is a rapid HTML prototyping tool for creating wireframe and interactive web application prototypes. It uses an embedded WebKit browser as design surface where you can add HTML components, jQuery UI components, web widgets (such as Google Maps and YouTube player) and style them with jQuery theme and CSS properties. Simple actions can be defined as well. Users can run/test the prototype in their default browser and export HTML/CSS/JavaScript source once they are satisfied with the design. This tool is more geared toward Axure like experience but emphasize on "design in browser for running in browser" as it ensures the mockups/wireframes are realize-able in development phase with web technologies.

I am the developer of this application. So sorry about this shameless self-promotion. Nevertheless, I do think it can be a good HTML prototyping tool and worth a look.