<< Blog

How to Make Prototypes by Using Prototyping tool Mockplus

Mockplus Team 7000 Views

I am also a newbie in product development. I have been using Mockplus to make prototypes for about one year, and I find that Mockplus is very easy to learn and hence is quite suitable for newbies like me to use.

I assure you that Mockplus is one of the best prototyping tools to simplify your prototype. Now I want to introduce it and teach you how to use it to make prototypes.

Before learning skills, we should know some basics of prototypes first.

I. Basics about Prototypes

1. What is a prototype?

In software development, a prototype is a rudimentary working model of a product or information system, usually built for demonstration purposes or as part of the development process.

What is a prototype

2. Importance of a prototype

It makes design work more efficient (for it can rapidly record product functions and logical flow).

Its dynamic effect makes it more vivid (by simple interactions and animations).

Its ways to communicate is clear (by demonstration and remarks).

3. Requirements of a prototype

Be of neutral colors (black and white): how to use color is a big issue, and there should not be too many colors in a prototype. An excess of colors may be bad for designing and checking a prototype; an excess of colors also leaves a bad impact on later UI design and limits the thoughts of UI designers. Therefore, a prototype had better have black, white and gray only.

Do not pay too much attention to icons: it doesn’t mean that a prototype should not contain any icons. Some common icons, such as the back button and the contact button, can be used. Now there are abundant icons of prototype design, and Mockplus offers around 3,000 SVG icons for your choice. Those easy-to-find icons are suggested to be used, and there is no need to spend effort looking for or drawing specific and accurate icons. In this instance, we can use the small white blockage in the following picture as a replacement. A UI designer will design icons based on the product and his own ideas, rather than icons in the prototype, so the accuracy of an icon doesn’t matter that much.

White blockage

Make remarks: when a prototype is made, sometimes some functions may not be expressed precisely and clearly, or some complex interactions can’t be made out on account of the limitation of prototyping tools. In this condition, remarks are necessary to explain and amplify some obscure functions. Remarks make it convenient to check prototypes in the later period and communicate with other people.

4. Differences with sketches

Prototypes: easy to use (logic)

Sketches: easy to see (vision)

II. Tips on How to Use Mockplus

1. Design Specifications

Learning and mastering some design specifications of prototyping can help to make a more normative and beautiful prototype.

Project type: when making the prototype of a product, we should be clear about the project type of this product. Is it a web or mobile phone? Is the phone system iOS or Android? It’s important to figure out the two points for the project type can’t be changed after you select one when creating a project.

 Project type of Mockplus

Project tree: it is a list located in the upper left corner of Mockplus, and is a frame composed of the logical relations of all page items. There may be numerous pages in a prototype, so when making prototypes, we should name every page and work out their hierarchical relations, so as to make it easy to check and find pages. As illustrated in the following picture, there is a small flag in Mockplus; click it, and you can change the colors of each page item, which makes them more distinguished.

Project tree of Mockplus

Ruler: you can drag rulers to accurately locate components to make the layout tidy and orderly. Therefore, designers should form the good habit of using rulers.

Ruler of Mockplus

Align and Distribute: it is usually applied to line up multiple components and even their intervals, which can make prototypes much neater and more elegant.

Align and distribute of Mockplus

Harmonious proportion: it means using Ruler, Align and Distribute and other functions to make the structure and layout of a prototype more harmonious and appropriate.

Clear logic: it refers to the logic of the pages jumps. For example, as the following picture shows, if “log in” page jumps to “log out” page, there should be a return button in “log out” page linking to “log in” page. If not, “log out” page is a blind alley and there is a logical problem.

Clear logic

2. Layout specifications

Specifications of iOS:

ios specifications

Specifications of WEB:

Web specifications

The size of the first screen of Window XP is 580px; that of window 7 is 710px.

Important content should be put within lines to ensure that it is visible to most people.

3. Usage of components

Users should be familiar with the basic components of Mockplus and their properties so that components can be used to make prototypes quickly.

Choose the right components - be familiar with components

 Component combination1

The left one is a Label, and the right one is an Icon+Text. The two look the same, but the left one is an icon and can be used by simple drags and drops, saving time and increasing efficiency.

Component combination2

Similarly, the above-left one is a Button which is equivalent to a Shape+Icon+Text on the right.

Four similar components of Mockplus

The above four components relatively are Button Bar, Tab Bar, Scope Bar, and Menu Bar. The four are quite similar. Therefore, we should make clear the differences among them, so that we can accurately choose the one we need; by editing the properties of this component, we can get a specific one we want.

Choose the right components - be familiar with their properties

Change properties

The appearance of a component is relatively fixed, but by changing its properties, various effects can be obtained. As is shown in the above picture, double click to add an icon on the button, and then we get the first component; change its color to make it solid, and then we get the second component; change its shape to make it a curved rectangle, and then we get the third component; change its color to make it a solid curved rectangle, and we get the fourth component.

Combined components

Component combination 3

Component combination4

Component combination5

All of the three examples are made by combined components. The first one is made by a Shape and a sharp-angled arrow; the second one is curved navigation bar, made by a Shape, a Circle with border, and a Shape without border to cover the lower half; the third one is made by an Image, a Circle with border, and a Shape without border to cover the lower half.

The combined components made by yourself can be saved to the Template and My Libraries, for you can use them directly next time.

III. Example

How to use a Tab Bar to make a Page Control

Actually, Page Control is already-made in Mockplus, but now we take Using a Tab Bar to make a Page Control as an example, to teach you how to make a desired component by changing its properties.

Drag a Tab Bar and a Page Control to the canvas; observe carefully the style of the Page Control and then change the properties of the Tab Bar based on it.

 Make a page control1

Set the selected color to transparent;

Make a page control 2

Take the border of the bottom away;

Make a page control 3

Set the selected color to transparent to take the dividers away;

Make a page control 4

Double click the Tab Bar, delete words “item 1, item 2 and item 4” and type in five dots;

Make a page control 5

Adjust the shapes and intervals of the dots by changing text size and interval;

Make a page control 6

One feature of the Page Control is that selecting a dot will automatically change its color, and the Tab Bar has the similar feature, which is the reason why we choose to use a Tab Bar to make a Page Control.

Set the text color to light gray;

Set the selected text color to light blue;

Make a page control 7

Finally, we get a Page Control by modifying a Tab Bar.

 Make a page control 8

The above example illustrates that when the components we need are not available, we can change the properties of existing components to obtain what we want, on condition that we should be quite familiar with the properties of every component of Mockplus.

This article simply introduces some basic usage methods of Mockplus. If you want to try this prototyping tool,click here to download it for free. A more detailed tutorial here is offered to you: http://doc.mockplus.com/


Read more:

1.Experience of Prototyping Tools Summed Up by Product Designers

2.Is There an One Lump Sum Payment for the Perpetual License of Any Prototyping Tool?

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

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial

Need help?

Join Mockplus on Slack Click here

support@jongde.com