Skip to main content

How to Do Fast Prototyping Manufacturing? Choose a Right Tool First!

What tools should be chosen to fast prototyping manufacturing has long been a subject of debate. The only option was Visio in the earlier time; now some other tools, such as Axure, Mockplus, OmniGraffle and Adobe Creative Suite, are increasingly flourishing and influential; moreover, we designers also have a lot of choices in different segments, such as Balsamiq, Lucidchart, Google Drive and other online tools, as well as XMind, Mindmanager, MindNode and other mindmap tools. So which is the best prototyping tool?

Comparison

In the process of practical usage, due to different specific project phases, platform characteristics and audiences, no tools gets the unanimous approval of the designers, and each one has its advantages and disadvantages. Based on my personal experience, I made a comparison among several common tools.

Here is a detailed description of the pros and cons of each software.

comparison

1.Adobe


The capability to use Photoshop is regarded as one of the designer's special skills. It can be theoretically used to make any graphics. However, it costs a little more in making and modifying interactive prototypes; it is unable to flexibly dispose image layers and components; it has certain limitations of its performance and template base; when using Photoshop, designers may untimely get trapped in detail discussion and forget their original intention. Hence, Photoshop is not the ideal choice in interaction design. Surely it can be an intuitionistic way when designers originally intend to make a high-fidelity demo.

Illustrator is slightly good at vector processing. When using Illustrator, designers are enabled to avoid being obsessed with canvas sizes and image layers. It has a large template library to support fast prototyping manufacturing, but it inherit the consistent characteristics of Adobe series that strong and complete functions result in cumbersome operation, so it’s inefficient to use it to do prototyping.

In contrast, Fireworks has a simpler interface and have strengths in image layer processing. Especially, its editable PNG files contain image layers and vector information, which ensure the coherence of the documents. Hence it is favored by many design teams and regarded as the best choice of interaction output tools. However, Adobe doesn’t offer much support to Fireworks and it is even excluded by the newest Adobe CC series. In this situation, Fireworks has limited room for improvement.

2.Mockplus


Fast Interaction

The interaction design in Mockplus is totally visible, that is, WYSIWYG. With a simple drag-and-drop an interactive prototype can be built effortlessly. A set of pre-designed components, including pop-up panel, stack panel, scroll box, sliding drawer and image carousel, allow you to create fully interactions faster and easier.

Fast Designing

Mockplus encapsulates more than 3,000 icons and nearly 200 components. Just drag these components into the canvas for a combination and your app ideas can be demonstrated by a prototype within few minutes. No more efforts will be spent on making a component and you can focus on design itself.

Fast Previewing

Scan the generated QR code to preview prototypes on the actual device instantly, no USB cable required. Publish the project to cloud and you will get a shareable web link that can be sent to co-workers & clients. It's also possible to export to HTML offline.

Fast Learning

Mockplus help you focus on design itself rather than the tool. You can get started easily without the risk of becoming the tool's slave investing a lot of time and money on learning and training. With Mockplus, you don’t need to worry about programming knowledge anymore, let alone coding. You can easily master this tool by watching its tutorials. Hence Mockplus is a good choice to do rapid prototyping.

mockplus

3.Keynote


As a non-professional drawing tool, making use of Keynote/PPT to draw interaction drafts is a little more indirect path to reach the goal. Its abundant interaction actions and simple use flows fully meet the needs of interaction demonstration and fast prototyping manufacturing. It has obvious merits and demerits: it has few templates; it’s time and energy-consuming to use it without the assistance of other tools.

Axure is known as a must for internet product managers. It has distinct advantages: its operative complexity is between those of Keynote/PPT and Adobe series; it has a full web control library which can be used to rapidly make web prototypes by direct drag and drop; its abundant dynamic panels can be used to simulate the complex effects of various interactions; after a prototype is exported as a HTML, the information architecture and the process of page skip can be more accurately demonstrated.

However, due to inadequate support to mobile prototypes, Axure can’t export the files that can be demonstrated on mobile terminals. Only the demonstration of information structures and page logic is supported. It lacks the diversity in the processing of shape styles, a lot of details can not be preserved really well and hence the wireframes made by it are mostly not good-looking.

4.OmniGraffle


OmniGraffle is a good prototyping tool for Mac, and can be used to draw general charts, tree structures, flowcharts, page choreography, etc. You can have a try to use it to make a movie script plan and draw a company's organizational structure, or even regard it as PowerPoint to show a project. Therefore you can do fast prototyping manufacturing through this tool.

With the use of a lot of OS X’s vanilla drawing functions, Omnigraffle only supports Mac / iPad. It has a lot of similarities with Visio in many aspects; even the name of the "Graffle" are created corresponding to "Visio". Although in the web interaction it has not as many components as Axure, and its support to the mobile platforms is not as good as some rising stars (such as Briefs and Fluidui), but it can contend with the other competitors because of its rich template base, ease of use and so many intimate details.

The above tools are able to cover most user scenarios. Yet tools are only an extension of paper and pen. With the mastery of one of these tools, we designers should continue to try new tools, which can not only find more valuable techniques to speed up the design pace, but also enhance the ability to understand our own weaknesses. Use these tools conjunctively so thatdo fast prototyping manufacturing and ideas will not be limited by tools, and strive to become a full stack designer.

Read more:

Author: Shang
Translator: Chloe
Original website: ISUX
Original link: http://isux.tencent.com/speed-up-wireframing.html

Comments

Popular posts from this blog

Professional UX Design Approaches for Building The Best Website

Building a website through UX design approaches is very much like painting or sculptural art, they all take patience, foresight, aesthetics ability, creativity and perception of details. Generally, the website you design represents your company, it needs to be stunning and breathtaking. If you look deeper into the aspects of website building, you can find some core UX features that outstanding websites share. By analyzing the top design trends, we may accurately trace out four major professional UX design methods for website building. 1. Streamlined Navigation By saying “Streamlined Navigation”, I do not only refer to the navigation bar but all others navigations on a larger scale. Not to mention the great ones, a standard website also needs to be of high usability. Besides that, the speed and accuracy of loading are of decisive significance as well. In professional UX principles, the typography should be carefully organized to ensure the best user experience. Links should be highly …

What? You Are Still Doing High-Fidelity Prototype Slowly?

Have you ever spent half a month designing a high-fidelity prototype, but it was denied within a few minutes? So much time and energy have been spent but in vain. I have met similar things so many times. However, such tragedy can be totally averted: the rapid low-fidelity prototype is a wise choice in prototype design.
1. What is a high-fidelity prototype and a low-fidelity prototype? Low-fidelity prototype: it only focuses on functions, structures and processes; it only provides the most simple frameworks and elements; it generally does not provide color, butexpresses itself in grayscale.

High-fidelity prototype: it provides more visual details; it is almost equivalent to a UI effect picture, and only needs to replace the actual data and materials in the development process.

2. Why make a low-fidelity prototype?
In product development, the goal of a prototype is to express its ideas, functions and content, in order to get feedback and improve the product. The most important challeng…

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers in 2017

Prototyping/wireframing tools are the best communication method between interaction designers, project manager, and website developers. It’s a key step of web or mobile app development process. While in principle, the design of prototypes must be a product of interaction designers, and the user-centered concept shall run through the whole product design progress. The professional perspective and rich user experience of interaction designer will directly influence the usability of the product.
Desktop-based Prototyping Tools


1. Axure RP (Mac & Win) | ($495/user) Axure RP is a desktop application that allows designers to create, test, and share interactive prototypes. Been called as the most comprehensive (in terms of functionality) prototyping tools, it’s an ideal desktop software for both static, low-fidelity prototypes and more sophisticated, interactive prototypes. As an extremely professional UX tool, Axure requires a steep learning curve.
2. Mockplus (Mac & Win) | ($129/ye…