Prototype Draw tool contrast to let you know which is better

What tools to use to complete rapid prototyping has become an ongoing topic of debate among interactive designers, from the "unique" choice of Visio to the present Axure/omnigraffle/adobe Creative Suite, plus an online tool Balsamiq, Lucidchart or Google Drive, and the Mind Map tool Xmind, MindManager, or Mindnode, which gives us more options in different niche areas, then put these tools together, Who is the best choice?

In the actual application process, because the project specific stage, platform characteristics and output display objects of different, and no tool software has been unanimously praised by designers, each of them have their own advantages and shortcomings, in the current market is common in the following several paragraphs.

Below, detailed introduction each kind of software's pros and cons.

Photoshop as a necessary housekeeping skills for each designer, in theory, designers can make any graphics, but for the interactive prototype PS production and alteration costs are slightly higher, and the layer and component processing is more rigid, the software itself and template Library to be challenged, Easy to get into the details of the discussion let people forget the original intention, this is not the first choice of interactive manuscript, of course, there is a designer is the first to high Fidelity demo direction to do, then use it is the most intuitive.

Brother Illustrator in the vector processing performance slightly better, not by the canvas size and layer of the puzzle, there are rich Template Library support prototype design, but inherited the Adobe family has always been functional all-inclusive led to the operation is very cumbersome characteristics, the production efficiency of the prototype map is not high.

In contrast, the dry son Fireworks has a simpler interface, as well as the advantages of layer processing, especially the editable PNG file contains layers and vector information that guarantees the continuity of the document, is favored by many design teams as the preferred tool for interactive output, but Adobe Its support is limited, and the latest Adobe CC family has lost its trace, and the future Fireworks optimization space is limited.

As a non professional drawing tool, using keynote/ppt to draw interactive drafts is a curve to save the nation, rich interaction and simple use of the process to solve a lot of interactive demo needs, CDC colleagues have written a "on the rapid prototyping of a little tangle" to do a good job, but the problem is as described in the article, The advantages and disadvantages are very obvious, the template library is almost zero, it is time-consuming and laborious to draw without other tools, which is not described in detail here.

Axure is known as the Internet Product Manager standard, the domestic has a large number of information and discussion (know, Chinese community), its advantages are very obvious: operational complexity between the keynote/ppt and Adobe family, with a full set of Web Control Library, direct drag and drop can quickly create a Web site prototype; Rich dynamic panels can be used to simulate a variety of complex interaction effects, the export of HTML can be more accurate to convey information architecture and page jump.

However, there is not enough support for mobile product prototypes, Axure can not export the files to be demonstrated on the mobile side, only suitable for the presentation of information structure and page logic. In the shape of the processing is not rich enough to deal with a lot of detail is not good enough to do out of the wireframe is mostly not good-looking.

OmniGraffle as the best prototype design tool under the MAC platform, in addition to drawing ordinary charts, tree-like structure, flowchart, page layout, and so on, you can also try to plan the screenplay, draw the organization structure of the company, even as a presentation to show a project.

With a lot of OS X native drawing properties, OmniGraffle only supports Mac/ipad, which in many ways has the shadow of Visio, and even the name "Graffle" is created to correspond to "Visio", although not on web interaction events Axure is so rich that support for mobile platforms is not as bright as the performance of some new stars (such as briefs and Fluidui), but with its rich template base, easy hands-on experience and a lot of intimate detail, it has been the most important tool in my daily work to overcome all the other competitors.

The above several software already can cover most uses the scene, but the tool is only the extension of paper and pen, in a skilled grasp of one of the basis, and constantly try new tools not only to find more valuable skills to speed up the design rhythm, but also to their ability to understand the short board, the combination of use so that the idea is not affected by tools, It's their value to try to be a full stack designer.

In addition, there are few articles on the market to introduce omnigraffle skills, many people are interested but do not know how to use it, below to share 10 useful tips to speed up.

1. Customize your Work interface

2. Style brushes

In OmniGraffle, you can copy styles such as the border fill color by dragging the indicator onto another component, or you can copy any single property, saving significantly the cost of modifying the style of a duplicate or approximate component.

3. Grid, intelligence guides and guides

In addition to the illustration, you can see three options by right-clicking in the canvas blank

Alignment to the grid, reference to define the canvas link description of the grid settings, check this option, resize the shape will make the edge close to the grid, drag the position will be based on the size of the shape of any side to the grid.

Smart alignment guides, check, drag the shape position, will automatically find the current horizontal or vertical direction, edge or center can align existing shapes or canvas centerline, recommended check

Intelligent distance guides, after the check, will automatically look for horizontal or vertical direction of the adjacent two shapes, in equidistant time to give tips, recommended check

4. Flow chart

In the process of drawing flowcharts with Visio, the most is not the connection line can not arbitrarily control the shape position style, can only draw several specific graphs, the new node operation steps are cumbersome, and this flaw directly leads to a variety of thinking map software rise. These are all very easy to omnigraffle, just remember a few shortcuts and draw a flowchart to make it easy to freehand.

5. Click events and export PDF & HTML

When making an interactive model, add to the Click event processing can be very convenient to demonstrate the effect we want, omnigraffle support script is not much, no mouse over, no animation, only click Jump and click to show or hide the Layer two, for the General prototype demo enough to use, especially the layer display hidden, For example, you can put the contents of the floating layer on Layer 2 as shown in the figure, and use the Close button to trigger the hide to achieve the graphical effect.

It can be used to demonstrate a set of interactive clicks after presentation mode, exported to PDF or HTML. When demonstrating mobile prototypes, my usual practice is to make files that match the size of the screen, to export the PDF after setting the Click Effect, and to open it on the phone with any application that supports reading the PDF. (here recommended to see more, no page rollover animation, no extra leave white)

6. Canvas and Layer

Like Fireworks, OmniGraffle provides similar canvas and layer management to facilitate the concentration of all items in a single file, each drawing a separate set of page backgrounds, sizes, units, grids, and guides, and a shared layer for all canvases to use the same master. That is to say, it can be used as an Indesign or as a PPT.

Canvas: OmniGraffle uses PT to define its own units by default, in the canvas panel with 1pt = 1xx to set the conversion method, the target unit can be pixels, centimeters, feet, kilometers, etc., means that in addition to the user interface to draw, but also to draw a map, home plan, such as any size of the precise graphics.

Layers: You can interpret layers in omnigraffle as a special, you can bulk hide or lock groups that can be converted directly to all page shares, the name of the shared layer is marked orange, and the content panel at the bottom left of the interface shows the stacking order within each layer, if the file is exported with PSD selected , OmniGraffle also merges the layer contents into a format that Photoshop can read.

As shown, using the shared Layer feature, we can set the canvas to 1024x768 and insert page numbers (Edit→insert variable→canvas number) at the specified location of the shared layer, and so on, and simulate PPT to produce the demo document.

7. Shortcut keys

Click on Help→keyboard shortcuts, check all the system shortcuts, and understand the following to meet most of the situation

The most commonly used Inspector panel, cmd+12345 switch;

Set a common shape style, right click to add Favorites, and then hold s can be directly drawn;

Hold T and click on the blank can create a new text block directly, double-click any shape can also insert text inside;

Zoom out only through cmd+shift+. And cmd+shift+, the right hand needs to leave the mouse is not very convenient, I usually hold down the z Mouse point screen to zoom in, Option+z click on the screen to zoom out (z This operation in PS and AI also general);

Quickly copy a shape cmd+d, the new shape appears in the position of a grid at the bottom right of the current shape, one step behind the Cmd+c in Cmd+v.

8. Infinite Template Library

In OmniGraffle, working documents. Graffle and template documents. Stencils performance and editing is exactly the same, can be very convenient to organize the edited documents, copy and paste into the template file precipitation, as a late-reuse specification, if with the use of cloud synchronization tools, It is no longer difficult for a small design team to unify design specifications.

In addition to a bunch of templates provided by the software itself, global omnigraffle enthusiasts build Graffletopia to share their own templates (part of the charge), in fact, if you have enough patience and energy, you can following all the templates yourself.

9. Make your own icon library

OmniGraffle Graphics can basically meet most of the requirements, simple shapes can also use the shape combination and pen tool to draw, Graffletopia there are many other people to draw the shape of the icon, but in the face of specific projects when need to draw their own icons to do? Here are a few ways to choose

The quickest: the direct paste icon picture comes in, the disadvantage is cannot adjust the color, cannot enlarge.

Multi-color icon: From the AI directly drag and drop graphics come in, still keep the vector can be arbitrarily dragged but not adjust color.

Monochrome icon: The AI painted a good monochrome icon exported to PDF (File→scripts→savedocsaspdf) After the use of OmniGraffle open, you can adjust the size and color, very suitable for the establishment of the icon library.

10. Define colors using hex values

The MAC comes with the color picker can only be selected in the existing set of colors or by the naked eye in the color plate election, very not rigorous, fortunately, there are caring people to provide Hex color Picker and Developer color Picker plug-ins to help us set the precise color.

Extended Reading

OmniGraffle 6 for Mac new features preview, used to help upgrade from the old version of the old users overwhelmed to get back to OmniGraffle's embrace.

How do I install a template? If you need to manually install, you only need to open the template Library in OmniGraffle, select a template, click on the right side of the template name of the gear, select Show in the Finder will be able to see all the templates, will download a good stencils file dragged in.

Mac under another design software Sketch is also very good, five-star recommended.

This article by Tencent Isux Copyright, reprint, please specify the source