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?
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.
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.
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:
- They focus on the aesthetics instead of the functionality, because "it's already a website, so it should look good".
- 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.
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.
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.
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.
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.
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.
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...
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.
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!
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
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)
Using Photoshop, I edit the .psd in the 960 Grid (http://960.gs/) to create wireframes.
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.
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.
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.
We tried several wireframing tools, but settled for pidoco.com since it has some useful usability testing stuff integrated and is all online.
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.
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.
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.
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.
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/
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