Share the more popular prototype design tools

An important part of the interaction designer's work is product prototyping (Prototype design). And the most basic work of the prototype design is to draw the site of the general wireframe (frame diagram) and combined with annotations, a large number of instructions and flowchart, and so on, the complete and accurate presentation of their product prototypes to the product, UI, refactoring/development engineers, etc., and through the communication repeatedly modified prototype Until the final confirmation, and then into the subsequent design and development process.

In order to complete the above complex design and communication work, a good prototyping tool is needed. Here are some common and popular tools to share:
Word (Product Manager is more commonly used)
Fireworks (Intra-interactive group promotion)
Balsamiq Mockups (relatively high recent exposure rate)
Auxre RP (widely circulated in industry circles)

A comparison of advantages and disadvantages

Second, the operating interface comparison
Word: The basic is to draw wireframe through various wireframe of Drawing toolbar.

Fireworks: Draw wireframe through the Web prototype component library of the public Library.

Balsamiq Mockups: Operates like a FW, drawing wireframe from the top of the control to the work area.

Auxre RP: The basic operation is also similar to Fw,mockups, 3 is the working area, from the 5 control library to the work area draw wireframe.

The control library contains many widget objects that are often used, such as buttons, pictures, text panels (text panel), radio buttons (Radio button), check boxes (checkboxes), drop-down menus (droplist )。 Dynamic interfaces can even be designed with the function of the dynamics panel, such as drop-down menus, page tabs, and even more advanced Ajax or RIA functionality.

Axure RP compared to other prototype tools, the comparison has the following aspects:

• Area 4 Sitemap (page list)
Can be automatically based on the page list, quickly draw a tree-like site map, and you can make the schema diagram of each page node, directly linked to the corresponding page.

• Zone 6 Masters common template function.
When designing a wireframe, you can save a lot of time by using the Masters Common template feature, which can be a collection of widgets that are often used, such as the top of the page, the end of the page, or a log-in screen.

• Zone 8 is an advanced interactive operation area
Most widgets in wireframe can produce actions on one or more events, including OnClick, onmouseover, and OnMouseLeave. Simulate realistic interactive work, and demonstrate and explain it in a very important way.

• Automatic output of Web site prototypes (HTML Prototype)
The Axure RP can output the wireframe you have designed into HTML prototype that conform to different browsers such as Internet Explorer or Firefox.

That is, you do not need to install axure RP or any other software, you can directly email the resulting prototype file to the customer, or publish to a Web server to allow customers or users to view and operate, prototype including Sitemap, Page Notes, Annotations and functional interaction is a tool that can effectively test the proposed functionality and clearly communicate the design.

• Automatic output of Word format specification files (functional specification)

Axure RP can output Microsoft Word format file, not only easy to read, but also can show the professional specification file, can effectively record, communicate and get the final confirmation of the design.

The specification file contains directories, Web pages, Web pages and annotated master, captured images, Annotation, interaction, and widget-specific information, as well as the end file (e.g., appendix), and the content and format of the specification can be changed according to different reading items.

Third, the instance operation contrast

Here, we use each of these tools, actually, to create a simple prototype design example to see the performance of each tool.
We will actually make an example of tab view.

Word:

Insufficient: not good for interaction expression, also not conducive to the demonstration. (a basic page to be divided into 3 pages, and a page by page to express the interactive effect); No standard style, all kinds of wireframe painting is very casual.

FW: Page effect with Word.

Insufficient: not good for interaction expression, also not conducive to the demonstration. (a basic page to be divided into 3 pages, and a page by page to express the interactive effect), the extension and modification of the control is not convenient.

Balsamiq Mockups:

Insufficient: not good for interaction expression, also not conducive to the demonstration. (a basic page to be divided into 3 pages, and a page by page to express the interactive effect), the output interface hand-painted style, random larger.

Axure RP: The basic appearance and word, FW difference is not big.

But the most amazing thing is that he can create a real page that shows the effect of the tab switch and generates an interactive document in Word format (the instance is not available for download).

Iv. Summary
By comparing the above aspects, 4 prototype tools are comparable in the basic operation of drawing wireframe, each with its own characteristics. But Axure RP quick and easy to create a directory-based organization of the prototype document, feature description, interactive interface and annotated wireframe Web page, and can automatically generate for demonstration of Web files and Word documents to provide demonstration and development, and so on, we give its ★★★★★ evaluation, It is a powerful tool for the basic prototype design and interaction designer of the product manager to do fast and high fidelity prototypes.

Share the more popular prototype design tools