What is the best web prototyping tool?

Question

What is the best tool to create a web application interface prototype?

Answer 1

Try Balsamiq Mockups (commercial desktop application) or Pencil Sketching (open source Firefox add-on)

Answer 2

Balsamiq Mockups is very nice

Answer 3

A lot of people I have come across lately really like Axure

Answer 4

Pen & paper. Seriously. You'll spend less time fighting/learning mockup tools and more time designing.

Create some basic templates of your pages, photocopy them, and fill in the dialogs/views/details by hand. It's surprisingly quick and definitely gets the idea across.

Answer 5

Three methods:

1. Use Visual Studio to design some very basic pages. Stub up some dummy data. Chain the pages together as simply as possible. Now you have a prototype to show the customer. The advantage is that the prototype is actually the code - it aligns the development and the documentation with no real effort.

2. Visio - neater than pen and paper - easy to update and can be done in front of the client on the fly. Easy to import into documentation and looks more professional.

3. Pen and paper - for clients who really don't know what they want and you know there are going to be heaps of changes. Once you've got the basics, move to one of the above.

Answer 6

Prototype with simple HTML pages and simple links. Use your favorite HTML editor for this. It's easy to then distribute the HTML pages to the clients. Sometimes I make the initial page based on an "Save as HTML" of another part of the app or similar app.

Answer 7

A low-fidelity solution:

A box of multicolored index cards, a can of spray-on tack (temporary), a black marks-a-lot and a floor to ceiling whiteboard.

Answer 8

To start with, regular old pencil and paper. It's quick, it's functional, and you don't spend time fighting with tools. Seriously, you can probably finish sketching out the design faster than you can even open an application.

If the initial concept is good, get a designer to mock up a design in Photoshop (or whatever tool of their choice). It doesn't have to be HTML yet. And seriously, if you are a programmer, you are probably[1] not a designer - leave it to the experts.

After this, you can take the design they did and turn it into HTML, and write the application.

Alternatively, after the pencil and paper stage, if you're more concerned about the user interface than the looks (lucky you for having such an enlightened client!), then actually build the interface, and don't worry about the look yet. Use semantic HTML so what you build now can be "skinned" later with mostly CSS.

[1] With very rare exception, most programmers suck at design. And no, knowing how all the tools work in photoshop does not make you qualified to do design.

Answer 9

Our consultants use Mockup Screens ("Quick and Easy Screen Prototypes"). It's easy to alter screens and the scetches make clear that this is only a design.

Answer 10

We've been using iRise for the last 6 months. It sort of serves as a requirements document as well as a prototype.

Answer 11

I've been using Axure for some time now. It works quite well and offers a lot of useful functions. I've used it for some small-medium sized webapplications and it was very helpful. I should say though that if you have a lot of Javascript/Ajax interaction on pages, the dynamic panels can become a hassle. In such cases, maybe it's best to just use some simple HTML/JS.

I've looked at Irise, suggested by someone else here - that looks very similar. Probably more suitable for bigger projects. However, Axure costs a LOT less than Irise :-).

Answer 12

For the developers who find that they need to collaborate with remote teams or clients when prototyping, ProtoShare is a good place to look. It's kind of like Axure, but online for multiple people to access and add their comments to.

Answer 13

My normal workflow is...

1. Paper and pencil
2. Create a clickable mock using Omnigraffle (only mac) with wireframe stencils from Konigi.
3. Create a complete design in photoshop.
4. Implement in HTML/CSS

Note: Sometimes I find step 2 overkill depending on type of project, client, co-workers etc.

So my answer would be: check out Omnigraffle if you need anything more than paper and pencil (and if you are a mac user).

Answer 14

I'd say a mix of Balsamiq Mockups and Axure. Balsamiq is great for design mockups and Axure is great for functional mockups. I've found that Balsamq is better to show to clients, it looks great and clients get a much better sense of how the page will look and be laid out. Axure is great for functional interactions and I find it more useful for the back end developers. I find that clients find Axure wireframes and specs a bit difficult to read.

Answer 15

Good bye balsamiq, say hello to mockingbird!

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

Answer 16

I will recommand ForeUI. It is very handy and can export prototype to pictures, PDF and HTML. The most interesting thing is its ability to define interaction freely.

Answer 17

ForeUI is the best prototyping tool I've ever seen. It can create clickable prototype with any fidelity.

Answer 18

http://justproto.com/ is very good!

Answer 19

I have always liked iPlotz http://iplotz.com/

Answer 20

Balsamiq rocks. The fact that Mockingbird almost works on the iPad is pretty nifty too.

To the people who say "pen and paper" I don't really think they have any idea what they're talking about. To me this is precisely like saying "If you need to communicate with someone in another country just hop on a boat and go talk to them. Don't struggle with tools like a telephone or email." It's misinformation.

I'm 99% sure someone making an assertion that pen and paer is better for mockups than the modern tools has never used Mockups or Mockingbird.

As a consultant I've been creating mockups for 15 years in various ways (all painful till Balsamiq arrived) and I'll give you specific examples of why pen and paper is far inferior.

• First and foremost: collaboration and sharing. I'll create a mockup of a screen for a user. If I'm using Balsamiq I send it to them or post it to a wiki page. I ALWAYS miss some things, the user can then make notes directly on the mockup or drag and drop components around themselves. The pure ease of sharing electronically gets people involved. I work with people around the USA and the world.
• If you have a screen of any complexity and the user wants the navigation tree moved from the left to the right what are you going to do with pencil and paper? Spend 30 minutes redrawing the entire screen or spend 5 seconds selecting everything to slide left and make room?
  • How do you share something drawn by hand to people in other offices? Scan it in, scale it down, email? By definition a mockup you draw on a wiki is shared the instant you click save.

Creating a mockup in photoshop, Visio, and HTML are all relatively hard. But Balsamiq and Mockingbird are a completely new breed of tool. There was nothing available like Balsamiq till it was released about two or three years ago.

Balsamiq is to 'paper and pen' what the iPhone is to 'two cans attached by string'.

Answer 21

Former Balsamiq user, Balsamiq is a great tool and I still recommend it.

I Tried FlairBuilder and liked its ability to join multiple pages in a project much easier than Balsamiq. It also felt like it responded a bit quicker.

Flair runs in Adobe Air and is reasonably lightweight. One of the things I felt was easier in Flair was simple control linking in a multi-page project.

There is a comparison from the vendor on Flair vs Balsamiq vs iplotz here

All products are evolving at a rapid pace, so take the opinion with a grain of salt.

I did try the Microsoft Expression Blend SketchFlow but did not enjoy it, it just didn't feel as 'rapid' as both Balsamiq and Flair to use.

Answer 22

I had great success with Apple Keynote. I love it because it forces me to focus on the essentials, and gives me multiple master pages - A feature that's lacking from most mockup and prototyping tools.

I believe it's ideal for non-designers, and anyone who wants to get something up and running quickly and cheaply (iWork is currently selling for $33 on Amazon).

I wrote a blog post about my keynote prototyping experience, "How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote".

Answer 23

I have been using Axure to prototype business applications as well as mobile applications. It creates HTML output which you can host in a website to share with colleagues and customers for discussion. I start with a pen and paper sketch and then build the clickable prototype in Axure.

Answer 24

http://quplo.com It's made specificly for what you describe: web prototyping.