Professional wireframing and web design prototyping tools take a step forward compared with free wireframing tools and commercial website prototyping tools, by allowing you to draw highly-realistic mockups of websites. In this MasterNewMedia guide you will find the best professional wireframing and website prototyping tools that you can use to create compelling visual web design projects. Photo credit: Designer Break Wireframe mockups have the unique advantage of providing an immediate visual output of what your web site layout, content organization and navigation will look like. Without spending precious time and resources to design every single detail of your interface, you can produce a fully-functional visual mockup to communicate to your clients and team members your idea and also to highlight potential ambiguities and pitfalls in your design choices. Though MasterNewMedia has already published two in-depth guides on free wireframing tools and on commercial website prototyping tools, this third one highlights and focuses exclusively on professional wireframing and web design mockup tools. Here, what sets professional web design prototyping tools from their commercial and free counterparts?

• Computing power: All professional wireframing tools are available only as a downloadable software. None of them is offered as a web-based option.
• Comprehensiveness: In most of the tools present in this guide, the ability to create wireframes is only one of the options you have at your disposal. You can also draw flowcharts, Venn diagrams, mindmaps, landscape plans and other type of visual projects that help you communicate more effectively your idea when associated to a wireframe.
• GUI system library: All professional wireframing tools have an impressive library of ready-made widgets and design elements that you can drag and drop to your wireframes. Having readily-available design components to build your web site mockups not only is a great time saver, but it also allows you to draw your prototypes with clinic precision and to achieve a highly-realistic effect.
• Design annotations: Professional wireframing tools let you create annotations and comments to add to your wireframe designs. By using annotations, you can easily share feedback, ideas, suggestions and revisions without having to rely on another third-party communication-collaboration tool..

To help you select and identify the best professional wireframing solution for your needs, I have compared all of the best tools available out there and through an interactive mindmap, a set of comparative tables and mini-reviews, I have attempted to make your analysis and evaluation as effective as possible. Here the criteria that I have used for this comparison:

• OS supported: Operating system needed to install the wireframing software tool.
• Interactive wireframes: Clickable mockups that simulate the navigation between web pages.
• Mobile design: Simulation of wireframed mobile websites and web apps.
• Collaboration: Interaction with customers and collaborators to receive live feedback.
• Export formats: Supported formats to export wireframe projects.
• Price: Cost of the wireframing and website prototyping tool.

Here is the full guide in detail:

Professional Wireframing and Website Prototyping Tools - Comparison Tables

Professional Wireframing and Website Prototyping Tools

1. Axure RP

   Axure RP is a professional website prototyping tool that allows you to create a wireframe to pre-design your website. Axure RP is available for both Windows and Mac platforms. You can draw both static and interactive wireframes that simulate a real user navigation experience. A comprehensive GUI system library is also available to provide you with readily-available web elements and widgets like menu bars, scrollbars, headers that you may include inside your website mockups. The collaboration feature lets you share your website mockups with other people and receive real-time feedback and comments on your work. You can save / export your wireframes to HTML, JPEG, PNG, BMP and GIF file formats. Axure RP costs $589. No mobile design is supported. http://www.axure.com/







2. Justinmind Prototyper

   Justinmind Prototyper is a professional software tool to prototype websites, software applications and mobile applications. Justinmind Prototyper is only available for Windows. By drawing interactive website mockups using wireframes you can sketch out your new web project and also simulate user navigation to prevent pitfalls and ambiguities in your design. An extensive GUI symbol library allows you to add readily-available design objects and web elements to your mockups. You can also collaboratively work on your wireframes to exchange real-time feedback and comments. When done, you can export your wireframes to HTML and JS file formats. Justinmind Prototyper costs $459. http://www.justinmind.com/







3. ConceptDraw PRO

   ConceptDraw PRO is a technical diagramming tool for Windows and Mac that you can use to create mockups of websites and software applications. ConceptDraw PRO has a large GUI library of pre-drawn widgets and design objects that make it easier to draw your wireframe mockups. The exporting feature lets you save your finished website prototypes to several file formats like: PDF, JPG, EMF, SVG, PPT and many more. The integrated presentation facility lets you present your visual projects without the need for an external software or application. ConceptDraw PRO price is set at $199. No mobile design, collaboration features, nor interactive wireframes are supported. http://www.conceptdraw.com/en/







4. Lucid Spec

   Lucid Spec is a professional wireframing software tool for Windows. Lucid Spec allows you to create website and software mockups and provide your clients with clear GUI specifications embedded right inside your prototypes. You can sketch out both static and interactive wireframes that simulate the navigation flow between web pages. To draw your wireframe, you can access a large set of pre-drawn widgets and design elements that you can drag and drop io your mockups. When your prototype is ready, you can export it to the RTF format. Lucid Spec costs $499. No mobile design, nor collaboration features are present. http://www.elegancetech.com/ls/ls.aspx







5. Adobe Illustrator CS5

   Illustrator CS5 is the latest version of the graphic design and illustration software tool from Adobe, available for Windows and Mac. Among its several design features, Illustrator CS5 lets you draw both static and interactive wireframes of your website. Interactive wireframes allow you to simulate navigation between web pages (but require Adobe Flash Catalyst installed on your machine). An extensive GUI symbol library allows you to add readily-available design objects and widgets to your website mockups. You can also collaborate with other people to receive real-time feedback and comments on your work right from the interface of Illustrator CS5. When done, you can export your wireframes to a plethora of different file formats like SVG, JPEG, GIF, PDF and many more. Illustrator CS5 costs $599. No mobile design is supported. http://www.adobe.com/products/illustrator/







6. Visio Professional 2010

   Visio Professional 2010 is the latest update of the diagramming software tool of the Microsoft Office suite. Visio 2010 is only available for Windows machines. With Visio Professional 2010, you can create several types of visual projects like flowcharts, Venn diagrams, maps and also mockups of websites (standard and mobile) as well as software applications prototypes. Visio Professional 2010 also offers you the ability to collaborate on design projects to receive feedback and comments as you work. Once finished, your projects can be exported to several different file formats like SVG, EMF, GIF, JPEG, PNG and more. Visio Professional 2010 is priced at $559,99 and you can purchase Visio independently from other Microsoft office components. http://office.microsoft.com/en-us/visio/







7. SmartDraw

   SmartDraw is a professional desktop app for Windows that allows you to communicate your ideas visually. You can use SmartDraw to draw mindmaps, flowcharts, wireframes, graphs, maps, crime scenes, and much more. SmartDraw is fully integrated with Microsoft Office and has a large GUI symbol library with ready-to-use buttons, scrollbars and other objects that you can use to add design elements to your visual project. The collaboration feature also lets you share every project you create and receive real-time feedback. When done, you can export your visual project to HTML, JPEG, EMF, SVG and many other file formats. SmartDraw is priced at $279. No mobile design, nor interactive wireframes are available. http://www.smartdraw.com/







8. iRise Professional

   iRise Professional is a high-profile wireframing software tool aimed at pro designers and web developers. Available only for Windows machines, iRise Professional allows you to design either standard and mobile website mockups and simulate every aspect of the user experience like navigation between pages, clicks, mouse roll-overs and more. A comprehensive set of widgets and design objects that you can drag and drop right into your prototypes allows you to personalize your project. To exchange your projects with others, you can export your wireframes to PDF, XML and HTML file formats. iRise Professional costs $6995. No collaboration features are available. http://www.irise.com/

Originally prepared by Robin Good and Daniele Bazzano for MasterNewMedia, and first published on Jul 5th, 2010 as "Wireframing And Website Prototyping: Best Professional Tools To Design Your Website".