prototyping-tools

The Most Recommended APP Prototyping Tools on Quora

Statistics indicate that China’s mobile App market has more than 402 million applications. What behind this statistics are a huge number of software developing companies, developers, designers, and product managers, as well as various App prototyping tools. In order to find a handy prototyping tool, designers and product managers are often keen to ask for advice on Quora. Recently I noticed a question asked for what is the best App prototyping tool?

Probably, the most-voted answer is Axure. But how much do you know about it? Except it, is there anything other great App prototyping design tool you don’t know?

With the thought of helping others, I listed 4 well-known mobile app prototyping tools. Please feel free to suggest more tools, I will keep update!

1. Justinmind

App-prototyping-tool-justinmind

Price: $29/month ~ $495/user

Prototype editing: Mac, Windows

Prototyping ideal for Web, Desktop, Mobile

Justinmind is a flexible prototyping tool that supports a variety of terminal devices. It can workoutfrom a simple mouse click to a variety of complex interactive work. You can add interactive features to already designed renderings, or create a variety of interfaces in Justinmind by using the default standard component library.

Pros:

Build templates and functional support for specific devices.

Add resources in a fast, intuitive way through the drag and drop operation .

Simulate a web page with a generated built-in device frame and full interactive features.

Add interactive attributes for each tiny, individual design element.

Supports interactive settings based on gesture operations.

Cons:

It will be time-cost for the first-time users.

When you add multiple actions to the same widget, the actions can not be executed at the same time but only one by one.

2. Axure

Axure

Price: Pro: $495/user Team:$589/user

Prototype editing: Mac, Windows

Prototyping ideal for Web, Desktop, Mobile

Axure is an ideal tool for designing Web, App, and desktop software prototype. It supports for creating the complex interactive actions and a variety of state interfaces.

Pro:

Good training and customers documentation support.

Add interactive attributes for each tiny, individual design element.

Good at designing complex interactive behavior.

The built-in component library can customize a variety of specific action and behavior attributes.

Flexibility – can be used to design a prototype for any digital device platform.

Cons:

Steep learning curve; for the first time the user, it is not simple.

No templates and functional components built for mobile devices (iPhone / Android, etc.)

Need to create prototyping pages from the very beginning within this software.

Cannot add an interactive attribute to an existing design.

3. Mockplus

App-prototyping-tool-mockplus

Price: Pro: $169/year Perpetual license: $699/user

Prototype editing: Mac, Windows

Prototyping ideal for Web, Desktop, Mobile

Mockplus is a simple, fast, and very powerful prototyping tool. The each update of Mockplus will surprise users. So lucky am I, have experienced the Beta Mockplus 3.2 which added repeater, UI flow, Sketch import, mindmap design mode, and project templates. It still needs improving, but Ihave to say, the new features really good!

Pros:

Simple operation, low learning costs, 3 seconds to build interactive prototyping by dragging and dropping.

The WYSIWYG interaction design.

Rich component library and icon library of 200 components and 3000 icons.

Support a variety of view methods on mobile. No matter by view code or directly share the URL, as you like.

Multi-person collaboration and online review greatly promote team members’ communicate and team work efficiency.

Cons:

Functional details need to be improved.

No good tutorial support on the website.

Not support for gestures.

The project examples have no detailed operational guidance, not friendly enough for new users.

4. Proto.io

Proto.io

Price: $29/month, $288/year with 5 active projects

Prototype editing: Web

Prototyping ideal for iOS, Android

Proto.io is a dedicated mobile prototyping platform that can build and deploy prototypes of all-in-one mobile programs, and can simulate the final products. It can run on most browsers.

Pros:

Easy to produce fast solid model.

A large number of standard UI elements library, and you can customize your own library.

The same project could include multiple screens,and they are supported to create transition effects between screens.

Support components sync with Dropbox.

Cons:

No immediate preview.

Too many interactions will slow down the action.

All prototypes are stored on Proto.io’s web platform, which means that if you want to cancel your account, you will no longer be able to continue running your project.

Does not support for 3D dynamic effects.

Conclusion

These 4 App prototyping tools all have their own special advantages suitable for different needs. There is no the best tool, only the most suitable one for you.After the analysis of the pros and cons of each prototyping tool, I think you should have a choice in your mind. For me, I’m looking forward to the release of Mockplus3.2, so much love of its UI flow and repeater because it could help to save lots of repetitive work!

9f4e958c-f995-457c-9523-42369c98edf3

Experience of Prototyping Tools Summed Up by Product Designers

I have read an article about what is a full-stack designer, which referred to the so-called full-stack designer who is able to build wireframes, prototypes, make visual drafts, and coding. Put it into the product design process, that kind of people is an unicorn who can handle everything. Whereas, one of the most primitive and most critical step is the wireframe or prototype design. The importance of prototyping design is equivalent to the solid foundation of the superstructure. Then the tools to build the foundation is very important.

So, it’s worthy for designers to considering how many prototyping tools are available in the market, and how to choose a right prototyping tool.

How many popular prototyping tools are available?

So many prototyping tools for designer’s choice, but the novice designers are much more than the tools. They usually don’t know how many tools are available for choice, and even don’t know how to make a right choice. Some people told them, Axure is a good software. So, they use Axure. However, I think, they should make an analysis on the mockup & wireframing design tools & Apps for UI/UX designers and make a right choice. Axure is not very proper to get started for beginners, there are more choices other than it. Then, what are the commonly used prototyping tools besides Axure? Let’shave a look.

1. Mockplus

Put aside the influence of Axure, the veteran prototyping tools, the most popular prototyping tool in China is Mockplus. From the initial lightweight online version to the full-featured desktop version at present, Mockplus gradually developed and expanded its features to become a powerful prototyping software. With the extensive pre-designed interactive components (200) and a huge library of icons (3,000), it’s easy and fast to create an interactive prototype in 3 seconds.The recently launched Mockplus3.0 version with team collaboration function is a highlight. The sophisticated collaborative design, online review, and page division editing, that all greatly enhance the team efficiency and reduces communication costs.

Prototyping tool-Mockplus

2. Justinmind

As a novice, you must admire the designers who can create the elaborate high fidelity prototypes. Moreover, you will know that’s made by Justinmind. Some designers are pursuing the delicate details on rich interaction effects and gestures supported on the mobile APPs by the software. But you can’t ignore the huge time cost and effort spent behind the high fidelity prototype. So it’s not a good choice for beginners.

Justinmind

3. Invision

Strictly speaking, Invision has a great difference with the prototyping tools mentioned above. Its role is to add jump links on well-designed visual scripts and generate online prototypes.

How to choose a right prototyping tool?

For me, I think a right prototyping tool should be with the following features:

1. Low learning curves and low prototyping costs;

2. Supported for previewing on mobile devices at anywhere and anytime;

3. Effective re-use component library;

4. Support to generate a flow chart;

5. Online collaboration for multiple team members;

6. Gesture operation, transition animation, interactive effects … (I think it’s not necessary for the prototyping stage).

These prototyping tools and experience on software choosing are summed up by many product designers for years. It’s no doubt that there are not only Mockplus and Axure for the first choice, and the standards to choose tools to vary from person to person. Anyway, the most important are that the tool is more easy to use, the better

bc3f6cb8-5bbf-4a65-bb58-160565e6eb94

4 Tricks on How to Make Better Product Landing Page Design

From the 20 best website homepage design examples, that shows the landing page of websites and APP are normally combined with homepage design. We can get a glimpse of the importance of the landing page design. The product landing page design will directly attract users and enhance the quality of the product. The landing page is a battleground which gives a full play to emotional design, enhances the user experience, and close the distance with users.

Regardless of the website design trends or mobile APP design, it is important t o find a balance between small pretty and functional complexity. At the first phase of web design, it’s necessary to master the skills of product landing page design by taking the advantage of prototyping tools such as Mockplus, Axure. In this stage, designers have no worry about the modifying on design. Here are some product landing page examples combined with the design principles.

1. Learning to do subtraction

Do not be restricted by the rules of interface design when doing the product landing page design. The clear interface with name and password input, such a simple design and color will always make the login box be eye-catching.

Simplify your design

2. Combining the page background with user interface design

Fuzzy background

The fuzzy background not only makes the whole site be more humane, and to a large extent, it can properly express the site itself.

Dark background

In the dark background, the bright input box will attract all the attention.

Flat background

Interface background

3. Clear visual line

People’s visual browsing is generally in the”L” type. The sight line from top to bottom, from left to right, the form of visual browsing order in line with “L” type is basically inline with the user’s psychological expectations.

4. Focusing on user experience design

The usage rate of the landing and registration form is very high. So, a form design is as simple as your imagine, what you should take into consideration is the user experience. Even if it is a registration form, it is worth careful study. If you do not attach importance to the user experience, it will cause to lose a large number of users. Everything should start with the best user experience during the product landing page design.

Reduce the user’s mandatory operation

Reduce user input

In general, the more information needs to be put in, the less registration will be completed.

Information registration tips

Providing effective information hints for end users is the best way in user experience design, especially when users fill in information with multiple input fields. When the fields that need to be filled may be ambiguous with each other, these message hints can reduce the user thinking and guess time.

Error password memory

When the user firstly entered a wrong password, the system will save it after the user put in the wrong information. When the user re-enters the wrong password, the system will automatically prompt the client “password error.”

User experience

The above are some commonly used products landing page design skills for web pages or APP. From the perspective of user experience, clever design is always the first step to attracting users. Hope you can get some product landing page design inspiration from the content above.

ui-ux-design-concept-difference-between-wireframe-and-prototype

Basic UI/UX Design Concept Difference Between Wireframe & Prototype

The terms of ‘wireframe’ and ‘prototype’ are always get confused by designers, despite the experienced designer, possibly due to the misunderstanding or some other reasons. Actually, these two UI/UX design concept difference between wireframe & prototype is quite obvious and different. Now, let’s distinguish the two terms clearly.

What is a Wireframe?

Wireframe is a low fidelity layout of the design which has 3 simple but direct targets:

1. Presents the main information group

2. Draw the outline of structure and layout

3. Vision and description of the user interface

It will be your product’s main structure after you created a wireframe correctly. Just like the blueprint of a building, it describes details clearly and specifically.

Visual features of wireframe

Wireframe exists very obvious visual limitations. In general, designers only need to use lines, boxes, and gray color (different grayscale indicates the different level) to complete.

Simple vector wireframe

The content of a simple wireframe should include pictures, video, and text etc. Thus, the omitted will be replaced by a placeholder, picture be instead by a shaded, and text will be replaced by some symbolic words according to the text layout.

Advantage of wireframe

The building of wireframe is fast and cheap, especially if you use these prototyping tools such as UXPin, Mockplus, Balsamiq, and Axure. Of course, you should use these tools to do it at the very beginning.

Compared with a complete and detailed high fidelity wireframe, gathering feedback is much more important. Why? Because people pay more attention to software functionality, information architecture, user experience, user interaction flowchart, and it’s usability, rather than considering the aesthetic characteristics of these elements. Meanwhile, in this case, you can easily modify it according to demand, but not need to adjust coding and graphic editing.

Interactive wireframe

Sometimes, designers prefer to improve the fidelity of wireframes to enhance the importance of user interface at some aspects and display the rationality of interaction between fast test and the visual elements. Program to address these problems properly is using interactive wireframe, also known as the clickable wireframe.

If you want to create such a complicated wireframe, then you need UXPin, which is a tool for wireframing and prototyping design. Interactive prototyping may be the best presentation to developing team and clients. When you came across the problem that “what it will happen when I clicking this button?’’, you just need to click and show to your clients how it works on the interactive prototyping. Indeed, it’s quite impressive and direct.

Show wireframe cautiously

You must be cautious about the guy who is totally a layman when you need to present your wireframe to him. He may be your client, also may be a non-technical manager took part in the cooperation. But he does not know the truth that the wireframe and the final product may seem unrelated. So, he may not understand the intrinsic link and operation mode between them. Thus, you need to figure out a proper decision whether you need to present and how.

This is an app user operation flow chart sketched by Fernando Guillen. Of course, it’s undoubtedly the early design version.

A wireframe is the most important part of a design. When you saw this flow chart, you’ll understand why it’s time-consuming to explain what is called wireframe and why we need to use wireframe. Or, you just skip this step.

Prototype

The requirement of a prototype is higher than wireframe/interactive wireframe, it must be a high fidelity prototype which is interactive and fit the final user interface as much as possible.

The target of prototypes is quite obvious: to simulate the interaction between user and interface as realistically as possible. When a button is pressed, the corresponding operation must be carried out, and the corresponding pages must appear, try the best to simulate a full product experience.

Visual features of prototype

Undoubtedly, the prototype must include the aesthetic features of a product that should have, and try to fit the final version. Basically, it’s a skin of a product, no HTML/CSS/JS involved, and not necessary to consider the server and database.

Advantage of prototype

Why it’s so important? Because prototype is usually used for users to test product. Prototype test at the very early stage can save a lot of developing cost and time. So that it won’t waste the effort of back-end product architecture due to the unreasonable interactive interface. So, prototype is a perfect progress to test product for designers and developers.

Besides, providing prototypes with users to collect feedback, that’s benefit to have an insight into all the details of your product, and inspire the whole team. Many of the prototyping tools can build prototypes quickly and efficiently, but no coding needed.

Design flow

After you have insight into the essence of design and known the difference between wireframe and prototype, you are standing in front of the user experience design world.

If you can concrete the series of product design into a cohesive and effective work flow, amazing thins will happen.

Tips

Try to use editable and reusable elements when make wireframe. In that case, you just continue to refine the elements to complete prototypes based on wireframes.

When you make wireframes, try to gather thoughts and opinions from your team and clients, and try to reflected them on wireframe designs.

Use your most handy tool.

UXPin

UXPin has built more than 900 kinds of different UI elements for you to create wireframes and prototypes.

Proto.io


Proto.io is a very robust prototyping tool, and it can export HTML / CSS code based on a prototype, and interactive prototype for touch screen, which allowing users to test on actual devices.

Balsamiq

A popula,r long-lasting wireframe tool only for static wireframe.

Moqups


This tool supports to make wireframe directly online.

Mockplus

Mockplus is the all inclusive prototyping tool for fast interaction, fast design, and fast previewing. It allows to create mockups for mobile (Android & iOS), Desktop(PC & Mac) and web apps.

Axure

As a most popular wireframe & prototype design tool, do we need more introduction of this tool? I think no.

Protoshare

This tool also can make wireframes & prototypes online.

InvisionApp

This tool can help you create usable prototype, you cannot draw anything, but you can add links between different screens.

The 5 Best Free Wireframe Tools for Mobile Apps You Can’t Miss Out

The flourishing of various mobile devices stimulated the explosive growth of the mobile Apps. From the rapid development of the mobile market, we can see it’s an age of accelerating technology on mobile App design and development. One of the most important part during App development is building wireframes which can reasonably organize and simplify the content and elements.

Low fidelity is the key feature of wireframes. It will present the design idea and App prototype of the product in a more intuitive and simple way. In addition to saving time, wireframes but also provide great advantages for designers focusing on product user experience. Here is a list of the 5 best free wireframe tools for mobile apps in 2017.

1. Paper prototyping

Pricing: free forever

Pen & paper are the total free wireframing/prototyping tools, no matter from the point of time & capital cost, usability, learnability, as well as the practicability. Comparing with other wireframing tools, the most important is that the pen and paper are free and easily get. Wherever you are, you can draw a wireframe with a few lines in a short time. But personally, I think the paper prototyping is not suitable for big projects, but only the small one. The large program may cost you a lot of energy to save widgets and present the whole project.

2. Balsamiq

Pricing: Free trail -30 days

Pro version -$89

Do you like the hand-drawing of paper prototyping? But don’t want to be distressed by the pieces of paper widgets? Try Balsamiq. You can build a hand-drawing style with this wireframe design tool. One of the reason to focus on the sketch style is that it could help to make the designers and clients focusing on the function, layout, and idea of the product. So that you won’t hear the picky client say he don’t like the color of buttons or other elements.

The built-in components and icons can basically meet the drawing requirements of wireframing design for mobile App. Simply drag out an iPad, iPhone, or Andrew interface template, put the needed components in the container, you can build a mobile App wireframes fast and easily.

3. Mockplus

Pricing: Basic version -free forever

Pro version – $129/year, perpetual license – $399

Mockplus is a wireframing/prototyping tool that showed up in the recent two years. It could be the best free wireframe tool for mobile apps, because it has a perfect support on mobile App wireframing. You can find Android, iPad, and iPhone templates in each size according to your specific needs. Besides, it also supports to customize the project size. So sweet. If you need a landscape App interfaces, that’s easy!

There are 200 built-in components and 3,000 icons, no matter you need a static wireframe or interactive prototype, that’s easy to make out by dragging and dropping. Do you know how long it cost to set an interaction? Only 3 seconds! It also provides with good after service that makes Mockplus get reputation among China and other countries.

4. Wireframe.cc

Pricing: Free trail -7 days

Single user – $120/year, enterprise – $990/year

Wireframe.cc is an online static wireframe design tool. If you are a fanatical minimalist designer, then this tool should be your dish. You can easily get started on the website, even without registration. The interface is super and concise, designers will not be disturbed by the cumbersome website introduction or the boring popping box, and the maximum concentration will perfect your design.

5. Justinmind

Pricing: Free trail -30 days

Single user – $19/month, perpetual license – $495

Justinmind is a high-fidelity wireframing/prototyping tool. By contrast, it is more exclusive on mobile App design than the current mainstream design tools, due to the good support in gesture operations, transitions, interactive effects, and so on. This is also the effective grantee of its high-fidelity prototype. While the high fidelity prototype also means that you will spend more time and energy.

All the best free wireframe tools for mobile apps are listed above. Hope this list will help you choose a good design assistant. If you have any other wireframe tools recommend, please feel free to add it to the comment area. Let me see you!