34

This links heavily into the following question:

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:

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.

26 Answers 26

36

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

0
12

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

alt text

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

1
  • I've had a pretty bad experience with Pencil. The UI is pretty difficult a lot of times, images I bring in seem to vaporize between when I save and when I open it next, among other issues.
    – B T
    Jul 6, 2017 at 21:34
10

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.

1
  • Curious, have you ever sketched a thought that you had no tool to build it with?
    – JeffO
    Aug 26, 2010 at 20:48
8

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

8

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.

5

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.

3
  • All very valid points, and I totally agree so +1. I think one thing is maybe missing from your list: you and the customer/product owner are sitting together; not miles apart, emailing designs back and forth with emails that are easy to interpret incorrectly. Nov 12, 2010 at 11:42
  • It's the very reaosn I use Balsamiq: it looks unfinished.
    – peterchen
    Mar 17, 2011 at 9:40
  • You also don't have the customer thinking that the program is done because they see an interface.
    – MattK
    Apr 7, 2011 at 18:39
4

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

4
  • 5
    I've had issues with this wherein the client sees a working/functional demo and immediately believes that the project is 90% complete. This persists even in the face of attempts to manage expectations. I have now taken the position that the lowest fidelity that gets the point across is the correct one - that's usually paper/pencil or a whiteboard.
    – Rob Allen
    Aug 25, 2010 at 19:53
  • 1
    That's more of an issue of managing client expectations then prototyping. You don't want to create throwaway prototypes just to keep your client off your ass. Explain to them what it is and how it helps the project.
    – abrudtkuhl
    Aug 31, 2010 at 15:16
  • clients think the buttons and shiny and gradients are the whole product. It is very hard for them to get that the 6 weeks you are building validations and message passing is really their app.
    – MattK
    Apr 7, 2011 at 18:38
  • Pencil now has some nice Bootstrap, Android and Material Design stencils that you can use. The problem I have with doing HTML mockups is that I always start focussing too much on the details of squaring the buttons or not. There's also the split between coding and visually placing things which holds back the flow.
    – icc97
    Feb 9, 2016 at 9:36
4

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.

3

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.

3

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.

3

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
2
  • I wish there was a tool that combined the tight HTML integration of Fireworks with the flow control and typography of InDesign. Mmmm...
    – Rahul
    Aug 26, 2010 at 12:20
  • in5 is a such a tool (disclosure: I make in5). Also here's a link with InDesign UX resources: ajarproductions.com/blog/indesign-ux-resources Nov 15, 2021 at 21:54
2

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

2

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.

2

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.

1

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.

1

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.

1
  • That looks good, very similar in approach to Balsamiq but with more of an emphasis on Site Maps. Aug 26, 2010 at 19:38
1

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

1

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

0

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

0

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.

0

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.

0

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.

0

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/

0

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.

0

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.

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.