Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What tools (ideally affordable ones) would folks recommend for creating a website wireframe? What tools have you used, and did you find them better than pen and paper?

share|improve this question

closed as not constructive by Rahul Feb 2 '12 at 13:43

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

show 1 more comment

45 Answers 45

This blog post about using Google docs, Google drawings sounds intriguing:

http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

share|improve this answer
add comment

The most suitable tools for wireframing and prototyping depend largely e.g. on your team structure (inter-operability, shareability, …), the project status (=> necessary visual and functional fidelity) and the type of stakeholders you need to communicate your design to. If you are working at least partly remote with a distributed team, requirements are quite different compared to having everybody on site. Further influencers comprise e.g. distributed editing and versioning. (IMHO, Zaki Warfel's book on prototyping provides a useful starting point when yo need to evaluate alternatives.)

My own workflow revolves largely around paper (freehand sketching, sketching w/ basic grid templates, sometimes cardboard stencils for often used elements, …) and then most often OmniGraffle at a later stage, sometimes supplemented by Indesign, Fireworks (only with certain clients, if hifi comps are required – otherwise its GUI performance is a major PITA) or Keynote (great if you need all kinds of transitions). I am currently considering migrating to Axure RP, though. Moving past paper prototypes and clickable mockups currently leaves basically the native format, i.e. most often HTML/JS (incl. jQuery). Balsamiq and other browser based solutions or RIAs so far have felt too slow und awkward for me, I just can't seem to get into flow with them. (Pidoco's collaboration and testing features might be interesting under certain circumstances, though.)

share|improve this answer
add comment

I use Gliffy (online tool) for simple wireframes

share|improve this answer
add comment

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

It's still early beta and am not sure of the pricing, but it's worth keeping an eye on. It's a web app written in Cappuccino so no need for Flash...

Cheers R

share|improve this answer
add comment

While I'm sure many of these tools are much better, here is a "low-tech" solution (given that you have PowerPoint) http://www.raizlabs.com/blog/294/wireframing-in-powerpoint

share|improve this answer
add comment

Throwing in a resource in **to support sketching as a great wireframing tool:

50 Sketching Resources for User Experience Designers** which includes sketching:

  • articles
  • tools
  • templates
  • presentations
  • videos
  • books
  • examples
share|improve this answer
add comment

Firefox Pencil Plugin is another tool to check out.

http://pencil.evolus.vn/en-US/Home.aspx

Its free, has a nice basic set of stencils, and some sketchy stencils. You can get some rough mockups done pretty quickly. Not as many stencils as other tools, but it works pretty well.

share|improve this answer
show 1 more comment

I use Axure, and kind of satisfied with it. I wuold have some development ideas, to make usability of the program more convenient and faster. For example there are missing features when dealing with text (alignments, text-picture alignment, etc.)

I haven't tried other stuff yet!

share|improve this answer
add comment

I use Justinmind, great to wireframe and prototype dynamic websites (JS-like events & integrate your own data) without coding (even interactions are drag & dropped).

They also offer a service to share your wireframes online so that people can comment straight on elements & you can even carry out user tests as it integrates most user testing tools (clicktale, userzoom, google analytics...).

http://www.justinmind.com

share|improve this answer
add comment

WireframeSketcher is a software tool that helps quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a plug-in for any Eclipse-based IDEs and a standalone version.

WireframeSketcher Website Mockup

share|improve this answer
add comment

I've found MS Visio to be pretty flexible if you've got the right supporting files. I use...

Visio - the interaction designer's nail gun (3rd edition)
Basic web widgets in standard and "sketchy" versions

Visio tips & tricks for Interaction Designers
Macros that make working with Visio much easier. In particular, copying pages and copy/paste items "in place".

share|improve this answer
add comment

Here's an online tool that has a Free plan as well as really cheap one at $50/year: http://www.mockflow.com/

share|improve this answer
add comment

I'm getting pretty tired of the people saying they are only using pen and paper.

If you can make complex frameworks with pen and paper then either you are non-efficient or never reuse modules from earlier designs or this is your first one ;)

The whole point with a tool for sketching must be to make a pattern library and use it so you can focus on the bits of the project thats interesting and innovative instead of the boring parts you have done so many times before.

The whole "I only use pen and paper" reminds me of the days when every HTML coder with any pride claimed that he never used anything else than notepad to code. Ok, the tools back in the day was bad (remember Frontpage?) - but still...

Comon! Of course you use pen and paper sometimes, but seriously, when people ask for advice about tools - don't mock them suggesting pen and paper - don't you think they know about pen and paper before they asked the question?

I use Axure. It's not pretty but it gets the job done.

(Don't get me started on those who say they jump straight to HTML. They are worse than the pen and paper ppl.)

share|improve this answer
1  
Sorry, not quite. The basic point about sketching is to generate ideas as quick and cheap as possible for later evaluation. You can't beat paper in that respect. And in case you really need certain library elements you may just print and cut them out and/or use simple cardboard stencils. When you have narrowed down possible options and need higher fidelity it's time to move on to suitable software, of course. –  Sascha Brossmann May 3 '10 at 7:23
show 2 more comments

I use ForeUI that is a great tool for creating prototypes, in which you can add behaviour to simulate rather complex system behaviour. - If that's required for your prototype.

The DHTML prototype can be exported and run in any browser, that support java, and easily be shared with colleagues and customers.

I'm designing software for Windows, but ForeUI can be used for anything - including web.

It runs on Windows, Mac, Linux, and Solaris and the price i $99. Usually a new version is released every fortnight. Find more details on www.foreui.com.

share|improve this answer
add comment

I would like to add a FREE, FAST, BASIC, ONLINE MockUp builder: (Silverlight required) http://www.mockupbuilder.com/App

I use it when I need something draft, fast, online!

share|improve this answer
add comment