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.

45 Answers 45

I have to agree with some of the other posters here. Paper and pencil (or pen or marker) is the best, cheapest way to start your prototyping. There's no reason to use something like Photoshop, because you aren't doing a full-blown design. The various software packages specifically for mockups and prototypes are all nice, but can become very expensive, and also don't really add much beyond what paper can do for you. I would say that they are rarely even more efficient time-wise.

If you do want to go with a prototyping application, I think that the best option out there is Axure. They aren't overly expensive, and have a great amount of features. And you can try the software for free for 30 days (and I think that's fully functional during that time as well).

I would recommend against using HTML/CSS for your prototypes unless you know that the people you are creating the prototypes for understand completely the difference between an HTML prototype and an actual, functioning site. Typically, one of two things happens:

  1. They focus on the aesthetics instead of the functionality, because "it's already a website, so it should look good".
  2. They don't understand why you can't just finish it a couple of days after you show them the prototype, becuase "the site is already working, we just need to make it look prettier". It takes a lot of work to get non-technical people to understand the difference between an HTML prototype and an actual functioning site.

As for PowerPoint — in my opinion, that is one of the most overused and misused applications around. I can't count the number of times that I've received a PowerPoint presentation as an attachment as the sole means of announcing something by an HR person. Using it for prototyping is along the same lines. It was not designed for that and it does not really have the tools to make it effective for prototyping.

share|improve this answer

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

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

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

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

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

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

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

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

I use Post-its for structure and overall layout, then move on to Balsamiq Mockups or OmniGraffle, and for High-fidelity prototypes, nothing beats Apple Keynote. :)

share|improve this answer

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

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

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

Like all things, this depends on what it is you are hoping to achieve.

I used Powerpoint for a long time and that was fine.

The most comprehensive wireframing tool I've come across is Axure (http://www.axure.com/) which is great for creating high fidelity navigable wireframes. Plus its recently been launched for mac.

I find Balsmiq (http://www.balsamiq.com/products/mockups) a little fiddly, although I like the 'sketch' approach as if your looking for feedback, I've found the more polished something looks - the less likely you are to get feedback due to the fear that it's too far down the line.

http://gomockingbird.com/ is a great free tool, but quite basic.

If you have a mac, Omnigraffle is great and you can download a range of free stencils from http://graffletopia.com/

But never under estimate the power of pen and paper - this is by far the best for churning ideas out quickly

share|improve this answer

I switched from Balsamiq+Napkee to iPlotz - absolutely love it, since you can create a working rough prototype while making your mockups with no extra work. I did a writeup on it here: http://www.snipe.net/2010/02/wireframes/

share|improve this answer

I'm pretty happy with starting out with pencil sketches then moving to OmniGraffle.

We've used FlairBuilder as well. It's decent for wireframes and very simple prototypes, but we ran into a number of limitations. As we continued to update the prototype, we found it became painfully slow. We're now considering Axure for prototyping.

share|improve this answer

I suggest that you take a look at EightShapes Unify (http://unify.eightshapes.com/) ... I've just started looking at it and haven't gotten a new project to try it out with, but it really looks like a killer framework for Wireframes and other design deliverables.

PS It's totally free but you need Adobe InDesign to use it.

share|improve this answer

Personally i use Pen and Paper (i particularly like konigi's wireframe graph paper) then rendered into Visio, with the Lombardi wireframe templates and Nick Fink's wirefame stencils (these are both free). So apart from the cost of MS Visio it suites me well.

In the past I've also used:

  • PowerPoint to create "clickable" wireframes but never in anger.
  • Axure to spawn quick prototypes but the version i used didn't do a go job of collapsing the dynamic panel when the states were diffent heights (may be better now)

Matt

share|improve this answer

Fireworks, hands down is one the best tools out there; not only for wireframing but for transitioning from wireframe to mockup and exporting interactive HTML prototypes.

It offers a nice component library. The tools are easy to figure out. It supports pages, and states.

It may not be the cheapest choice but in all honesty it is one of the best tools out there.

share|improve this answer

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

We tried several wireframing tools, but settled for pidoco.com since it has some useful usability testing stuff integrated and is all online.

share|improve this answer

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

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

Using Photoshop, I edit the .psd in the 960 Grid (http://960.gs/) to create wireframes.

share|improve this answer

About the high fidelity prototyping tools, there are those that allow you to simulate to almost final design and effects, such as iRise and Justinmind Prototyper. Those don't just simply allow you to sketch the wireframe, but to embed videos, create rich interactions (such as form filling and data use), and are better to create specifications and user testing.

They're a step further from simple drawing tools like Visio, OG or Balsamiq.

share|improve this answer

I use Gliffy (online tool) for simple wireframes

share|improve this answer

I use Balsamiq Mockups for Wireframes. If the design is interactive i use Powerpoint. For high fidelity mockups, powerpoint is king.

share|improve this answer

I love iPlotz. Some of the features that sold me:

  • Affordable!
  • Task management
  • Clickable prototypes
  • Export to image or PDF
  • Sharing and commenting capabilities
  • Simple user interface with numerous widgets available
  • Skins for sketch, Windows, and Mac

Before iPlotz, I used Photoshop.

  • Candace
share|improve this answer

Like most people here it seems, I use Balsamiq to do rough mockups on the fly, but the limitations of the interface (and the occasional tendency to crash) mandate that for more solid wireframing work I use Omnigraffle, usually with the Konigi stencils but increasingly also with my own. I find that once you've invested the time it takes to get used to creating templates and stencils, as well as mastering shared layers and variables, Omnigraffle is the perfect combination of powerful, feature-rich application and quick/easy production. The only drawback of course is that you can't easily share it with Visio people. They say you can using the XML-based file exports that both packages support, but it never really works flawlessly and you find yourself manually sorting out all the glitches.

share|improve this answer

I tend to grab a Stabilo Poit 88 pen, whichever colour takes my fancy and scamp out ideas on a wireframe sketch pad of my own design (6 x up on A4 landscape).

I've also found if you cut a block of square Post-It notes, cut down to 2/3 width work well - it forces you not to get stuck into details, but concentrate on the overall page.

Then I go over certain areas with a different colour to create point of interest/action. Then I sketch more detail at a larger scale (2 x up on A4 landscape).

Once happy with the direction and concepts I move over to OmniGraffle, using a personal template and various stencils (try Konigi.com & graffletopia.com). If anything trips me up at this stage, it's back to the pen & paper.

Finally I save my Omni doc as a PDF containing click-able links.

share|improve this answer