Interactive Website prototyping

Question

I would like to rapidly prototype new features for a website. I'm looking for a way to:

• Build around an existing, complex website
• Allow for interactivity
• Ridiculously fast and easy to try out new things

I imagine something that allows me to say "render this website, but on pages with URLs like this, tag on this thing that I'm now drawing with stick figures onto the page, and if somebody clicks on it, move them here".

Or possibly, "here is a screenshot of a website. If somebody clicks in this box, show them this other screenshot".

What do you folks use to prototype website UI features?

Answer 1

Balsamiq Mockups. So. Freaking. Good.

EDIT: So here's a thread with more information on prototyping: http://stackoverflow.com/questions/720191/web-ui-prototyping-tools

Answer 2

I'm not a fan of Balsamiq, but a lot of people like it. If Napkee launches, together with Balsamiq it'll be what you're looking for.

An alternative would be Fireworks -- it can easily export to HTML, but the learning curve is steeper than Balsamiq.

Answer 3

If you want it to be interractive and built on top of an existing website, you could try to use greasmonkey with firefox: https://addons.mozilla.org/fr/firefox/addon/748

I'm not sure how fast you can make prototypes with this, but you can surely make them interactive. Greasemonkey alow you to modify any web page using javascript.

Answer 4

You could try protoshare.

Downsides: a bit sluggish, requires credit card details for free trial. Upsides: collaborative features, cheaper than axure.

Answer 5

try clickframes- a way to write text-prototypes in xml, that render out to websites that you can click through.

surprisingly effective- at a demo they wrote up an application specification (appspec) and then generated a seam-based website.

they tried balsamiq and it didn't work for them.

from their website:

"For Designers

User experience professionals use Clickframes to rapidly spec and prototype the interactivity of their designs, and to communicate the design to collaborators as well as project stakeholders. When the design has been refined, Clickframes facilitates communication with the developers who will implement the application."

Answer 6

You can try ForeUI, here is a created sample prototype.

Answer 7

I like http:/www.iplotz.com - it's got nice UX and design http://www.justproto.com is also inetersting tool its very fast, its got clean look and its super easy to create prototypes with it

chceck out wireframes.linowski.ca it's a noice blog on wireframes

Answer 8

Pencil is quite good and free! It can be downloaded as a standalone app or as a firefox plugin.

http://www.evolus.vn/Pencil/