33

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?

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

45 Answers 45

27

We use Balsamiq Mockups religiously these days. It's such a rapid tool for quickly creating rough outlines and even simple interactive walkthroughs. It's very cheap and has a free trial but also gives out free licnences to community projects. Give the desktop version a try, we've been using it for the past few months now and made it a part of our specification and prototyping process.

2
  • Agreed, this works really well for rough mockups and has some great features. Shame it's made in Adobe AIR though; it can be a little inconsistent and buggy.
    – Philip Morton
    Dec 18, 2009 at 14:26
  • We've tried many wireframing tools and settled with Balsamiq as well. It's feature set and philosophy are very much in tune with the view that wireframing should be ... well, wireframing, quick, low-fi and simple. Also, major props to the creators for a smart use of Comic Sans :).
    – Andrei
    Aug 12, 2011 at 12:52
27

Paper is relatively inexpensive these days.

Also, I prefer pencils because of their rubber undo button.

3
  • I wish I could give two upvotes for added "undo button" sarcasm.
    – Brenton
    Dec 18, 2009 at 11:53
  • 2
    I prefer pens because they have no undo button. You'll think twice before making a change.
    – user371
    Oct 12, 2011 at 10:15
  • -1 for all the negatives that a physical model bring. Inconsistent legibility, no long distance collaboration, poor versioning, difficult to iterate, slow to make minor changes on a built up wireframe, needs post processing with a scanner or camera, digital version consumes more data, waste of paper.
    – Soviut
    Dec 24, 2013 at 21:50
12

I find myself using simple pen and paper to quickly sketch some wireframes and then move on to the html/css prototype. Mostly since I'm a good integrator, prototyping early is easier than using complex software to wireframe.

Else, I'd recommend Omnigraffle, not too expensive and with the right stencils, it does great work. Linky. It's useful for both wireframing and sitemapping.

2
  • I need to start using Omnigraffle, next, because we're leaving Visio behind now that we all have Macs at work. Any tips?
    – JeromeR
    Oct 31, 2009 at 4:52
  • JeromeR, I guess I'd point you to some excellent stencils to get started with Omnigraffle and wireframing: konigi.com/tools/omnigraffle-wireframe-stencils -- I also find these work best: konigi.com/store/product/omnigraffle-sketch-stencils in order to make your wireframes more "sketchy" and less "oh, just integrate it now and we'll have a final product", which could be the response of some clients. The tool itself if fairly easy to use, but it's not exactly familiar at first, needs a little practice.
    – Jérôme Gravel-Niquet
    Nov 1, 2009 at 14:24
12

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.

9

I mostly use a notebook to sketch out super rough ideas, then I use Omnigraffle with the Konigi.com stencils to do the actual mock ups.

If I'm doing WoZ testing, then I do it all in paper with printed out browser elements.

1
  • Another vote for pen and paper from me too :-)
    – adrianh
    Oct 16, 2009 at 10:56
8

At UPA conference a half year ago, I was in a session in which people discussed tools: HTML vs Axure vs Balsamiq vs FlairBuilder for prototyping.

Axure and Balsamiq got some votes. FlairBuilder gets my vote.

I was live-twittering, and someone outside the session suggested we download and try the FlairBuilder demo. We did so on the fly, and were immediately able to use it without any prior experience. FlairBuilder is at the same price point as Balsamiq, and each had some features that the other didn't. For example, FlairBuilder has live multimedia, including from YouTube, which was important to some participants and not others.

During the discussion, one participant said “Visio is a nightmare,” and while I think that's a strong statement, I am required to use it at work and I do find myself "fighting" Visio (i.e. wasting my time).

Microsoft was at that conference demonstrating a new design/sketching tool that produces low-fidelity prototypes, but that had a higher price point. I forget the product name [edit: It's SketchFlow], but the demo was impressive, "as you would expect any hands-off demo to be," he added cynically. This product was not discussed in the discussion session I described, above [edit: because it wasn't yet released].

I recommend trying FlairBuilder, because it's easy to use and learn, especialy if you start by amending the sample project. You'll have to overlook the frequent "Buy me now!" message in the free trial version.

I am not affiliated with nor paid by any product mentioned, above.

1
  • When looking into low-cost wireframing tools I found FlairBuilder to be preferable to Balsamiq. I'd prefer Axure over either, but it costs around 6 times more, so I've not managed to talk the bosses into that yet!
    – Pete Williams
    Mar 5, 2010 at 12:06
8

I've given talks with:

FlairBuilder Balsmiq Axure SketchFlow PowerPoint Fireworks

Personally, I start on a white-board. I think FlairBuilder & Balsmiq are both extremely easy to use - perhaps the easiest.

I think Axure is really powerful, but not as friendly.

I think PowerPoint works when you are trying to do something really fast on a random PC.

My personal favorite is SketchFlow because of the way they link pages together and its ability to create behaviors and morph into a fully fledged working proto-type (really high fidelty) that can serve as the beginning code of a Silverlight Application or awesome doc for a development team on another technology.

I also like the animation capture & design, as well as, behavior/control building compared to the other programs which only really use pre-designed or low-fidelty custom controls.

7

Fireworks is an amazing tool which is often overlooked -- it's really matured especially for doing lots of documentation and states.

The biggest advantage Fireworks has over other solutions is that it can be used for Webapps not just webpage. There is a huge difference in the level of complexity that needs to be wireframed between the two; this is often not accounted for in MOST wireframing tools.

7

I have used: Visio, Illustrator, Axure RP Pro, OmniGraffle, Balsamiq Mockups seriously, and have tried all the web-based apps. I have also done HTML prototyping and paper prototyping.

What I find works most efficiently still is sketchiing on paper, refining in either OmniGraffle or going directly to mockups in HTML. What I choose to deliver depends on who the design document is for, and what its purpose is. Mostly I choose OmniGraffle for speed, or deliver sketches and HTML. Disclaimer is that I am in an in-house UI designer.

7

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.

6

You could try the new Blend SketchFlow tool from Microsoft. It's incredibly powerful, but can be a little hard to approach (try sideways and with a slice of lemon).

It can generate prototypes viewable on the web (using Silverlight) or a Windows desktop app using WPF with a complete navigation system, and I believe it can track users. It can also record user comments as they're running through it...

1
5

I'm all about using pencil and paper (actually a sharpie and paper). I get the general look of things after I decide what elements are most important and then just straight into HTML.

I've used Photoshop and Balsamiq and Omnigraffle before, but I always felt like I was wasting my time because no matter how pretty they looked, I'd have to start all over when I got to the markup.

I felt much better about crumpling up a piece of paper I worked on for 10 minutes than I felt about deleting an Omnigraffle file I worked on for a few hours.

5

Been a user of PowerPoint for some time but got tired of it's limited features and the fact theat they aren't interactive..

Although it isn't the cheapest option, I must say that pidoco seems to be one of the best wireframe tool solutions for my needs since they're browser-based and let me export to various formats and get my work reviewd quickly. Yea, the review features are pretty cool indeed..

Surely there are several good mockup tools about but they mostly lack portability..so yea, pidoco is the solution for me so far!

1
  • I followed your advice and searched for Pidoco. I visited their site and only by the look of it I got frustrated - no way I will trust them with my time. In fact, I am asking a new question on how they can improve their site!
    – Charis
    May 2, 2010 at 14:55
5

We use Adobe InDesign. It may look strange a bit but there are features that I like:

  • it has an 'Adobe-style' interface. If you've worked with Photoshop or some other Adobe products, it would be easy to learn how to use InDesign
  • it can export your wireframes as clickable PDFs
  • it has powerful abilities to work with typography, tables, styles, grids and so on
  • it's easy to create not only a simple wireframe but a complex visual design too if needed
5

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

4

Pencil for FireFox is a free flugin and can run as a standalone tool also.

The next up is something like Open Office Draw (also free).

Pen and paper are good also.

You can also try something like FlairBuilder which is an AIR app.

1
  • The desktop version of Pencil is now awesome. Plus you now have some excellent stencil libraries for Bootstrap, Android and Material Design that have been created
    – icc97
    Feb 9, 2016 at 9:29
4

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

4

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.

4

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

0
3

I can't say enough good things about http://hello.hotgloo.com/ I've been using it for collaborative wire framing and it's awesome.

Oh and it's free while they are in beta.

3

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
3

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

3

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.

3

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

3

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.

1
  • The major problem with FW is that its GUI performance is a major drag (and type rendering is at least questionable). Sadly – I used it extensively until ca. 6 years ago when it started to heavily suffer from bloatware symptoms and half-assed QA.
    – Sascha Brossmann
    May 3, 2010 at 7:27
2

I've used (and have been very impressed with) Balsamiq Mockups, but as Nathanel says, it has some limitations.

Not sure whether you've seen it or not but Sitepoint posted this a few months back, but it's probably still relevant. Might be a few things worth more detailed investigation.

2

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.

1
  • I've found exactly the same problem with Omnigraffle and Visio, as most of my clients use or have access to visio this essentially rules out omnigraffle.
    – Matt Goddard
    Oct 27, 2009 at 11:29
2

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.

2

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/

2

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