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.