How to Make Prototypes by Using Prototyping tool Mockplus
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.
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.
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 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.
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.
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.
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.
2. Layout specifications
Specifications of iOS:
Specifications of WEB:
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
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.
Similarly, the above-left one is a Button which is equivalent to a Shape+Icon+Text on the right.
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
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.
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.
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.
Set the selected color to transparent;
Take the border of the bottom away;
Set the selected color to transparent to take the dividers away;
Double click the Tab Bar, delete words “item 1, item 2 and item 4” and type in five dots;
Adjust the shapes and intervals of the dots by changing text size and interval;
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;
Finally, we get a Page Control by modifying a Tab Bar.
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/