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?

  • Where does this question belong if not on this site? I came here specifically looking for something exactly like this.
    – blesh
    Sep 3 '13 at 15:01

45 Answers 45


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



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


I use Gliffy (online tool) for simple wireframes


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


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


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

Firefox Pencil Plugin is another tool to check out.


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.

  • Seems to be broken in the latest Firefox, though. Also, doesn't look like it's been updated in over a year. Still, looks promising.
    – DA01
    Nov 5 '10 at 14:39

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!


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



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


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


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


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

  • 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
  • Must be my bad sketching skills. In 9 of 10 times I get started faster without it. The one time pen and paper is faster is when I get to deliver it more or less straight to the designer. But in those cases its usually just revisions of existing stuff we have made together earlier.
    – Haakon Halvorsen
    May 4 '10 at 7:08
  • It's not an either or...it's using the right tool for the situation. Sometimes its Axure, sometimes it's pen and paper. I prefer pen, paper --> HTML/CSS/JS. Axure has its uses, but it slower to wireframe in than paper, and and limited in the fidelity an the high end given its code framework. As always, it depends on the project and the team.
    – DA01
    May 1 '11 at 18:29

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.


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!