Website wireframing is an important component of web design. It is the creation of conceptual prototypes to organize a site’s content, functionality and structure.
Several free and paid wireframing tools exist to help construct a mock-up quickly, share it easily, and incorporate feedback smoothly.
Here’s our take on three of the most popular website wireframe tools:
MockFlow
Interactive site map visualization, embedded revision history and a presentation mode for testing help MockFlow to deliver a solid wireframing experience. HTML preview or download for viewing and sharing as well as real-time comments and chat enrich both the free and paid versions of this program.
Axure
Axure offers robust design capabilities, simultaneous sharing and discussion directly inside an uploaded prototype. A one-click HTML generator and clickable mock-ups further enhances the ability to produce sophisticated wireframes.
Balsamiq
Tailored for team collaboration, Balsamiq comes in desktop, plugin and web app forms. The “sketched” style and simple interface makes this easy to use while the variety of UI components, icons and community-developed content enable broad wireframing development.
| MockFlow | Axure | Balsamiq | |
|---|---|---|---|
| Compatibility | Desktop Version: Mac, Windows. Free mobile access for both Basic and Premium users. | Mac, Windows | Mac, Windows, Linux |
| Exportability | HTML Preview (Basic), HTML Download (Premium), PDF, PNG, PPT Slides*, Expose Snapshot*, Specs in MS; site map in Excel*. *Premium version. |
Click-to-generate HTML and JavaScript for IE, Firefox, Safari, or Chrome. Publish to a network drive, web server, or share area on Axure.com. | PNG, Clipboard. Embed in wiki pages or bug reports (plugin version). |
| Collaboration | Real-time team chats and change notifications (Basic & Premium). Comments directly in mock-ups. | Track changes and work together simultaneously. Place direct comments in prototype discussion tab. | Desktop application or Wiki. |
| UI Components and Icons | Standard library of wireframe components, images, icons and background layout designs. Additional templates in MockStore. | Published widget libraries with customer-created content. Custom widget libraries can be built. | 75 built-in components. 187 icons. Active user-generated content community. |
| Design Style | Minimalist and structured. Fully clickable prototype. | Ranges from hand-sketched style to detailed and polished complete with color gradients and fills. Clickable mock-ups. | Intentionally “sketched” with hand-drawn font. |
| Cost | Free/1 project with 4 pages; 2 collaborators per project with unlimited revision history; image/PDF export; HTML preview. $69/year for unlimited projects, real-time collaborators and other benefits. | $589/single user license. | $79/single user license (Desktop). myBalsamiq web app plans start at $12/month. |
MockFlow vs Axure / Axure vs MockFlow results
MockFlow offers a free version which is good news for web design projects with a low budget. Though web designers can get a test ride of Axure with a 30 day free trial. MockFlow offers more export options than Axure. WInner: MockFlow.
Axure vs Balsamiq / Balsamiq vs Axure results
Axure offers more export and collaboration features than Balsamiq. Though Balsamiq’s price is very attractive for those willing to sacrifice a little flexibility. Winner: draw.
Balsamiq vs MockFlow / MockFlow vs Balsamiq results
MockFlow’s desktop version is less expensive than Balsamiq, and outperforms Balsamiq in comparison of export and collaboration features making the winner clear: MockFlow.
Learn how to integrate SEO directly into the wireframing process.
Thanks for the insightful comparison. Do take a look at http://www.mockups.me as well – all of the above plus apps for your tablet devices as well!
Thanks Steve. Appreciate the tip about http://www.mockups.me and really like that it includes tablet in addition to browser and web.
I like MockFlow. I’ve used it for several clients and have been very happy. It’s easy to share with others.
Good to know, collaboration is a key part of the process. Thank you for reading, Leve.
Ally, if you’d like to go through the other tools, take a look at http://www.uxpin.com/ – it’s quite unique as it connects 2 prototyping methods – paper and digital. I hope you will find it interesting!
Thanks for the tip on this, Marcin! The “magic auto-conversion” from paper to digital offered by UXPin does look interesting.
I can recommend uxpin as an alternative, it’s being updated very often and has some unique features. Definetely thumbs up!
I’d like to add Devhand SketchIt at http://www.devhand.com – it is a new tool, you can generate HTML like with Axure. It supports layers, actions, annotations and there are going to be a lot of new features in next versions.
Thanks, Ladislav. Can it generate JavaScript with the HTML? And PDFs?
It generates interactive wireframes into HTML + JavaScript. This part of application works similar to Axure, you add actions to events in the designer and then HTML + JS can be generated. PDF is currently not supported but it is on the todo list, same with DOC specification exporting. If you are interested, you can send me an email and I will inform you when it is ready.
Has anyone tried out http://quirktools.com/wires/ ?
Great comparison Ally, I love how pointed your comments are. I hate these long drawn out essays with stuff I don’t really care about. I was torn between Balsamiq and MockFlow, but your article made the choice easy for me 🙂