Web Design: Top 5 Wireframing Tools

Two omissions:
1) Microsoft Visio - it has produced more wireframes that all these applications combined
2) Open Source / Free alternatives

Thanks,

- jason

Good list. I created a matrix of prototyping/wireframing tools at: http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/

Wireframes are confusing and vague.
i.e. How do you distinguish between a popup and a regular link?
i.e. Does the client truly understand what will appear on the navigation after seeing the wireframe?
i.e. How do you show dynamic flash elements?

Instead, wireframe the site using the actual site technologies (HTML and Flash). Build a prototype that you intend to throw away. It becomes your living/breathing site specification until the actual site replaces it.

The client can see what they're getting, the developers understand what they're implementing, and it saves time overall. Updating basic HTML (with shared includes) and Flash is far easier than the alternatives.

Of course, your information architect will need to learn some basic HTML (and possibly some basic Flash) - but if they aren't able to do that, why are they your information architect?

I came across a nice online one, which allows easy collaboration with other team members: www.protoshare.com

I've not tested this myself, but it looks like Balsamiq Mockups (runs offline on Windows, Mac and Linux) is also worth evaluating.

See details here:
http://www.balsamiq.com/products/mockups

…for the curious, we do not have any affiliation with Balsamiq.

Jim - information architects strong suit is to design and determine the structure of elements on the website. not for his own taste but rather for the benefit of the end-user. wireframes are not intended to be an accurate representation of the website to be built., they are the foundation for templates, not the templates themselves., programs like azure and visio just make the creation and reuse of this document far easier, for both presenting to client and transmitting this conceptual information to the developers, designers and creative directors.

The HTML/Flash prototype I'm suggesting is the foundation for templates, NOT the templates themselves. Why mockup using a different product when you've got the perfect mockup language staring you in the face. Plus it's easier to create. Plus everyone understands it. Plus it can represent complex Flash based interactions.

Programs like Azure and Visio do NOT make the creation and reuse of this document easier. Azure and Visio can create an extremely macro/high level diagram of the site, but that's it and debatedly useless since it's so high level. Once things get more detailed an fleshed out (page breakdown). Azure and Visio are horrid ways of communicating the organization of elements on a websites. Clients don't understand the Azure/Visio diagrams but will sign off because of trust.

Q: How does a static document replace a fully interactive document (HTML). A: It doesn't.

Of course an IA develops for the benefit of the end-user. Not sure what that has to do with anything.

I can easily get clients to sign off on Azure and Visio documents, but they rarely have a good idea of what exactly they're agreeing to. i.e. What does the arrow between 2 boxes really mean? i.e. How do I navigate to the most important information on my site? i.e. What appears on the navigation? i.e. How will the home page work? All these questions and more are not easily discerned from Azure and Visio documents. In most cases, the information doesn't exist.

When the client sees the final product (based on said Visio/Azure mockups), refrains of “I thought it would be like this” are extremely common. The IA and developers believe one thing, the client believes another and the Visio/Azure mockups are so vague that both of you are right. Your account manager will likely be unable to use the Visio/Azure document to prove the client is changing the requirements, and hence you'll get no extra money to fix things. Since the client pays the bills, and you want to keep them for project #2, you typically swallow the extra cost of changing the site.

Additionally, show me a designer or creative director that truly understands a visio diagram. Visio diagrams are for technical people, and only a technical person would believe an artist would find them useful. If you have a creative director or designer who loves visio documents, and can translate them into website mockups, keep him/her. From my experience, designers and creative directors will simply talk to the IA directly to get the website structure and then build the mockups. The only person that reads/understands the Azure/Visio document is the IA that created it.

I have been very impressed with the Balsamiq Mockup for Desktops. ot only is it a very simple and fast tool to quickly put screen prototypes together but the support from the company is amazing.

http://www.balsamiq.com/products/mockups

We are not associated with Balsamiq, just a happy user.

Don't forget JumpChart either - http://www.jumpchart.com. Easy to use and it works very nicely. I used it on several projects.

-Dinos

Woot! thanks Terry! Balsamiq Mockups is amazing!

“Balsamiq Mockups” looked great… however based on what I've read it doesn't support links. i.e. Great for prototyping one page, but horrible if you're prototyping a site. Trying to describe an interactive website with a “flat” document is insane.

All of these products, including those posted in the comments, pale in comparison to simply building a simple prototype in HTML. The editors are better, you can include shared elements, you have multiple ways of linking/interacting, it supports multiple editors and even source control, your clients have browsers to view the prototype or you can post it on the web, and it's free. Why look at anything else?

If you liked Balsamiq or Mockupscreens then you should also take a look at WireframeSketcher. It's an Eclipse plug-in for creating quick UI mockups and prototypes:
http://wireframesketcher.com

One more for you “Pencil”. It's open source, and good if you want something simple that you can let your end users use to give you their mockups as well as use internally.

http://www.evolus.vn/Pencil/Home.html

Paul

There is a new wireframe tool iplotz.com. which is very good and robust.
I like the interface and ease of use. Main advantage is apart from wireframing tol , they have project management too.Iplotz will support both online and desktop air application and using AIR desktop version we can easily switch from local to live.

@Jim

It seems to me that you haven't used Axure RP Pro yet. It is not a “macro/high-level diagram tool” at all, although it does incorporate that functionality. In fact, its capabilities are quite “micro-level” - you can show behaviors of links, dynamic states when the user is logged in/out, etc. I have been working as an information architect for 13 years now and have tried just about every method, from drawing wireframes by hand in Illustrator or Visio, to the exact method you describe - HTML prototypes.

The biggest problem I have with HTML prototypes is that they take too much work. It's just that simple. Axure wireframes allow me to accomplish 95% of what I could do in HTML prototypes, PLUS a lot more that you CAN'T do with HTML.

For example, you can track application state and show how a shopping cart icon may look different once the user has added items to it. Yes, you can do that in HTML but again, not without a lot of custom work, which all goes back to the time factor.

The level of detail that can be achieved in Axure RP is up to the designer - you can have very loose, blocky wireframes, or you can have design, colors, graphics, etc and make it look exactly like the final design.

After 13 years in the industry, doing work on enterprise applications for companies like Verizon, Oracle, Vodafone, etc. I can finally say that I have found the tool I have been looking for in Axure RP Pro. Well, 90% of the way anyway. All tools have room for improvement.

@Tai

I will definitely check out Axure RP Pro further. The Axure mockups I was provided (a few years ago) were almost as bad as Visio, hence my lumping of the products together. From the sounds of it, I have done Axure a disservice.

You've been put through the same ringer I have, and if you've found it more valuable than HTML I need to check it out. By comparison, the Balsamiq Mockup recommendation doesn't handle multiple pages well nor support links (not sure about latest version), yet everyone is excited.

2 questions:

a) How well does Axure handle Flash and Ajax mockups (everything on same page, in some cases with moving parts)? With the HTML approach, we're building mini-Flash and Ajax stuff into the IA. It clearly shows the client the problems with the Back button and Bookmarking and loss of DHTML state.

b) Does it easily support shared/central html (topnav / leftnav) for easy global changes during iterations of the IA? When I say HTML mockups, I'm really saying ASP mockups with includes for common components.

@Jim

You can incorporate a lot of dynamic functionality into one page, although I have never mocked up a Flash site with it so I can't speak fully to its limitations there. For example, I mocked up a calendar page where you can click a link and it will simulate getting data from the server and showing a modal dialog with the event details, with variable buttons/links depending on whether the user is logged in as a regular user or admin. One thing you need to understand about Axure is that it gets around a lot of branching logic by displaying it to the user as dialog box choices.

For example, you can click submit on a form and it will give you two branches - happy path or form validation error. The user simply picks which path and in this way the mockup is still demonstrative while sidestepping a lot of time consuming throwaway work.

As for shared HTML, it does incorporate “Masters” which basically includes. However, they are better as they can include dynamic functionality themselves and can change based on application variables. I also know what you mean about ASP mockups. I used to work in product marketing and the demo requirements of the product marketing team got so intricate that we started building ASP demos (even though our real product was J2EE). Again, it solved almost all the problems of being able to fully demonstrate a user experience but at 2-3 times the development cost of a plain HTML/Javascript mockup.

It was especially a problem for the UI team because our demos were so effective, we raised the bar and demand for our work increased. I really got burnt out spending 50-60 hours a week developing this throwaway work. Granted, Axure can also get you into this whole because if you try to develop too much functionality into it, you also increase the workload on your team. My new goal is to find the balance where we show the bare minimum we need to fully illustrate the user experience while recognizing that every hour spent on a throwaway demo is an hour not thinking about a better user interface.

Just as an FYI, IAApps.com lists these apps and a few more wireframing tools for comparison. Some of the freeware and online tools are pretty cool.

I still am looking for an open source tool to try wireframe mockup for a new website idea I have. I

I did a site in MS-visio, check it out www.dealzone.in . but this time around I want to create it in a new open source tool.
Any suggestions ?

Thanks

2 guys so far promoting paid software, both saying “we” are not associated.. what are you, robots?

I think like a computer, though that might be dissing my brain. Pencil, as in a real pencil is the best tool. Nothing is faster at rapid prototyping than good old paper. No if, ands or { about it.

Personally I have 3 stages of prototyping.

1) Quick hand drawn paper mock up
2) Functional coding prototype
3) PS layout and slicing

Humans are starting to worry me. Analytics are good, but lets not get carried away shall we. I know financial pressures make some full of shit, and find it necessary to create completely useless or redundant software, but please, try to be innovative instead. I know you can do it.

I published a review of several wireframing (prototyping) tools with pros and cons of each at http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/.

Check it out - I hope it helps as a supplement to this article.

After using Jumpchart for a bit I felt that I needed more wireframing control and someone referred me to Balsamiq.

Jumpchart has the ability to export content, possibly to XML.

Balsamiq has it's own version of XML - BMML.

So, my thought was whether we (as a web development company) could create some sort of bridge script between the two, enabling developers and designers to build a sitemap, agree it with the client, then export it and start work on the wireframes.

Anyone think this is a good idea? If so email me at dan (at) inigo (dot) net

After trying many Tools, I ended up with wireframesketcher (http://wireframesketcher.com). Petru Severin, the Developer of wireframesketcher adds new features very fast. I love ist.

Another wireframe app is HotGloo http://hello.hotgloo.com/

You should have a look at www.iplotz.com

I played a little with iPlotz recently as I was busy with a quick project and thought it might be a good opportunity to test it.

I found that generally the product was quite neat, except for a few annoying issues:
The 'free' download is a feature limited version - only one project can be managed, and no exports are supported? To change font color can be a bit of a mission - I found that placing a dot in the annotation section of the text formatting tool, deleting it, and then changing the text color tended to work - this whilst entering the HEX codes.

So whilst I thought that the product was fair, it seemed pretty pointless to do all of the work without and warning that there was no export support!! It is limited to a single project - making all of the features available would probably loose them one or two sales, however, if it had been a fully-functional product limited to a single project, I would gladly have bought it.

Perhaps something for the folks from Virtual Training Center to think about?

@Micheal I guess you would have used the demo account to login and wireframe. iPlotz does give the free user the right to export. Pleas register an account and check it out.

For those contemplating Axure, I´d recommend Justinmind Prototyper: easier and more powerful. Using free trial, I built a fully dynamic website (simulating database and Ajax effects) with functional login and other conditions without a single line of coding. The client could not see the difference between the real thing and the prototype (for they was none, except the code behind it). Impressive!

“Additionally, show me a designer or creative director that truly understands a visio diagram…” I am the creative director at E-Cubed Media Synthesis and I work with the development lead to create documents that mean something to our clients.

I think greyscreen prototyping in HTML and Flash have their place, and diagrams too, and carefully worded emails, and in-person presentations, and long phone calls and learning to write notes while conversing…

In short, when it comes to helping the client understand and get clear about what you're recommending based on your analysis, you want tools that will help meet this goal.

Pencil and paper. Bring it.

The job of an IA isn't to make wireframes, but to clearly describe how the website is organized, and ensure the elements that need to exist on a page in relation the system and the user are present.

As IA leads into defining UX, I think we're all struggling to find economic and effective ways to demonstrate how website will be experienced and that's why tools like Axure and Flash Catalyst exist. “Show me don't tell me” is crucial in this part of an engagement.

But there's the part where thinking and planning need help too, just for ourselves. We sketch boxes and arrows as thinking tools. The same with writing. I can construct clearly logical english sentences that allow programmers to write C#, but I don't know how to program. Writing is a thinking tool too. Write and draw to learn.

In my recent experience, my client surely understood what he was looking at on the wireframes, and asked excellent and penetrating questions. So did the designer. The resulting improvement in the IA and UX is fantastic. If he hadn't understood the wireframes I would have looked for another way to express the information.

Indeed in the same instance it was the fact that we use wireframing and diagramming as a part of our process that helped us win the work.

Tools are great. I am actually a software junkie (as my blog attests with 14,000 word reviews of design tools http://www.jonwhipple.com/blog), but the crucial thing isn't which tool you're using, but can you use it to make things that help people understand?